@aurum-sdk/core 0.1.3 → 0.1.5

package/README.md

@@ -1,33 +1,10 @@
 # @aurum-sdk/core
 
-<!-- [Live Demo](https://demo.aurumsdk.com/)
-[Aurum Website](https://aurumsdk.com/) -->
+[Docs](https://docs.aurumsdk.com/)
+[Live Demo](https://demo.aurumsdk.com/)
+[Website](https://aurumsdk.com/)
 
-Aurum is a frontend JavaScript SDK that makes it easy to add wallets to your dapp.
-
-**Using React? Check out @aurum-sdk/hooks on [github](https://github.com/aurum-sdk/aurum/packages/hooks) or [npm](https://www.npmjs.com/package/@aurum-sdk/hooks)**
-
-## Table of Contents
-
-- [Installation](#installation)
-- [Quick Start](#quick-start)
-- [Configuration](#configuration)
-  - [BrandConfig](#brandconfig)
-  - [WalletsConfig](#walletsconfig)
-  - [Excluding Wallets](#excluding-wallets)
-- [API Reference](#api-reference)
-  - [Properties](#properties)
-  - [Methods](#methods)
-- [Embedded Widgets](#embedded-widgets)
-- [Headless API](#headless-api)
-  - [Direct Wallet Connection](#direct-wallet-connection)
-  - [Email Authentication](#email-authentication)
-  - [WalletConnect URI Flow](#walletconnect-uri-flow)
-- [Web3 Library Integrations](#web3-library-integrations)
-  - [Viem](#viem)
-  - [Ethers v5](#ethers-v5)
-  - [Ethers v6](#ethers-v6)
-- [Troubleshooting](#troubleshooting)
+Aurum is an open-source JavaScript SDK that makes it easy to add wallets to your web app.
 
 ---
 
@@ -54,367 +31,3 @@ const aurum = new Aurum({
 const address = await aurum.connect();
 console.log('Connected:', address);
 ```
-
----
-
-## Configuration
-
-### `AurumConfig`
-
-```typescript
-interface AurumConfig {
-  wallets?: WalletsConfig;
-  brand?: BrandConfig;
-  telemetry?: boolean; // enable/disable error tracking (default: true)
-}
-```
-
-### `BrandConfig`
-
-Customize the look and feel of the connect modal.
-
-| Property       | Type                  | Default          | Description                                               |
-| -------------- | --------------------- | ---------------- | --------------------------------------------------------- |
-| `appName`      | `string`              | `'Aurum'`        | Your application name                                     |
-| `logo`         | `string`              | -                | URL to your app logo (https or data:image/svg+xml;base64) |
-| `theme`        | `'light' \| 'dark'`   | `'dark'`         | Color theme for the modal                                 |
-| `primaryColor` | `string`              | `#000` or `#FFF` | Primary accent color (hex)                                |
-| `borderRadius` | `string`              | `'md'`           | Corner roundness of UI elements                           |
-| `modalZIndex`  | `number`              | `1000`           | z-index for the modal overlay                             |
-| `hideFooter`   | `boolean`             | `false`          | Hide the "Powered by Aurum" footer in modal               |
-| `font`         | `string`              | Inter            | Custom font family for all modal UI elements              |
-| `walletLayout` | `'stacked' \| 'grid'` | `'stacked'`      | Layout for wallet buttons                                 |
-
-### `WalletsConfig`
-
-```typescript
-interface WalletsConfig {
-  email?: {
-    projectId: string; // Coinbase CDP project ID for email wallet
-  };
-  walletConnect?: {
-    projectId: string; // Reown project ID for WalletConnect, AppKit modal, and Ledger
-  };
-  exclude?: WalletId[]; // Wallets to hide from the connect modal
-}
-```
-
-**Getting Project IDs:**
-
-- **Coinbase CDP:** Register at [portal.cdp.coinbase.com](https://portal.cdp.coinbase.com/)
-- **WalletConnect:** Register at [cloud.walletconnect.com](https://dashboard.reown.com/)
-
-Don't forget to configure the domain allowlist for both project IDs.
-
-### Excluding Wallets
-
-```typescript
-import { WalletId } from '@aurum-sdk/types';
-
-const aurum = new Aurum({
-  brand: { appName: 'Your App Name' },
-  wallets: { ... },
-  exclude: [WalletId.MetaMask], // or ['metamask']
-});
-```
-
-**Notes:**
-
-- If you exclude `WalletId.Email`, you don't need `wallets.email.projectId`
-- If you exclude `WalletId.WalletConnect`, `WalletId.AppKit`, and `WalletId.Ledger`, you don't need `wallets.walletConnect.projectId`
-
----
-
-## API Reference
-
-### Properties
-
-#### `rpcProvider: AurumRpcProvider`
-
-EIP-1193 compatible provider. Works with viem, ethers.js, and other web3 libraries.
-
-```typescript
-// Direct RPC request
-const accounts = await aurum.rpcProvider.request({ method: 'eth_accounts' });
-
-// Event listeners
-aurum.rpcProvider.on?.('accountsChanged', (accounts: string[]) => { ... });
-aurum.rpcProvider.on?.('chainChanged', (chainId: string) => { ... });
-```
-
-#### `ready: boolean`
-
-Whether the SDK has finished initializing (including connection restoration).
-
----
-
-### Methods
-
-#### `whenReady(): Promise<void>`
-
-Waits for the SDK to finish initializing, including restoring any previous connection, such as after a page refresh.
-
-```typescript
-await aurum.whenReady();
-// Safe to use the provider
-```
-
----
-
-#### ``connect(walletId?: WalletId): Promise<`0x${string}`>``
-
-Opens the wallet connection modal or connects directly to a specific wallet.
-
-```typescript
-// Show modal
-const address = await aurum.connect();
-
-// Connect directly to a specific wallet
-import { WalletId } from '@aurum-sdk/types';
-const address = await aurum.connect(WalletId.MetaMask);
-```
-
-**Available Wallet IDs:**
-
-| WalletId                  | Description                    |
-| ------------------------- | ------------------------------ |
-| `WalletId.Email`          | Coinbase Embedded email wallet |
-| `WalletId.MetaMask`       | MetaMask                       |
-| `WalletId.Phantom`        | Phantom wallet                 |
-| `WalletId.CoinbaseWallet` | Coinbase Wallet                |
-| `WalletId.Rabby`          | Rabby wallet                   |
-| `WalletId.Brave`          | Brave Browser wallet           |
-| `WalletId.Ledger`         | Ledger Live wallet             |
-| `WalletId.WalletConnect`  | WalletConnect protocol         |
-| `WalletId.AppKit`         | AppKit (Reown)                 |
-
-**Throws:** Error if user closes the modal without connecting.
-
----
-
-#### `disconnect(): Promise<void>`
-
-Disconnects the currently connected wallet.
-
----
-
-#### `isConnected(): Promise<boolean>`
-
-Returns whether a wallet is currently connected.
-
----
-
-#### `getUserInfo(): Promise<UserInfo | undefined>`
-
-Returns info about the connected user, or `undefined` if not connected.
-
-```typescript
-interface UserInfo {
-  publicAddress: string;
-  walletName: WalletName;
-  walletId: WalletId;
-  email?: string;
-}
-```
-
----
-
-#### `getChainId(): Promise<number>`
-
-Returns the current chain ID.
-
----
-
-#### `switchChain(chainId, chain?): Promise<void>`
-
-Switches to a different network. If the chain isn't added to the wallet, it will attempt to add it.
-
-```typescript
-import { polygon } from 'viem/chains';
-await aurum.switchChain(polygon.id, polygon);
-```
-
----
-
-#### `updateBrandConfig(newConfig): void`
-
-Updates the brand configuration (e.g., theme).
-
-```typescript
-aurum.updateBrandConfig({ theme: 'light' });
-```
-
----
-
-#### `updateWalletsConfig(newConfig): void`
-
-Updates the wallets configuration (currently supports `exclude`).
-
-```typescript
-aurum.updateWalletsConfig({ exclude: [WalletId.MetaMask] });
-```
-
----
-
-## Embedded Widgets
-
-React components for embedded wallet connection UI (instead of modal).
-
-```tsx
-import { ConnectWidget } from '@aurum-sdk/core/widgets';
-
-<ConnectWidget
-  aurum={aurum}
-  onConnect={(result) => {
-    console.log('Connected:', result.address, result.walletId);
-  }}
-/>;
-```
-
-| Property    | Type                                              | Description                            |
-| ----------- | ------------------------------------------------- | -------------------------------------- |
-| `aurum`     | `Aurum`                                           | Your Aurum instance                    |
-| `onConnect` | `(result: { address, walletId, email? }) => void` | Called when user successfully connects |
-
----
-
-## Headless API
-
-Build custom wallet connection UIs while using Aurum's wallet management.
-
-### Direct Wallet Connection
-
-Use `connect(walletId)` to connect directly without showing the modal:
-
-```typescript
-const address = await aurum.connect(WalletId.MetaMask);
-```
-
-**Note:** `WalletId.Email` and `WalletId.WalletConnect` have dedicated methods below and cannot be used with `connect(walletId)`.
-
----
-
-### Email Authentication
-
-Two-step flow for Coinbase Embedded Wallet:
-
-#### `emailAuthStart(email): Promise<{ flowId: string }>`
-
-Sends an OTP code to the provided email.
-
-#### `emailAuthVerify(flowId, otp): Promise<{ address: string, email: string, isNewUser: boolean }>`
-
-Verifies the OTP and completes connection.
-
-```typescript
-// Step 1: Send OTP
-const { flowId } = await aurum.emailAuthStart('user@example.com');
-
-// Step 2: User enters OTP from their email
-const otp = await promptUserForOTP();
-
-// Step 3: Verify and connect
-const { address, email, isNewUser } = await aurum.emailAuthVerify(flowId, otp);
-```
-
----
-
-### WalletConnect URI Flow
-
-For custom QR code displays:
-
-#### `getWalletConnectSession(): Promise<{ uri: string, waitForConnection: () => Promise<string> }>`
-
-```typescript
-const { uri, waitForConnection } = await aurum.getWalletConnectSession();
-
-// Display your own QR code
-renderQRCode(uri);
-
-// Wait for user to scan and approve
-const address = await waitForConnection();
-```
-
----
-
-## Web3 Library Integrations
-
-### Viem
-
-```typescript
-import { createPublicClient, createWalletClient, custom, http } from 'viem';
-import { mainnet } from 'viem/chains';
-
-const publicClient = createPublicClient({
-  chain: mainnet,
-  transport: http('YOUR_NODE_URL'),
-});
-
-const walletClient = createWalletClient({
-  transport: custom(aurum.rpcProvider),
-});
-
-// Sign a message
-const [address] = await walletClient.getAddresses();
-const signature = await walletClient.signMessage({ account: address, message: 'Hello!' });
-
-// Send a transaction
-const hash = await walletClient.sendTransaction({
-  account: address,
-  to: '0x...',
-  value: parseEther('0.01'),
-});
-```
-
----
-
-### Ethers v5
-
-```typescript
-import { ethers } from 'ethers';
-
-const provider = new ethers.providers.Web3Provider(aurum.rpcProvider);
-const signer = provider.getSigner();
-
-const signature = await signer.signMessage('Hello!');
-const tx = await signer.sendTransaction({ to: '0x...', value: ethers.utils.parseEther('0.01') });
-```
-
----
-
-### Ethers v6
-
-```typescript
-import { BrowserProvider } from 'ethers';
-
-const provider = new BrowserProvider(aurum.rpcProvider);
-const signer = await provider.getSigner();
-
-const signature = await signer.signMessage('Hello!');
-const tx = await signer.sendTransaction({ to: '0x...', value: ethers.parseEther('0.01') });
-```
-
----
-
-## Troubleshooting
-
-### Sourcemap warnings in console
-
-Add to your `.env` file:
-
-```
-GENERATE_SOURCEMAP=false
-```
-
-### Email wallet fails to send OTP
-
-Ensure your domain is added to the **Coinbase Developer Platform** domain allowlist:
-[How to Configure Domains](https://docs.cdp.coinbase.com/embedded-wallets/domains#how-to-configure-domains)
-
-### WalletConnect does not prompt user to connect
-
-Add your domain to the **Reown** dashboard allowlist at [dashboard.reown.com](https://dashboard.reown.com/).
-
-### AppKit modal login methods
-
-Configure available login methods (email, social) in the [Reown dashboard](https://dashboard.reown.com/), not in the SDK.

package/dist/{chunk-3TZNNET3.mjs → chunk-5NXCRO5Q.mjs}

@@ -508,7 +508,7 @@ var PoweredBy = () => {
     {
       variant: "text",
       size: "xs",
-      onClick: () => window.open("https://npmjs.com/package/@aurum-sdk/core", "_blank"),
+      onClick: () => window.open("https://aurumsdk.com", "_blank"),
       style: { gap: "0.15rem" },
       children: [
         /* @__PURE__ */ jsx9(Text, { variant: "secondary", size: "xs", children: "Powered by" }),
@@ -756,7 +756,7 @@ function initSentry(enabled = true) {
   Sentry.init({
     dsn: "https://0bb16fd7057ac7b45ae0ab416cdbea8b@o4505953815494656.ingest.us.sentry.io/4509747448184832",
     environment: getEnvironment(),
-    release: `@aurum-sdk/core@${"0.1.3"}`,
+    release: `@aurum-sdk/core@${"0.1.5"}`,
     sendDefaultPii: false,
     enableLogs: true
   });
@@ -1023,25 +1023,16 @@ var GridWalletButton = ({
 
 // src/components/ConnectModal/WalletListGrid.tsx
 import { jsx as jsx21 } from "react/jsx-runtime";
-var MAX_PER_ROW = 4;
-function splitIntoRows(items) {
-  if (items.length === 0) return [];
-  const numRows = Math.ceil(items.length / MAX_PER_ROW);
-  const basePerRow = Math.floor(items.length / numRows);
-  const remainder = items.length % numRows;
-  const rows = [];
-  let index = 0;
-  for (let i = 0; i < numRows; i++) {
-    const rowSize = basePerRow + (i < remainder ? 1 : 0);
-    rows.push(items.slice(index, index + rowSize));
-    index += rowSize;
-  }
-  return rows;
+var MAX_COLUMNS = 4;
+function getColumnCount(itemCount) {
+  if (itemCount <= MAX_COLUMNS) return itemCount;
+  const numRows = Math.ceil(itemCount / MAX_COLUMNS);
+  return Math.ceil(itemCount / numRows);
 }
 var WalletListGrid = ({ wallets }) => {
   const { connectWallet } = useConnectModal();
-  const rows = splitIntoRows(wallets);
-  return /* @__PURE__ */ jsx21("div", { className: "aurum-wallet-grid", children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx21("div", { className: "aurum-wallet-grid-row", children: row.map((wallet) => /* @__PURE__ */ jsx21(GridWalletButton, { wallet, connectWallet }, wallet.id)) }, rowIndex)) });
+  const columns = getColumnCount(wallets.length);
+  return /* @__PURE__ */ jsx21("div", { className: "aurum-wallet-grid", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` }, children: wallets.map((wallet) => /* @__PURE__ */ jsx21(GridWalletButton, { wallet, connectWallet }, wallet.id)) });
 };
 
 // src/components/ConnectModal/WalletListStacked.tsx
@@ -2397,7 +2388,7 @@ var ConnectPages = () => {
 };
 
 // src/styles/bundledStyles.ts
-var bundledStyles = "/* ui/globals.css */\n/* ============================================\n   AURUM SDK - DESIGN TOKEN SYSTEM\n   ============================================\n\n   Google Fonts:\n   - Noto Sans: 400, 500, 600, 700\n   ============================================ */\n\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');\n\n/* ============================================\n   External variables (injected by createShadowRoot.ts):\n   - --aurum-primary-color: Brand color from dapp\n   - --aurum-border-radius-*: Radius scale tokens\n   - --aurum-modal-z-index: Modal z-index\n   - --aurum-font-family: Font family from dapp\n   ============================================ */\n\n/* Base reset styles for Shadow DOM */\n:host {\n  all: initial;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/* Ensure form elements inherit font from parent */\ninput,\nbutton,\ntextarea,\nselect {\n  font-family: inherit;\n}\n\n.aurum-sdk {\n  /* ==========================================\n     TYPOGRAPHY\n     ========================================== */\n  font-family: var(--aurum-font-family);\n  font-size: 1rem;\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  /* Font weights */\n  --font-normal: 400;\n  --font-medium: 500;\n  --font-semibold: 600;\n  --font-bold: 700;\n\n  /* ==========================================\n     TRANSITIONS\n     ========================================== */\n  --duration-fast: 100ms;\n  --duration-normal: 200ms;\n  --duration-slow: 300ms;\n  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);\n  --ease-in: cubic-bezier(0.4, 0, 1, 1);\n  --ease-out: cubic-bezier(0, 0, 0.2, 1);\n\n  /* ==========================================\n     LIGHT THEME COLORS (Default)\n     ========================================== */\n\n  /* Foreground / Text */\n  --color-foreground: #0c0c0c;\n  --color-foreground-muted: #787878;\n  --color-foreground-subtle: #979797;\n\n  /* Card surfaces */\n  --color-card: #ffffff;\n\n  /* Borders */\n  --color-border: #d9d9d9;\n  --color-border-muted: #c0c0c0;\n  --color-border-focus: var(--aurum-primary-color);\n\n  /* Brand / Primary (from integrator) */\n  --color-primary: var(--aurum-primary-color);\n  --color-primary-foreground: #ffffff;\n  --color-primary-hover: color-mix(in srgb, var(--aurum-primary-color) 85%, #000);\n  --color-primary-muted: color-mix(in srgb, var(--aurum-primary-color) 15%, transparent);\n\n  /* Interactive elements */\n  --color-accent: #f1f1f1;\n  --color-accent-foreground: #0d0d0d;\n  --color-accent-hover: #e6e6e6;\n\n  /* Semantic colors */\n  --color-success: #22c55e;\n  --color-error: #ef4444;\n\n  /* Overlay / Modal */\n  --color-overlay: rgb(0 0 0 / 0.5);\n\n  /* Ring (focus indicator) */\n  --color-ring: var(--aurum-primary-color);\n  --ring-offset: 0.125rem;\n\n  /* Shadows */\n  --shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n}\n\n/* ==========================================\n   DARK THEME COLORS\n   ========================================== */\n\n.aurum-sdk[data-theme='dark'] {\n  /* Foreground / Text */\n  --color-foreground: #fafafa;\n  --color-foreground-muted: #a9a9a9;\n  --color-foreground-subtle: #777777;\n\n  /* Card surfaces */\n  --color-card: #151515;\n\n  /* Borders */\n  --color-border: #282828;\n  --color-border-muted: #424242;\n  --color-border-focus: var(--aurum-primary-color);\n\n  /* Brand / Primary (from integrator) */\n  --color-primary: var(--aurum-primary-color);\n  --color-primary-foreground: #0a0a0a;\n  --color-primary-hover: color-mix(in srgb, var(--aurum-primary-color) 85%, #fff);\n  --color-primary-muted: color-mix(in srgb, var(--aurum-primary-color) 20%, transparent);\n\n  /* Interactive elements */\n  --color-accent: #272727;\n  --color-accent-foreground: #fafafa;\n  --color-accent-hover: #404040;\n\n  /* Semantic colors */\n  --color-success: #22c55e;\n  --color-error: #ef4444;\n\n  /* Overlay / Modal */\n  --color-overlay: rgb(0 0 0 / 0.7);\n\n  /* Ring (focus indicator) */\n  --color-ring: var(--aurum-primary-color);\n  --ring-offset: 0.125rem;\n\n  /* Shadows */\n  --shadow: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5);\n}\n\n\n/* components/ConnectModal/AdditionalWalletsIcon.css */\n.additional-wallets-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.additional-wallets-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-rows: 1fr 1fr;\n  gap: 0.125rem;\n  align-items: center;\n  justify-items: center;\n}\n\n.additional-wallets-grid-item {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.additional-wallets-placeholder {\n  background-color: var(--aurum-color-bg-tertiary);\n  border-radius: var(--aurum-border-radius-xs);\n  opacity: 0.4;\n}\n\n.circular-icon-wrapper {\n  border-radius: 50%;\n  overflow: hidden;\n  border: 2px solid var(--aurum-color-bg-secondary);\n}\n\n.circular-icon-wrapper--front {\n  z-index: 2;\n}\n\n.circular-icon-wrapper--back {\n  margin-left: -0.5rem;\n  z-index: 1;\n}\n\n\n/* components/ConnectModal/ConnectionStatus/ConnectionStatus.css */\n@keyframes shake {\n  0%,\n  100% {\n    transform: translateX(0);\n  }\n  20%,\n  60% {\n    transform: translateX(-0.125rem);\n  }\n  40%,\n  80% {\n    transform: translateX(0.125rem);\n  }\n}\n\n@keyframes opacity-pulse {\n  0%,\n  100% {\n    opacity: 0.4;\n  }\n  50% {\n    opacity: 1;\n  }\n}\n\n@keyframes scale-in {\n  from {\n    transform: scale(0.75);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n\n.wallet-icon-shake {\n  /* Duration synced with ANIMATION_DURATION.SHAKE in constants/theme.ts */\n  animation: shake var(--duration-slow) var(--ease-default);\n}\n\n.ellipses-loading,\n.ellipses-success,\n.status-icon-with-dots {\n  display: flex;\n  gap: 0.25rem;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n}\n\n.ellipses-loading span,\n.ellipses-success span,\n.status-icon-with-dots .dot,\n.status-icon-with-dots .icon-center {\n  font-size: 3rem;\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 0.9375rem;\n  height: 3rem;\n  margin: 0;\n  padding: 0;\n  flex-shrink: 0;\n}\n\n.ellipses-loading span,\n.ellipses-success span,\n.status-icon-with-dots .dot {\n  transform: translateY(-0.28125rem);\n}\n\n.status-icon-with-dots .icon-center {\n  transform: translateY(-0.2rem);\n}\n\n.ellipses-loading span {\n  color: var(--color-foreground-subtle);\n  opacity: 0.4;\n  animation: opacity-pulse 1.5s var(--ease-default) infinite;\n  will-change: opacity;\n}\n\n.ellipses-loading span:nth-child(2) {\n  animation-delay: 0.2s;\n}\n.ellipses-loading span:nth-child(3) {\n  animation-delay: 0.4s;\n}\n.ellipses-loading span:nth-child(4) {\n  animation-delay: 0.6s;\n}\n.ellipses-loading span:nth-child(5) {\n  animation-delay: 0.8s;\n}\n\n.ellipses-success span,\n.status-icon-with-dots.success .dot {\n  color: var(--aurum-primary-color);\n}\n\n.status-icon-with-dots.error .dot {\n  color: var(--color-error);\n}\n\n.status-button {\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  width: 100%;\n}\n\n.success-icon-large {\n  animation: scale-in var(--duration-fast) var(--ease-out);\n}\n\n/* Logo containers for visual balance */\n.brand-logo-container,\n.wallet-logo-with-retry {\n  position: relative;\n  display: inline-block;\n}\n\n/* Always reserve space on both sides to prevent layout shift when retry button appears/disappears */\n.brand-logo-container {\n  margin-left: 0.375rem; /* Matches retry button's right: -0.375rem */\n}\n\n.wallet-logo-with-retry {\n  margin-right: 0.375rem; /* Reserve space for retry button */\n}\n\n.retry-icon-overlay.retry-icon-overlay {\n  position: absolute;\n  bottom: -0.125rem;\n  right: -0.375rem;\n  width: 1.625rem;\n  height: 1.625rem;\n  min-width: 1.625rem;\n  min-height: 1.625rem;\n  border-radius: 50%;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n\n/* components/ConnectModal/EmailAuth.css */\n.email-auth-input {\n  width: 100%;\n  outline: none;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.75rem;\n  box-sizing: border-box;\n  padding: 0.75rem 3rem 0.75rem 3rem;\n  color: var(--color-foreground);\n  transition:\n    outline 0.2s ease,\n    border-color 0.2s ease;\n  background-color: var(--color-card);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--color-border);\n  border-radius: var(--aurum-border-radius-md);\n}\n\n.email-auth-input:hover:not(:focus):not(.email-auth-input--error) {\n  border-color: var(--color-border-muted);\n}\n\n.email-auth-input:focus {\n  outline: 2px solid var(--color-ring);\n  outline-offset: var(--ring-offset);\n}\n\n.email-auth-input--error {\n  outline: 2px solid var(--color-error);\n  outline-offset: var(--ring-offset);\n}\n\n.email-auth-submit-button.aurum-button {\n  top: 50%;\n  right: 0.75rem;\n  height: auto;\n  padding: 0.5rem;\n  min-width: auto;\n  position: absolute;\n  transform: translateY(-50%);\n  border-radius: var(--aurum-border-radius-sm);\n}\n\n.email-auth-icon {\n  top: 50%;\n  left: 1rem;\n  position: absolute;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n\n\n/* components/ConnectModal/WalletGrid.css */\n.aurum-wallet-grid {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: 100%;\n}\n\n.aurum-wallet-grid-row {\n  display: flex;\n  gap: 10px;\n  width: 100%;\n}\n\n.aurum-wallet-grid-row > * {\n  flex: 1;\n  min-width: 0;\n}\n\n\n/* components/ModalHeader/ModalHeader.css */\n.modal-header {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: 1rem;\n  background-color: var(--color-card);\n  border-radius: var(--aurum-border-radius-lg) var(--aurum-border-radius-lg) 0 0;\n  z-index: 1;\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n}\n\n.modal-header > div {\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n.modal-header-left {\n  justify-content: flex-start;\n  min-width: 2.25rem;\n  height: 2.25rem;\n}\n\n.modal-header-center {\n  justify-content: center;\n  max-width: 12.5rem;\n  text-align: center;\n  line-height: 1.2;\n  overflow-wrap: break-word;\n}\n\n.modal-header-right {\n  justify-content: flex-end;\n  min-width: 2.25rem;\n  height: 2.25rem;\n}\n\n\n/* components/PoweredBy/PoweredBy.css */\n.powered-by-container {\n  position: absolute;\n  bottom: 1rem;\n  left: 0;\n  right: 0;\n  width: 100%;\n}\n\n\n/* components/QRCodeDisplay/QRCodeDisplay.css */\n@keyframes qr-shimmer {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n.qr-container-shimmer {\n  position: relative;\n  overflow: hidden; /* Keep for shimmer animation */\n}\n\n.qr-container-shimmer::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    color-mix(in srgb, var(--color-foreground) 10%, transparent) 50%,\n    transparent 100%\n  );\n  animation: qr-shimmer 2s infinite;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.qr-container {\n  border-radius: var(--aurum-border-radius-md);\n  border: 1px solid var(--color-border);\n  padding: 0.5rem;\n  box-sizing: content-box;\n  transition: border-color var(--duration-slow) var(--ease-default);\n}\n\n.qr-subtitle {\n  max-width: 15rem;\n}\n\n\n/* components/QRCodeDisplay/QRCodeSkeleton.css */\n.qr-skeleton-container {\n  width: 100%;\n  position: relative;\n}\n\n.qr-skeleton-svg {\n  display: block;\n  position: relative;\n  z-index: 2;\n  border-radius: var(--aurum-border-radius-sm);\n}\n\n.qr-skeleton-dot {\n  opacity: 0.7;\n}\n\n.qr-skeleton-eye {\n  opacity: 0.7;\n}\n\n\n/* components/SpinnerWithIcon/SpinnerWithIcon.css */\n.spinner-with-icon {\n  transition: all var(--duration-normal) var(--ease-default);\n}\n\n.spinner-with-icon svg {\n  transition: color var(--duration-normal) var(--ease-default);\n}\n\n\n/* components/widgets/widgets.css */\n/* Widget-specific styles that match modal-content */\n\n.widget-provider {\n  position: relative;\n  width: 23.75rem;\n  min-width: 17rem;\n  margin: 0 auto;\n  padding: 1.25rem 1.5rem;\n  background-color: var(--color-card);\n  border-radius: var(--aurum-border-radius-lg);\n  border: 1px solid var(--color-border-muted);\n  box-sizing: border-box;\n  color: var(--color-card-foreground);\n  box-shadow: var(--shadow);\n  outline: none;\n  overflow-x: auto;\n}\n\n.widget-provider .modal-header {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n}\n\n@media (max-width: 30.25rem) {\n  .widget-provider {\n    width: 100%;\n    max-width: 100%;\n    border-radius: var(--aurum-border-radius-md);\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* Ensure page wrapper fills width in flex container on mobile */\n  /* .widget-pages {\n    width: 100%;\n  } */\n}\n\n\n/* ui/Badge/Badge.css */\n.aurum-badge-recent {\n  padding: 0.25rem 0.5rem;\n  border-radius: var(--aurum-border-radius-xs);\n\n  font-size: 0.65rem;\n  line-height: 1;\n  letter-spacing: 0.07em;\n  text-transform: uppercase;\n\n  color: var(--color-foreground-muted);\n}\n\n\n/* ui/Button/Button.css */\n.aurum-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  font-weight: var(--font-semibold);\n  cursor: pointer;\n  transition:\n    background-color var(--duration-normal) var(--ease-default),\n    color var(--duration-normal) var(--ease-default),\n    transform var(--duration-fast) var(--ease-default),\n    box-shadow var(--duration-normal) var(--ease-default);\n  text-decoration: none;\n  box-sizing: border-box;\n  position: relative;\n  outline: none;\n  font-family: inherit;\n}\n\n.aurum-button:focus-visible {\n  outline: 2px solid var(--color-ring);\n  outline-offset: var(--ring-offset);\n}\n\n.aurum-button--xs {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n  gap: 0.25rem;\n  border-radius: var(--aurum-border-radius-xs);\n}\n\n.aurum-button--sm {\n  padding: 0.5rem 0.75rem;\n  font-size: 0.875rem;\n  gap: 0.25rem;\n  border-radius: calc(var(--aurum-border-radius-sm) - 2px);\n}\n\n.aurum-button--md {\n  padding: 0.75rem 1rem;\n  font-size: 0.9rem;\n  gap: 0.5rem;\n  border-radius: calc(var(--aurum-border-radius-md) - 2px);\n}\n\n.aurum-button--lg {\n  padding: 1rem 1.5rem;\n  font-size: 1rem;\n  gap: 0.75rem;\n  border-radius: var(--aurum-border-radius-md);\n}\n\n.aurum-button--full-width {\n  width: 100%;\n}\n\n.aurum-button--primary {\n  background-color: var(--color-primary);\n  color: var(--color-primary-foreground);\n}\n\n.aurum-button--primary:active:not(:disabled) {\n  transform: scale(0.98);\n}\n\n.aurum-button--secondary {\n  background-color: var(--color-accent);\n  color: var(--color-accent-foreground);\n}\n\n.aurum-button--secondary:active:not(:disabled) {\n  transform: scale(0.98);\n}\n\n.aurum-button--tertiary {\n  background: transparent;\n  color: var(--color-foreground);\n  border: 1px solid var(--color-border);\n}\n\n.aurum-button--tertiary:active:not(:disabled) {\n  transform: scale(0.98);\n}\n\n.aurum-button--text {\n  background: transparent;\n  color: var(--color-primary);\n  padding: 0.25rem;\n}\n\n.aurum-button--text:not(.aurum-button--full-width) {\n  width: fit-content;\n}\n\n.aurum-button--text:active:not(:disabled) {\n  transform: scale(0.98);\n}\n\n.aurum-button--close {\n  background: transparent;\n  color: var(--color-foreground-muted);\n  border: none;\n  padding: 0.5rem;\n  border-radius: var(--aurum-border-radius-md);\n  font-size: 1.25rem;\n  line-height: 1;\n}\n\n.aurum-button--close:active:not(:disabled) {\n  transform: scale(0.95);\n}\n\n/* Hover styles only for devices with hover capability (not touch) */\n@media (hover: hover) {\n  .aurum-button--primary:hover:not(:disabled) {\n    background-color: var(--color-primary-hover);\n  }\n\n  .aurum-button--secondary:hover:not(:disabled) {\n    background-color: var(--color-accent-hover);\n  }\n\n  .aurum-button--tertiary:hover:not(:disabled) {\n    background-color: var(--color-accent);\n    border-color: var(--color-border-muted);\n  }\n\n  .aurum-button--text:hover:not(:disabled) {\n    opacity: 0.7;\n  }\n\n  .aurum-button--close:hover:not(:disabled) {\n    background-color: var(--color-accent);\n    color: var(--color-foreground);\n  }\n}\n\n.aurum-button--disabled,\n.aurum-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.aurum-button--loading {\n  pointer-events: none;\n}\n\n\n/* ui/Divider/Divider.css */\n.divider {\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n.divider-line {\n  flex: 1;\n  height: 1px;\n  background-color: var(--color-border);\n}\n\n.divider-text {\n  padding: 0 1rem;\n  color: var(--color-foreground-subtle);\n  font-size: 0.875rem;\n  font-weight: var(--font-medium);\n}\n\n\n/* ui/Modal/Modal.css */\n.modal-overlay {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: var(--aurum-modal-z-index);\n  background-color: var(--color-overlay);\n  opacity: 0;\n}\n\n.modal-overlay.modal-open {\n  opacity: 1;\n  transition: opacity 150ms ease-out;\n}\n\n.modal-overlay.modal-exiting {\n  opacity: 0;\n  transition: opacity 150ms ease-in;\n}\n\n.modal-content {\n  position: relative;\n  width: 23.75rem;\n  min-width: 17rem;\n  padding: 1.25rem 1.5rem;\n  color: var(--color-card-foreground);\n  background-color: var(--color-card);\n  border-radius: var(--aurum-border-radius-lg);\n  box-shadow: var(--shadow);\n  border: 1px solid var(--color-border-muted);\n  outline: none;\n  opacity: 0;\n  transform: scale(0.95);\n}\n\n.modal-overlay.modal-open .modal-content {\n  opacity: 1;\n  transform: scale(1);\n  transition:\n    opacity 150ms ease-out,\n    transform 150ms ease-out;\n}\n\n.modal-overlay.modal-exiting .modal-content {\n  opacity: 0;\n  transform: scale(0.95);\n  transition:\n    opacity 150ms ease-in,\n    transform 150ms ease-in;\n}\n\n.modal-page-container {\n  position: relative;\n  width: 100%;\n  overflow-x: visible;\n  overflow-y: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.modal-page-container::-webkit-scrollbar {\n  display: none;\n}\n\n.modal-page {\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  opacity: 0;\n  transition: opacity 0s;\n}\n\n.modal-page.active {\n  opacity: 1;\n  transition: opacity var(--duration-slow) var(--ease-out);\n}\n\n/* Mobile drawer layout */\n@media (max-width: 30.25rem) {\n  .modal-overlay {\n    align-items: flex-end;\n    justify-content: center;\n    opacity: 1;\n    transition: none;\n  }\n\n  .modal-overlay.modal-open {\n    transition: none;\n  }\n\n  .modal-overlay.modal-exiting {\n    opacity: 1;\n    background-color: transparent;\n    transition: none;\n  }\n\n  .modal-content {\n    width: 100%;\n    max-height: 82vh;\n    max-height: 82dvh;\n    min-height: 35vh;\n    min-height: 35dvh;\n    padding: 1rem;\n    border-radius: var(--aurum-border-radius-lg) var(--aurum-border-radius-lg) 0 0;\n    border-bottom: none;\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    opacity: 1;\n    transform: translateY(100%);\n  }\n\n  .modal-overlay.modal-open .modal-content {\n    opacity: 1;\n    transform: translateY(0);\n    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .modal-overlay.modal-exiting .modal-content {\n    opacity: 1;\n    transform: translateY(100%);\n    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .modal-page-container {\n    flex: 0 1 auto;\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n  }\n\n  .modal-page {\n    flex: 0 1 auto;\n    display: flex;\n    flex-direction: column;\n  }\n}\n\n\n/* ui/Spinner/Spinner.css */\n.spinner {\n  flex-shrink: 0;\n  animation: spinner-rotate 1s linear infinite;\n}\n\n@keyframes spinner-rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n\n/* ui/Text/Text.css */\n.aurum-text {\n  margin: 0;\n  padding: 0;\n  font-family: inherit;\n  line-height: 1.5;\n}\n\n.aurum-text--primary {\n  color: var(--color-foreground);\n}\n\n.aurum-text--secondary {\n  color: var(--color-foreground-muted);\n}\n\n.aurum-text--tertiary {\n  color: var(--color-foreground-subtle);\n}\n\n.aurum-text--error {\n  color: var(--color-error);\n}\n\n.aurum-text--brand {\n  color: var(--color-primary);\n}\n\n.aurum-text--success {\n  color: var(--color-success);\n}\n\n.aurum-text--xs {\n  font-size: 0.75rem;\n  line-height: 1.4;\n}\n\n.aurum-text--sm {\n  font-size: 0.875rem;\n  line-height: 1.45;\n}\n\n.aurum-text--md {\n  font-size: 1rem;\n  line-height: 1.5;\n}\n\n.aurum-text--lg {\n  font-size: 1.125rem;\n  line-height: 1.5;\n}\n\n.aurum-text--normal {\n  font-weight: var(--font-normal);\n}\n\n.aurum-text--semibold {\n  font-weight: var(--font-semibold);\n}\n\n.aurum-text--bold {\n  font-weight: var(--font-bold);\n}\n\n.aurum-text--align-left {\n  text-align: left;\n}\n\n.aurum-text--align-center {\n  text-align: center;\n}\n\n.aurum-text--align-right {\n  text-align: right;\n}\n\n\n";
+var bundledStyles = "/* ui/globals.css */\n/* ============================================\n   AURUM SDK - DESIGN TOKEN SYSTEM\n   ============================================\n\n   Google Fonts:\n   - Noto Sans: 400, 500, 600, 700\n   ============================================ */\n\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');\n\n/* ============================================\n   External variables (injected by createShadowRoot.ts):\n   - --aurum-primary-color: Brand color from dapp\n   - --aurum-border-radius-*: Radius scale tokens\n   - --aurum-modal-z-index: Modal z-index\n   - --aurum-font-family: Font family from dapp\n   ============================================ */\n\n/* Base reset styles for Shadow DOM */\n:host {\n  all: initial;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/* Ensure form elements inherit font from parent */\ninput,\nbutton,\ntextarea,\nselect {\n  font-family: inherit;\n}\n\n.aurum-sdk {\n  /* ==========================================\n     TYPOGRAPHY\n     ========================================== */\n  font-family: var(--aurum-font-family);\n  font-size: 1rem;\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  /* Font weights */\n  --font-normal: 400;\n  --font-medium: 500;\n  --font-semibold: 600;\n  --font-bold: 700;\n\n  /* ==========================================\n     TRANSITIONS\n     ========================================== */\n  --duration-fast: 100ms;\n  --duration-normal: 200ms;\n  --duration-slow: 300ms;\n  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);\n  --ease-in: cubic-bezier(0.4, 0, 1, 1);\n  --ease-out: cubic-bezier(0, 0, 0.2, 1);\n\n  /* ==========================================\n     LIGHT THEME COLORS (Default)\n     ========================================== */\n\n  /* Foreground / Text */\n  --color-foreground: #0c0c0c;\n  --color-foreground-muted: #787878;\n  --color-foreground-subtle: #979797;\n\n  /* Card surfaces */\n  --color-card: #ffffff;\n\n  /* Borders */\n  --color-border: #d9d9d9;\n  --color-border-muted: #c0c0c0;\n  --color-border-focus: var(--aurum-primary-color);\n\n  /* Brand / Primary (from integrator) */\n  --color-primary: var(--aurum-primary-color);\n  --color-primary-foreground: #ffffff;\n  --color-primary-hover: color-mix(in srgb, var(--aurum-primary-color) 85%, #000);\n  --color-primary-muted: color-mix(in srgb, var(--aurum-primary-color) 15%, transparent);\n\n  /* Interactive elements */\n  --color-accent: #f1f1f1;\n  --color-accent-foreground: #0d0d0d;\n  --color-accent-hover: #e6e6e6;\n\n  /* Semantic colors */\n  --color-success: #22c55e;\n  --color-error: #ef4444;\n\n  /* Overlay / Modal */\n  --color-overlay: rgb(0 0 0 / 0.5);\n\n  /* Ring (focus indicator) */\n  --color-ring: var(--aurum-primary-color);\n  --ring-offset: 0.125rem;\n\n  /* Shadows */\n  --shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n}\n\n/* ==========================================\n   DARK THEME COLORS\n   ========================================== */\n\n.aurum-sdk[data-theme='dark'] {\n  /* Foreground / Text */\n  --color-foreground: #fafafa;\n  --color-foreground-muted: #a9a9a9;\n  --color-foreground-subtle: #777777;\n\n  /* Card surfaces */\n  --color-card: #151515;\n\n  /* Borders */\n  --color-border: #282828;\n  --color-border-muted: #424242;\n  --color-border-focus: var(--aurum-primary-color);\n\n  /* Brand / Primary (from integrator) */\n  --color-primary: var(--aurum-primary-color);\n  --color-primary-foreground: #0a0a0a;\n  --color-primary-hover: color-mix(in srgb, var(--aurum-primary-color) 85%, #fff);\n  --color-primary-muted: color-mix(in srgb, var(--aurum-primary-color) 20%, transparent);\n\n  /* Interactive elements */\n  --color-accent: #272727;\n  --color-accent-foreground: #fafafa;\n  --color-accent-hover: #404040;\n\n  /* Semantic colors */\n  --color-success: #22c55e;\n  --color-error: #ef4444;\n\n  /* Overlay / Modal */\n  --color-overlay: rgb(0 0 0 / 0.7);\n\n  /* Ring (focus indicator) */\n  --color-ring: var(--aurum-primary-color);\n  --ring-offset: 0.125rem;\n\n  /* Shadows */\n  --shadow: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5);\n}\n\n\n/* components/ConnectModal/AdditionalWalletsIcon.css */\n.additional-wallets-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.additional-wallets-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-rows: 1fr 1fr;\n  gap: 0.125rem;\n  align-items: center;\n  justify-items: center;\n}\n\n.additional-wallets-grid-item {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.additional-wallets-placeholder {\n  background-color: var(--aurum-color-bg-tertiary);\n  border-radius: var(--aurum-border-radius-xs);\n  opacity: 0.4;\n}\n\n.circular-icon-wrapper {\n  border-radius: 50%;\n  overflow: hidden;\n  border: 2px solid var(--aurum-color-bg-secondary);\n}\n\n.circular-icon-wrapper--front {\n  z-index: 2;\n}\n\n.circular-icon-wrapper--back {\n  margin-left: -0.5rem;\n  z-index: 1;\n}\n\n\n/* components/ConnectModal/ConnectionStatus/ConnectionStatus.css */\n@keyframes shake {\n  0%,\n  100% {\n    transform: translateX(0);\n  }\n  20%,\n  60% {\n    transform: translateX(-0.125rem);\n  }\n  40%,\n  80% {\n    transform: translateX(0.125rem);\n  }\n}\n\n@keyframes opacity-pulse {\n  0%,\n  100% {\n    opacity: 0.4;\n  }\n  50% {\n    opacity: 1;\n  }\n}\n\n@keyframes scale-in {\n  from {\n    transform: scale(0.75);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n\n.wallet-icon-shake {\n  /* Duration synced with ANIMATION_DURATION.SHAKE in constants/theme.ts */\n  animation: shake var(--duration-slow) var(--ease-default);\n}\n\n.ellipses-loading,\n.ellipses-success,\n.status-icon-with-dots {\n  display: flex;\n  gap: 0.25rem;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n}\n\n.ellipses-loading span,\n.ellipses-success span,\n.status-icon-with-dots .dot,\n.status-icon-with-dots .icon-center {\n  font-size: 3rem;\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 0.9375rem;\n  height: 3rem;\n  margin: 0;\n  padding: 0;\n  flex-shrink: 0;\n}\n\n.ellipses-loading span,\n.ellipses-success span,\n.status-icon-with-dots .dot {\n  transform: translateY(-0.28125rem);\n}\n\n.status-icon-with-dots .icon-center {\n  transform: translateY(-0.2rem);\n}\n\n.ellipses-loading span {\n  color: var(--color-foreground-subtle);\n  opacity: 0.4;\n  animation: opacity-pulse 1.5s var(--ease-default) infinite;\n  will-change: opacity;\n}\n\n.ellipses-loading span:nth-child(2) {\n  animation-delay: 0.2s;\n}\n.ellipses-loading span:nth-child(3) {\n  animation-delay: 0.4s;\n}\n.ellipses-loading span:nth-child(4) {\n  animation-delay: 0.6s;\n}\n.ellipses-loading span:nth-child(5) {\n  animation-delay: 0.8s;\n}\n\n.ellipses-success span,\n.status-icon-with-dots.success .dot {\n  color: var(--aurum-primary-color);\n}\n\n.status-icon-with-dots.error .dot {\n  color: var(--color-error);\n}\n\n.status-button {\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  width: 100%;\n}\n\n.success-icon-large {\n  animation: scale-in var(--duration-fast) var(--ease-out);\n}\n\n/* Logo containers for visual balance */\n.brand-logo-container,\n.wallet-logo-with-retry {\n  position: relative;\n  display: inline-block;\n}\n\n/* Always reserve space on both sides to prevent layout shift when retry button appears/disappears */\n.brand-logo-container {\n  margin-left: 0.375rem; /* Matches retry button's right: -0.375rem */\n}\n\n.wallet-logo-with-retry {\n  margin-right: 0.375rem; /* Reserve space for retry button */\n}\n\n.retry-icon-overlay.retry-icon-overlay {\n  position: absolute;\n  bottom: -0.125rem;\n  right: -0.375rem;\n  width: 1.625rem;\n  height: 1.625rem;\n  min-width: 1.625rem;\n  min-height: 1.625rem;\n  border-radius: 50%;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n\n/* components/ConnectModal/EmailAuth.css */\n.email-auth-input {\n  width: 100%;\n  outline: none;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.75rem;\n  box-sizing: border-box;\n  padding: 0.75rem 3rem 0.75rem 3rem;\n  color: var(--color-foreground);\n  transition:\n    outline 0.2s ease,\n    border-color 0.2s ease;\n  background-color: var(--color-card);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--color-border);\n  border-radius: var(--aurum-border-radius-md);\n}\n\n.email-auth-input:hover:not(:focus):not(.email-auth-input--error) {\n  border-color: var(--color-border-muted);\n}\n\n.email-auth-input:focus {\n  outline: 2px solid var(--color-ring);\n  outline-offset: var(--ring-offset);\n}\n\n.email-auth-input--error {\n  outline: 2px solid var(--color-error);\n  outline-offset: var(--ring-offset);\n}\n\n.email-auth-submit-button.aurum-button {\n  top: 50%;\n  right: 0.75rem;\n  height: auto;\n  padding: 0.5rem;\n  min-width: auto;\n  position: absolute;\n  transform: translateY(-50%);\n  border-radius: var(--aurum-border-radius-sm);\n}\n\n.email-auth-icon {\n  top: 50%;\n  left: 1rem;\n  position: absolute;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n\n\n/* components/ConnectModal/WalletGrid.css */\n.aurum-wallet-grid {\n  display: grid;\n  gap: 10px;\n  width: 100%;\n}\n\n\n/* components/ModalHeader/ModalHeader.css */\n.modal-header {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: 1rem;\n  background-color: var(--color-card);\n  border-radius: var(--aurum-border-radius-lg) var(--aurum-border-radius-lg) 0 0;\n  z-index: 1;\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n}\n\n.modal-header > div {\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n.modal-header-left {\n  justify-content: flex-start;\n  min-width: 2.25rem;\n  height: 2.25rem;\n}\n\n.modal-header-center {\n  justify-content: center;\n  max-width: 12.5rem;\n  text-align: center;\n  line-height: 1.2;\n  overflow-wrap: break-word;\n}\n\n.modal-header-right {\n  justify-content: flex-end;\n  min-width: 2.25rem;\n  height: 2.25rem;\n}\n\n\n/* components/PoweredBy/PoweredBy.css */\n.powered-by-container {\n  position: absolute;\n  bottom: 1rem;\n  left: 0;\n  right: 0;\n  width: 100%;\n}\n\n\n/* components/QRCodeDisplay/QRCodeDisplay.css */\n@keyframes qr-shimmer {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n.qr-container-shimmer {\n  position: relative;\n  overflow: hidden; /* Keep for shimmer animation */\n}\n\n.qr-container-shimmer::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    color-mix(in srgb, var(--color-foreground) 10%, transparent) 50%,\n    transparent 100%\n  );\n  animation: qr-shimmer 2s infinite;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.qr-container {\n  border-radius: var(--aurum-border-radius-md);\n  border: 1px solid var(--color-border);\n  padding: 0.5rem;\n  box-sizing: content-box;\n  transition: border-color var(--duration-slow) var(--ease-default);\n}\n\n.qr-subtitle {\n  max-width: 15rem;\n}\n\n\n/* components/QRCodeDisplay/QRCodeSkeleton.css */\n.qr-skeleton-container {\n  width: 100%;\n  position: relative;\n}\n\n.qr-skeleton-svg {\n  display: block;\n  position: relative;\n  z-index: 2;\n  border-radius: var(--aurum-border-radius-sm);\n}\n\n.qr-skeleton-dot {\n  opacity: 0.7;\n}\n\n.qr-skeleton-eye {\n  opacity: 0.7;\n}\n\n\n/* components/SpinnerWithIcon/SpinnerWithIcon.css */\n.spinner-with-icon {\n  transition: all var(--duration-normal) var(--ease-default);\n}\n\n.spinner-with-icon svg {\n  transition: color var(--duration-normal) var(--ease-default);\n}\n\n\n/* components/widgets/widgets.css */\n/* Widget-specific styles that match modal-content */\n\n.widget-provider {\n  position: relative;\n  width: 23.75rem;\n  min-width: 17rem;\n  margin: 0 auto;\n  padding: 1.25rem 1.5rem;\n  background-color: var(--color-card);\n  border-radius: var(--aurum-border-radius-lg);\n  border: 1px solid var(--color-border-muted);\n  box-sizing: border-box;\n  color: var(--color-card-foreground);\n  box-shadow: var(--shadow);\n  outline: none;\n  overflow-x: auto;\n}\n\n.widget-provider .modal-header {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n}\n\n@media (max-width: 30.25rem) {\n  .widget-provider {\n    width: 100%;\n    max-width: 100%;\n    border-radius: var(--aurum-border-radius-md);\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* Ensure page wrapper fills width in flex container on mobile */\n  /* .widget-pages {\n    width: 100%;\n  } */\n}\n\n\n/* ui/Badge/Badge.css */\n.aurum-badge-recent {\n  padding: 0.25rem 0.5rem;\n  border-radius: var(--aurum-border-radius-xs);\n\n  font-size: 0.65rem;\n  line-height: 1;\n  letter-spacing: 0.07em;\n  text-transform: uppercase;\n\n  color: var(--color-foreground-muted);\n}\n\n\n/* ui/Button/Button.css */\n.aurum-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  font-weight: var(--font-semibold);\n  cursor: pointer;\n  transition:\n    background-color var(--duration-normal) var(--ease-default),\n    color var(--duration-normal) var(--ease-default),\n    transform var(--duration-fast) var(--ease-default),\n    box-shadow var(--duration-normal) var(--ease-default);\n  text-decoration: none;\n  box-sizing: border-box;\n  position: relative;\n  outline: none;\n  font-family: inherit;\n}\n\n.aurum-button:focus-visible {\n  outline: 2px solid var(--color-ring);\n  outline-offset: var(--ring-offset);\n}\n\n.aurum-button--xs {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n  gap: 0.25rem;\n  border-radius: var(--aurum-border-radius-xs);\n}\n\n.aurum-button--sm {\n  padding: 0.5rem 0.75rem;\n  font-size: 0.875rem;\n  gap: 0.25rem;\n  border-radius: calc(var(--aurum-border-radius-sm) - 2px);\n}\n\n.aurum-button--md {\n  padding: 0.75rem 1rem;\n  font-size: 0.9rem;\n  gap: 0.5rem;\n  border-radius: calc(var(--aurum-border-radius-md) - 2px);\n}\n\n.aurum-button--lg {\n  padding: 1rem 1.5rem;\n  font-size: 1rem;\n  gap: 0.75rem;\n  border-radius: var(--aurum-border-radius-md);\n}\n\n.aurum-button--full-width {\n  width: 100%;\n}\n\n.aurum-button--primary {\n  background-color: var(--color-primary);\n  color: var(--color-primary-foreground);\n}\n\n.aurum-button--primary:active:not(:disabled) {\n  transform: scale(0.98);\n}\n\n.aurum-button--secondary {\n  background-color: var(--color-accent);\n  color: var(--color-accent-foreground);\n}\n\n.aurum-button--secondary:active:not(:disabled) {\n  transform: scale(0.98);\n}\n\n.aurum-button--tertiary {\n  background: transparent;\n  color: var(--color-foreground);\n  border: 1px solid var(--color-border);\n}\n\n.aurum-button--tertiary:active:not(:disabled) {\n  transform: scale(0.98);\n}\n\n.aurum-button--text {\n  background: transparent;\n  color: var(--color-primary);\n  padding: 0.25rem;\n}\n\n.aurum-button--text:not(.aurum-button--full-width) {\n  width: fit-content;\n}\n\n.aurum-button--text:active:not(:disabled) {\n  transform: scale(0.98);\n}\n\n.aurum-button--close {\n  background: transparent;\n  color: var(--color-foreground-muted);\n  border: none;\n  padding: 0.5rem;\n  border-radius: var(--aurum-border-radius-md);\n  font-size: 1.25rem;\n  line-height: 1;\n}\n\n.aurum-button--close:active:not(:disabled) {\n  transform: scale(0.95);\n}\n\n/* Hover styles only for devices with hover capability (not touch) */\n@media (hover: hover) {\n  .aurum-button--primary:hover:not(:disabled) {\n    background-color: var(--color-primary-hover);\n  }\n\n  .aurum-button--secondary:hover:not(:disabled) {\n    background-color: var(--color-accent-hover);\n  }\n\n  .aurum-button--tertiary:hover:not(:disabled) {\n    background-color: var(--color-accent);\n    border-color: var(--color-border-muted);\n  }\n\n  .aurum-button--text:hover:not(:disabled) {\n    opacity: 0.7;\n  }\n\n  .aurum-button--close:hover:not(:disabled) {\n    background-color: var(--color-accent);\n    color: var(--color-foreground);\n  }\n}\n\n.aurum-button--disabled,\n.aurum-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.aurum-button--loading {\n  pointer-events: none;\n}\n\n\n/* ui/Divider/Divider.css */\n.divider {\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n.divider-line {\n  flex: 1;\n  height: 1px;\n  background-color: var(--color-border);\n}\n\n.divider-text {\n  padding: 0 1rem;\n  color: var(--color-foreground-subtle);\n  font-size: 0.875rem;\n  font-weight: var(--font-medium);\n}\n\n\n/* ui/Modal/Modal.css */\n.modal-overlay {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: var(--aurum-modal-z-index);\n  background-color: var(--color-overlay);\n  opacity: 0;\n}\n\n.modal-overlay.modal-open {\n  opacity: 1;\n  transition: opacity 150ms ease-out;\n}\n\n.modal-overlay.modal-exiting {\n  opacity: 0;\n  transition: opacity 150ms ease-in;\n}\n\n.modal-content {\n  position: relative;\n  width: 23.75rem;\n  min-width: 17rem;\n  padding: 1.25rem 1.5rem;\n  color: var(--color-card-foreground);\n  background-color: var(--color-card);\n  border-radius: var(--aurum-border-radius-lg);\n  box-shadow: var(--shadow);\n  border: 1px solid var(--color-border-muted);\n  outline: none;\n  opacity: 0;\n  transform: scale(0.95);\n}\n\n.modal-overlay.modal-open .modal-content {\n  opacity: 1;\n  transform: scale(1);\n  transition:\n    opacity 150ms ease-out,\n    transform 150ms ease-out;\n}\n\n.modal-overlay.modal-exiting .modal-content {\n  opacity: 0;\n  transform: scale(0.95);\n  transition:\n    opacity 150ms ease-in,\n    transform 150ms ease-in;\n}\n\n.modal-page-container {\n  position: relative;\n  width: 100%;\n  overflow-x: visible;\n  overflow-y: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.modal-page-container::-webkit-scrollbar {\n  display: none;\n}\n\n.modal-page {\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  opacity: 0;\n  transition: opacity 0s;\n}\n\n.modal-page.active {\n  opacity: 1;\n  transition: opacity var(--duration-slow) var(--ease-out);\n}\n\n/* Mobile drawer layout */\n@media (max-width: 30.25rem) {\n  .modal-overlay {\n    align-items: flex-end;\n    justify-content: center;\n    opacity: 1;\n    transition: none;\n  }\n\n  .modal-overlay.modal-open {\n    transition: none;\n  }\n\n  .modal-overlay.modal-exiting {\n    opacity: 1;\n    background-color: transparent;\n    transition: none;\n  }\n\n  .modal-content {\n    width: 100%;\n    max-height: 82vh;\n    max-height: 82dvh;\n    min-height: 35vh;\n    min-height: 35dvh;\n    padding: 1rem;\n    border-radius: var(--aurum-border-radius-lg) var(--aurum-border-radius-lg) 0 0;\n    border-bottom: none;\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    opacity: 1;\n    transform: translateY(100%);\n  }\n\n  .modal-overlay.modal-open .modal-content {\n    opacity: 1;\n    transform: translateY(0);\n    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .modal-overlay.modal-exiting .modal-content {\n    opacity: 1;\n    transform: translateY(100%);\n    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .modal-page-container {\n    flex: 0 1 auto;\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n  }\n\n  .modal-page {\n    flex: 0 1 auto;\n    display: flex;\n    flex-direction: column;\n  }\n}\n\n\n/* ui/Spinner/Spinner.css */\n.spinner {\n  flex-shrink: 0;\n  animation: spinner-rotate 1s linear infinite;\n}\n\n@keyframes spinner-rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n\n/* ui/Text/Text.css */\n.aurum-text {\n  margin: 0;\n  padding: 0;\n  font-family: inherit;\n  line-height: 1.5;\n}\n\n.aurum-text--primary {\n  color: var(--color-foreground);\n}\n\n.aurum-text--secondary {\n  color: var(--color-foreground-muted);\n}\n\n.aurum-text--tertiary {\n  color: var(--color-foreground-subtle);\n}\n\n.aurum-text--error {\n  color: var(--color-error);\n}\n\n.aurum-text--brand {\n  color: var(--color-primary);\n}\n\n.aurum-text--success {\n  color: var(--color-success);\n}\n\n.aurum-text--xs {\n  font-size: 0.75rem;\n  line-height: 1.4;\n}\n\n.aurum-text--sm {\n  font-size: 0.875rem;\n  line-height: 1.45;\n}\n\n.aurum-text--md {\n  font-size: 1rem;\n  line-height: 1.5;\n}\n\n.aurum-text--lg {\n  font-size: 1.125rem;\n  line-height: 1.5;\n}\n\n.aurum-text--normal {\n  font-weight: var(--font-normal);\n}\n\n.aurum-text--semibold {\n  font-weight: var(--font-semibold);\n}\n\n.aurum-text--bold {\n  font-weight: var(--font-bold);\n}\n\n.aurum-text--align-left {\n  text-align: left;\n}\n\n.aurum-text--align-center {\n  text-align: center;\n}\n\n.aurum-text--align-right {\n  text-align: right;\n}\n\n\n";
 
 // src/utils/generateBrandStyles.ts
 function generateBrandCssVariables(brandConfig) {
@@ -2445,4 +2436,4 @@ export {
   ConnectPages,
   generateCompleteStyles
 };
-//# sourceMappingURL=chunk-3TZNNET3.mjs.map
+//# sourceMappingURL=chunk-5NXCRO5Q.mjs.map