@aurum-sdk/core 0.1.3 → 0.1.4

package/README.md

@@ -1,7 +1,7 @@
 # @aurum-sdk/core
 
-<!-- [Live Demo](https://demo.aurumsdk.com/)
-[Aurum Website](https://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.
 

package/dist/{chunk-F4RYBD6L.js → chunk-7FIQ6QGJ.js}

@@ -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__ */ _jsxruntime.jsx.call(void 0, 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.4"}`,
     sendDefaultPii: false,
     enableLogs: true
   });
@@ -1023,25 +1023,16 @@ var GridWalletButton = ({
 
 // src/components/ConnectModal/WalletListGrid.tsx
 
-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__ */ _jsxruntime.jsx.call(void 0, "div", { className: "aurum-wallet-grid", children: rows.map((row, rowIndex) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "aurum-wallet-grid-row", children: row.map((wallet) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GridWalletButton, { wallet, connectWallet }, wallet.id)) }, rowIndex)) });
+  const columns = getColumnCount(wallets.length);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "aurum-wallet-grid", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` }, children: wallets.map((wallet) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 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 @@ ${generateBrandCssVariables(brandConfig)}`;
 
 
 exports.useAurumStore = useAurumStore; exports.waitForStoreHydration = waitForStoreHydration; exports.useWidgetContext = useWidgetContext; exports.WidgetProvider = WidgetProvider; exports.DEFAULT_THEME = DEFAULT_THEME; exports.getDefaultThemeConfig = getDefaultThemeConfig; exports.POWERED_BY_SPACER_REM = POWERED_BY_SPACER_REM; exports.PageTransitionContainer = PageTransitionContainer; exports.PoweredBy = PoweredBy; exports.Modal = Modal; exports.Spacer = Spacer; exports.ThemeContainer = ThemeContainer; exports.useNavigation = useNavigation; exports.sortWallets = sortWallets; exports.initSentry = initSentry; exports.sentryLogger = sentryLogger; exports.createConfigError = createConfigError; exports.isMobile = isMobile; exports.ConnectUIProviders = ConnectUIProviders; exports.ConnectPages = ConnectPages; exports.generateCompleteStyles = generateCompleteStyles;
-//# sourceMappingURL=chunk-F4RYBD6L.js.map
+//# sourceMappingURL=chunk-7FIQ6QGJ.js.map