> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rhinestone.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Try it out

> Create a passkey wallet and run real transactions, right here in the browser.

export const CSS = ".rhinestone-1auth-demo.landing-shell {\n  --ld-bg: #0c0c0c;\n  --ld-surface: #141414;\n  --ld-surface-2: #1a1a1a;\n  --ld-surface-3: #252525;\n  --ld-border: #333333;\n  --ld-border-soft: #262626;\n  --ld-zinc-50: #fafafa;\n  --ld-zinc-300: #d4d4d8;\n  --ld-zinc-400: #9f9fa9;\n  --ld-zinc-500: #71717b;\n  --ld-zinc-600: #52525c;\n  --ld-text-primary: #e4e4e7;\n  --ld-text-secondary: #9f9fa9;\n  --ld-primary-300: #9ca3ff;\n  --ld-primary-400: #7675ff;\n  --ld-primary-500: #685bff;\n  --ld-primary-600: #5436f5;\n  --ld-emerald-500: #00bc7d;\n  --ld-sky-500: #00a6f4;\n  --ld-radius-sm: 8px;\n  --ld-radius-md: 12px;\n  --ld-radius-lg: 16px;\n  --ld-radius-xl: 24px;\n}\n@keyframes rhinestone-1auth-demo-ld-glow-spin {\n  to {\n    --ld-glow-angle: 360deg;\n  }\n}\n@keyframes rhinestone-1auth-demo-primary-pill-shake {\n  0%,\n  100% {\n    transform: translateX(0);\n  }\n  15% {\n    transform: translateX(-8px);\n  }\n  30% {\n    transform: translateX(7px);\n  }\n  45% {\n    transform: translateX(-6px);\n  }\n  60% {\n    transform: translateX(5px);\n  }\n  75% {\n    transform: translateX(-3px);\n  }\n  90% {\n    transform: translateX(2px);\n  }\n}\n@keyframes rhinestone-1auth-demo-spin {\n  to { transform: rotate(360deg); }\n}\n.rhinestone-1auth-demo .demo-container {\n  @apply my-6 p-4 bg-gray2 border border-gray5 rounded-lg;\n}\n.rhinestone-1auth-demo .demo-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;\n  color: white;\n  background-color: #4F41EF;\n  border: none;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n.rhinestone-1auth-demo .demo-button:hover {\n  background-color: #402FDB;\n}\n.rhinestone-1auth-demo .demo-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.rhinestone-1auth-demo .demo-button-secondary {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  color: #71717a;\n  background: transparent;\n  border: 1px solid #d4d4d8;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.rhinestone-1auth-demo .demo-button-secondary:hover {\n  color: #18181b;\n  border-color: #a1a1aa;\n}\n.rhinestone-1auth-demo .demo-result {\n  margin-top: 1rem;\n  padding: 1rem;\n  background-color: light-dark(#f4f4f5, #27272a);\n  border: 1px solid light-dark(#e4e4e7, #3f3f46);\n  border-radius: 0.5rem;\n}\n.rhinestone-1auth-demo .demo-result-label {\n  font-size: 0.75rem;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: light-dark(#71717a, #a1a1aa);\n  margin-bottom: 0.5rem;\n}\n.rhinestone-1auth-demo .demo-result-value {\n  font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;\n  font-size: 0.875rem;\n  color: light-dark(#18181b, #fafafa);\n  word-break: break-all;\n}\n.rhinestone-1auth-demo .demo-result-success {\n  background-color: light-dark(#dcfce7, #14532d);\n  border-color: light-dark(#86efac, #166534);\n}\n.rhinestone-1auth-demo .demo-result-error {\n  background-color: light-dark(#fee2e2, #450a0a);\n  border-color: light-dark(#fca5a5, #7f1d1d);\n}\n.rhinestone-1auth-demo .demo-result-error .demo-result-value {\n  color: light-dark(#dc2626, #fca5a5);\n}\n.rhinestone-1auth-demo .grant-demo-header, .rhinestone-1auth-demo .grant-demo-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n}\n.rhinestone-1auth-demo .grant-demo-eyebrow {\n  margin: 0 0 0.25rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: light-dark(#71717a, #a1a1aa);\n}\n.rhinestone-1auth-demo .grant-demo-title {\n  margin: 0;\n  font-size: 1.05rem;\n  font-weight: 600;\n  color: light-dark(#18181b, #fafafa);\n}\n.rhinestone-1auth-demo .grant-demo-pill {\n  flex-shrink: 0;\n  border-radius: 999px;\n  padding: 0.25rem 0.625rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n}\n.rhinestone-1auth-demo .grant-demo-pill-neutral {\n  background: light-dark(#e4e4e7, #27272a);\n  color: light-dark(#3f3f46, #d4d4d8);\n}\n.rhinestone-1auth-demo .grant-demo-pill-success {\n  background: light-dark(#dcfce7, #14532d);\n  color: light-dark(#166534, #bbf7d0);\n}\n.rhinestone-1auth-demo .grant-demo-pill-error {\n  background: light-dark(#fee2e2, #450a0a);\n  color: light-dark(#b91c1c, #fecaca);\n}\n.rhinestone-1auth-demo .grant-demo-scope {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));\n  gap: 0.5rem;\n}\n.rhinestone-1auth-demo .grant-demo-scope > div {\n  min-width: 0;\n  border: 1px solid light-dark(#e4e4e7, #3f3f46);\n  border-radius: 0.5rem;\n  padding: 0.625rem;\n  background: light-dark(#fafafa, #18181b);\n}\n.rhinestone-1auth-demo .grant-demo-scope span, .rhinestone-1auth-demo .grant-demo-label, .rhinestone-1auth-demo .grant-demo-result-grid dt {\n  display: block;\n  margin: 0 0 0.25rem;\n  font-size: 0.72rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: light-dark(#71717a, #a1a1aa);\n}\n.rhinestone-1auth-demo .grant-demo-scope strong, .rhinestone-1auth-demo .grant-demo-result-grid dd {\n  display: block;\n  margin: 0;\n  overflow-wrap: anywhere;\n  font-size: 0.875rem;\n  color: light-dark(#18181b, #fafafa);\n}\n.rhinestone-1auth-demo .grant-demo-mono {\n  margin: 0;\n  font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;\n  font-size: 0.875rem;\n  color: light-dark(#18181b, #fafafa);\n}\n.rhinestone-1auth-demo .grant-demo-secondary {\n  white-space: nowrap;\n}\n.rhinestone-1auth-demo .grant-demo-primary {\n  width: fit-content;\n}\n.rhinestone-1auth-demo .grant-demo-footnote {\n  margin: 0;\n  max-width: 62ch;\n  font-size: 0.8rem;\n  line-height: 1.45;\n  color: light-dark(#71717a, #a1a1aa);\n}\n.rhinestone-1auth-demo .grant-demo-result {\n  margin-top: 0;\n}\n.rhinestone-1auth-demo .grant-demo-result-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 0.75rem;\n  margin: 0;\n}\n.rhinestone-1auth-demo .grant-demo-mint-panel {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  border: 1px solid light-dark(#bbf7d0, #166534);\n  border-radius: 0.5rem;\n  padding: 1rem;\n  background: light-dark(#f0fdf4, #052e16);\n}\n.rhinestone-1auth-demo .grant-demo-mint-title {\n  margin: 0 0 0.25rem;\n  font-size: 0.95rem;\n  font-weight: 600;\n  color: light-dark(#14532d, #dcfce7);\n}\n.rhinestone-1auth-demo .grant-demo-mint-copy {\n  margin: 0;\n  max-width: 48ch;\n  font-size: 0.8rem;\n  line-height: 1.45;\n  color: light-dark(#166534, #bbf7d0);\n}\n.rhinestone-1auth-demo .grant-demo-tx-link, .rhinestone-1auth-demo .demo-grant-tx-link {\n  color: light-dark(#2563eb, #93c5fd);\n  font-weight: 600;\n  text-decoration: none;\n}\n.rhinestone-1auth-demo .grant-demo-tx-link:hover, .rhinestone-1auth-demo .demo-grant-tx-link:hover {\n  text-decoration: underline;\n}\n@media (max-width: 640px) {\n.rhinestone-1auth-demo .grant-demo-header, .rhinestone-1auth-demo .grant-demo-row, .rhinestone-1auth-demo .grant-demo-mint-panel {\n    align-items: stretch;\n    flex-direction: column;\n  }\n.rhinestone-1auth-demo .grant-demo-scope, .rhinestone-1auth-demo .grant-demo-result-grid {\n    grid-template-columns: 1fr;\n  }\n.rhinestone-1auth-demo .grant-demo-primary, .rhinestone-1auth-demo .grant-demo-secondary {\n    width: 100%;\n  }\n}\n.rhinestone-1auth-demo .demo-mint-banner {\n  background-color: light-dark(#fef3c7, #422006);\n  border-color: light-dark(#fde68a, #713f12);\n}\n.rhinestone-1auth-demo .demo-mint-banner .demo-result-label {\n  color: light-dark(#92400e, #fcd34d);\n}\n.rhinestone-1auth-demo .demo-mint-banner .demo-result-value {\n  color: light-dark(#78350f, #fde68a);\n  font-family: inherit;\n  word-break: normal;\n}\n.rhinestone-1auth-demo .demo-preview {\n  @apply my-6 border border-gray6 rounded-lg overflow-hidden;\n}\n.rhinestone-1auth-demo .demo-preview-header {\n  @apply px-4 py-2 text-sm font-medium text-gray11 border-b border-gray6;\n  background-color: light-dark(#fafafa, #1a1a1a);\n}\n.rhinestone-1auth-demo .demo-preview-content {\n  @apply p-4 flex items-center gap-3;\n  background-color: light-dark(#ffffff, #111111);\n}\n.rhinestone-1auth-demo .demo-preview-address {\n  font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;\n  font-size: 0.875rem;\n  color: light-dark(#18181b, #fafafa);\n}\n.rhinestone-1auth-demo .demo-preview-button {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.75rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: white;\n  background-color: #4F41EF;\n  border: none;\n  border-radius: 0.375rem;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n.rhinestone-1auth-demo .demo-preview-button:hover {\n  background-color: #402FDB;\n}\n.rhinestone-1auth-demo .demo-preview-signout {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.375rem 0.75rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: #ef4444;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  transition: color 0.15s ease;\n}\n.rhinestone-1auth-demo .demo-preview-signout:hover {\n  color: #dc2626;\n}\n.rhinestone-1auth-demo .scenario-demo-col {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 12px;\n}\n.rhinestone-1auth-demo .scenario-demo-col .wallet-pill {\n  max-width: 100%;\n}\n.rhinestone-1auth-demo .scenario-demo-col .demo-browser {\n  width: 100%;\n  \n  background: var(--ld-surface);\n  border-radius: var(--ld-radius-lg);\n  box-shadow: inset 0 0 0 1px var(--ld-border);\n}\n.rhinestone-1auth-demo .scenario-demo-col .pagination {\n  align-self: center;\n  margin-top: 4px;\n}\n.rhinestone-1auth-demo .wallet-pill {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 14px 6px 6px;\n  \n  background: var(--ld-surface);\n  border-radius: 9999px;\n  font-size: 13px;\n  width: 100%;\n  max-width: 360px;\n  box-shadow: inset 0 0 0 1px var(--ld-border);\n}\n.rhinestone-1auth-demo .wallet-pill-dot {\n  width: 18px;\n  height: 18px;\n  border-radius: 9999px;\n  background: var(--ld-primary-400);\n  box-shadow: 0 0 12px rgba(118, 117, 255, 0.45);\n}\n.rhinestone-1auth-demo .wallet-pill-dot-on {\n  background: var(--ld-emerald-500);\n  box-shadow: 0 0 12px rgba(0, 188, 125, 0.45);\n}\n.rhinestone-1auth-demo .wallet-pill-label {\n  color: var(--ld-text-primary);\n  font-weight: 500;\n}\n.rhinestone-1auth-demo .wallet-pill-address {\n  margin-left: auto;\n  color: var(--ld-zinc-400);\n  font-family: 'Geist Mono', ui-monospace, monospace;\n  font-size: 12px;\n}\n.rhinestone-1auth-demo .wallet-pill-interactive {\n  position: relative;\n}\n.rhinestone-1auth-demo .wallet-pill-disconnect {\n  position: absolute;\n  right: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: #f87171;\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.12s ease;\n}\n.rhinestone-1auth-demo .wallet-pill-interactive:hover {\n  cursor: pointer;\n}\n.rhinestone-1auth-demo .wallet-pill-interactive:hover .wallet-pill-address {\n  opacity: 0;\n}\n.rhinestone-1auth-demo .wallet-pill-interactive:hover .wallet-pill-disconnect {\n  opacity: 1;\n  pointer-events: auto;\n}\n.rhinestone-1auth-demo .wallet-pill-disconnect:hover {\n  text-decoration: underline;\n}\n.rhinestone-1auth-demo .demo-column {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n  max-width: 380px;\n}\n.rhinestone-1auth-demo .demo-browser {\n  width: 100%;\n  \n  background: var(--ld-surface);\n  border-radius: var(--ld-radius-lg);\n  box-shadow: inset 0 0 0 1px var(--ld-border);\n  overflow: hidden;\n  position: relative;\n}\n.rhinestone-1auth-demo .demo-browser-header {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px;\n}\n.rhinestone-1auth-demo .demo-browser-dots {\n  display: flex;\n  gap: 8px;\n}\n.rhinestone-1auth-demo .demo-browser-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 9999px;\n  \n  background: #3f3f46;\n}\n.rhinestone-1auth-demo .demo-browser-title {\n  font-size: 10px;\n  color: var(--ld-zinc-500);\n  text-align: left;\n}\n.rhinestone-1auth-demo .demo-browser-body {\n  padding: 24px;\n  \n  min-height: 400px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n.rhinestone-1auth-demo .demo-browser:has(.demo-superpowers-code) {\n  background: transparent;\n  box-shadow: none;\n}\n.rhinestone-1auth-demo .demo-browser:has(.demo-superpowers-code) .demo-browser-header {\n  display: none;\n}\n.rhinestone-1auth-demo .demo-browser:has(.demo-superpowers-code) .demo-browser-body {\n  padding: 0;\n}\n.rhinestone-1auth-demo .demo-browser-glow::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1px;\n  background: conic-gradient(\n    from var(--ld-glow-angle),\n    transparent 0%,\n    rgba(139, 92, 246, 0) 5%,\n    rgba(139, 92, 246, 0.9) 12%,\n    rgba(255, 255, 255, 1) 17%,\n    rgba(99, 179, 237, 0.9) 22%,\n    rgba(99, 179, 237, 0) 29%,\n    transparent 35%\n  );\n  \n  -webkit-mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  mask-composite: exclude;\n  animation: rhinestone-1auth-demo-ld-glow-spin 3s linear infinite;\n  pointer-events: none;\n  z-index: 2;\n}\n@media (prefers-reduced-motion: reduce) {\n.rhinestone-1auth-demo .demo-browser-glow::before {\n    animation: none;\n  }\n}\n.rhinestone-1auth-demo .demo-onboarding {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  \n  min-height: 352px;\n}\n.rhinestone-1auth-demo .demo-heading {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 500;\n  color: var(--ld-zinc-50);\n  text-align: center;\n}\n.rhinestone-1auth-demo .demo-heading-sub {\n  margin: 0;\n  font-size: 13px;\n  \n  color: var(--ld-zinc-400);\n  text-align: center;\n}\n.rhinestone-1auth-demo .demo-onboarding-art {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--ld-zinc-600);\n}\n.rhinestone-1auth-demo .demo-onboarding-foot {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: center;\n  width: 100%;\n}\n.rhinestone-1auth-demo .demo-onboarding-foot-note {\n  margin: 0;\n  font-size: 12px;\n  color: var(--ld-text-secondary);\n  text-align: center;\n}\n.rhinestone-1auth-demo .demo-onboarding-success {\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n}\n.rhinestone-1auth-demo .demo-onboarding-success .success-circle-lg {\n  margin-top: auto;\n}\n.rhinestone-1auth-demo .demo-onboarding-success .primary-pill {\n  margin-top: auto;\n}\n.rhinestone-1auth-demo .scenario-success {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  \n  flex: 1 1 auto;\n  min-height: 0;\n}\n.rhinestone-1auth-demo .scenario-success .success-circle-lg {\n  margin-top: auto;\n}\n.rhinestone-1auth-demo .scenario-success .primary-pill {\n  margin-top: auto;\n}\n.rhinestone-1auth-demo .scenario-success-text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  \n  gap: 4px;\n  margin: 0;\n  text-align: center;\n}\n.rhinestone-1auth-demo .scenario-success-tx {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 14px;\n  \n  color: var(--ld-text-secondary);\n  text-decoration: none;\n}\n.rhinestone-1auth-demo .scenario-success-tx:hover {\n  color: var(--ld-zinc-300);\n}\n.rhinestone-1auth-demo .success-circle.success-circle-lg {\n  width: 82px;\n  height: 82px;\n  box-shadow: 0 0 36px rgba(0, 188, 125, 0.45);\n}\n.rhinestone-1auth-demo .success-circle-lg svg {\n  width: 36px;\n  height: 36px;\n  stroke-width: 2.5;\n}\n.rhinestone-1auth-demo .demo-onboarding-success-text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  margin: 4px 0 8px;\n}\n.rhinestone-1auth-demo .demo-heading-lg {\n  margin: 0;\n  font-size: 20px;\n  \n  font-weight: 700;\n  color: var(--ld-zinc-50);\n  text-align: center;\n}\n.rhinestone-1auth-demo .demo-onboarding-sub {\n  margin: 0;\n  font-size: 14px;\n  color: var(--ld-zinc-400);\n  text-align: center;\n}\n.rhinestone-1auth-demo .primary-pill {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  padding: 12px 22px;\n  border: none;\n  border-radius: 9999px;\n  background: var(--ld-primary-500);\n  color: #ecefff;\n  font-size: 16px;\n  font-weight: 500;\n  cursor: pointer;\n  \n  box-shadow: 0 1px 32px var(--ld-primary-400);\n  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;\n  \n  position: relative;\n  overflow: hidden;\n}\n.rhinestone-1auth-demo .primary-pill::after {\n  content: '';\n  position: absolute;\n  top: -50%;\n  left: -75%;\n  width: 50%;\n  height: 200%;\n  background: linear-gradient(\n    120deg,\n    transparent 0%,\n    rgba(255, 255, 255, 0.45) 50%,\n    transparent 100%\n  );\n  transform: skewX(-20deg);\n  transition: left 0.45s ease;\n  pointer-events: none;\n}\n.rhinestone-1auth-demo .primary-pill:hover:not(:disabled)::after {\n  left: 125%;\n}\n@media (prefers-reduced-motion: reduce) {\n.rhinestone-1auth-demo .primary-pill::after {\n    display: none;\n  }\n}\n.rhinestone-1auth-demo .primary-pill:hover:not(:disabled) {\n  background: var(--ld-primary-600);\n  box-shadow: 0 2px 40px var(--ld-primary-400);\n  transform: translateY(-1px);\n}\n.rhinestone-1auth-demo .primary-pill:disabled {\n  cursor: default;\n  opacity: 0.85;\n  box-shadow: 0 4px 16px rgba(104, 91, 255, 0.35);\n}\n.rhinestone-1auth-demo .primary-pill-success {\n  background: var(--ld-emerald-500);\n  box-shadow:\n    0 8px 24px rgba(0, 188, 125, 0.5),\n    0 0 64px rgba(0, 188, 125, 0.35);\n}\n.rhinestone-1auth-demo .primary-pill-success:hover:not(:disabled) {\n  background: var(--ld-emerald-500);\n  box-shadow:\n    0 10px 28px rgba(0, 188, 125, 0.6),\n    0 0 80px rgba(0, 188, 125, 0.45);\n}\n.rhinestone-1auth-demo .primary-pill-shake {\n  animation: rhinestone-1auth-demo-primary-pill-shake 0.5s ease both;\n}\n@media (prefers-reduced-motion: reduce) {\n.rhinestone-1auth-demo .primary-pill-shake {\n    animation: none;\n  }\n}\n.rhinestone-1auth-demo .demo-phase-flip {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 0;\n  width: 100%;\n  perspective: 1200px;\n  isolation: isolate;\n}\n.rhinestone-1auth-demo .demo-phase {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 0;\n  width: 100%;\n}\n.rhinestone-1auth-demo .demo-easymode {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  \n  flex: 1 1 auto;\n  min-height: 0;\n}\n.rhinestone-1auth-demo .demo-easymode .demo-chart {\n  flex: 1 1 auto;\n  min-height: 96px;\n}\n.rhinestone-1auth-demo .demo-easymode .primary-pill {\n  margin-top: auto;\n}\n.rhinestone-1auth-demo .demo-easymode-stock {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.rhinestone-1auth-demo .demo-easymode-ticker {\n  margin: 0;\n  \n  font-size: 14px;\n  color: var(--ld-text-primary);\n}\n.rhinestone-1auth-demo .demo-easymode-company {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 400;\n  color: var(--ld-text-primary);\n}\n.rhinestone-1auth-demo .demo-easymode-price {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 400;\n  color: var(--ld-text-primary);\n}\n.rhinestone-1auth-demo .demo-chart {\n  width: 100%;\n  height: 120px;\n  display: block;\n  margin: 0;\n}\n.rhinestone-1auth-demo .demo-error {\n  margin: 0;\n  font-size: 12px;\n  color: #ef4444;\n  text-align: center;\n}\n.rhinestone-1auth-demo .demo-nft {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 12px;\n  padding: 4px 0;\n  \n  flex: 1 1 auto;\n  min-height: 0;\n}\n.rhinestone-1auth-demo .demo-nft .demo-nft-frame {\n  flex: 0 0 auto;\n}\n.rhinestone-1auth-demo .demo-nft .primary-pill {\n  margin-top: auto;\n}\n.rhinestone-1auth-demo .demo-nft-meta {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  \n  gap: 0;\n}\n.rhinestone-1auth-demo .demo-nft-title {\n  margin: 0 0 4px;\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--ld-text-primary);\n}\n.rhinestone-1auth-demo .demo-nft-price {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 500;\n  color: var(--ld-text-primary);\n  line-height: normal;\n}\n.rhinestone-1auth-demo .demo-nft-sub {\n  margin: 0;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--ld-text-secondary);\n}\n.rhinestone-1auth-demo .demo-nft-frame {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  \n  align-self: flex-start;\n  width: 220px;\n  height: 220px;\n  border-radius: 8px;\n  background: linear-gradient(\n    180deg,\n    rgb(50, 48, 51) 0%,\n    rgb(64, 62, 65) 55%,\n    rgb(80, 80, 80) 65%,\n    rgb(66, 66, 66) 78%\n  );\n}\n.rhinestone-1auth-demo .demo-nft-photo {\n  width: 100px;\n  height: 167px;\n  object-fit: cover;\n  border-radius: 4px;\n}\n.rhinestone-1auth-demo .demo-superpowers-code {\n  \n  gap: 8px;\n  flex: 1 1 auto;\n  min-height: 0;\n  background: #0a0a0a;\n  border: 1px solid var(--ld-border);\n  border-radius: var(--ld-radius-lg);\n  padding: 16px;\n}\n.rhinestone-1auth-demo .demo-superpowers-codehead {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.rhinestone-1auth-demo .demo-code-back {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  padding: 0;\n  background: transparent;\n  border: none;\n  color: #fafafa;\n  cursor: pointer;\n}\n.rhinestone-1auth-demo .demo-code-head-spacer {\n  flex: 0 0 auto;\n  width: 24px;\n}\n.rhinestone-1auth-demo .demo-heading-inline {\n  margin: 0;\n  flex: 1;\n  text-align: center;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--ld-text-primary);\n}\n.rhinestone-1auth-demo .demo-code-block {\n  margin: 0;\n  \n  padding: 8px;\n  background: #0a0a0a;\n  border-radius: var(--ld-radius-sm);\n  font-family: 'Geist Mono', ui-monospace, monospace;\n  font-size: 12px;\n  line-height: normal;\n  color: var(--ld-text-secondary);\n  white-space: pre-wrap;\n  \n  flex: 0 1 auto;\n  max-height: 336px;\n  overflow: auto;\n}\n.rhinestone-1auth-demo .demo-code-block-shiki {\n  padding: 0;\n  overflow: hidden;\n}\n.rhinestone-1auth-demo .demo-code-block-shiki pre.shiki {\n  margin: 0;\n  padding: 8px;\n  background: transparent !important;\n  font-family: 'Geist Mono', ui-monospace, monospace;\n  \n  font-size: 12px;\n  line-height: normal;\n  max-height: 336px;\n  overflow: auto;\n  white-space: pre;\n}\n.rhinestone-1auth-demo .demo-code-copy {\n  align-self: center;\n  font-size: 14px;\n  color: var(--ld-text-primary);\n  gap: 4px;\n  padding: 12px 16px;\n}\n.rhinestone-1auth-demo .demo-code-block-shiki pre.shiki code {\n  background: transparent;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n.rhinestone-1auth-demo .demo-superpowers {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  \n  flex: 1 1 auto;\n  min-height: 0;\n  position: relative;\n}\n.rhinestone-1auth-demo .demo-back {\n  position: absolute;\n  top: 2px;\n  left: 0;\n  z-index: 2;\n  display: inline-flex;\n  padding: 2px;\n  border: none;\n  background: transparent;\n  color: var(--ld-zinc-400);\n  cursor: pointer;\n}\n.rhinestone-1auth-demo .demo-back:hover {\n  color: var(--ld-text-primary);\n}\n.rhinestone-1auth-demo .demo-superpowers-head {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  align-items: flex-start;\n}\n.rhinestone-1auth-demo .demo-superpowers-head .demo-heading {\n  text-align: left;\n  \n  font-size: 24px;\n  color: var(--ld-text-primary);\n}\n.rhinestone-1auth-demo .demo-superpowers-head .demo-heading-sub {\n  text-align: left;\n  font-size: 12px;\n}\n.rhinestone-1auth-demo .demo-superpowers-form {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.rhinestone-1auth-demo .field {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.rhinestone-1auth-demo .field-label {\n  font-size: 12px;\n  color: var(--ld-zinc-400);\n}\n.rhinestone-1auth-demo .field-value {\n  \n  padding: 12px;\n  background: #18181b;\n  color: var(--ld-text-primary);\n  font-size: 14px;\n  line-height: 20px;\n  border-radius: var(--ld-radius-sm);\n}\n.rhinestone-1auth-demo .field-input {\n  width: 100%;\n  font-family: inherit;\n  border: none;\n  outline: none;\n  -webkit-appearance: none;\n  -moz-appearance: textfield;\n  appearance: none;\n  box-shadow: inset 0 0 0 1px transparent;\n}\n.rhinestone-1auth-demo .field-input::-webkit-outer-spin-button, .rhinestone-1auth-demo .field-input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.rhinestone-1auth-demo .field-input:focus {\n  box-shadow: inset 0 0 0 1px var(--ld-primary-500);\n}\n.rhinestone-1auth-demo .demo-superpowers-foot {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  align-items: center;\n}\n.rhinestone-1auth-demo .demo-superpowers-foot .link-button {\n  font-size: 14px;\n  color: var(--ld-text-primary);\n  gap: 4px;\n  padding: 12px 16px;\n}\n.rhinestone-1auth-demo .success-circle {\n  width: 64px;\n  height: 64px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  background: var(--ld-emerald-500);\n  color: #ffffff;\n  box-shadow: 0 0 32px rgba(0, 188, 125, 0.45);\n}\n.rhinestone-1auth-demo .demo-swap {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  \n  flex: 1 1 auto;\n  min-height: 0;\n  width: 100%;\n}\n.rhinestone-1auth-demo .demo-swap-title {\n  margin: 0;\n  \n  padding-left: 28px;\n  font-size: 24px;\n  font-weight: 500;\n  color: var(--ld-text-primary);\n  text-align: left;\n}\n.rhinestone-1auth-demo .demo-swap-tiles {\n  position: relative;\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n}\n.rhinestone-1auth-demo .demo-swap-tile {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 8px;\n  background: var(--ld-bg);\n  border-radius: var(--ld-radius-sm);\n}\n.rhinestone-1auth-demo .demo-swap-tile-label {\n  font-size: 12px;\n  color: var(--ld-text-secondary);\n}\n.rhinestone-1auth-demo .demo-swap-tile-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.rhinestone-1auth-demo .demo-swap-amount {\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--ld-text-primary);\n}\n.rhinestone-1auth-demo .demo-swap-token {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--ld-text-primary);\n}\n.rhinestone-1auth-demo .demo-swap-token img {\n  width: 20px;\n  height: 20px;\n  border-radius: 9999px;\n}\n.rhinestone-1auth-demo .demo-swap-toggle {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  display: inline-flex;\n  padding: 4px;\n  background: var(--ld-bg);\n  border: 4px solid var(--ld-surface);\n  border-radius: 4px;\n  color: var(--ld-zinc-300);\n}\n.rhinestone-1auth-demo .demo-swap-spinner {\n  display: inline-flex;\n  animation: rhinestone-1auth-demo-spin 0.9s linear infinite;\n}\n.rhinestone-1auth-demo .demo-swap-cta:disabled {\n  background: var(--ld-primary-300);\n  opacity: 1;\n  box-shadow: 0 1px 32px var(--ld-primary-400);\n  cursor: default;\n}\n@media (max-width: 600px) {\n.rhinestone-1auth-demo .scenario-demo-col .demo-browser-body {\n    min-height: clamp(230px, calc(81.5dvh - 226.5px), 450px);\n  }\n.rhinestone-1auth-demo .demo-onboarding {\n    min-height: clamp(230px, calc(81.5dvh - 226.5px), 450px);\n  }\n.rhinestone-1auth-demo .demo-onboarding-art svg {\n    width: clamp(150px, calc(40.7dvh - 77.8px), 260px);\n    height: auto;\n  }\n.rhinestone-1auth-demo .demo-nft-frame {\n    width: clamp(170px, calc(48.1dvh - 99.2px), 300px);\n    height: clamp(170px, calc(48.1dvh - 99.2px), 300px);\n  }\n.rhinestone-1auth-demo .demo-nft-photo {\n    width: clamp(77px, calc(21.9dvh - 45.8px), 136px);\n    height: clamp(129px, calc(36.3dvh - 74.3px), 227px);\n  }\n.rhinestone-1auth-demo .demo-superpowers {\n    gap: clamp(8px, calc(3.7dvh - 12.7px), 18px);\n  }\n.rhinestone-1auth-demo .demo-superpowers-head .demo-heading {\n    font-size: clamp(17px, calc(2.59dvh + 2.5px), 24px);\n  }\n.rhinestone-1auth-demo .demo-superpowers-form {\n    gap: clamp(7px, calc(2.59dvh - 7.5px), 14px);\n  }\n.rhinestone-1auth-demo .demo-superpowers .field {\n    gap: clamp(4px, calc(1.48dvh - 4.3px), 8px);\n  }\n.rhinestone-1auth-demo .demo-superpowers .field-value {\n    padding: clamp(7px, calc(2.59dvh - 7.5px), 14px);\n  }\n.rhinestone-1auth-demo .scenario-demo-col .wallet-pill {\n    display: none;\n  }\n}\n.rhinestone-1auth-demo .demo-card {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  border-radius: 16px;\n  border: 1px solid light-dark(#e0e0e0, #2a2a2a);\n  background-color: light-dark(#fcfcfc, #111111);\n  overflow: hidden;\n}\n.rhinestone-1auth-demo .demo-toolbar {\n  display: none;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  border-bottom: 1px solid light-dark(#e8e8e8, #222222);\n  background-color: light-dark(#f9f9f9, #191919);\n}\n@media (min-width: 1024px) {\n.rhinestone-1auth-demo .demo-toolbar {\n    display: flex;\n  }\n}\n.rhinestone-1auth-demo .demo-toolbar-dots {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.rhinestone-1auth-demo .demo-toolbar-dot {\n  width: 10px;\n  height: 10px;\n  border-radius: 9999px;\n}\n.rhinestone-1auth-demo .demo-toolbar-dot-red {\n  background-color: light-dark(#ff5f57, #ff5f57);\n}\n.rhinestone-1auth-demo .demo-toolbar-dot-yellow {\n  background-color: light-dark(#febc2e, #febc2e);\n}\n.rhinestone-1auth-demo .demo-toolbar-dot-green {\n  background-color: light-dark(#28c840, #28c840);\n}\n.rhinestone-1auth-demo .demo-toolbar-title {\n  font-weight: 500;\n  font-size: 13px;\n  color: light-dark(#8d8d8d, #6e6e6e);\n  letter-spacing: -0.028em;\n}\n.rhinestone-1auth-demo .demo-content {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n}\n.rhinestone-1auth-demo .demo-step-area {\n  display: flex;\n  width: 100%;\n  max-width: 277px;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.rhinestone-1auth-demo .demo-footer {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0 16px 16px;\n}\n.rhinestone-1auth-demo .demo-nav-row {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n}\n.rhinestone-1auth-demo .demo-nav-side {\n  width: 32px;\n  flex-shrink: 0;\n}\n.rhinestone-1auth-demo .demo-nav-center {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-bottom: 12px;\n}\n.rhinestone-1auth-demo .demo-step-info {\n  max-width: 25ch;\n  text-align: center;\n  margin-bottom: 24px;\n}\n.rhinestone-1auth-demo .demo-step-title {\n  font-weight: 500;\n  font-size: 19px;\n  color: light-dark(#202020, #eeeeee);\n  letter-spacing: -0.028em;\n  margin: 0;\n}\n.rhinestone-1auth-demo .demo-step-desc {\n  font-size: 15px;\n  color: light-dark(#838383, #7b7b7b);\n  line-height: 21px;\n  letter-spacing: -0.028em;\n  text-align: center;\n  margin: 4px 0 0;\n}\n.rhinestone-1auth-demo .demo-dots {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n}\n.rhinestone-1auth-demo .demo-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 9999px;\n  background-color: light-dark(#d9d9d9, #3a3a3a);\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n.rhinestone-1auth-demo .demo-dot:hover:not(.demo-dot-active):not(.demo-dot-disabled) {\n  transform: scale(1.5);\n  background-color: light-dark(#8d8d8d, #6e6e6e);\n}\n.rhinestone-1auth-demo .demo-dot-active {\n  width: 24px;\n  background-color: light-dark(#8d8d8d, #6e6e6e);\n}\n.rhinestone-1auth-demo .demo-dot-disabled {\n  cursor: default;\n}\n.rhinestone-1auth-demo .demo-chevron {\n  display: flex;\n  width: 32px;\n  height: 32px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  border: 1px solid light-dark(#e0e0e0, #313131);\n  background: transparent;\n  color: light-dark(#bbbbbb, #606060);\n  cursor: pointer;\n  transition: all 0.15s;\n}\n.rhinestone-1auth-demo .demo-chevron:hover {\n  background-color: light-dark(#f9f9f9, #191919);\n}\n.rhinestone-1auth-demo .demo-chevron:disabled {\n  cursor: not-allowed;\n}\n.rhinestone-1auth-demo .demo-chevron-hidden {\n  visibility: hidden;\n}\n.rhinestone-1auth-demo .demo-chevron-pulse {\n  border-color: #4F41EF;\n  background-color: #4F41EF;\n  color: white;\n  outline: 2px dashed #4F41EF;\n  outline-offset: 8px;\n}\n.rhinestone-1auth-demo .demo-chevron-pulse:hover {\n  background-color: #402FDB;\n}\n.rhinestone-1auth-demo .demo-step-row {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  width: 100%;\n}\n.rhinestone-1auth-demo .demo-step-full {\n  display: flex;\n  width: 100%;\n}\n.rhinestone-1auth-demo .demo-step-center {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n}\n.rhinestone-1auth-demo .demo-step-status {\n  font-weight: 500;\n  font-size: 15px;\n  letter-spacing: -0.028em;\n  color: light-dark(#8d8d8d, #6e6e6e);\n}\n.rhinestone-1auth-demo .demo-step-error {\n  font-size: 13px;\n  color: #ef4444;\n  text-align: center;\n  margin: 0;\n}\n.rhinestone-1auth-demo .demo-step-btn {\n  display: flex;\n  width: 100%;\n  height: 42px;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  border-radius: 10px;\n  padding: 0 12px;\n  font-weight: 500;\n  font-size: 16px;\n  border: none;\n  cursor: pointer;\n  text-decoration: none;\n  text-align: center;\n  transition: all 0.15s;\n  color: light-dark(#202020, #eeeeee);\n  background-color: light-dark(#f0f0f0, #222222);\n}\n.rhinestone-1auth-demo .demo-step-btn:hover {\n  background-color: light-dark(#e8e8e8, #2a2a2a);\n  text-decoration: none;\n  color: light-dark(#202020, #eeeeee);\n}\n.rhinestone-1auth-demo .demo-step-btn-accent {\n  background-color: #4F41EF;\n  color: white;\n}\n.rhinestone-1auth-demo .demo-step-btn-accent:hover {\n  background-color: #402FDB;\n  color: white;\n}\n.rhinestone-1auth-demo .demo-step-btn-pulse {\n  outline: 2px dashed #4F41EF;\n  outline-offset: 4px;\n}\n.rhinestone-1auth-demo .demo-step-btn-disabled {\n  background-color: light-dark(#e0e0e0, #313131);\n  color: light-dark(#838383, #7b7b7b);\n  cursor: default;\n  pointer-events: none;\n}\n.rhinestone-1auth-demo .demo-step-btn-destructive {\n  background-color: light-dark(#ffe5e5, #3d0d0d);\n  color: #ef4444;\n}\n.rhinestone-1auth-demo .demo-step-btn-destructive:hover {\n  background-color: light-dark(#ffcdce, #500f1c);\n  color: #ef4444;\n}\n.rhinestone-1auth-demo .demo-faucet-icon {\n  color: light-dark(#4F41EF, #a78bfa);\n}\n.rhinestone-1auth-demo .demo-faucet-label {\n  font-weight: 500;\n  font-size: 14px;\n  color: light-dark(#838383, #7b7b7b);\n  margin: 0;\n}\n.rhinestone-1auth-demo .demo-pay {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  gap: 24px;\n}\n.rhinestone-1auth-demo .demo-pay-product {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n}\n.rhinestone-1auth-demo .demo-pay-img {\n  width: 55px;\n  height: 55px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 13px;\n  background-color: light-dark(#f0f0f0, #222222);\n}\n.rhinestone-1auth-demo .demo-pay-details {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.rhinestone-1auth-demo .demo-pay-name {\n  font-weight: 500;\n  font-size: 20px;\n  letter-spacing: -0.028em;\n  color: light-dark(#202020, #eeeeee);\n  margin: 0;\n}\n.rhinestone-1auth-demo .demo-pay-price {\n  font-weight: 500;\n  font-size: 14px;\n  color: light-dark(#838383, #7b7b7b);\n  margin: 0;\n}\n.rhinestone-1auth-demo .demo-product-img {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.rhinestone-1auth-demo .demo-grant-card {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  gap: 12px;\n  padding: 16px;\n  border-radius: 10px;\n  border: 1px solid light-dark(#e0e0e0, #313131);\n  background-color: light-dark(#fcfcfc, #111111);\n}\n.rhinestone-1auth-demo .demo-grant-card-row {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n}\n.rhinestone-1auth-demo .demo-grant-scope {\n  max-width: 15ch;\n  text-align: right;\n  font-size: 13px;\n  line-height: 17px;\n  color: light-dark(#202020, #eeeeee);\n}\n.rhinestone-1auth-demo .demo-grant-mint {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  gap: 8px;\n}\n.rhinestone-1auth-demo .demo-grant-mint-copy {\n  margin: 0;\n  font-size: 12px;\n  line-height: 17px;\n  text-align: center;\n  color: light-dark(#838383, #7b7b7b);\n}\n.rhinestone-1auth-demo .demo-grant-tx-link {\n  align-self: center;\n  font-size: 12px;\n  line-height: 17px;\n}\n.rhinestone-1auth-demo .demo-sign-msg {\n  width: 100%;\n  padding: 16px;\n  border-radius: 10px;\n  border: 1px solid light-dark(#e0e0e0, #313131);\n  background-color: light-dark(#fcfcfc, #111111);\n}\n.rhinestone-1auth-demo .demo-sign-label {\n  font-size: 12px;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: light-dark(#8d8d8d, #6e6e6e);\n  margin: 0 0 8px;\n}\n.rhinestone-1auth-demo .demo-sign-preview {\n  font-size: 15px;\n  color: light-dark(#202020, #eeeeee);\n  margin: 0;\n}\n.rhinestone-1auth-demo .demo-sign-value {\n  font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;\n  font-size: 12px;\n  color: light-dark(#838383, #7b7b7b);\n  word-break: break-all;\n  margin: 0;\n  text-align: center;\n}\n.rhinestone-1auth-demo .demo-end {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  align-items: center;\n}\n.rhinestone-1auth-demo .demo-end-title {\n  font-weight: 500;\n  font-size: 19px;\n  letter-spacing: -0.028em;\n  color: light-dark(#202020, #eeeeee);\n  text-align: center;\n  margin: 0;\n}\n.rhinestone-1auth-demo .demo-end-desc {\n  font-size: 16px;\n  color: light-dark(#8d8d8d, #6e6e6e);\n  line-height: 22px;\n  letter-spacing: -0.028em;\n  text-align: center;\n  margin: 0;\n}\n.rhinestone-1auth-demo .demo-end-actions {\n  display: flex;\n  gap: 8px;\n}\n.rhinestone-1auth-demo .demo-nav-btn {\n  display: inline-flex !important;\n  height: 32px;\n  align-items: center;\n  justify-content: center;\n  padding: 0 12px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 1;\n  border: none;\n  cursor: pointer;\n  text-decoration: none !important;\n  transition: all 0.15s;\n  background-color: light-dark(#f0f0f0, #222222) !important;\n  color: light-dark(#202020, #eeeeee) !important;\n  box-sizing: border-box;\n  white-space: nowrap;\n}\n.rhinestone-1auth-demo .demo-nav-btn:hover {\n  background-color: light-dark(#e8e8e8, #2a2a2a) !important;\n  text-decoration: none !important;\n  color: light-dark(#202020, #eeeeee) !important;\n}\n.rhinestone-1auth-demo .demo-nav-btn.demo-nav-btn-accent {\n  background-color: #4F41EF !important;\n  color: white !important;\n}\n.rhinestone-1auth-demo .demo-nav-btn.demo-nav-btn-accent:hover {\n  background-color: #402FDB !important;\n  color: white !important;\n}\n\n.rhinestone-1auth-demo .oa-frame { display:flex; flex-direction:column; align-items:center; gap:16px; width:100%;\n  border:1px solid var(--ld-border-soft); border-radius:var(--ld-radius-xl); background:var(--ld-bg); padding:40px 24px; }\n.rhinestone-1auth-demo .oa-frame .scenario-demo-col { width:100%; max-width:362px; }\n.rhinestone-1auth-demo .oa-frame .demo-error { color:#ff6467; font-size:12px; margin:0; word-break:break-word; text-align:center; }\n.rhinestone-1auth-demo .oa-dots { display:flex; gap:8px; align-items:center; justify-content:center;\n  background:var(--ld-surface); border:1px solid var(--ld-border-soft); border-radius:999px; padding:8px 14px; }\n.rhinestone-1auth-demo .oa-dot { width:6px; height:6px; border-radius:999px; background:var(--ld-zinc-600); border:none; padding:0;\n  cursor:pointer; transition:width .2s ease, background .2s ease; }\n.rhinestone-1auth-demo .oa-dot[data-state=\"active\"] { width:22px; background:var(--ld-zinc-50); }\n.rhinestone-1auth-demo .oa-dot[disabled] { cursor:default; }\n/* Upstream left-aligns a fixed 220px art frame inside a wider column. Against\n   a full-width Pay button that reads as a misalignment, so the frame takes the\n   column width; the photo inside it is a fixed size and stays centred. */\n.rhinestone-1auth-demo .oa-frame .demo-nft-frame { align-self:stretch; width:auto; }\n/* One card height for every scenario. Upstream sizes the viewport with a\n   min-height and a viewport-height clamp, so each demo settles at its own\n   height (438-480px measured) and the card jumps as you move between them.\n   Fixing the height and letting the demo fill it keeps the spacing rhythm the\n   space-between layouts already have; overflow is a scroll, never a clip. */\n.rhinestone-1auth-demo .oa-frame .demo-browser-body { height:420px; min-height:0; overflow:auto; }\n.rhinestone-1auth-demo .oa-frame .demo-browser-body > * { flex:1 1 auto; min-height:0; }\n.rhinestone-1auth-demo .oa-frame .demo-onboarding,\n.rhinestone-1auth-demo .oa-frame .demo-easymode,\n.rhinestone-1auth-demo .oa-frame .demo-nft,\n.rhinestone-1auth-demo .oa-frame .demo-superpowers,\n.rhinestone-1auth-demo .oa-frame .scenario-success { min-height:0; height:100%; }\n/* The CTA is a fixed-size affordance: in a height-constrained card flexbox\n   will happily compress it to an unreadable sliver (22px, measured) before it\n   touches the art above. */\n.rhinestone-1auth-demo .oa-frame .primary-pill { padding:10px 18px; font-size:15px; flex-shrink:0; }\n/* The permissions form stacks label over input three times, which fills the\n   card and leaves the CTA's glow touching the last field. As rows it reads as\n   the settings list it is, and the space it gives back goes above the CTA. */\n.rhinestone-1auth-demo .oa-frame .field { flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }\n.rhinestone-1auth-demo .oa-frame .field-label { flex:1 1 auto; }\n.rhinestone-1auth-demo .oa-frame .field-input { width:112px; flex:0 0 auto; text-align:right; }\n/* Two auto margins split the freed space, so the rules sit centred between the\n   heading and the CTA instead of leaving a hole above the button — the same\n   rhythm the other cards get from their artwork absorbing the middle. */\n.rhinestone-1auth-demo .oa-frame .demo-superpowers-form { margin-top:auto; }\n.rhinestone-1auth-demo .oa-frame .demo-superpowers-foot { margin-top:auto; }\n/* The art panel is what absorbs the slack instead, which is what upstream's\n   own layout comment says it is for; the photo inside is a fixed size. */\n.rhinestone-1auth-demo .oa-frame .demo-nft-frame { height:auto; min-height:0; flex:1 1 auto; }\n/* The create stage and the ready stage are the same card a moment apart, so\n   they get one silhouette: art, heading, copy, action on the floor. The art\n   box is the ready stage's 82px success circle, held to the pixel so the\n   heading under it barely moves as the stage changes; the 216px wallet glyph\n   is the landing tunnel's hero art and sits inside that box, smaller than the\n   filled circle because it is a line drawing carrying the same weight. */\n.rhinestone-1auth-demo .oa-frame .demo-onboarding-art { width:82px; height:82px; flex:0 0 auto; }\n.rhinestone-1auth-demo .oa-frame .demo-onboarding-art svg { width:60px; height:60px; }\n/* Capped just inside the card so the explanation breaks over two even lines\n   at the demo's own width rather than running edge to edge. */\n.rhinestone-1auth-demo .oa-frame .demo-onboarding-intro { display:flex; flex-direction:column;\n  align-items:center; gap:12px; max-width:300px; margin-top:auto; }\n.rhinestone-1auth-demo .oa-frame .demo-onboarding-intro-text { display:flex; flex-direction:column;\n  align-items:center; gap:4px; margin:4px 0 8px; }\n/* The ready stage splits its slack between an auto margin over the circle and\n   another over the CTA; the same pair puts this stage on the same rhythm. */\n.rhinestone-1auth-demo .oa-frame .demo-onboarding-foot { margin-top:auto; }\n/* Every stage's action sits 24px off the card floor — the body's own padding.\n   Upstream pads this card 4px top and bottom, which alone made the Pay button\n   land 4px high; the top 4px stays. */\n.rhinestone-1auth-demo .oa-frame .demo-nft { padding-bottom:0; }\n";

export const SOURCE_COMMIT = "e06ebe8add704e95f679eaddc38fd7ea88cb3de8";

export const SDK_VERSION = "0.10.1";

export const VIEM_VERSION = "2.55.0";

export const STORAGE_KEY = "rhinestone-docs-1auth-account";

export const PROD_BACKENDS = {
  auth: "https://passkey.1auth.app",
  sponsorship: "https://docs.1auth.app/api/sponsorship"
};

export const DEV_BACKENDS = {
  auth: "https://passkey.passkey-test.app",
  sponsorship: "https://docs.passkey-test.app/api/sponsorship"
};

export const PROD_DOCS_HOST = "docs.rhinestone.dev";

export const backends = () => {
  const host = typeof window === "undefined" ? "" : window.location.hostname;
  return host === PROD_DOCS_HOST ? PROD_BACKENDS : DEV_BACKENDS;
};

export const BACKEND_NOTE = "Only the production docs host talks to the production Rhinestone deployment. " + "Every other host — a Mintlify preview, a tunnel, localhost — uses dev, so " + "an unrecognised preview pattern fails towards dev rather than creating " + "passkey state against production.";

export const CDN = spec => "https://esm.sh/" + spec + (spec.startsWith("@rhinestone/1auth@") ? "?deps=viem@" + VIEM_VERSION + "&external=react" : "");

export const shareReact = () => {
  if (window.__OA_SHARED_REACT__) return;
  if (typeof HTMLScriptElement.supports !== "function" || !HTMLScriptElement.supports("importmap")) {
    throw new Error("This demo requires a browser with import-map support.");
  }
  window.__OA_REACT__ = React;
  const reserved = ["default", "import", "export", "class", "function", "const", "let", "var", "new", "delete", "typeof", "void", "in", "of", "do", "if", "else", "for", "while", "switch", "case", "break", "continue", "return", "this", "super", "throw", "try", "catch", "finally", "yield", "await", "enum", "null", "true", "false", "with", "debugger", "instanceof", "extends", "static"];
  const names = Object.keys(React).filter(name => (/^[A-Za-z_$][A-Za-z0-9_$]*$/).test(name) && !reserved.includes(name));
  const source = ["const R = globalThis.__OA_REACT__; export default R;", ...names.map(name => "export const " + name + " = R." + name + ";")].join(" ");
  const jsx = ["const R = globalThis.__OA_REACT__; export const Fragment = R.Fragment;", "export const jsx = (type, props, key) => R.createElement(type, key == null ? props : { ...props, key });", "export const jsxs = jsx; export const jsxDEV = jsx;"].join(" ");
  const dataUrl = value => "data:text/javascript," + encodeURIComponent(value);
  const script = document.createElement("script");
  script.type = "importmap";
  script.textContent = JSON.stringify({
    imports: {
      react: dataUrl(source),
      "react/jsx-runtime": dataUrl(jsx),
      "react/jsx-dev-runtime": dataUrl(jsx)
    }
  });
  document.head.appendChild(script);
  window.__OA_SHARED_REACT__ = true;
};

export const MODULE_SPECS = {
  sdk: () => CDN("@rhinestone/1auth@" + SDK_VERSION),
  sdkHeadless: () => CDN("@rhinestone/1auth@" + SDK_VERSION + "/headless"),
  viem: () => CDN("viem@" + VIEM_VERSION),
  viemChains: () => CDN("viem@" + VIEM_VERSION + "/chains"),
  viemAccounts: () => CDN("viem@" + VIEM_VERSION + "/accounts")
};

export const importModule = url => new Promise((resolve, reject) => {
  const key = "__oa_" + Math.random().toString(36).slice(2);
  window[key] = {
    resolve,
    reject
  };
  const script = document.createElement("script");
  script.type = "module";
  script.textContent = "import(" + JSON.stringify(url) + ").then(m => window[" + JSON.stringify(key) + "].resolve(m))" + ".catch(e => window[" + JSON.stringify(key) + "].reject(new Error(String(e))));";
  script.onerror = () => reject(new Error("failed to load " + url));
  document.head.appendChild(script);
  script.remove();
});

export const importModuleWithRetry = async url => {
  try {
    return await importModule(url);
  } catch (first) {
    await new Promise(r => setTimeout(r, 500));
    return importModule(url);
  }
};

export const loadDeps = async () => {
  shareReact();
  const specs = Object.entries(MODULE_SPECS).map(([name, spec]) => [name, spec()]);
  const cacheKey = "__OA_DEPS__" + specs.map(([, url]) => url).join("|");
  if (window[cacheKey]) return window[cacheKey];
  const loaded = await Promise.all(specs.map(([, url]) => importModuleWithRetry(url)));
  const deps = {
    React
  };
  specs.forEach(([name], i) => {
    deps[name] = loaded[i];
  });
  deps.motion = motionShim();
  window[cacheKey] = deps;
  return deps;
};

export const unreachable = call => "Sponsorship " + call + " never reached " + backends().sponsorship + ". The browser hides why: a rejected origin, a failed preflight and a network" + " error all look identical here. The failing request is in the console.";

export const sponsorship = {
  accessToken: async () => {
    let res;
    try {
      res = await fetch(backends().sponsorship + "/access-token", {
        method: "GET",
        credentials: "include"
      });
    } catch (e) {
      throw new Error(unreachable("access token"));
    }
    if (!res.ok) throw new Error("Sponsorship access token failed (" + res.status + ")");
    return (await res.json()).token;
  },
  getExtensionToken: async intentOp => {
    let res;
    try {
      res = await fetch(backends().sponsorship + "/extension-token", {
        method: "POST",
        credentials: "include",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          intentOp
        })
      });
    } catch (e) {
      throw new Error(unreachable("extension token"));
    }
    if (!res.ok) throw new Error("Sponsorship extension token failed (" + res.status + ")");
    return (await res.json()).token;
  }
};

export const motionShim = () => {
  const passthrough = Tag => React.forwardRef((props, ref) => {
    const rest = Object.fromEntries(Object.entries(props).filter(([k]) => !["initial", "animate", "exit", "transition", "variants", "whileHover", "whileTap", "layout", "layoutId"].includes(k)));
    return React.createElement(Tag, {
      ...rest,
      ref
    });
  });
  const cache = {};
  return {
    motion: new Proxy({}, {
      get: (_, tag) => {
        if (!cache[tag]) cache[tag] = passthrough(tag);
        return cache[tag];
      }
    }),
    AnimatePresence: ({children}) => React.createElement(React.Fragment, null, children),
    useReducedMotion: () => true
  };
};

export const AuthContext = React.createContext(null);

export const useAuthContext = () => React.useContext(AuthContext);

export const buildModules = deps => {
  const mods = {};
  mods.authctx = (() => {
    const DOCS_APP_ORIGIN_STORAGE_KEY = STORAGE_KEY;
    const useAuth = () => useAuthContext();
    return {
      DOCS_APP_ORIGIN_STORAGE_KEY,
      useAuth,
      clearDocsSession: () => {}
    };
  })();
  mods.constants = (() => {
    const DOCS_APP_ORIGIN_CLIENT_ID = "docs-app-origin";
    function docsAppOriginWebAuthn() {
      if (typeof window === "undefined" || window.location.protocol !== "https:") {
        return {
          mode: "app_origin"
        };
      }
      return {
        mode: "app_origin",
        rpId: window.location.hostname
      };
    }
    const DOCS_EXPERIMENTAL_CLEAR_SIGNING = true;
    const APP_ORIGIN_DEMO_CAPABILITIES = {
      payButton: true,
      eip1193Transactions: true,
      sendCalls: true,
      batchCalls: true,
      messageSigning: true,
      typedDataSigning: true,
      batchIntents: true,
      smartSessions: true,
      walletConnection: true,
      recovery: true
    };
    const DOCS_DIALOG_THEME = {
      mode: "dark",
      accent: "#ffffff",
      backdrop: {
        color: "#52525c",
        opacity: 0.5,
        blur: 12
      }
    };
    const MOCK_USD_ADDRESS = "0x2f6fdE5E2AeAB6335d8f978B4d8B2a9c1129AcFb";
    const RECIPIENT_ADDRESS = "0x180b791BD181DF1773E4e33cb0374b258936d186";
    const MOCK_RWA_ADDRESS = "0x5948C7E284174f6Df0f2505fb3CBFbd685154323";
    const MOCK_SWAP_ADDRESS = "0xf2DFDC35d46e62F6D026afa36Cc6e941174B67f1";
    const MOCK_NFT_V2_ADDRESS = "0x99CCb273351Cf13713F7Bf5A0716d7C2a3DD4712";
    const MOCK_NFT_LUIGI_ID = 1n;
    const NVDA_ICON_SVG = `<svg width="250" height="250" viewBox="0 0 250 250" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="250" height="250" fill="#76B900"/><path d="M99.5748 98.4439V86.5224C100.752 86.4488 101.93 86.3752 103.107 86.3752C135.781 85.345 157.195 114.486 157.195 114.486C157.195 114.486 134.088 146.571 109.289 146.571C105.977 146.571 102.739 146.056 99.6484 145.026V108.82C112.379 110.365 114.955 115.958 122.535 128.689L139.534 114.413C139.534 114.413 127.097 98.1495 106.198 98.1495C103.99 98.0759 101.782 98.2231 99.5748 98.4439ZM99.5748 59V76.8086L103.107 76.5878C148.512 75.0425 178.168 113.824 178.168 113.824C178.168 113.824 144.17 155.181 108.773 155.181C105.683 155.181 102.666 154.887 99.6484 154.372V165.41C102.15 165.705 104.726 165.925 107.228 165.925C140.196 165.925 164.039 149.073 187.146 129.204C190.973 132.295 206.647 139.727 209.885 142.965C187.956 161.363 136.811 176.154 107.817 176.154C105.02 176.154 102.371 176.007 99.722 175.713V191.24H224.971V59L99.5748 59ZM99.5748 145.026V154.445C69.1088 149 60.646 117.283 60.646 117.283C60.646 117.283 75.2903 101.093 99.5748 98.4439V108.746H99.5012C86.7702 107.201 76.7621 119.122 76.7621 119.122C76.7621 119.122 82.4285 139.212 99.5748 145.026ZM45.4866 115.958C45.4866 115.958 63.516 89.3188 99.6484 86.5224V76.8086C59.6158 80.0465 25.0288 113.898 25.0288 113.898C25.0288 113.898 44.6036 170.561 99.5748 175.713V165.41C59.2478 160.406 45.4866 115.958 45.4866 115.958Z" fill="white"/></svg>`;
    const NVDA_ICON_DATA_URL = `data:image/svg+xml;utf8,${encodeURIComponent(NVDA_ICON_SVG)}`;
    const LUIGI_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" viewBox="0 0 28 28"><rect width="28" height="28" fill="#32a742" rx="4"/><path fill="#101110" d="M13 5.4h.9a7 7 0 0 1 4 1.1q1.3 1 2 2.4l.3.5.5-.6L22 7.5q1-.9 2.2-1.3h.5l.4.3v.8a9 9 0 0 1-2.5 4.4l-.6.6q.6.7.2 1.7t-1.4 1.6l.2.8q.4 2-.5 3.6l-.4.5a8 8 0 0 1-5.7 2.1h-1l-1.8-.3-.5-.2-.9-.3q-1-.4-1.8-1.2-.6-.6-1-1.4a5 5 0 0 1 0-3.6q-.9-.3-1.3-.9-.5-.9-.1-2v-.1L3.8 10q-.9-1.3-1-2.8 0-.5.3-.6C4 6.6 6 8 6.8 8.8l.9.9q.4-1 1.1-2c1.2-1.5 2.3-2 4.2-2.3"/><path fill="#f7c30f" d="M8.5 14q1.1.7 2.4.5c1-.2 2.3-1 3.3-.9l1.6.4.3.1.6.2q1.6.4 2.8-.5l.2.2c.8 1.3 1.5 3.3 1 4.8l-.5 1c0 .2-.7.8-.9.9l-.3.2-.3.2q-.6.5-1.3.6a9 9 0 0 1-7.6-.4l-.5-.4-.6-.4-.6-.7-.4-.7c-.5-.8-.4-2.4-.1-3.2q.1-.8.6-1.4l.1-.2z"/><path fill="#fb9410" d="M17.7 20.8q0 .3.4.3h.6q-.6.5-1.3.6a9 9 0 0 1-7.6-.4q.5 0 .9-.3 3.4.9 6.7 0z"/><path fill="#e0051c" d="M17.6 20.2c.2-1.5 2.6-3 2.8-1.5h.3l-.5 1.1c0 .2-.7.8-.9.9l-.3.2-.3.2H18q-.3 0-.4-.3z"/><path fill="#870c0d" d="M17.6 20.2c.2-1.5 2.6-3 2.8-1.5h.3l-.5 1.1c0 .2-.7.8-.9.9l.4-.5q.6-.7.6-1.5l-.3-.1h-.8q-.6.4-1 1l-.4.4h-.1z"/><path fill="#fb99a0" d="m17.8 20 .3-.7c.4-.6 1.3-1.4 2-1l.2.4-.3-.1h-.8q-.6.4-1 1z"/><path fill="#fac550" d="M20.4 18.7h.3l-.5 1.1v-.2q.3-.5.2-.9"/><path fill="#870c0d" d="m17.6 20.2.1-.1q-.1.6.4.9h.6l.3-.1-.3.2H18q-.3 0-.4-.3z"/><path fill="#e0051c" d="M7.9 19q0-.7.7-.7c1 0 2.5 1.7 2 2.7q-.2.4-.8.3l-.5-.4-.6-.4-.6-.7-.4-.7z"/><path fill="#870c0d" d="M7.9 19q0-.7.7-.7c1 0 2.5 1.7 2 2.7q-.2.4-.8.3l-.5-.4c.4 0 .4.3 1 .2l.3-.3q0-.5-.2-.9l-.5-.6Q9 18.4 8 19l.2.9-.1-.2v.2l-.4-.7z"/><path fill="#fb99a0" d="M8 18.9q.2-.6.8-.5a3 3 0 0 1 1.7 1.5l-.6-.6Q9 18.4 8 19"/><path fill="#fac550" d="M7.7 19h.2q0 .4.2.6v.2z"/><path fill="#831218" d="m8 19.6.2.2q.4.3.5.7l-.6-.7z"/><path fill="#101110" d="M17.4 14.9h.7q1.2.8.6 2v.1q-.4.5-1 .6-.8-.2-1-.8-.3-.6 0-1.2t.7-.7"/><path fill="#f2f0ee" d="M17.3 15.2q.3 0 .5.2v.3q0 .3-.3.3-.4 0-.5-.2-.2-.5.3-.6"/><path fill="#fb9410" d="M8.5 14q1.1.7 2.4.5c1-.2 2.3-1 3.3-.9l1.6.4.3.1.6.2q1.6.4 2.8-.5l.2.2-.6.5-.7.3H18v.1h-.6c0-.2-.8-.2-1-.2q-1.3-.4-2.7-.6l-1.3.3c-1.8.5-2.3.7-4 0l-.1-.1z"/><path fill="#fac550" d="m8.3 14.3-.1.2h-.1z"/><path fill="#101110" d="m14.1 17.6.3.1a5 5 0 0 0 2.8.3l.6-.1.1.2c.1 1.7-1.6 2.1-3 1.8l-.8-.3-.4.1-.7.3-1.2-.1c-.7-.2-1.6-.9-1.3-1.7q0-.2.3 0 1.7.4 3.3-.6M10.2 15c1.6-.2 1.9 2.3.4 2.7l-.6-.1c-1.1-.5-1-2.4.2-2.6"/><path fill="#f2f0ee" d="M10.6 15.3q.3 0 .5.2v.4q0 .2-.3.2h-.2l-.3-.2q-.2-.5.3-.6"/><path fill="#101110" d="m14 17.2.3.1v.2q-.5 0-.4-.3"/><path fill="#008a4d" d="M8.4 10.7 8 10c-.1-.2.3-.9.4-1A6 6 0 0 1 11 6.3c1.5-.7 3.5-.8 5-.2q2.2.7 3.3 2.6.4.4.6 1l-.2.3-.5.8-.7 1.2-.7-.4 1 1.2-.6-.5a7 7 0 0 0-2.3-1q.7-1 .5-2t-1-1.5a3 3 0 0 0-4 .7c-.4.8-.4 2 .2 2.7l.2.2-1.5.6-.8.5v-.2l.3-.4.1-.3-.2.1-.4.4V12z"/><path fill="#80c491" d="M8.4 10.7 8 10c-.1-.2.3-.9.4-1A6 6 0 0 1 11 6.3c1.5-.7 3.5-.8 5-.2q2.2.7 3.3 2.6.4.4.6 1l-.2.3v-.2l-.7-.9q-.7-1-1.7-2a6 6 0 0 0-2.8-1 6 6 0 0 0-4.6 2c-.5.5-1.3 2-1.6 2.8"/><path fill="#064634" d="m19.7 9.8.1.2-.5.8-.7 1.2q-.4-.4-.7-.4l1 1.2-.6-.5-1-.5.1-.4q.3-.3 1-.4.9-.3 1.3-1.2"/><path fill="#80c491" d="M10 11.6h.3l-.4.3zm-.7.4.5-.3z"/><path fill="#008a4d" d="M9.6 12.9a7 7 0 0 1 6.8-1.2l1 .4a7 7 0 0 1 2 1.5c-.8.7-2 .5-2.8.3q-.6 0-1-.3c-1.4-.4-1.7-.5-3 0l-1.8.6a3 3 0 0 1-2.2-.5z"/><path fill="#064634" d="M17.3 12.1a7 7 0 0 1 2 1.5c-.7.7-1.8.5-2.7.3.8-.6 1-.7.7-1.8"/><path fill="#80c491" d="M9.6 12.9c.1.5-.1.5.4 1s2.3-.4 2.5-.3q-.8.4-1.7.6a3 3 0 0 1-2.2-.5z"/><path fill="#f2f0ee" d="M13.8 7.6q1 0 1.8.6 1.5 1.4.1 3a9 9 0 0 0-3.6.1q-.6-.5-.7-1.3.1-2.3 2.4-2.4"/><path fill="#008a4d" d="m13.6 8-.1 2h1.6v.8h-2.3V8z"/><path fill="#fb9410" d="m18.8 12.3.3-.7q1-1.7 2.4-3.2l.7-.7.2.3 1 2.4-3 2.9-.6.4-.8-1.3z"/><path fill="#f7c30f" d="m18.8 12.3.3-.7q1-1.7 2.4-3.2l.7-.7.2.3.3.8-.8.5-.7.5-1 1-.9.8z"/><path fill="#fbeca3" d="m18.8 12.3.3-.7q1-1.7 2.4-3.2l.7-.7.2.3-.3.3a14 14 0 0 0-2.5 2.9l-.3.4z"/><path fill="#fb9410" d="M5.4 8.1q2 1.5 3.3 3.6l.5.7-.1.2q-.6.5-.8 1.2l-.8-.5q-1.6-1.1-3-2.7l.7-2.1z"/><path fill="#f7c30f" d="M5.4 8.1q2 1.5 3.3 3.6l.5.7-.1.2H9l-.6-.8-1.5-1.6-.7-.5-1-.7H5z"/><path fill="#fbeca3" d="M5.4 8.1a14 14 0 0 1 3.4 3.7h-.1C8.2 11 6 8.9 5.3 8.5z"/><path fill="#fac550" d="m8.7 11.7.5.7-.1.2v-.3z"/><path fill="#064634" d="M21.7 12.5c.7 1.1 0 2.2-1 2.8l-.2-.3-.5-1zm-15.4.3 1.2.9.6.4-.5.9-.2.3q-.8-.3-1.2-1.1-.2-.8 0-1.4"/><path fill="#f2f0ee" d="M24.3 6.5h.4l-.5.4-1.5.9h-.2l-.1-.2a5 5 0 0 1 1.9-1.1M3.2 7a6 6 0 0 1 2 1v.2H5l-.8-.4L3 7.3z"/><path fill="#1f5e4c" d="m9.3 12.7.3-.4v.1z"/></svg>`;
    const LUIGI_ICON_DATA_URL = `data:image/svg+xml;utf8,${encodeURIComponent(LUIGI_ICON_SVG)}`;
    const MUSD_ICON_SVG = `<svg width="250" height="250" viewBox="0 0 250 250" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_4758_159829)"><g filter="url(#filter0_i_4758_159829)"><path d="M124.999 249.149C193.565 249.149 249.149 193.565 249.149 124.999C249.149 56.4325 193.565 0.848633 124.999 0.848633C56.4325 0.848633 0.848633 56.4325 0.848633 124.999C0.848633 193.565 56.4325 249.149 124.999 249.149Z" fill="white"/></g><path d="M101.7 211.35C101.7 214.25 99.3499 215.9 96.6499 215.05C59.0499 203 31.8999 167.85 31.8999 126.25C31.8999 84.7497 59.0499 49.5497 96.6999 37.4997C99.4999 36.6497 101.75 38.2997 101.75 41.1997V48.4497C101.75 50.3997 100.3 52.5997 98.4499 53.2997C68.6499 64.2497 47.4499 92.8497 47.4499 126.25C47.4499 159.7 68.6999 188.25 98.4499 199.1C100.3 199.8 101.75 202 101.75 203.95V211.35H101.7Z" fill="black"/><path d="M132.752 184.451C132.752 186.601 131.002 188.351 128.852 188.351H121.102C118.952 188.351 117.202 186.601 117.202 184.451V172.251C100.252 169.901 92.0016 160.501 89.7516 147.501C89.3516 145.251 91.1016 143.351 93.3516 143.351H102.202C104.052 143.351 105.602 144.701 106.002 146.451C107.652 154.101 112.102 160.051 125.702 160.051C135.702 160.051 142.852 154.401 142.852 146.101C142.852 137.751 138.702 134.551 123.952 132.151C102.202 129.251 91.9516 122.651 91.9516 105.651C91.9516 92.5512 101.952 82.2512 117.252 80.1512V68.1012C117.252 65.9512 119.002 64.2012 121.152 64.2012H128.902C131.052 64.2012 132.802 65.9512 132.802 68.1012V80.4012C145.302 82.6512 153.252 89.7012 155.902 101.551C156.402 103.801 154.652 105.801 152.302 105.801H144.152C142.402 105.801 140.952 104.651 140.452 103.001C138.202 95.5512 132.902 92.2512 123.552 92.2512C113.252 92.2512 107.952 97.2012 107.952 104.201C107.952 111.551 110.952 115.251 126.752 117.501C148.102 120.401 159.152 126.501 159.152 144.651C159.152 158.401 148.852 169.601 132.852 172.101V184.501H132.752V184.451Z" fill="black"/><path d="M153.3 214.997C150.5 215.847 148.25 214.197 148.25 211.297V204.047C148.25 201.897 149.5 199.897 151.55 199.197C181.25 188.347 202.55 159.697 202.55 126.347C202.55 92.897 181.3 64.347 151.55 53.497C149.7 52.797 148.25 50.597 148.25 48.647V41.397C148.25 38.497 150.6 36.847 153.3 37.697C190.95 49.547 218.1 84.747 218.1 126.247C218.1 167.847 190.95 202.997 153.3 214.997Z" fill="black"/></g><defs><filter id="filter0_i_4758_159829" x="0.848633" y="0.848633" width="248.3" height="248.3" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="41.5"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow_4758_159829"/></filter><clipPath id="clip0_4758_159829"><rect width="250" height="250" fill="white"/></clipPath></defs></svg>`;
    const MUSD_ICON_DATA_URL = `data:image/svg+xml;utf8,${encodeURIComponent(MUSD_ICON_SVG)}`;
    const USDC_BASE_ADDRESS = "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913";
    const USDC_BASE_SEPOLIA_ADDRESS = "0x036CbD53842c5426634e7929541eC2318f3dCF7e";
    const USDC_ARB_SEPOLIA_ADDRESS = "0x75faf114eafb1BDbe2F0316DF893fd58CE46AA4d";
    const BASE_SEPOLIA_CHAIN_ID = 84532;
    const ARB_SEPOLIA_CHAIN_ID = 421614;
    const erc20Abi = [{
      name: "transfer",
      type: "function",
      stateMutability: "nonpayable",
      inputs: [{
        name: "to",
        type: "address"
      }, {
        name: "amount",
        type: "uint256"
      }],
      outputs: [{
        name: "",
        type: "bool"
      }]
    }, {
      name: "approve",
      type: "function",
      stateMutability: "nonpayable",
      inputs: [{
        name: "spender",
        type: "address"
      }, {
        name: "amount",
        type: "uint256"
      }],
      outputs: [{
        name: "",
        type: "bool"
      }]
    }, {
      name: "mint",
      type: "function",
      stateMutability: "nonpayable",
      inputs: [{
        name: "to",
        type: "address"
      }, {
        name: "amount",
        type: "uint256"
      }],
      outputs: []
    }, {
      name: "balanceOf",
      type: "function",
      inputs: [{
        name: "account",
        type: "address"
      }],
      outputs: [{
        name: "",
        type: "uint256"
      }],
      stateMutability: "view"
    }];
    const mockSwapAbi = [{
      name: "swap",
      type: "function",
      stateMutability: "nonpayable",
      inputs: [{
        name: "usdcIn",
        type: "uint256"
      }, {
        name: "minRwaOut",
        type: "uint256"
      }, {
        name: "recipient",
        type: "address"
      }],
      outputs: [{
        name: "rwaOut",
        type: "uint256"
      }]
    }, {
      name: "quote",
      type: "function",
      stateMutability: "view",
      inputs: [{
        name: "usdcIn",
        type: "uint256"
      }],
      outputs: [{
        name: "rwaOut",
        type: "uint256"
      }]
    }, {
      name: "getPrice",
      type: "function",
      stateMutability: "view",
      inputs: [],
      outputs: [{
        name: "price",
        type: "uint256"
      }]
    }, {
      name: "pricePerShare",
      type: "function",
      stateMutability: "view",
      inputs: [],
      outputs: [{
        name: "",
        type: "uint256"
      }]
    }, {
      name: "jitterRange",
      type: "function",
      stateMutability: "view",
      inputs: [],
      outputs: [{
        name: "",
        type: "uint256"
      }]
    }];
    const mockNftV2Abi = [{
      name: "buy",
      type: "function",
      stateMutability: "nonpayable",
      inputs: [{
        name: "id",
        type: "uint256"
      }, {
        name: "amount",
        type: "uint256"
      }, {
        name: "recipient",
        type: "address"
      }],
      outputs: [{
        name: "totalPrice",
        type: "uint256"
      }]
    }, {
      name: "priceOf",
      type: "function",
      stateMutability: "view",
      inputs: [{
        name: "id",
        type: "uint256"
      }],
      outputs: [{
        name: "",
        type: "uint256"
      }]
    }];
    return {
      docsAppOriginWebAuthn,
      DOCS_APP_ORIGIN_CLIENT_ID,
      DOCS_EXPERIMENTAL_CLEAR_SIGNING,
      APP_ORIGIN_DEMO_CAPABILITIES,
      DOCS_DIALOG_THEME,
      MOCK_USD_ADDRESS,
      RECIPIENT_ADDRESS,
      MOCK_RWA_ADDRESS,
      MOCK_SWAP_ADDRESS,
      MOCK_NFT_V2_ADDRESS,
      MOCK_NFT_LUIGI_ID,
      NVDA_ICON_DATA_URL,
      LUIGI_ICON_DATA_URL,
      MUSD_ICON_DATA_URL,
      USDC_BASE_ADDRESS,
      USDC_BASE_SEPOLIA_ADDRESS,
      USDC_ARB_SEPOLIA_ADDRESS,
      BASE_SEPOLIA_CHAIN_ID,
      ARB_SEPOLIA_CHAIN_ID,
      erc20Abi,
      mockSwapAbi,
      mockNftV2Abi
    };
  })();
  mods.icons = (() => {
    function ArrowUpRightIcon({size = 16}) {
      return React.createElement("svg", {
        width: size,
        height: size,
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }, React.createElement("path", {
        d: "M7 17 17 7"
      }), React.createElement("path", {
        d: "M7 7h10v10"
      }));
    }
    function ArrowLeftIcon({size = 18}) {
      return React.createElement("svg", {
        width: size,
        height: size,
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }, React.createElement("line", {
        x1: "19",
        y1: "12",
        x2: "5",
        y2: "12"
      }), React.createElement("polyline", {
        points: "12 19 5 12 12 5"
      }));
    }
    function ArrowRightIcon({size = 18}) {
      return React.createElement("svg", {
        width: size,
        height: size,
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }, React.createElement("line", {
        x1: "5",
        y1: "12",
        x2: "19",
        y2: "12"
      }), React.createElement("polyline", {
        points: "12 5 19 12 12 19"
      }));
    }
    function ArrowUpDownIcon({size = 20}) {
      return React.createElement("svg", {
        width: size,
        height: size,
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }, React.createElement("path", {
        d: "m21 16-4 4-4-4"
      }), React.createElement("path", {
        d: "M17 20V4"
      }), React.createElement("path", {
        d: "m3 8 4-4 4 4"
      }), React.createElement("path", {
        d: "M7 4v16"
      }));
    }
    function RefreshIcon({size = 20}) {
      return React.createElement("svg", {
        width: size,
        height: size,
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }, React.createElement("path", {
        d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
      }), React.createElement("path", {
        d: "M21 3v5h-5"
      }), React.createElement("path", {
        d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
      }), React.createElement("path", {
        d: "M8 16H3v5"
      }));
    }
    function CheckIcon({size = 16}) {
      return React.createElement("svg", {
        width: size,
        height: size,
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2.5",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }, React.createElement("path", {
        d: "M20 6 9 17l-5-5"
      }));
    }
    function CopyIcon({size = 16}) {
      return React.createElement("svg", {
        width: size,
        height: size,
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }, React.createElement("rect", {
        x: "9",
        y: "9",
        width: "13",
        height: "13",
        rx: "2"
      }), React.createElement("path", {
        d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
      }));
    }
    function InfoIcon({size = 20}) {
      return React.createElement("svg", {
        width: size,
        height: size,
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }, React.createElement("circle", {
        cx: "12",
        cy: "12",
        r: "10"
      }), React.createElement("path", {
        d: "M12 16v-4"
      }), React.createElement("path", {
        d: "M12 8h.01"
      }));
    }
    function FingerprintIcon({size = 18}) {
      return React.createElement("svg", {
        width: size,
        height: size,
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }, React.createElement("path", {
        d: "M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"
      }), React.createElement("path", {
        d: "M14 13.12c0 2.38 0 6.38-1 8.88"
      }), React.createElement("path", {
        d: "M17.29 21.02c.12-.6.43-2.3.5-3.02"
      }), React.createElement("path", {
        d: "M2 12a10 10 0 0 1 18-6"
      }), React.createElement("path", {
        d: "M2 16h.01"
      }), React.createElement("path", {
        d: "M21.8 16c.2-2 .131-5.354 0-6"
      }), React.createElement("path", {
        d: "M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"
      }), React.createElement("path", {
        d: "M8.65 22c.21-.66.45-1.32.57-2"
      }), React.createElement("path", {
        d: "M9 6.8a6 6 0 0 1 9 5.2c0 .47 0 1.17-.02 2"
      }));
    }
    function SwapIcon({size = 18}) {
      return React.createElement("svg", {
        width: size,
        height: size,
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }, React.createElement("path", {
        d: "m17 3 4 4-4 4"
      }), React.createElement("path", {
        d: "M21 7H7"
      }), React.createElement("path", {
        d: "m7 21-4-4 4-4"
      }), React.createElement("path", {
        d: "M3 17h14"
      }));
    }
    function CodeIcon({size = 16}) {
      return React.createElement("svg", {
        width: size,
        height: size,
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }, React.createElement("polyline", {
        points: "16 18 22 12 16 6"
      }), React.createElement("polyline", {
        points: "8 6 2 12 8 18"
      }));
    }
    function CoinIcon({size = 18}) {
      return React.createElement("svg", {
        width: size,
        height: size,
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }, React.createElement("circle", {
        cx: "8",
        cy: "8",
        r: "6"
      }), React.createElement("path", {
        d: "M18.09 10.37A6 6 0 1 1 10.34 18"
      }), React.createElement("path", {
        d: "M7 6h1v4"
      }), React.createElement("path", {
        d: "m16.71 13.88.7.71-2.82 2.82"
      }));
    }
    function KeyRoundIcon() {
      return React.createElement("svg", {
        width: "20",
        height: "20",
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }, React.createElement("path", {
        d: "M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"
      }), React.createElement("circle", {
        cx: "16.5",
        cy: "7.5",
        r: ".5",
        fill: "currentColor"
      }));
    }
    function SpinnerIcon({size = 48}) {
      return React.createElement("svg", {
        className: "spinner-arc",
        width: size,
        height: size,
        viewBox: "0 0 50 50",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "3",
        strokeLinecap: "round"
      }, React.createElement("circle", {
        cx: "25",
        cy: "25",
        r: "20",
        stroke: "currentColor",
        strokeOpacity: "0.18"
      }), React.createElement("path", {
        d: "M25 5 a20 20 0 0 1 20 20"
      }));
    }
    function RedoDotIcon() {
      return React.createElement("svg", {
        width: "20",
        height: "20",
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }, React.createElement("path", {
        d: "M21 7v6h-6"
      }), React.createElement("path", {
        d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"
      }), React.createElement("circle", {
        cx: "12",
        cy: "17",
        r: "1",
        fill: "currentColor"
      }));
    }
    function WalletIcon() {
      return React.createElement("svg", {
        width: "20",
        height: "20",
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }, React.createElement("path", {
        d: "M19 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2"
      }), React.createElement("path", {
        d: "M22 12v-2a2 2 0 0 0-2-2h-7a2 2 0 1 0 0 4h7a2 2 0 0 0 2-2z"
      }));
    }
    function UndoIcon() {
      return React.createElement("svg", {
        width: "20",
        height: "20",
        viewBox: "0 0 20 20",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "1.66667",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }, React.createElement("path", {
        d: "M7.49967 3.33301L3.33301 7.49967L7.49967 11.6663M3.33301 7.49967H12.083C12.6849 7.49967 13.2809 7.61823 13.837 7.84856C14.393 8.07889 14.8983 8.4165 15.3239 8.8421C15.7495 9.2677 16.0871 9.77297 16.3175 10.329C16.5478 10.8851 16.6663 11.4811 16.6663 12.083C16.6663 12.6849 16.5478 13.2809 16.3175 13.837C16.0871 14.393 15.7495 14.8983 15.3239 15.3239C14.8983 15.7495 14.393 16.0871 13.837 16.3175C13.2809 16.5478 12.6849 16.6663 12.083 16.6663H9.16634"
      }));
    }
    function VaultIcon() {
      return React.createElement("svg", {
        width: "20",
        height: "20",
        viewBox: "0 0 20 20",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "1.66667",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }, React.createElement("path", {
        d: "M6.58325 6.58325L8.83325 8.83325M11.1666 8.83325L13.4166 6.58325M6.58325 13.4166L8.83325 11.1666M11.1666 11.1666L13.4166 13.4166M4.16667 2.5H15.8333C16.7538 2.5 17.5 3.24619 17.5 4.16667V15.8333C17.5 16.7538 16.7538 17.5 15.8333 17.5H4.16667C3.24619 17.5 2.5 16.7538 2.5 15.8333V4.16667C2.5 3.24619 3.24619 2.5 4.16667 2.5ZM6.66667 6.25C6.66667 6.48012 6.48012 6.66667 6.25 6.66667C6.01988 6.66667 5.83333 6.48012 5.83333 6.25C5.83333 6.01988 6.01988 5.83333 6.25 5.83333C6.48012 5.83333 6.66667 6.01988 6.66667 6.25ZM14.1667 6.25C14.1667 6.48012 13.9801 6.66667 13.75 6.66667C13.5199 6.66667 13.3333 6.48012 13.3333 6.25C13.3333 6.01988 13.5199 5.83333 13.75 5.83333C13.9801 5.83333 14.1667 6.01988 14.1667 6.25ZM6.66667 13.75C6.66667 13.9801 6.48012 14.1667 6.25 14.1667C6.01988 14.1667 5.83333 13.9801 5.83333 13.75C5.83333 13.5199 6.01988 13.3333 6.25 13.3333C6.48012 13.3333 6.66667 13.5199 6.66667 13.75ZM14.1667 13.75C14.1667 13.9801 13.9801 14.1667 13.75 14.1667C13.5199 14.1667 13.3333 13.9801 13.3333 13.75C13.3333 13.5199 13.5199 13.3333 13.75 13.3333C13.9801 13.3333 14.1667 13.5199 14.1667 13.75ZM11.6667 10C11.6667 10.9205 10.9205 11.6667 10 11.6667C9.07953 11.6667 8.33333 10.9205 8.33333 10C8.33333 9.07953 9.07953 8.33333 10 8.33333C10.9205 8.33333 11.6667 9.07953 11.6667 10Z"
      }));
    }
    function WalletGlyph() {
      return React.createElement("svg", {
        width: "216",
        height: "216",
        viewBox: "0 0 216 216",
        fill: "none",
        stroke: "url(#wallet-glyph-grad)",
        strokeWidth: "14.33",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }, React.createElement("defs", null, React.createElement("linearGradient", {
        id: "wallet-glyph-grad",
        x1: "108",
        y1: "0",
        x2: "108",
        y2: "216",
        gradientUnits: "userSpaceOnUse"
      }, React.createElement("stop", {
        stopColor: "#C2C8FF"
      }), React.createElement("stop", {
        offset: "1",
        stopColor: "#5436F5"
      }))), React.createElement("path", {
        d: "M189 144V180C189 182.387 188.052 184.676 186.364 186.364C184.676 188.052 182.387 189 180 189H45C40.2261 189 35.6477 187.104 32.2721 183.728C28.8964 180.352 27 175.774 27 171V45C27 40.2261 28.8964 35.6477 32.2721 32.2721C35.6477 28.8964 40.2261 27 45 27H162C164.387 27 166.676 27.9482 168.364 29.636C170.052 31.3239 171 33.6131 171 36V63M27 45C27 49.7739 28.8964 54.3523 32.2721 57.7279C35.6477 61.1036 40.2261 63 45 63H180C182.387 63 184.676 63.9482 186.364 65.636C188.052 67.3239 189 69.6131 189 72V108M189 108H162C157.226 108 152.648 109.896 149.272 113.272C145.896 116.648 144 121.226 144 126C144 130.774 145.896 135.352 149.272 138.728C152.648 142.104 157.226 144 162 144H189M189 108C191.387 108 193.676 108.948 195.364 110.636C197.052 112.324 198 114.613 198 117V135C198 137.387 197.052 139.676 195.364 141.364C193.676 143.052 191.387 144 189 144"
      }));
    }
    return {
      ArrowUpRightIcon,
      ArrowLeftIcon,
      ArrowRightIcon,
      ArrowUpDownIcon,
      RefreshIcon,
      CheckIcon,
      CopyIcon,
      InfoIcon,
      FingerprintIcon,
      SwapIcon,
      CodeIcon,
      CoinIcon,
      KeyRoundIcon,
      SpinnerIcon,
      RedoDotIcon,
      WalletIcon,
      UndoIcon,
      VaultIcon,
      WalletGlyph
    };
  })();
  mods.scenarios = (() => {
    const SCENARIOS = [{
      key: "onboarding",
      title: "Fast and frictionless user onboarding.",
      description: "Convert users and grow without the wallet friction that loses users at the door.",
      bullets: ["Convert users and grow.", "Zero seed phrases.", "No gas fees."],
      callout: "Passkey credentials are stored on-device. Rhinestone never sees the private key."
    }, {
      key: "easy-mode",
      title: "Wallet on easy mode",
      description: "Execute transactions on any chain. Let Rhinestone handle crosschain routing, DEX aggregation and gas tokens.",
      bullets: ["Any chain, any token.", "No bridges, no swaps.", "No gas tokens needed."],
      callout: "Base Sepolia to Arbitrum Sepolia. Zero gas tokens used."
    }, {
      key: "nft-buy",
      title: "Wallet on easy mode",
      description: "Execute transactions on any chain. Let Rhinestone handle crosschain routing, DEX aggregation and gas tokens.",
      bullets: ["Cross-chain in one click.", "No manual bridging or swapping.", "Gas paid in the source token."],
      callout: "Minted on Base Sepolia. Zero gas tokens used."
    }, {
      key: "superpowers",
      title: "Unlock superpowers",
      description: "Delegate to agents with onchain policies and permissions that keep the user in full control.",
      bullets: ["Onchain session keys.", "Scoped time, usage, and amount limits.", "Revokable at any moment."],
      callout: "Bot executes with an onchain session key."
    }];
    function demoBrowserTitle(scenario) {
      switch (scenario) {
        case "onboarding":
          return "Demo";
        case "easy-mode":
          return "Trade NVDAnon";
        case "nft-buy":
          return "Holo-Luigi Pikachu";
        case "superpowers":
          return "Policy rules setup";
      }
    }
    return {
      demoBrowserTitle,
      SCENARIOS
    };
  })();
  mods.shared = (() => {
    const {useCallback, useEffect, useRef, useState} = deps.React;
    const {AnimatePresence, motion, useReducedMotion} = deps.motion;
    const {useAuth} = mods.authctx;
    async function resolveIntentTxHash(provider, callsId) {
      for (let attempt = 0; attempt < 6; attempt += 1) {
        try {
          const status = await provider.request({
            method: "wallet_getCallsStatus",
            params: [callsId]
          });
          const hash = status?.receipts?.[0]?.transactionHash;
          if (hash && (/^0x[0-9a-fA-F]{64}$/).test(hash)) return hash;
        } catch {}
        await new Promise(resolve => setTimeout(resolve, 1500));
      }
      return null;
    }
    function transactionExplorerUrl(explorerBase, hash) {
      if (!hash || !(/^0x[0-9a-fA-F]{64}$/).test(hash)) return null;
      return `${explorerBase}/tx/${hash}`;
    }
    const FADE_DURATION = 0.25;
    const FLIP_DURATION = 0.4;
    function DemoPhase({phase, children, flip = false}) {
      const prefersReducedMotion = useReducedMotion();
      const variants = prefersReducedMotion || !flip ? {
        initial: {
          opacity: 0
        },
        animate: {
          opacity: 1
        },
        exit: {
          opacity: 0
        }
      } : {
        initial: {
          rotateY: 90,
          opacity: 0
        },
        animate: {
          rotateY: 0,
          opacity: 1
        },
        exit: {
          rotateY: -90,
          opacity: 0
        }
      };
      const presence = React.createElement(AnimatePresence, {
        mode: "wait",
        initial: false
      }, React.createElement(motion.div, {
        key: phase,
        className: "demo-phase",
        initial: variants.initial,
        animate: variants.animate,
        exit: variants.exit,
        transition: {
          duration: prefersReducedMotion ? 0 : flip ? FLIP_DURATION : FADE_DURATION,
          ease: "easeInOut"
        },
        style: flip ? {
          backfaceVisibility: "hidden",
          transformStyle: "preserve-3d"
        } : void 0
      }, children));
      return flip ? React.createElement("div", {
        className: "demo-phase-flip"
      }, presence) : presence;
    }
    function WalletPill() {
      const {address, isAuthenticated, logout} = useAuth();
      if (!isAuthenticated || !address) return null;
      const short = `${address.slice(0, 6)}\u2026${address.slice(-4)}`;
      return React.createElement("div", {
        className: "wallet-pill wallet-pill-interactive"
      }, React.createElement("span", {
        className: "wallet-pill-dot"
      }), React.createElement("span", {
        className: "wallet-pill-label"
      }, "Test wallet"), React.createElement("span", {
        className: "wallet-pill-address"
      }, short), React.createElement("button", {
        type: "button",
        className: "wallet-pill-disconnect",
        onClick: logout
      }, "Disconnect wallet"));
    }
    const CONNECT_GATE_MS = 600;
    function useConnectGate(onRequireConnect) {
      const {isAuthenticated} = useAuth();
      const [shaking, setShaking] = useState(false);
      const timer = useRef(null);
      useEffect(() => () => {
        if (timer.current !== null) window.clearTimeout(timer.current);
      }, []);
      const gate = useCallback(() => {
        if (isAuthenticated) return false;
        setShaking(true);
        if (timer.current !== null) window.clearTimeout(timer.current);
        timer.current = window.setTimeout(() => {
          setShaking(false);
          onRequireConnect?.();
        }, CONNECT_GATE_MS);
        return true;
      }, [isAuthenticated, onRequireConnect]);
      return {
        shaking,
        gate
      };
    }
    function DemoBrowserHeader({title}) {
      return React.createElement("div", {
        className: "demo-browser-header"
      }, React.createElement("div", {
        className: "demo-browser-dots"
      }, React.createElement("span", {
        className: "demo-browser-dot"
      }), React.createElement("span", {
        className: "demo-browser-dot"
      }), React.createElement("span", {
        className: "demo-browser-dot"
      })), React.createElement("span", {
        className: "demo-browser-title"
      }, title));
    }
    return {
      resolveIntentTxHash,
      transactionExplorerUrl,
      DemoPhase,
      WalletPill,
      useConnectGate,
      DemoBrowserHeader
    };
  })();
  mods.scenarioSuccess = (() => {
    const {motion, useReducedMotion} = deps.motion;
    const {ArrowUpRightIcon, CheckIcon} = mods.icons;
    function ScenarioSuccess({headline, subtitle, txHref, action, onAction, actionDisabled}) {
      const prefersReducedMotion = useReducedMotion();
      return React.createElement("div", {
        className: "scenario-success"
      }, React.createElement(motion.div, {
        className: "success-circle success-circle-lg",
        initial: prefersReducedMotion ? false : {
          scale: 0.4,
          opacity: 0
        },
        animate: {
          scale: 1,
          opacity: 1
        },
        transition: {
          type: "spring",
          stiffness: 380,
          damping: 16,
          delay: 0.08
        }
      }, React.createElement(motion.span, {
        style: {
          display: "inline-flex"
        },
        initial: prefersReducedMotion ? false : {
          scale: 0.3,
          opacity: 0
        },
        animate: {
          scale: 1,
          opacity: 1
        },
        transition: {
          delay: 0.22,
          type: "spring",
          stiffness: 500,
          damping: 20
        }
      }, React.createElement(CheckIcon, {
        size: 32
      }))), React.createElement("div", {
        className: "scenario-success-text"
      }, React.createElement("p", {
        className: "demo-heading-lg"
      }, headline), txHref ? React.createElement("a", {
        className: "scenario-success-tx",
        href: txHref,
        target: "_blank",
        rel: "noreferrer"
      }, "View transaction", React.createElement(ArrowUpRightIcon, {
        size: 16
      })) : subtitle ? React.createElement("p", {
        className: "demo-onboarding-sub"
      }, subtitle) : null), React.createElement("button", {
        className: "primary-pill",
        onClick: onAction,
        disabled: actionDisabled
      }, action));
    }
    return {
      ScenarioSuccess
    };
  })();
  mods.swapTokensCard = (() => {
    const {MUSD_ICON_DATA_URL, NVDA_ICON_DATA_URL} = mods.constants;
    const {ArrowUpDownIcon, SpinnerIcon} = mods.icons;
    function SwapTokensCard({sellAmount, buyAmount, minting, onSwap}) {
      return React.createElement("div", {
        className: "demo-swap"
      }, React.createElement("p", {
        className: "demo-swap-title"
      }, "Swap tokens"), React.createElement("div", {
        className: "demo-swap-tiles"
      }, React.createElement("div", {
        className: "demo-swap-tile"
      }, React.createElement("span", {
        className: "demo-swap-tile-label"
      }, "Sell"), React.createElement("div", {
        className: "demo-swap-tile-row"
      }, React.createElement("span", {
        className: "demo-swap-amount"
      }, sellAmount), React.createElement("span", {
        className: "demo-swap-token"
      }, React.createElement("img", {
        src: MUSD_ICON_DATA_URL,
        alt: "",
        width: 20,
        height: 20
      }), "MUSD"))), React.createElement("div", {
        className: "demo-swap-tile"
      }, React.createElement("span", {
        className: "demo-swap-tile-label"
      }, "Buy"), React.createElement("div", {
        className: "demo-swap-tile-row"
      }, React.createElement("span", {
        className: "demo-swap-amount"
      }, buyAmount), React.createElement("span", {
        className: "demo-swap-token"
      }, React.createElement("img", {
        src: NVDA_ICON_DATA_URL,
        alt: "",
        width: 20,
        height: 20
      }), "NVDAnon"))), React.createElement("span", {
        className: "demo-swap-toggle",
        "aria-hidden": true
      }, React.createElement(ArrowUpDownIcon, {
        size: 20
      }))), React.createElement("button", {
        className: "primary-pill demo-swap-cta",
        onClick: onSwap,
        disabled: minting
      }, minting ? React.createElement(React.Fragment, null, React.createElement("span", {
        className: "demo-swap-spinner"
      }, React.createElement(SpinnerIcon, {
        size: 16
      })), "Processing\u2026") : "Swap"));
    }
    return {
      SwapTokensCard
    };
  })();
  mods.waitForHeadlessIntent = (() => {
    const DEFAULT_POLL_ATTEMPTS = 8;
    const DEFAULT_POLL_INTERVAL_MS = 2500;
    const SUCCESS_STATUSES = {
      preconfirmed: true,
      filled: true,
      completed: true
    };
    async function waitForHeadlessIntent(client, submitted, polling = {}) {
      if (submitted.transactionHash) return submitted;
      const attempts = polling.attempts ?? DEFAULT_POLL_ATTEMPTS;
      const intervalMs = polling.intervalMs ?? DEFAULT_POLL_INTERVAL_MS;
      let latestStatus = submitted.status;
      let latestHash;
      for (let attempt = 0; !latestHash && attempt < attempts; attempt += 1) {
        const {promise, resolve} = Promise.withResolvers();
        setTimeout(resolve, intervalMs);
        await promise;
        const statusResult = await client.getIntentStatus(submitted.intentId);
        latestStatus = statusResult.status;
        latestHash = statusResult.transactionHash;
        if (SUCCESS_STATUSES[latestStatus.toLowerCase()]) break;
      }
      if (!latestHash && !SUCCESS_STATUSES[latestStatus.toLowerCase()]) {
        throw new Error(latestStatus.toLowerCase() === "failed" ? "Headless intent failed before completion" : `Headless intent did not complete after ${attempts} status checks`);
      }
      return {
        ...submitted,
        status: latestStatus,
        transactionHash: latestHash
      };
    }
    return {
      waitForHeadlessIntent
    };
  })();
  mods.grantPermissionScope = (() => {
    const {createCrossChainPermission, definePermissions} = deps.sdk;
    const {parseUnits} = deps.viem;
    const {arbitrumSepolia, baseSepolia} = deps.viemChains;
    const {ARB_SEPOLIA_CHAIN_ID, BASE_SEPOLIA_CHAIN_ID, MOCK_SWAP_ADDRESS, MOCK_USD_ADDRESS, USDC_ARB_SEPOLIA_ADDRESS, erc20Abi, mockSwapAbi} = mods.constants;
    const GRANT_PERMISSION_CHAIN_ID = BASE_SEPOLIA_CHAIN_ID;
    const GRANT_PERMISSION_MINT_AMOUNT = parseUnits("0.1", 6);
    const GRANT_PERMISSION_USAGE_LIMIT = 25;
    function buildGrantPermissionScope(accountAddress, nowSeconds = Math.floor(Date.now() / 1e3)) {
      const validUntil = nowSeconds + 24 * 60 * 60;
      const validUntilDate = new Date(validUntil * 1e3);
      const validAfterDate = new Date(nowSeconds * 1e3);
      const permissions = definePermissions({
        address: MOCK_USD_ADDRESS,
        name: "mUSD",
        abi: erc20Abi,
        functions: {
          mint: {
            maxUses: BigInt(GRANT_PERMISSION_USAGE_LIMIT),
            validUntil: validUntilDate,
            validAfter: validAfterDate,
            params: {
              to: {
                condition: "equal",
                value: accountAddress
              },
              amount: {
                condition: "equal",
                value: GRANT_PERMISSION_MINT_AMOUNT
              }
            }
          }
        }
      });
      return {
        ...permissions,
        validUntil,
        validAfter: nowSeconds,
        maxUses: GRANT_PERMISSION_USAGE_LIMIT
      };
    }
    const NVDANON_GRANT_CHAIN_ID = ARB_SEPOLIA_CHAIN_ID;
    const NVDANON_SOURCE_CHAIN_ID = BASE_SEPOLIA_CHAIN_ID;
    const NVDANON_USDC_PER_BUY = parseUnits("0.1", 6);
    const NVDANON_USAGE_LIMIT = 25;
    const NVDANON_TIME_LIMIT_MINUTES = 60;
    function buildNvdanonGrantScope(accountAddress, nowSeconds = Math.floor(Date.now() / 1e3), config = {}) {
      const timeLimitMinutes = config.timeLimitMinutes ?? NVDANON_TIME_LIMIT_MINUTES;
      const usageLimit = config.usageLimit ?? NVDANON_USAGE_LIMIT;
      const usdcPerBuy = config.usdcPerBuy ?? NVDANON_USDC_PER_BUY;
      const validUntil = nowSeconds + timeLimitMinutes * 60;
      const validUntilDate = new Date(validUntil * 1e3);
      const validAfterDate = new Date(nowSeconds * 1e3);
      const maxUses = BigInt(usageLimit);
      const usdcAddress = USDC_ARB_SEPOLIA_ADDRESS;
      const approve = definePermissions({
        address: usdcAddress,
        name: "USDC",
        abi: erc20Abi,
        functions: {
          approve: {
            maxUses,
            validUntil: validUntilDate,
            validAfter: validAfterDate,
            params: {
              spender: {
                condition: "equal",
                value: MOCK_SWAP_ADDRESS
              },
              amount: {
                condition: "equal",
                value: usdcPerBuy
              }
            }
          }
        }
      });
      const swap = definePermissions({
        address: MOCK_SWAP_ADDRESS,
        name: "RWASwap",
        abi: mockSwapAbi,
        functions: {
          swap: {
            maxUses,
            validUntil: validUntilDate,
            validAfter: validAfterDate,
            params: {
              usdcIn: {
                condition: "equal",
                value: usdcPerBuy
              },
              recipient: {
                condition: "equal",
                value: accountAddress
              }
            }
          }
        }
      });
      const bridge = createCrossChainPermission({
        from: {
          chain: baseSepolia,
          token: MOCK_USD_ADDRESS,
          maxAmount: usdcPerBuy
        },
        to: {
          chain: arbitrumSepolia,
          token: usdcAddress,
          recipient: accountAddress
        },
        validUntil: BigInt(validUntil),
        validAfter: BigInt(nowSeconds),
        settlementLayers: ["ACROSS"]
      });
      return {
        permissions: [...approve.permissions, ...swap.permissions],
        crossChainPermits: [bridge],
        contracts: [...approve.contracts, ...swap.contracts],
        validUntil,
        validAfter: nowSeconds,
        maxUses: usageLimit,
        usdcAddress
      };
    }
    function shortHex(value, prefix = 6, suffix = 4) {
      if (!value) return "";
      if (value.length <= prefix + suffix + 3) return value;
      return `${value.slice(0, prefix)}...${value.slice(-suffix)}`;
    }
    function baseSepoliaTxUrl(hash) {
      if (!hash || !(/^0x[0-9a-fA-F]{64}$/).test(hash)) return null;
      return `https://sepolia.basescan.org/tx/${hash}`;
    }
    function arbSepoliaTxUrl(hash) {
      if (!hash || !(/^0x[0-9a-fA-F]{64}$/).test(hash)) return null;
      return `https://sepolia.arbiscan.io/tx/${hash}`;
    }
    function asAddress(value) {
      return value?.startsWith("0x") && value.length === 42 ? value : void 0;
    }
    return {
      buildGrantPermissionScope,
      buildNvdanonGrantScope,
      shortHex,
      baseSepoliaTxUrl,
      arbSepoliaTxUrl,
      asAddress,
      GRANT_PERMISSION_CHAIN_ID,
      GRANT_PERMISSION_MINT_AMOUNT,
      GRANT_PERMISSION_USAGE_LIMIT,
      NVDANON_GRANT_CHAIN_ID,
      NVDANON_SOURCE_CHAIN_ID,
      NVDANON_USDC_PER_BUY,
      NVDANON_USAGE_LIMIT,
      NVDANON_TIME_LIMIT_MINUTES
    };
  })();
  mods.grantPermissionDemo = (() => {
    const {useCallback, useEffect, useMemo, useRef, useState} = deps.React;
    const {encodeFunctionData, formatUnits} = deps.viem;
    const {generatePrivateKey, privateKeyToAccount} = deps.viemAccounts;
    const {buildSmartSessionHeadlessSignatures, OneAuthHeadlessClient} = deps.sdkHeadless;
    const {waitForHeadlessIntent} = mods.waitForHeadlessIntent;
    const {DOCS_APP_ORIGIN_STORAGE_KEY, useAuth} = mods.authctx;
    const {MOCK_SWAP_ADDRESS, MOCK_USD_ADDRESS, USDC_ARB_SEPOLIA_ADDRESS, erc20Abi, mockSwapAbi} = mods.constants;
    const {GRANT_PERMISSION_CHAIN_ID, GRANT_PERMISSION_MINT_AMOUNT, GRANT_PERMISSION_USAGE_LIMIT, NVDANON_GRANT_CHAIN_ID, NVDANON_SOURCE_CHAIN_ID, NVDANON_USDC_PER_BUY, asAddress, baseSepoliaTxUrl, buildGrantPermissionScope, buildNvdanonGrantScope, shortHex} = mods.grantPermissionScope;
    const GRANT_PERMISSION_STORAGE_KEY = {
      "mockusd-mint": "1auth:docs:grant-permission-demo:v2",
      "nvdanon-swap": "1auth:docs:grant-permission-demo:nvdanon:v2"
    };
    function readStoredAccountAddress() {
      if (typeof window === "undefined") return void 0;
      try {
        const saved = localStorage.getItem(DOCS_APP_ORIGIN_STORAGE_KEY);
        if (!saved) return void 0;
        const parsed = JSON.parse(saved);
        return asAddress(parsed.address ?? parsed.accountAddress);
      } catch {
        return void 0;
      }
    }
    function stringifyGrantStorage(value) {
      return JSON.stringify(value, (_key, entry) => typeof entry === "bigint" ? entry.toString() : entry);
    }
    function readStoredGrantDemo(storageKey, activeAccountAddress) {
      if (typeof window === "undefined") return null;
      try {
        const saved = sessionStorage.getItem(storageKey);
        if (!saved) return null;
        const parsed = JSON.parse(saved);
        const sessionKeyAddress = asAddress(parsed.sessionKeyAddress);
        const accountAddress = asAddress(parsed.accountAddress);
        const sessionPrivateKey = parsed.sessionPrivateKey;
        if (!sessionKeyAddress || !sessionPrivateKey?.startsWith("0x")) {
          sessionStorage.removeItem(storageKey);
          return null;
        }
        if (activeAccountAddress && accountAddress && accountAddress.toLowerCase() !== activeAccountAddress.toLowerCase()) {
          return null;
        }
        return {
          accountAddress,
          sessionPrivateKey,
          sessionKeyAddress,
          result: parsed.result,
          mintResult: parsed.mintResult,
          usdcPerBuy: parsed.usdcPerBuy != null ? BigInt(parsed.usdcPerBuy) : void 0,
          savedAt: parsed.savedAt ?? Date.now()
        };
      } catch {
        sessionStorage.removeItem(storageKey);
        return null;
      }
    }
    function writeStoredGrantDemo(storageKey, value) {
      if (typeof window === "undefined") return;
      sessionStorage.setItem(storageKey, stringifyGrantStorage(value));
    }
    function clearStoredGrantDemo(storageKey) {
      if (typeof window === "undefined") return;
      sessionStorage.removeItem(storageKey);
    }
    function isCanceledGrant(result) {
      const text = `${result.error?.code ?? ""} ${result.error?.message ?? ""}`.toLowerCase();
      return text.includes("cancel") || text.includes("reject") || text.includes("dismiss");
    }
    function hasGrantChainCoverage(result, targetChainIds) {
      const handle = result?.sessionKeyHandle;
      if (!result?.success || !handle) return false;
      const chainIds = new Set(handle.chainIds ?? [handle.chainId]);
      return targetChainIds.every(chainId => {
        if (!chainIds.has(chainId)) return false;
        return targetChainIds.length === 1 || !!handle.permissionIdsByChain?.[chainId];
      });
    }
    function isStoredGrantCompatible(stored, targetChainIds) {
      return !stored.result?.success || hasGrantChainCoverage(stored.result, targetChainIds);
    }
    function buildMockUsdPrepareOptions(accountAddress) {
      return {
        targetChain: GRANT_PERMISSION_CHAIN_ID,
        calls: [{
          to: MOCK_USD_ADDRESS,
          data: encodeFunctionData({
            abi: erc20Abi,
            functionName: "mint",
            args: [accountAddress, GRANT_PERMISSION_MINT_AMOUNT]
          }),
          label: "Mint mUSD",
          sublabel: "0.1 mUSD to your account"
        }]
      };
    }
    function buildNvdanonPrepareOptions(accountAddress, usdcPerBuy = NVDANON_USDC_PER_BUY) {
      const usdcAddress = USDC_ARB_SEPOLIA_ADDRESS;
      const usdcLabel = `${formatUnits(usdcPerBuy, 6)} USDC`;
      return {
        targetChain: NVDANON_GRANT_CHAIN_ID,
        calls: [{
          to: usdcAddress,
          data: encodeFunctionData({
            abi: erc20Abi,
            functionName: "approve",
            args: [MOCK_SWAP_ADDRESS, usdcPerBuy]
          }),
          label: "Approve USDC",
          sublabel: `${usdcLabel} to RWASwap`
        }, {
          to: MOCK_SWAP_ADDRESS,
          data: encodeFunctionData({
            abi: mockSwapAbi,
            functionName: "swap",
            args: [usdcPerBuy, 0n, accountAddress]
          }),
          label: "Buy NVDAnon",
          sublabel: `${usdcLabel} \u2192 NVDAnon`
        }],
        tokenRequests: [{
          token: usdcAddress,
          amount: usdcPerBuy
        }],
        sourceAssets: [MOCK_USD_ADDRESS],
        sourceChainId: NVDANON_SOURCE_CHAIN_ID
      };
    }
    function useGrantPermissionFlow(options = {}) {
      const variant = options.variant ?? "mockusd-mint";
      const enabled = options.enabled ?? true;
      const storageKey = GRANT_PERMISSION_STORAGE_KEY[variant];
      const {client, login, isAuthenticated, address, sponsorship} = useAuth();
      const sessionPrivateKeyRef = useRef(null);
      const grantUsdcPerBuyRef = useRef(NVDANON_USDC_PER_BUY);
      const [sessionKeyAddress, setSessionKeyAddress] = useState(null);
      const [status, setStatus] = useState("idle");
      const [result, setResult] = useState(null);
      const [mintStatus, setMintStatus] = useState("idle");
      const [mintResult, setMintResult] = useState(null);
      const [error, setError] = useState(null);
      const [mintError, setMintError] = useState(null);
      const targetChainIds = useMemo(() => variant === "nvdanon-swap" ? [NVDANON_GRANT_CHAIN_ID] : [GRANT_PERMISSION_CHAIN_ID], [variant]);
      const sourceChainIds = useMemo(() => variant === "nvdanon-swap" ? [NVDANON_SOURCE_CHAIN_ID] : [], [variant]);
      const requiredSessionChainIds = useMemo(() => Array.from(new Set([...targetChainIds, ...sourceChainIds])), [sourceChainIds, targetChainIds]);
      const generateSessionKey = useCallback(() => {
        const privateKey = generatePrivateKey();
        const account = privateKeyToAccount(privateKey);
        const activeAccountAddress = asAddress(address) ?? readStoredAccountAddress();
        sessionPrivateKeyRef.current = privateKey;
        setSessionKeyAddress(account.address);
        setResult(null);
        setError(null);
        setMintResult(null);
        setMintError(null);
        setMintStatus("idle");
        setStatus("ready");
        writeStoredGrantDemo(storageKey, {
          accountAddress: activeAccountAddress,
          sessionPrivateKey: privateKey,
          sessionKeyAddress: account.address,
          savedAt: Date.now()
        });
        return account.address;
      }, [address, storageKey]);
      const reset = useCallback(() => {
        clearStoredGrantDemo(storageKey);
        generateSessionKey();
      }, [generateSessionKey, storageKey]);
      const resetMint = useCallback(() => {
        setMintStatus("idle");
        setMintResult(null);
        setMintError(null);
      }, []);
      const grantPermission = useCallback(async config => {
        setStatus("granting");
        setError(null);
        setResult(null);
        setMintResult(null);
        setMintError(null);
        setMintStatus("idle");
        try {
          let activeAccountAddress = asAddress(address);
          if (!activeAccountAddress) {
            activeAccountAddress = await login() ?? void 0;
          }
          if (!activeAccountAddress) {
            throw new Error("Sign in before granting a session permission.");
          }
          const activeSessionKey = sessionKeyAddress ?? generateSessionKey();
          grantUsdcPerBuyRef.current = config?.usdcPerBuy ?? NVDANON_USDC_PER_BUY;
          const permissions = variant === "nvdanon-swap" ? buildNvdanonGrantScope(activeAccountAddress, void 0, config) : buildGrantPermissionScope(activeAccountAddress);
          const grantResult = await client.grantPermissions({
            accountAddress: activeAccountAddress,
            targetChains: targetChainIds,
            sourceChains: sourceChainIds,
            sessionKeyAddress: activeSessionKey,
            ...permissions
          });
          setResult(grantResult);
          if (grantResult.success) {
            writeStoredGrantDemo(storageKey, {
              accountAddress: activeAccountAddress,
              sessionPrivateKey: sessionPrivateKeyRef.current,
              sessionKeyAddress: activeSessionKey,
              result: grantResult,
              usdcPerBuy: grantUsdcPerBuyRef.current,
              savedAt: Date.now()
            });
            setStatus("granted");
            return;
          }
          if (isCanceledGrant(grantResult)) {
            setStatus("canceled");
            return;
          }
          setStatus("error");
          setError(grantResult.error?.message ?? "Permission grant failed");
        } catch (err) {
          setStatus("error");
          setError(err instanceof Error ? err.message : "Permission grant failed");
        }
      }, [address, client, generateSessionKey, login, sessionKeyAddress, sourceChainIds, storageKey, targetChainIds, variant]);
      const mintWithoutSignature = useCallback(async () => {
        const grantHandle = result?.sessionKeyHandle;
        const privateKey = sessionPrivateKeyRef.current;
        const activeAccountAddress = asAddress(address) ?? readStoredAccountAddress();
        if (!result?.success || !grantHandle || !privateKey || !activeAccountAddress || !hasGrantChainCoverage(result, requiredSessionChainIds)) {
          setMintStatus("error");
          setMintError(variant === "nvdanon-swap" ? "Grant the NVDAnon buy permission before swapping headlessly." : "Grant the mUSD mint permission before minting headlessly.");
          return;
        }
        setMintStatus("minting");
        setMintError(null);
        setMintResult(null);
        try {
          const headlessClient = new OneAuthHeadlessClient({
            providerUrl: client.getProviderUrl(),
            clientId: client.getClientId(),
            webauthn: client.getWebAuthnMode() === "app_origin" ? {
              mode: "app_origin",
              ...client.getWebAuthnRpId() ? {
                rpId: client.getWebAuthnRpId()
              } : {}
            } : {
              mode: "experimental_cross_origin"
            },
            sponsorship
          });
          const prepareOptions = variant === "nvdanon-swap" ? buildNvdanonPrepareOptions(activeAccountAddress, grantUsdcPerBuyRef.current) : buildMockUsdPrepareOptions(activeAccountAddress);
          const prepared = await headlessClient.prepareIntent({
            accountAddress: activeAccountAddress,
            sessionKeyHandle: grantHandle,
            ...prepareOptions
          });
          const signatures = await buildSmartSessionHeadlessSignatures({
            privateKey,
            accountAddress: prepared.accountAddress,
            sessionKeyHandle: grantHandle,
            prepared
          });
          const submitted = await headlessClient.submitIntent({
            intentOp: prepared.intentOp,
            digestResult: prepared.digestResult,
            binding: prepared.binding,
            accountAddress: prepared.accountAddress,
            targetChain: prepared.targetChain,
            calls: prepared.calls,
            expiresAt: prepared.expiresAt,
            sponsorshipMode: prepared.sponsorshipMode ?? "self-funded",
            ...signatures
          });
          const completed = await waitForHeadlessIntent(headlessClient, submitted);
          setMintResult(completed);
          writeStoredGrantDemo(storageKey, {
            accountAddress: activeAccountAddress,
            sessionPrivateKey: privateKey,
            sessionKeyAddress: grantHandle.sessionKeyAddress,
            result,
            mintResult: completed,
            usdcPerBuy: grantUsdcPerBuyRef.current,
            savedAt: Date.now()
          });
          setMintStatus("minted");
        } catch (err) {
          setMintStatus("error");
          setMintError(err instanceof Error ? err.message : variant === "nvdanon-swap" ? "Headless NVDAnon buy failed" : "Headless mint failed");
        }
      }, [address, client, requiredSessionChainIds, result, sponsorship, storageKey, variant]);
      useEffect(() => {
        if (!enabled) return;
        if (sessionKeyAddress) return;
        const activeAccountAddress = asAddress(address) ?? readStoredAccountAddress();
        const stored = readStoredGrantDemo(storageKey, activeAccountAddress);
        if (stored && isStoredGrantCompatible(stored, requiredSessionChainIds)) {
          sessionPrivateKeyRef.current = stored.sessionPrivateKey;
          if (stored.usdcPerBuy != null) grantUsdcPerBuyRef.current = stored.usdcPerBuy;
          setSessionKeyAddress(stored.sessionKeyAddress);
          setResult(stored.result ?? null);
          setMintResult(stored.mintResult ?? null);
          setMintStatus(stored.mintResult ? "minted" : "idle");
          setStatus(stored.result?.success ? "granted" : "ready");
          return;
        }
        if (stored) {
          clearStoredGrantDemo(storageKey);
        }
        generateSessionKey();
      }, [address, enabled, generateSessionKey, requiredSessionChainIds, sessionKeyAddress, storageKey]);
      useEffect(() => {
        const activeAccountAddress = asAddress(address);
        if (!activeAccountAddress) return;
        const stored = readStoredGrantDemo(storageKey);
        if (stored?.accountAddress && stored.accountAddress.toLowerCase() !== activeAccountAddress.toLowerCase()) {
          clearStoredGrantDemo(storageKey);
          sessionPrivateKeyRef.current = null;
          setSessionKeyAddress(null);
          setResult(null);
          setMintResult(null);
          setMintStatus("idle");
          setError(null);
          setMintError(null);
          setStatus("idle");
        }
      }, [address, storageKey]);
      return {
        isAuthenticated,
        sessionKeyAddress,
        status,
        result,
        mintStatus,
        mintResult,
        error,
        mintError,
        generateSessionKey,
        grantPermission,
        mintWithoutSignature,
        resetMint,
        reset
      };
    }
    function GrantPermissionDemo() {
      const flow = useGrantPermissionFlow();
      const isBusy = flow.status === "granting";
      const mintTxUrl = baseSepoliaTxUrl(flow.mintResult?.transactionHash);
      const statusTone = flow.status === "granted" ? "success" : flow.status === "error" || flow.status === "canceled" ? "error" : "neutral";
      return React.createElement("div", {
        className: "demo-container grant-demo"
      }, React.createElement("div", {
        className: "grant-demo-header"
      }, React.createElement("div", null, React.createElement("p", {
        className: "grant-demo-eyebrow"
      }, "SmartSession permission"), React.createElement("h3", {
        className: "grant-demo-title"
      }, "Grant scoped mUSD minting")), React.createElement("span", {
        className: `grant-demo-pill grant-demo-pill-${statusTone}`
      }, flow.status === "granting" ? "Granting" : flow.status === "granted" ? "Granted" : flow.status === "canceled" ? "Canceled" : flow.status === "error" ? "Needs attention" : "Ready")), React.createElement("div", {
        className: "grant-demo-scope",
        "aria-label": "Permission scope"
      }, React.createElement("div", null, React.createElement("span", null, "Contract"), React.createElement("strong", null, "mUSD")), React.createElement("div", null, React.createElement("span", null, "Action"), React.createElement("strong", null, "mint")), React.createElement("div", null, React.createElement("span", null, "Amount"), React.createElement("strong", null, "0.1 mUSD")), React.createElement("div", null, React.createElement("span", null, "Recipient"), React.createElement("strong", null, "Account")), React.createElement("div", null, React.createElement("span", null, "Uses"), React.createElement("strong", null, GRANT_PERMISSION_USAGE_LIMIT))), React.createElement("div", {
        className: "grant-demo-row"
      }, React.createElement("div", null, React.createElement("p", {
        className: "grant-demo-label"
      }, "Session key"), React.createElement("p", {
        className: "grant-demo-mono"
      }, flow.sessionKeyAddress ? shortHex(flow.sessionKeyAddress, 8, 6) : "Generating...")), React.createElement("button", {
        type: "button",
        className: "demo-button-secondary grant-demo-secondary",
        onClick: flow.generateSessionKey,
        disabled: isBusy
      }, "New key")), React.createElement("button", {
        type: "button",
        className: "demo-button grant-demo-primary",
        onClick: () => flow.grantPermission(),
        disabled: isBusy || !flow.sessionKeyAddress
      }, isBusy ? "Opening permission review..." : flow.isAuthenticated ? "Grant permission" : "Sign in to grant permission"), React.createElement("p", {
        className: "grant-demo-footnote"
      }, "This demo sends only the public session-key address to Rhinestone. The private key is stored in this tab's sessionStorage so the guide can survive a reload."), flow.result?.success && React.createElement("div", {
        className: "demo-result demo-result-success grant-demo-result"
      }, React.createElement("p", {
        className: "demo-result-label"
      }, "Grant result"), React.createElement("dl", {
        className: "grant-demo-result-grid"
      }, React.createElement("div", null, React.createElement("dt", null, "Grant ID"), React.createElement("dd", null, flow.result.grantId ?? "Created")), React.createElement("div", null, React.createElement("dt", null, "Permission ID"), React.createElement("dd", null, shortHex(flow.result.permissionId ?? flow.result.sessionKeyHandle?.permissionId, 10, 8))), React.createElement("div", null, React.createElement("dt", null, "Chain"), React.createElement("dd", null, GRANT_PERMISSION_CHAIN_ID)), React.createElement("div", null, React.createElement("dt", null, "Status"), React.createElement("dd", null, (flow.result.status ?? flow.result.chainResults?.[0]?.status) ?? "enabled")), (flow.result.transactionHash || flow.result.chainResults?.[0]?.transactionHash) && React.createElement("div", null, React.createElement("dt", null, "Transaction"), React.createElement("dd", null, shortHex(flow.result.transactionHash ?? flow.result.chainResults?.[0]?.transactionHash, 10, 8))))), flow.result?.success && React.createElement("div", {
        className: "grant-demo-mint-panel"
      }, React.createElement("div", null, React.createElement("p", {
        className: "grant-demo-mint-title"
      }, "Mint with session key"), React.createElement("p", {
        className: "grant-demo-mint-copy"
      }, "No new user signature. The SmartSession permission enforces 0.1 mUSD to this account.")), React.createElement("button", {
        type: "button",
        className: "demo-button grant-demo-primary",
        onClick: flow.mintWithoutSignature,
        disabled: flow.mintStatus === "minting"
      }, flow.mintStatus === "minting" ? "Minting..." : "Mint 0.1 mUSD")), flow.mintResult && React.createElement("div", {
        className: "demo-result demo-result-success grant-demo-result"
      }, React.createElement("p", {
        className: "demo-result-label"
      }, "Headless mint"), React.createElement("dl", {
        className: "grant-demo-result-grid"
      }, React.createElement("div", null, React.createElement("dt", null, "Intent"), React.createElement("dd", null, shortHex(flow.mintResult.intentId, 10, 8))), React.createElement("div", null, React.createElement("dt", null, "Status"), React.createElement("dd", null, flow.mintResult.status)), flow.mintResult.transactionHash ? React.createElement("div", null, React.createElement("dt", null, "Transaction"), React.createElement("dd", null, mintTxUrl ? React.createElement("a", {
        className: "grant-demo-tx-link",
        href: mintTxUrl,
        target: "_blank",
        rel: "noreferrer"
      }, shortHex(flow.mintResult.transactionHash, 10, 8)) : shortHex(flow.mintResult.transactionHash, 10, 8))) : React.createElement("div", null, React.createElement("dt", null, "Transaction"), React.createElement("dd", null, "Confirmed; explorer hash pending")))), (flow.error || flow.status === "canceled") && React.createElement("div", {
        className: "demo-result demo-result-error grant-demo-result"
      }, React.createElement("p", {
        className: "demo-result-label"
      }, flow.status === "canceled" ? "Canceled" : "Error"), React.createElement("p", {
        className: "demo-result-value"
      }, flow.status === "canceled" ? "Permission grant was canceled before completion." : flow.error)), flow.mintError && React.createElement("div", {
        className: "demo-result demo-result-error grant-demo-result"
      }, React.createElement("p", {
        className: "demo-result-label"
      }, "Headless mint failed"), React.createElement("p", {
        className: "demo-result-value"
      }, flow.mintError)));
    }
    return {
      useGrantPermissionFlow,
      GrantPermissionDemo
    };
  })();
  mods.onboarding = (() => {
    const {useCallback, useState} = deps.React;
    const {encodeFunctionData, parseUnits} = deps.viem;
    const {useAuth} = mods.authctx;
    const {BASE_SEPOLIA_CHAIN_ID, MOCK_USD_ADDRESS, MUSD_ICON_DATA_URL, erc20Abi} = mods.constants;
    const {ArrowRightIcon, CheckIcon, CoinIcon, FingerprintIcon, WalletGlyph} = mods.icons;
    const {DemoPhase, transactionExplorerUrl} = mods.shared;
    const {ScenarioSuccess} = mods.scenarioSuccess;
    const BASE_SEPOLIA_EXPLORER = "https://sepolia.basescan.org";
    function OnboardingDemo({onComplete, onBeforeDialog, onNext}) {
      const {isAuthenticated, address, login, client} = useAuth();
      const [pending, setPending] = useState(false);
      const [claiming, setClaiming] = useState(false);
      const [claimed, setClaimed] = useState(false);
      const [txHash, setTxHash] = useState(null);
      const [error, setError] = useState(null);
      const handleLogin = useCallback(async () => {
        if (pending) return;
        setPending(true);
        try {
          await onBeforeDialog();
          await login();
        } catch {} finally {
          setPending(false);
        }
      }, [login, onBeforeDialog, pending]);
      const handleClaim = useCallback(async () => {
        if (claiming || claimed) return;
        setClaiming(true);
        setError(null);
        try {
          await onBeforeDialog();
          if (!address) throw new Error("Connect the docs app-origin wallet first");
          const mintData = encodeFunctionData({
            abi: erc20Abi,
            functionName: "mint",
            args: [address, parseUnits("1", 6)]
          });
          const result = await client.sendIntent({
            accountAddress: address,
            targetChain: BASE_SEPOLIA_CHAIN_ID,
            sourceChainId: BASE_SEPOLIA_CHAIN_ID,
            calls: [{
              to: MOCK_USD_ADDRESS,
              data: mintData,
              icon: MUSD_ICON_DATA_URL,
              abi: erc20Abi,
              label: "Claim mUSD",
              sublabel: "Mint test token"
            }],
            sponsorshipMode: "required",
            closeOn: "completed"
          });
          if (!result.success) throw new Error(result.error?.message ?? "Claim failed");
          setClaimed(true);
          onComplete();
          if (result.transactionHash) setTxHash(result.transactionHash);
        } catch (err) {
          if (err instanceof Error && !err.message.includes("rejected")) {
            setError(err.message);
          }
        } finally {
          setClaiming(false);
        }
      }, [address, client, claiming, claimed, onBeforeDialog, onComplete]);
      const phase = claimed ? "received" : isAuthenticated ? "ready" : "create";
      return React.createElement(DemoPhase, {
        phase
      }, claimed ? React.createElement(ScenarioSuccess, {
        headline: "You received 1 mUSD",
        txHref: transactionExplorerUrl(BASE_SEPOLIA_EXPLORER, txHash),
        action: React.createElement(React.Fragment, null, "Next", React.createElement(ArrowRightIcon, {
          size: 18
        })),
        onAction: () => onNext?.()
      }) : isAuthenticated ? React.createElement("div", {
        className: "demo-onboarding demo-onboarding-success"
      }, React.createElement("div", {
        className: "success-circle success-circle-lg"
      }, React.createElement(CheckIcon, {
        size: 32
      })), React.createElement("div", {
        className: "demo-onboarding-success-text"
      }, React.createElement("p", {
        className: "demo-heading-lg"
      }, "Your wallet is ready"), React.createElement("p", {
        className: "demo-onboarding-sub"
      }, "You can now use it for this demo")), React.createElement("button", {
        className: "primary-pill",
        onClick: handleClaim,
        disabled: claiming
      }, claiming ? "Claiming\u2026" : React.createElement(React.Fragment, null, React.createElement(CoinIcon, {
        size: 18
      }), "Claim some USD token")), error && React.createElement("p", {
        className: "demo-error"
      }, error)) : React.createElement("div", {
        className: "demo-onboarding"
      }, React.createElement("div", {
        className: "demo-onboarding-intro"
      }, React.createElement("div", {
        className: "demo-onboarding-art"
      }, React.createElement(WalletGlyph, null)), React.createElement("div", {
        className: "demo-onboarding-intro-text"
      }, React.createElement("p", {
        className: "demo-heading-lg"
      }, "Create a wallet"), React.createElement("p", {
        className: "demo-onboarding-sub"
      }, "A passkey creates a self-custodial smart account. Your keys stay on your device. Always."))), React.createElement("div", {
        className: "demo-onboarding-foot"
      }, React.createElement("button", {
        className: "primary-pill",
        onClick: handleLogin,
        disabled: pending
      }, React.createElement(FingerprintIcon, {
        size: 20
      }), pending ? "Check passkey prompt\u2026" : "Continue with passkey"))));
    }
    return {
      OnboardingDemo
    };
  })();
  mods.easyMode = (() => {
    const {useCallback, useEffect, useState} = deps.React;
    const {createPasskeyWalletClient} = deps.sdk;
    const {encodeFunctionData, http, parseUnits} = deps.viem;
    const {arbitrumSepolia} = deps.viemChains;
    const {useAuth} = mods.authctx;
    const {DOCS_DIALOG_THEME, DOCS_APP_ORIGIN_CLIENT_ID, docsAppOriginWebAuthn, ARB_SEPOLIA_CHAIN_ID, BASE_SEPOLIA_CHAIN_ID, MOCK_SWAP_ADDRESS, MOCK_USD_ADDRESS, NVDA_ICON_DATA_URL, USDC_ARB_SEPOLIA_ADDRESS, erc20Abi, mockSwapAbi} = mods.constants;
    const {ArrowRightIcon} = mods.icons;
    const {transactionExplorerUrl, useConnectGate} = mods.shared;
    const {ScenarioSuccess} = mods.scenarioSuccess;
    const ARB_SEPOLIA_EXPLORER = "https://sepolia.arbiscan.io";
    const FAKE_PRICE_BASELINE = 221.78;
    const FAKE_PRICE_JITTER = 0.55;
    const FAKE_PRICE_PULL = 0.18;
    const FAKE_PRICE_TICK_MS = 2500;
    const USDC_IN = parseUnits("0.1", 6);
    const MIN_RWA_OUT = parseUnits("0.45", 18);
    function EasyModeDemo({onComplete, onBeforeDialog, onNext, onRequireConnect}) {
      const {client, address, sponsorship} = useAuth();
      const {shaking, gate} = useConnectGate(onRequireConnect);
      const [pending, setPending] = useState(false);
      const [done, setDone] = useState(false);
      const [txHash, setTxHash] = useState(null);
      const [error, setError] = useState(null);
      const [livePrice, setLivePrice] = useState(FAKE_PRICE_BASELINE.toFixed(2));
      useEffect(() => {
        let current = Number(livePrice);
        const id = window.setInterval(() => {
          const drift = (Math.random() - 0.5) * FAKE_PRICE_JITTER;
          const pull = (FAKE_PRICE_BASELINE - current) * FAKE_PRICE_PULL;
          current = current + drift + pull;
          setLivePrice(current.toFixed(2));
        }, FAKE_PRICE_TICK_MS);
        return () => window.clearInterval(id);
      }, []);
      const handle = useCallback(async () => {
        if (gate()) return;
        if (pending) return;
        setPending(true);
        setError(null);
        try {
          if (!address) return;
          await onBeforeDialog();
          const usdcAddress = USDC_ARB_SEPOLIA_ADDRESS;
          const walletClient = createPasskeyWalletClient({
            accountAddress: address,
            providerUrl: client.getProviderUrl(),
            clientId: DOCS_APP_ORIGIN_CLIENT_ID,
            webauthn: docsAppOriginWebAuthn(),
            theme: DOCS_DIALOG_THEME,
            experimental_clear_signing: true,
            chain: arbitrumSepolia,
            transport: http(),
            sponsorship
          });
          const result = await walletClient.sendCalls({
            calls: [{
              to: usdcAddress,
              data: encodeFunctionData({
                abi: erc20Abi,
                functionName: "approve",
                args: [MOCK_SWAP_ADDRESS, USDC_IN]
              }),
              abi: erc20Abi,
              label: "Approve USDC",
              sublabel: "for NVDAnon shares"
            }, {
              to: MOCK_SWAP_ADDRESS,
              data: encodeFunctionData({
                abi: mockSwapAbi,
                functionName: "swap",
                args: [USDC_IN, MIN_RWA_OUT, address]
              }),
              abi: mockSwapAbi,
              icon: NVDA_ICON_DATA_URL,
              label: "Buy NVDAnon",
              sublabel: "0.10 USDC"
            }],
            chainId: ARB_SEPOLIA_CHAIN_ID,
            tokenRequests: [{
              token: usdcAddress,
              amount: USDC_IN
            }],
            sourceAssets: [MOCK_USD_ADDRESS],
            sourceChainId: BASE_SEPOLIA_CHAIN_ID
          });
          setTxHash(result);
          setDone(true);
          onComplete();
        } catch (err) {
          if (err instanceof Error && !err.message.includes("rejected")) {
            setError(err.message);
          }
        } finally {
          setPending(false);
        }
      }, [address, client, sponsorship, gate, onBeforeDialog, onComplete, pending]);
      if (done) {
        return React.createElement(ScenarioSuccess, {
          headline: "You bought 0.15 NVDAnon",
          txHref: transactionExplorerUrl(ARB_SEPOLIA_EXPLORER, txHash),
          action: React.createElement(React.Fragment, null, "Next", React.createElement(ArrowRightIcon, {
            size: 20
          })),
          onAction: () => onNext?.()
        });
      }
      return React.createElement("div", {
        className: "demo-easymode"
      }, React.createElement("div", {
        className: "demo-easymode-stock"
      }, React.createElement("p", {
        className: "demo-easymode-ticker"
      }, "NVDAnon"), React.createElement("p", {
        className: "demo-easymode-company"
      }, "NVIDIA Corporation"), React.createElement("p", {
        className: "demo-easymode-price"
      }, "$", livePrice)), React.createElement(StockChart, null), React.createElement("button", {
        className: `primary-pill${shaking ? " primary-pill-shake" : ""}`,
        onClick: handle,
        disabled: pending
      }, shaking ? "Connect wallet" : pending ? "Processing\u2026" : "Buy NVDAnon"), error && React.createElement("p", {
        className: "demo-error"
      }, error));
    }
    function StockChart() {
      return React.createElement("svg", {
        className: "demo-chart",
        viewBox: "0 0 307 221",
        preserveAspectRatio: "none",
        fill: "none",
        "aria-hidden": true
      }, React.createElement("path", {
        d: "M2.8385 203.676H2C1.44772 203.676 1 204.123 1 204.676V219.272C1 219.824 1.44772 220.272 2 220.272H298.241C298.793 220.272 299.241 219.824 299.241 219.272V80.0239C299.241 78.8996 297.672 78.6308 297.298 79.6911L295.678 84.2812C295.623 84.4353 295.532 84.5738 295.412 84.6844L291.966 87.8538C291.727 88.074 291.395 88.1641 291.077 88.0951L289.703 87.7971C289.299 87.7095 288.99 87.3822 288.926 86.9736L285.625 65.7613C285.513 65.0424 284.695 64.6798 284.087 65.0796L282.758 65.9538C282.231 66.3004 281.519 66.0785 281.282 65.494L278.926 59.6844C278.859 59.5176 278.748 59.3723 278.604 59.2635L275.782 57.1215C275.424 56.8503 274.93 56.8503 274.573 57.1215L272.337 58.8183C271.893 59.1548 271.261 59.0644 270.929 58.6171L269.102 56.1516C268.688 55.5935 267.845 55.6168 267.463 56.1969L265.437 59.2723C265.368 59.3763 265.32 59.4922 265.294 59.614L261.946 75.3192C261.746 76.2582 260.466 76.403 260.061 75.5325L258.485 72.1424C258.432 72.0303 258.36 71.9288 258.271 71.8432L252.146 65.9559C251.645 65.4742 250.817 65.6382 250.538 66.2747L244.551 79.9045L242.193 85.8689C241.823 86.8045 240.459 86.6698 240.279 85.6799L238.326 74.9216C238.141 73.9014 236.717 73.8025 236.393 74.7873L234.472 80.6185C234.389 80.87 234.21 81.0783 233.973 81.1979L231.953 82.2202C231.46 82.4694 230.859 82.2724 230.609 81.78L228.13 76.8885C227.798 76.2333 226.897 76.1478 226.447 76.7288L225.095 78.477C224.647 79.056 223.75 78.9735 223.415 78.3227L217.246 66.3319C217.22 66.2805 217.198 66.2268 217.18 66.1715L211.008 46.3332L207.717 32.5154C207.55 31.8126 206.716 31.5138 206.14 31.9505L204.517 33.1826C204.469 33.2186 204.425 33.2587 204.385 33.3024L197.208 41.109C197.172 41.1485 197.139 41.1908 197.109 41.2356L195.109 44.2713C194.585 45.0661 193.352 44.749 193.277 43.8002L189.953 1.92156C189.905 1.3149 189.33 0.891547 188.736 1.02505L183.725 2.15201C183.453 2.21306 183.219 2.38448 183.079 2.62506L180.291 7.42211C179.965 7.98139 179.203 8.08943 178.735 7.64249L176.518 5.52361C176.421 5.43117 176.307 5.35908 176.182 5.31161L174.365 4.62223C173.858 4.42998 173.291 4.67628 173.085 5.17764L169.501 13.9129C169.463 14.0058 169.439 14.1039 169.431 14.2039L166.396 48.3245C166.314 49.2404 165.144 49.5701 164.596 48.8313L163.094 46.8041C162.956 46.6188 162.759 46.4867 162.535 46.4301L159.356 45.6259C159.276 45.6056 159.193 45.5953 159.111 45.5953H156.192C156.036 45.5953 155.881 45.5584 155.741 45.4876L153.456 44.3315C153.008 44.1048 152.461 44.2456 152.178 44.6606L149.109 49.164C149.054 49.2439 149.012 49.3313 148.982 49.4234L147.204 55.0027L142.237 77.2567C142.153 77.6344 141.858 77.9296 141.481 78.0145L139.392 78.4842C139.037 78.5639 138.754 78.8292 138.652 79.1775L136.292 87.1949C136.274 87.2533 136.252 87.3101 136.224 87.3645L132.813 94.0958C132.689 94.3391 132.472 94.5214 132.211 94.6006L129.48 95.4296C129.163 95.5258 128.915 95.7725 128.816 96.0886L126.855 102.371C126.547 103.359 125.125 103.285 124.92 102.271L122.126 88.4166C122.075 88.1626 121.927 87.9384 121.714 87.7912L118.557 85.613C118.238 85.3936 117.823 85.377 117.488 85.5704L116.592 86.0884C116.029 86.414 115.31 86.1238 115.13 85.4985L112.586 76.6305C112.397 75.9733 111.62 75.6949 111.057 76.0832L109.122 77.4182C108.627 77.7592 107.946 77.5908 107.668 77.0587L105.191 72.3247C105.018 71.995 104.677 71.7883 104.305 71.7883H102.464C101.981 71.7883 101.566 72.1346 101.48 72.6106L95.1503 107.661C95.097 107.956 94.9143 108.211 94.6525 108.357L91.9418 109.865C91.6205 110.044 91.227 110.032 90.9171 109.834L84.5645 105.774C84.5168 105.744 84.4666 105.717 84.4145 105.696L82.3052 104.806L78.3601 103.271C77.9023 103.093 77.3828 103.274 77.1345 103.697L74.7431 107.781C74.6807 107.887 74.6386 108.005 74.6188 108.127L71.5934 126.835C71.4831 127.516 70.7312 127.884 70.1256 127.552L67.1994 125.948C67.0631 125.873 66.9461 125.768 66.8577 125.64L65.0534 123.032C64.7223 122.553 64.0541 122.458 63.6018 122.824L61.7348 124.335C61.2467 124.73 60.5195 124.583 60.2236 124.029L58.1007 120.055C57.7106 119.325 56.6525 119.358 56.3089 120.111L54.6016 123.854C54.2786 124.562 53.306 124.646 52.8665 124.004L52.1051 122.891C51.5816 122.126 50.3891 122.423 50.286 123.344L47.3747 149.366C47.3315 149.752 47.0686 150.078 46.7005 150.202L44.2346 151.034C44.0949 151.081 43.9674 151.158 43.8611 151.26L40.5517 154.441C40.4366 154.552 40.3496 154.689 40.2981 154.84L37.0685 164.317C36.8844 164.857 36.2866 165.134 35.7557 164.925L33.8017 164.156C33.5745 164.067 33.3879 163.897 33.277 163.68L31.6426 160.476C31.236 159.678 30.067 159.776 29.7981 160.629L26.5569 170.915C26.5336 170.989 26.519 171.066 26.5133 171.143L23.2899 215.174C23.26 215.582 22.9844 215.931 22.5941 216.054L21.0629 216.538C20.6278 216.676 20.1548 216.501 19.9131 216.114L16.0869 209.984C15.9962 209.839 15.8695 209.719 15.7192 209.637L11.7979 207.488C11.6506 207.407 11.4853 207.365 11.3173 207.365H10.9469C10.6507 207.365 10.3697 207.496 10.1797 207.723L7.60571 210.801C7.10627 211.399 6.146 211.221 5.89291 210.485L3.78419 204.351C3.64538 203.947 3.26549 203.676 2.8385 203.676Z",
        fill: "url(#nvda-chart-fill)"
      }), React.createElement("path", {
        d: "M1 203.676H2.8385C3.26549 203.676 3.64538 203.947 3.78419 204.351L5.89291 210.485C6.146 211.221 7.10627 211.399 7.60571 210.801L10.1797 207.723C10.3697 207.496 10.6507 207.365 10.9469 207.365H11.3173C11.4853 207.365 11.6506 207.407 11.7979 207.488L15.7192 209.637C15.8695 209.719 15.9962 209.839 16.0869 209.984L19.9131 216.114C20.1548 216.501 20.6278 216.676 21.0629 216.538L22.5941 216.054C22.9844 215.931 23.26 215.582 23.2899 215.174L26.5133 171.143C26.519 171.066 26.5336 170.989 26.5569 170.915L29.7981 160.629C30.067 159.776 31.236 159.678 31.6426 160.476L33.277 163.68C33.3879 163.897 33.5745 164.067 33.8017 164.156L35.7557 164.925C36.2866 165.134 36.8844 164.857 37.0685 164.317L40.2981 154.84C40.3496 154.689 40.4366 154.552 40.5517 154.441L43.8611 151.26C43.9674 151.158 44.0949 151.081 44.2346 151.034L46.7005 150.202C47.0686 150.078 47.3315 149.752 47.3747 149.366L50.286 123.344C50.3891 122.423 51.5816 122.126 52.1051 122.891L52.8665 124.004C53.306 124.646 54.2786 124.562 54.6016 123.854L56.3089 120.111C56.6525 119.358 57.7106 119.325 58.1007 120.055L60.2236 124.029C60.5195 124.583 61.2467 124.73 61.7348 124.335L63.6018 122.824C64.0542 122.458 64.7223 122.553 65.0534 123.032L66.8576 125.64C66.9461 125.768 67.0631 125.873 67.1994 125.948L70.1256 127.552C70.7312 127.884 71.4831 127.516 71.5934 126.835L74.6188 108.127C74.6386 108.005 74.6807 107.887 74.7431 107.781L77.1345 103.697C77.3828 103.274 77.9023 103.093 78.3601 103.271L82.3052 104.806L84.4144 105.696C84.4666 105.717 84.5168 105.744 84.5645 105.774L90.9171 109.834C91.2269 110.032 91.6205 110.044 91.9418 109.865L94.6525 108.357C94.9143 108.211 95.097 107.956 95.1503 107.661L101.48 72.6106C101.566 72.1346 101.981 71.7883 102.464 71.7883H104.305C104.677 71.7883 105.018 71.995 105.191 72.3247L107.668 77.0587C107.946 77.5908 108.627 77.7592 109.122 77.4182L111.057 76.0832C111.62 75.6949 112.397 75.9733 112.586 76.6305L115.13 85.4985C115.31 86.1238 116.029 86.414 116.592 86.0884L117.488 85.5704C117.823 85.377 118.238 85.3936 118.556 85.613L121.714 87.7912C121.927 87.9384 122.075 88.1626 122.126 88.4166L124.92 102.271C125.125 103.285 126.547 103.359 126.855 102.371L128.816 96.0886C128.915 95.7725 129.163 95.5258 129.48 95.4296L132.211 94.6006C132.472 94.5214 132.689 94.3391 132.813 94.0958L136.224 87.3645C136.252 87.3101 136.274 87.2533 136.292 87.1949L138.652 79.1775C138.754 78.8292 139.037 78.5639 139.392 78.4842L141.481 78.0145C141.858 77.9296 142.153 77.6344 142.237 77.2567L147.204 55.0027L148.982 49.4234C149.012 49.3313 149.054 49.2439 149.109 49.164L152.178 44.6606C152.461 44.2456 153.008 44.1048 153.456 44.3315L155.741 45.4876C155.881 45.5584 156.036 45.5953 156.192 45.5953H159.111C159.193 45.5953 159.276 45.6056 159.356 45.6259L162.535 46.4301C162.759 46.4867 162.956 46.6188 163.094 46.8041L164.596 48.8313C165.144 49.5701 166.314 49.2404 166.396 48.3245L169.431 14.2039C169.439 14.1039 169.463 14.0058 169.501 13.9129L173.085 5.17764C173.291 4.67628 173.858 4.42998 174.365 4.62223L176.182 5.31161C176.307 5.35908 176.421 5.43117 176.518 5.52361L178.735 7.64248C179.203 8.08943 179.965 7.98139 180.291 7.42211L183.079 2.62506C183.219 2.38448 183.453 2.21306 183.724 2.15201L188.736 1.02505C189.33 0.891547 189.905 1.3149 189.953 1.92156L193.277 43.8002C193.352 44.749 194.585 45.0661 195.109 44.2713L197.109 41.2356C197.139 41.1908 197.172 41.1485 197.208 41.109L204.385 33.3024C204.425 33.2587 204.469 33.2186 204.517 33.1826L206.14 31.9505C206.716 31.5138 207.55 31.8126 207.717 32.5154L211.008 46.3332L217.18 66.1715C217.198 66.2268 217.22 66.2805 217.246 66.3319L223.415 78.3227C223.75 78.9735 224.647 79.056 225.095 78.477L226.447 76.7288C226.897 76.1478 227.798 76.2333 228.13 76.8885L230.609 81.78C230.859 82.2724 231.46 82.4694 231.953 82.2202L233.973 81.1979C234.21 81.0783 234.389 80.87 234.472 80.6185L236.393 74.7873C236.717 73.8025 238.141 73.9014 238.326 74.9216L240.279 85.6799C240.459 86.6698 241.823 86.8045 242.193 85.869L244.551 79.9045L250.538 66.2747C250.817 65.6382 251.645 65.4742 252.146 65.9559L258.271 71.8432C258.36 71.9288 258.432 72.0303 258.485 72.1424L260.061 75.5325C260.466 76.403 261.746 76.2582 261.946 75.3192L265.294 59.614C265.32 59.4922 265.368 59.3763 265.437 59.2723L267.463 56.1969C267.845 55.6168 268.688 55.5935 269.101 56.1516L270.929 58.6171C271.261 59.0644 271.893 59.1548 272.337 58.8183L274.573 57.1215C274.93 56.8503 275.424 56.8503 275.782 57.1215L278.604 59.2635C278.748 59.3723 278.859 59.5176 278.926 59.6844L281.282 65.494C281.519 66.0785 282.231 66.3004 282.758 65.9538L284.087 65.0796C284.695 64.6798 285.513 65.0424 285.625 65.7613L288.926 86.9736C288.99 87.3822 289.298 87.7095 289.703 87.7971L291.077 88.0951C291.395 88.1641 291.727 88.074 291.966 87.8538L295.412 84.6844C295.532 84.5738 295.623 84.4353 295.678 84.2812L299.241 74.1863",
        stroke: "white",
        strokeWidth: "2",
        strokeLinecap: "round",
        vectorEffect: "non-scaling-stroke"
      }), React.createElement("circle", {
        cx: "299",
        cy: "74.0221",
        r: "3",
        fill: "white"
      }), React.createElement("circle", {
        cx: "299",
        cy: "74.0221",
        r: "5.5",
        stroke: "white",
        strokeOpacity: "0.16",
        strokeWidth: "5",
        vectorEffect: "non-scaling-stroke"
      }), React.createElement("defs", null, React.createElement("linearGradient", {
        id: "nvda-chart-fill",
        x1: "150.12",
        y1: "0.772095",
        x2: "150.12",
        y2: "220.272",
        gradientUnits: "userSpaceOnUse"
      }, React.createElement("stop", {
        stopColor: "white",
        stopOpacity: "0.4"
      }), React.createElement("stop", {
        offset: "1",
        stopColor: "white",
        stopOpacity: "0"
      }))));
    }
    return {
      EasyModeDemo
    };
  })();
  mods.nftBuy = (() => {
    const {useCallback, useState} = deps.React;
    const {createPasskeyWalletClient} = deps.sdk;
    const {encodeFunctionData, http, parseUnits} = deps.viem;
    const {baseSepolia} = deps.viemChains;
    const {useAuth} = mods.authctx;
    const {DOCS_DIALOG_THEME, DOCS_APP_ORIGIN_CLIENT_ID, docsAppOriginWebAuthn, BASE_SEPOLIA_CHAIN_ID, LUIGI_ICON_DATA_URL, MOCK_NFT_LUIGI_ID, MOCK_NFT_V2_ADDRESS, MOCK_USD_ADDRESS, MUSD_ICON_DATA_URL, erc20Abi, mockNftV2Abi} = mods.constants;
    const {ArrowRightIcon} = mods.icons;
    const {transactionExplorerUrl, useConnectGate} = mods.shared;
    const {ScenarioSuccess} = mods.scenarioSuccess;
    const BASE_SEPOLIA_EXPLORER = "https://sepolia.basescan.org";
    const DISPLAY_PRICE = parseUnits("0.1", 6);
    const DISPLAY_PRICE_LABEL = "$0.10";
    function NftBuyDemo({onComplete, onBeforeDialog, onNext, onRequireConnect}) {
      const {client, address, sponsorship} = useAuth();
      const {shaking, gate} = useConnectGate(onRequireConnect);
      const [pending, setPending] = useState(false);
      const [done, setDone] = useState(false);
      const [txHash, setTxHash] = useState(null);
      const [error, setError] = useState(null);
      const handle = useCallback(async () => {
        if (gate()) return;
        if (pending) return;
        setPending(true);
        setError(null);
        try {
          if (!address) return;
          await onBeforeDialog();
          const walletClient = createPasskeyWalletClient({
            accountAddress: address,
            providerUrl: client.getProviderUrl(),
            clientId: DOCS_APP_ORIGIN_CLIENT_ID,
            webauthn: docsAppOriginWebAuthn(),
            theme: DOCS_DIALOG_THEME,
            experimental_clear_signing: true,
            chain: baseSepolia,
            transport: http(),
            sponsorship
          });
          const result = await walletClient.sendCalls({
            calls: [{
              to: MOCK_USD_ADDRESS,
              data: encodeFunctionData({
                abi: erc20Abi,
                functionName: "approve",
                args: [MOCK_NFT_V2_ADDRESS, DISPLAY_PRICE]
              }),
              abi: erc20Abi,
              icon: MUSD_ICON_DATA_URL,
              label: "Approve mUSD",
              sublabel: "Purchase collectible"
            }, {
              to: MOCK_NFT_V2_ADDRESS,
              data: encodeFunctionData({
                abi: mockNftV2Abi,
                functionName: "buy",
                args: [MOCK_NFT_LUIGI_ID, 1n, address]
              }),
              abi: mockNftV2Abi,
              icon: LUIGI_ICON_DATA_URL,
              label: "Buy Pikachu",
              sublabel: `#${MOCK_NFT_LUIGI_ID.toString().padStart(4, "0")}`
            }],
            chainId: BASE_SEPOLIA_CHAIN_ID
          });
          setTxHash(result);
          setDone(true);
          onComplete();
        } catch (err) {
          if (err instanceof Error && !err.message.includes("rejected")) {
            setError(err.message);
          }
        } finally {
          setPending(false);
        }
      }, [address, client, sponsorship, gate, onBeforeDialog, onComplete, pending]);
      if (done) {
        return React.createElement(ScenarioSuccess, {
          headline: "You bought Holo-Luigi Pikachu",
          txHref: transactionExplorerUrl(BASE_SEPOLIA_EXPLORER, txHash),
          action: React.createElement(React.Fragment, null, "Next", React.createElement(ArrowRightIcon, {
            size: 18
          })),
          onAction: () => onNext?.()
        });
      }
      return React.createElement("div", {
        className: "demo-nft"
      }, React.createElement("div", {
        className: "demo-nft-meta"
      }, React.createElement("p", {
        className: "demo-nft-title"
      }, "Holo-Luigi Pikachu"), React.createElement("p", {
        className: "demo-nft-price"
      }, DISPLAY_PRICE_LABEL), React.createElement("p", {
        className: "demo-nft-sub"
      }, "mUSD on Base Sepolia")), React.createElement("div", {
        className: "demo-nft-frame",
        "aria-hidden": true
      }, React.createElement("img", {
        src: "/images/1auth/holo-pikachu.webp",
        alt: "",
        className: "demo-nft-photo",
        width: 100,
        height: 167
      })), React.createElement("button", {
        className: `primary-pill${shaking ? " primary-pill-shake" : ""}`,
        onClick: handle,
        disabled: pending
      }, shaking ? "Connect wallet" : pending ? "Paying\u2026" : `Pay ${DISPLAY_PRICE_LABEL}`), error && React.createElement("p", {
        className: "demo-error"
      }, error));
    }
    return {
      NftBuyDemo
    };
  })();
  mods.superpowers = (() => {
    const {useCallback, useEffect, useRef, useState} = deps.React;
    const {DemoPhase, useConnectGate} = mods.shared;
    const {useAuth} = mods.authctx;
    const {formatUnits, parseUnits} = deps.viem;
    const {useGrantPermissionFlow} = mods.grantPermissionDemo;
    const {NVDANON_TIME_LIMIT_MINUTES, NVDANON_USAGE_LIMIT, NVDANON_USDC_PER_BUY, arbSepoliaTxUrl} = mods.grantPermissionScope;
    const {ScenarioSuccess} = mods.scenarioSuccess;
    const {SwapTokensCard} = mods.swapTokensCard;
    const {ArrowLeftIcon, ArrowRightIcon, CopyIcon, RefreshIcon} = mods.icons;
    const NVDANON_PER_MUSD = 0.12;
    function SuperpowersDemo({onComplete, onBeforeDialog, onRequireConnect}) {
      const {isAuthenticated} = useAuth();
      const {shaking, gate} = useConnectGate(onRequireConnect);
      const flow = useGrantPermissionFlow({
        variant: "nvdanon-swap",
        enabled: isAuthenticated
      });
      const [view, setView] = useState("config");
      const [grantStarting, setGrantStarting] = useState(false);
      const [swapStarted, setSwapStarted] = useState(false);
      const completedRef = useRef(false);
      const [timeLimit, setTimeLimit] = useState(String(NVDANON_TIME_LIMIT_MINUTES));
      const [usageLimit, setUsageLimit] = useState(String(NVDANON_USAGE_LIMIT));
      const [amountUsd, setAmountUsd] = useState(Number(formatUnits(NVDANON_USDC_PER_BUY, 6)).toFixed(2));
      const handleGrantPermission = useCallback(async () => {
        if (gate()) return;
        if (grantStarting || flow.status === "granting") return;
        setGrantStarting(true);
        try {
          await onBeforeDialog();
          await flow.grantPermission({
            timeLimitMinutes: Math.max(1, Math.round(Number(timeLimit)) || NVDANON_TIME_LIMIT_MINUTES),
            usageLimit: Math.max(1, Math.round(Number(usageLimit)) || NVDANON_USAGE_LIMIT),
            usdcPerBuy: Number(amountUsd) > 0 ? parseUnits(Number(amountUsd).toFixed(6), 6) : NVDANON_USDC_PER_BUY
          });
        } finally {
          setGrantStarting(false);
        }
      }, [flow, gate, grantStarting, onBeforeDialog, timeLimit, usageLimit, amountUsd]);
      useEffect(() => {
        if (completedRef.current || flow.mintStatus !== "minted") return;
        completedRef.current = true;
        onComplete();
      }, [flow.mintStatus, onComplete]);
      const restartDemo = useCallback(() => {
        setSwapStarted(false);
        flow.reset();
      }, [flow]);
      const swapAgain = useCallback(() => {
        flow.resetMint();
      }, [flow]);
      const handleBack = useCallback(() => {
        if (swapStarted) setSwapStarted(false); else restartDemo();
      }, [swapStarted, restartDemo]);
      const txUrl = arbSepoliaTxUrl(flow.mintResult?.transactionHash);
      const nvdanonOut = (Number(amountUsd) * NVDANON_PER_MUSD || 0).toFixed(3);
      const phase = view === "code" ? "code" : flow.status !== "granted" ? "config" : flow.mintStatus === "minted" ? "minted" : swapStarted ? "swap" : "enabled";
      return React.createElement(DemoPhase, {
        phase,
        flip: true
      }, view === "code" ? React.createElement("div", {
        className: "demo-superpowers demo-superpowers-code"
      }, React.createElement("div", {
        className: "demo-superpowers-codehead"
      }, React.createElement("button", {
        type: "button",
        className: "demo-code-back",
        onClick: () => setView("config"),
        "aria-label": "Back to configuration"
      }, React.createElement(ArrowLeftIcon, {
        size: 24
      })), React.createElement("p", {
        className: "demo-heading-inline"
      }, "Embed code"), React.createElement("span", {
        className: "demo-code-head-spacer",
        "aria-hidden": true
      })), React.createElement("pre", {
        className: "demo-code-block"
      }, POLICY_RULES_SNIPPET), React.createElement("button", {
        type: "button",
        className: "link-button demo-code-copy",
        onClick: () => {
          navigator.clipboard?.writeText(POLICY_RULES_SNIPPET).catch(() => {});
        }
      }, "Copy to clipboard", React.createElement(CopyIcon, {
        size: 16
      }))) : React.createElement("div", {
        className: "demo-superpowers"
      }, flow.status === "granted" && flow.mintStatus !== "minting" && flow.mintStatus !== "minted" && React.createElement("button", {
        type: "button",
        className: "demo-back",
        onClick: handleBack,
        "aria-label": "Back"
      }, React.createElement(ArrowLeftIcon, {
        size: 20
      })), flow.status === "granted" ? flow.mintStatus === "minted" ? React.createElement(ScenarioSuccess, {
        headline: "Swap successful",
        txHref: txUrl,
        action: React.createElement(React.Fragment, null, React.createElement(RefreshIcon, {
          size: 20
        }), "Swap again"),
        onAction: swapAgain
      }) : swapStarted ? React.createElement(React.Fragment, null, React.createElement(SwapTokensCard, {
        sellAmount: amountUsd,
        buyAmount: nvdanonOut,
        minting: flow.mintStatus === "minting",
        onSwap: flow.mintWithoutSignature
      }), flow.mintError && React.createElement("p", {
        className: "demo-error"
      }, flow.mintError)) : React.createElement(ScenarioSuccess, {
        headline: "Policy rules enabled",
        subtitle: "You can now transact without signing",
        action: React.createElement(React.Fragment, null, "Next", React.createElement(ArrowRightIcon, {
          size: 18
        })),
        onAction: () => setSwapStarted(true)
      }) : React.createElement(React.Fragment, null, React.createElement("div", {
        className: "demo-superpowers-head"
      }, React.createElement("p", {
        className: "demo-heading"
      }, "Configure policy rules"), React.createElement("p", {
        className: "demo-heading-sub"
      }, "Setup rules once for autonomous execution")), React.createElement("div", {
        className: "demo-superpowers-form"
      }, React.createElement(EditableField, {
        label: "Time limit (minutes)",
        value: timeLimit,
        onChange: setTimeLimit,
        min: "1",
        step: "1"
      }), React.createElement(EditableField, {
        label: "Usage limit (times)",
        value: usageLimit,
        onChange: setUsageLimit,
        min: "1",
        step: "1"
      }), React.createElement(EditableField, {
        label: "Amount limit (USD)",
        value: amountUsd,
        onChange: setAmountUsd,
        min: "0.01",
        step: "0.01"
      })), React.createElement("div", {
        className: "demo-superpowers-foot"
      }, React.createElement("button", {
        className: `primary-pill${shaking ? " primary-pill-shake" : ""}`,
        onClick: handleGrantPermission,
        disabled: grantStarting || flow.status === "granting"
      }, shaking ? "Connect wallet" : grantStarting || flow.status === "granting" ? "Review permission\u2026" : "Enable permissions")), flow.error && React.createElement("p", {
        className: "demo-error"
      }, flow.error))));
    }
    function EditableField({label, value, onChange, min, step}) {
      return React.createElement("label", {
        className: "field"
      }, React.createElement("span", {
        className: "field-label"
      }, label), React.createElement("input", {
        className: "field-value field-input",
        type: "number",
        inputMode: "decimal",
        min,
        step,
        value,
        onChange: event => onChange(event.target.value)
      }));
    }
    const POLICY_RULES_SNIPPET = `import {
      createCrossChainPermission,
      definePermissions,
    } from "@rhinestone/1auth"
    import { parseUnits } from "viem"
    import { arbitrumSepolia, baseSepolia } from "viem/chains"

    const usdc = "0x75faf114eafb1BDbe2F0316DF893fd58CE46AA4d"
    const usdcPerBuy = parseUnits("0.1", 6)

    // 60-minute session window \u2014 the same bound shown in the form above and
    // surfaced as the grant dialog's "Ends" row.
    const validAfter = BigInt(Math.floor(Date.now() / 1000))
    const validUntil = validAfter + 60n * 60n

    // Allow the session key to top up USDC allowance for RWASwap, pinned to
    // the per-buy budget so a leaked key can't authorize a wider allowance.
    const approve = definePermissions({
      address: usdc,
      name: "USDC",
      abi: erc20Abi,
      functions: {
        approve: {
          maxUses: 25n,
          validAfter,
          validUntil,
          params: {
            spender: { condition: "equal", value: MOCK_SWAP_ADDRESS },
            amount: { condition: "equal", value: usdcPerBuy },
          },
        },
      },
    })

    // ...and swap USDC \u2192 NVDAnon, with input amount + recipient pinned so
    // proceeds always land in the user's account at the agreed size.
    const swap = definePermissions({
      address: MOCK_SWAP_ADDRESS,
      name: "RWASwap",
      abi: mockSwapAbi,
      functions: {
        swap: {
          maxUses: 25n,
          validAfter,
          validUntil,
          params: {
            usdcIn: { condition: "equal", value: usdcPerBuy },
            recipient: { condition: "equal", value: accountAddress },
          },
        },
      },
    })

    // Permit the cross-chain claim that moves mUSD on Base Sepolia into USDC on
    // Arb Sepolia. Across is pinned so the session key cannot choose a different
    // settlement layer. Because Permit2 verifies the claim on the source chain,
    // the SmartSession must also be installed/enabled on Base Sepolia.
    const bridge = createCrossChainPermission({
      from: {
        chain: baseSepolia,
        token: MOCK_USD_ADDRESS,
        maxAmount: usdcPerBuy,
      },
      to: {
        chain: arbitrumSepolia,
        token: usdc,
        recipient: accountAddress,
      },
      validAfter,
      validUntil,
      settlementLayers: ["ACROSS"],
    })

    await client.grantPermissions({
      accountAddress,
      targetChains: [ARB_SEPOLIA_CHAIN_ID],
      sourceChains: [BASE_SEPOLIA_CHAIN_ID],
      sessionKeyAddress,
      permissions: [...approve.permissions, ...swap.permissions],
      crossChainPermits: [bridge],
      contracts: [...approve.contracts, ...swap.contracts],
    })`;
    return {
      SuperpowersDemo
    };
  })();
  return mods;
};

export const ADDRESS_RE = /^0x[0-9a-fA-F]{40}$/;

export const readStoredAddressFromJsonEnvelope = () => {
  try {
    const raw = window.localStorage.getItem(STORAGE_KEY);
    if (!raw) return null;
    const parsed = JSON.parse(raw);
    const address = parsed && typeof parsed === "object" ? parsed.address : null;
    return typeof address === "string" && ADDRESS_RE.test(address) ? address : null;
  } catch {
    return null;
  }
};

export const writeStoredAddressAsJsonEnvelope = address => {
  window.localStorage.setItem(STORAGE_KEY, JSON.stringify({
    address
  }));
};

export const useOneAuth = deps => {
  const [address, setAddress] = React.useState(null);
  const [client, setClient] = React.useState(null);
  const mounted = React.useRef(false);
  const sessionGeneration = React.useRef(0);
  React.useEffect(() => {
    if (!deps) return;
    mounted.current = true;
    const restoreGeneration = ++sessionGeneration.current;
    const {OneAuthClient} = deps.sdk;
    const nextClient = new OneAuthClient({
      providerUrl: backends().auth,
      clientId: "docs-app-origin",
      webauthn: {
        mode: "app_origin",
        rpId: window.location.hostname
      },
      theme: {
        mode: "dark",
        accent: "#ffffff",
        backdrop: {
          color: "#52525c",
          opacity: 0.5,
          blur: 12
        }
      },
      experimental_clear_signing: true,
      recovery: {
        fallback: {
          type: "verified-identity"
        }
      },
      testnets: true,
      prewarm: true,
      sponsorship,
      onDisconnect: () => {
        if (!mounted.current) return;
        sessionGeneration.current += 1;
        window.localStorage.removeItem(STORAGE_KEY);
        setAddress(null);
      }
    });
    setClient(nextClient);
    const stored = readStoredAddressFromJsonEnvelope();
    if (stored) {
      nextClient.getSession().then(result => {
        if (!mounted.current || sessionGeneration.current !== restoreGeneration) return;
        const account = result.success ? result.session.accountAddress : null;
        if (account && ADDRESS_RE.test(account)) {
          writeStoredAddressAsJsonEnvelope(account);
          setAddress(account);
        } else {
          window.localStorage.removeItem(STORAGE_KEY);
          setAddress(null);
        }
      }).catch(() => {
        if (!mounted.current || sessionGeneration.current !== restoreGeneration) return;
        window.localStorage.removeItem(STORAGE_KEY);
        setAddress(null);
      });
    }
    return () => {
      mounted.current = false;
      sessionGeneration.current += 1;
    };
  }, [deps]);
  const login = React.useCallback(async () => {
    if (!client) return null;
    const generation = ++sessionGeneration.current;
    const result = await client.authenticate({
      oauthEnabled: false
    });
    if (!result.success) {
      if (result.error?.code === "USER_CANCELLED") return null;
      throw new Error(result.error?.message ?? "Authentication failed");
    }
    const account = result.session.accountAddress;
    if (!ADDRESS_RE.test(account)) throw new Error("Authentication returned an invalid account address");
    if (!mounted.current || sessionGeneration.current !== generation) return null;
    writeStoredAddressAsJsonEnvelope(account);
    setAddress(account);
    return account;
  }, [client]);
  const logout = React.useCallback(() => {
    sessionGeneration.current += 1;
    window.localStorage.removeItem(STORAGE_KEY);
    if (mounted.current) setAddress(null);
    if (client?.disconnect) client.disconnect();
  }, [client]);
  return React.useMemo(() => ({
    address,
    isAuthenticated: !!address,
    client,
    sponsorship,
    login,
    logout
  }), [address, client, login, logout]);
};

export const DemoKey = ({render, scenario}) => render(scenario);

export const Stage = ({mods, index, setIndex}) => {
  const h = React.createElement;
  const {SCENARIOS, demoBrowserTitle} = mods.scenarios;
  const {DemoBrowserHeader, WalletPill} = mods.shared;
  const scenario = SCENARIOS[index];
  const noop = () => {};
  const beforeDialog = () => Promise.resolve();
  const next = () => setIndex(i => Math.min(i + 1, SCENARIOS.length - 1));
  const requireConnect = () => setIndex(0);
  const demoFor = key => {
    if (key === "onboarding") {
      return h(mods.onboarding.OnboardingDemo, {
        onComplete: noop,
        onBeforeDialog: beforeDialog,
        onNext: next
      });
    }
    if (key === "easy-mode") {
      return h(mods.easyMode.EasyModeDemo, {
        onComplete: noop,
        onBeforeDialog: beforeDialog,
        onNext: next,
        onRequireConnect: requireConnect
      });
    }
    if (key === "nft-buy") {
      return h(mods.nftBuy.NftBuyDemo, {
        onComplete: noop,
        onBeforeDialog: beforeDialog,
        onNext: next,
        onRequireConnect: requireConnect
      });
    }
    return h(mods.superpowers.SuperpowersDemo, {
      onComplete: noop,
      onBeforeDialog: beforeDialog,
      onRequireConnect: requireConnect
    });
  };
  return h(React.Fragment, null, h("div", {
    className: "scenario-demo-col",
    "data-scenario": scenario.key
  }, h(WalletPill, null), h("div", {
    className: "demo-browser"
  }, h(DemoBrowserHeader, {
    title: demoBrowserTitle(scenario.key)
  }), h("div", {
    className: "demo-browser-body"
  }, h(DemoKey, {
    render: demoFor,
    scenario: scenario.key
  })))), h("div", {
    className: "oa-dots",
    role: "tablist",
    "aria-label": "Demo scenarios"
  }, SCENARIOS.map((s, i) => h("button", {
    key: s.key,
    type: "button",
    className: "oa-dot",
    "data-state": i === index ? "active" : "idle",
    "aria-label": s.title,
    "aria-selected": i === index,
    role: "tab",
    onClick: () => setIndex(i)
  }))));
};

export const TryItOut = () => {
  const [deps, setDeps] = React.useState(null);
  const [loadError, setLoadError] = React.useState("");
  const [index, setIndex] = React.useState(0);
  React.useEffect(() => {
    let cancelled = false;
    loadDeps().then(d => !cancelled && setDeps(d)).catch(e => !cancelled && setLoadError(String(e.message ?? e)));
    return () => {
      cancelled = true;
    };
  }, []);
  const mods = React.useMemo(() => deps ? buildModules(deps) : null, [deps]);
  const auth = useOneAuth(deps);
  return <div className="landing-shell not-prose rhinestone-1auth-demo" id="try-it-out">
      <style dangerouslySetInnerHTML={{
    __html: CSS
  }} />
      <AuthContext.Provider value={auth}>
        <div className="oa-frame">
          {mods ? <Stage mods={mods} index={index} setIndex={setIndex} /> : <div className="scenario-demo-col">
              <div className="demo-browser">
                <div className="demo-browser-header">
                  <div className="demo-browser-dots">
                    <span className="demo-browser-dot" />
                    <span className="demo-browser-dot" />
                    <span className="demo-browser-dot" />
                  </div>
                  <span className="demo-browser-title">Demo</span>
                </div>
                <div className="demo-browser-body">
                  {loadError ? <p className="demo-error">{loadError}</p> : null}
                </div>
              </div>
            </div>}
        </div>
      </AuthContext.Provider>
    </div>;
};

Sign up with a passkey, trade across chains, buy an NFT, and grant session permissions. The demos use testnet assets and sponsored fees. The passkey and account belong to this docs hostname; a preview hostname uses a separate account.

<TryItOut />

Ready to build? Start with the [embedded wallet quickstart](/wallets/embedded-wallets/quickstart), or keep your own signer with the [custom signer quickstart](/wallets/custom-signer/quickstart).