@aurum-sdk/core 0.1.0

package/dist/chunk-U5BSED2R.mjs

@@ -0,0 +1,2432 @@
+// src/contexts/WidgetContext.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var WidgetContext = createContext(null);
+var useWidgetContext = () => {
+  const context = useContext(WidgetContext);
+  if (!context) {
+    throw new Error("useWidgetContext must be used within a WidgetProvider");
+  }
+  return context;
+};
+var WidgetProvider = ({
+  children,
+  mode,
+  brandConfig,
+  onDismiss,
+  headerPortalRef = null
+}) => {
+  const contextValue = {
+    mode,
+    brandConfig,
+    onDismiss,
+    headerPortalRef
+  };
+  return /* @__PURE__ */ jsx(WidgetContext.Provider, { value: contextValue, children });
+};
+
+// src/store/aurumStore.ts
+import { create } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
+var getStorage = () => ({
+  getItem: (name) => {
+    if (typeof window === "undefined") return null;
+    return localStorage.getItem(name);
+  },
+  setItem: (name, value) => {
+    if (typeof window === "undefined") return;
+    localStorage.setItem(name, value);
+  },
+  removeItem: (name) => {
+    if (typeof window === "undefined") return;
+    localStorage.removeItem(name);
+  }
+});
+var storeCreator = persist(
+  (set) => ({
+    walletId: null,
+    address: null,
+    walletName: null,
+    email: null,
+    isConnected: false,
+    lastUsedWalletId: null,
+    setConnection: (walletId, address, walletName, email) => set({
+      walletId,
+      address,
+      walletName,
+      email: email ?? null,
+      isConnected: true,
+      lastUsedWalletId: walletId
+    }),
+    clearConnection: () => set({
+      walletId: null,
+      address: null,
+      walletName: null,
+      email: null,
+      isConnected: false
+    })
+  }),
+  {
+    name: "@aurum-sdk/core-store",
+    storage: createJSONStorage(getStorage),
+    skipHydration: typeof window === "undefined"
+  }
+);
+var useAurumStore = create(storeCreator);
+var waitForStoreHydration = () => {
+  return new Promise((resolve) => {
+    if (useAurumStore.persist.hasHydrated()) {
+      resolve();
+      return;
+    }
+    useAurumStore.persist.onFinishHydration(() => resolve());
+  });
+};
+
+// src/utils/sortWallets.ts
+import { WalletId } from "@aurum-sdk/types";
+var WALLET_PRIORITY = [
+  WalletId.MetaMask,
+  WalletId.Phantom,
+  WalletId.WalletConnect,
+  WalletId.Brave,
+  WalletId.Rabby,
+  WalletId.CoinbaseWallet,
+  WalletId.Ledger
+];
+function sortWallets(wallets, options = {}) {
+  const { filterHidden = true } = options;
+  const lastUsedWalletId = useAurumStore.getState().lastUsedWalletId;
+  let result = [...wallets];
+  if (filterHidden) {
+    result = result.filter((wallet) => !wallet.hide);
+  }
+  result.sort((a, b) => {
+    if (a.id === lastUsedWalletId) return -1;
+    if (b.id === lastUsedWalletId) return 1;
+    const aInstalled = a.isInstalled();
+    const bInstalled = b.isInstalled();
+    if (aInstalled !== bInstalled) {
+      return aInstalled ? -1 : 1;
+    }
+    const aIndex = WALLET_PRIORITY.indexOf(a.id);
+    const bIndex = WALLET_PRIORITY.indexOf(b.id);
+    if (aIndex === -1 && bIndex === -1) return 0;
+    if (aIndex === -1) return 1;
+    if (bIndex === -1) return -1;
+    return aIndex - bIndex;
+  });
+  return result;
+}
+
+// src/utils/platform/isMobile.ts
+import MobileDetect from "mobile-detect";
+function isMobile() {
+  if (typeof window === "undefined" || typeof navigator === "undefined") {
+    return false;
+  }
+  const md = new MobileDetect(window.navigator.userAgent);
+  return md.mobile() !== null || md.tablet() !== null;
+}
+
+// src/contexts/NavigationContext.tsx
+import { createContext as createContext2, useContext as useContext2, useState } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var NavigationContext = createContext2(void 0);
+var NavigationProvider = ({ children, initialPage }) => {
+  const [currentPage, setCurrentPage] = useState(initialPage);
+  const [pageHistory, setPageHistory] = useState([initialPage]);
+  const navigateTo = (pageId) => {
+    setCurrentPage(pageId);
+    setPageHistory((prev) => [...prev, pageId]);
+  };
+  const navigateBack = () => {
+    if (pageHistory.length > 1) {
+      const newHistory = pageHistory.slice(0, -1);
+      const previousPage = newHistory[newHistory.length - 1];
+      setPageHistory(newHistory);
+      setCurrentPage(previousPage);
+    }
+  };
+  const canNavigateBack = pageHistory.length > 1;
+  const value = {
+    currentPage,
+    navigateTo,
+    navigateBack,
+    canNavigateBack
+  };
+  return /* @__PURE__ */ jsx2(NavigationContext.Provider, { value, children });
+};
+var useNavigation = () => {
+  const context = useContext2(NavigationContext);
+  if (context === void 0) {
+    throw new Error("useNavigation must be used within a NavigationProvider");
+  }
+  return context;
+};
+
+// src/contexts/ConnectModalContext.tsx
+import { createContext as createContext4, useContext as useContext4, useState as useState13 } from "react";
+
+// src/components/ConnectModal/SelectWallet.tsx
+import { useMemo as useMemo3 } from "react";
+
+// src/ui/Badge/Badge.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var RecentBadge = () => {
+  return /* @__PURE__ */ jsx3("span", { className: "aurum-badge-recent", children: "Recent" });
+};
+
+// src/ui/Button/Button.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var Button = ({
+  variant = "primary",
+  size = "md",
+  loading = false,
+  expand = false,
+  disabled = false,
+  className,
+  children,
+  ...props
+}) => {
+  const baseClassName = "aurum-button";
+  const classes = [
+    baseClassName,
+    `${baseClassName}--${variant}`,
+    `${baseClassName}--${size}`,
+    expand && `${baseClassName}--full-width`,
+    loading && `${baseClassName}--loading`,
+    disabled && `${baseClassName}--disabled`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("button", { className: classes, disabled: disabled || loading, ...props, children: [
+    loading && /* @__PURE__ */ jsx4(Spinner, { color: "currentColor" }),
+    children
+  ] });
+};
+
+// src/ui/Column/Column.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Column = ({
+  align = "center",
+  gap = 8,
+  justify = "center",
+  style,
+  children
+}) => {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: align,
+        gap: `${gap}px`,
+        justifyContent: justify,
+        ...style
+      },
+      children
+    }
+  );
+};
+
+// src/ui/CopyButton/CopyButton.tsx
+import { useState as useState2 } from "react";
+import { Copy, CopyCheck } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var variantColorMap = {
+  primary: "var(--color-foreground)",
+  secondary: "var(--color-foreground-muted)",
+  tertiary: "var(--color-foreground-subtle)",
+  success: "var(--color-success)",
+  error: "var(--color-error)",
+  brand: "var(--color-primary)"
+};
+var CopyButton = ({
+  text,
+  label,
+  copiedLabel,
+  variant = "brand",
+  size = "sm",
+  iconSize = 16,
+  disabled = false
+}) => {
+  const [isCopied, setIsCopied] = useState2(false);
+  const handleCopy = async () => {
+    if (!text || disabled || isCopied) return;
+    try {
+      await navigator.clipboard.writeText(text);
+      setIsCopied(true);
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 1500);
+    } catch (error) {
+      console.error("Failed to copy text", error);
+    }
+  };
+  if (!label && !copiedLabel) {
+    return /* @__PURE__ */ jsx6(
+      Button,
+      {
+        variant: "text",
+        size,
+        onClick: handleCopy,
+        disabled,
+        style: { cursor: disabled ? "not-allowed" : "pointer", padding: "0.25rem" },
+        children: isCopied ? /* @__PURE__ */ jsx6(CopyCheck, { size: iconSize, color: "var(--color-success)" }) : /* @__PURE__ */ jsx6(Copy, { size: iconSize, color: variantColorMap[variant] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx6(
+    Button,
+    {
+      variant: "text",
+      size,
+      onClick: handleCopy,
+      disabled,
+      style: { cursor: disabled ? "not-allowed" : "pointer" },
+      children: isCopied ? /* @__PURE__ */ jsxs2(
+        Text,
+        {
+          variant: "success",
+          size: "sm",
+          align: "center",
+          weight: "semibold",
+          style: { display: "flex", alignItems: "center", gap: 6 },
+          children: [
+            /* @__PURE__ */ jsx6(CopyCheck, { size: iconSize, color: "var(--color-success)" }),
+            copiedLabel || "Copied"
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs2(
+        Text,
+        {
+          variant,
+          size: "sm",
+          align: "center",
+          weight: "semibold",
+          style: { display: "flex", alignItems: "center", gap: 6 },
+          children: [
+            /* @__PURE__ */ jsx6(Copy, { size: iconSize, color: variantColorMap[variant] }),
+            label || "Copy"
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/ui/Divider/Divider.tsx
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var Divider = ({ children }) => {
+  return /* @__PURE__ */ jsxs3("div", { className: "divider", children: [
+    /* @__PURE__ */ jsx7("div", { className: "divider-line" }),
+    children && /* @__PURE__ */ jsx7("div", { className: "divider-text", children }),
+    /* @__PURE__ */ jsx7("div", { className: "divider-line" })
+  ] });
+};
+
+// src/ui/Modal/Modal.tsx
+import { useRef as useRef3, useEffect as useEffect3, useState as useState4, useCallback, useMemo as useMemo2 } from "react";
+
+// src/hooks/useFocusTrap.ts
+import { useEffect } from "react";
+var FOCUSABLE_SELECTOR = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function getDeepActiveElement() {
+  let active = document.activeElement;
+  while (active?.shadowRoot?.activeElement) {
+    active = active.shadowRoot.activeElement;
+  }
+  return active;
+}
+function useFocusTrap(containerRef, { isActive, onEscape, refocusKey }) {
+  useEffect(() => {
+    if (isActive && containerRef.current) {
+      const timer = setTimeout(() => {
+        containerRef.current?.focus();
+      }, 50);
+      return () => clearTimeout(timer);
+    }
+  }, [refocusKey, isActive]);
+  useEffect(() => {
+    if (!isActive) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onEscape?.();
+        return;
+      }
+      if (e.key !== "Tab" || !containerRef.current) return;
+      const focusableElements = containerRef.current.querySelectorAll(FOCUSABLE_SELECTOR);
+      if (focusableElements.length === 0) return;
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      const activeElement = getDeepActiveElement();
+      if (e.shiftKey && activeElement === firstElement) {
+        e.preventDefault();
+        lastElement.focus();
+      } else if (!e.shiftKey && activeElement === lastElement) {
+        e.preventDefault();
+        firstElement.focus();
+      } else if (!Array.from(focusableElements).includes(activeElement)) {
+        e.preventDefault();
+        if (e.shiftKey) {
+          lastElement.focus();
+        } else {
+          firstElement.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isActive, onEscape]);
+}
+
+// src/components/PageTransitionContainer/PageTransitionContainer.tsx
+import { useRef as useRef2 } from "react";
+
+// src/hooks/usePageTransition.ts
+import { useEffect as useEffect2, useRef, useState as useState3, useLayoutEffect, useMemo } from "react";
+
+// src/constants/theme.ts
+import {
+  BORDER_RADIUS_SCALES
+} from "@aurum-sdk/types";
+var DEFAULT_THEME = "dark";
+var ANIMATION_DURATION = {
+  SHAKE: 300,
+  MODAL_HEIGHT_TRANSITION: 200
+};
+var DEFAULT_BORDER_RADIUS = "md";
+var DEFAULT_MODAL_Z_INDEX = 1e3;
+var DEFAULT_APP_NAME = "Aurum";
+var DEFAULT_FONT = "'Inter', -apple-system, sans-serif";
+var DEFAULT_WALLET_LAYOUT = "stacked";
+var getBorderRadiusScale = (token) => {
+  return BORDER_RADIUS_SCALES[token];
+};
+var defaultLightThemeConfig = {
+  logo: "",
+  theme: "light",
+  primaryColor: "#000000",
+  borderRadius: DEFAULT_BORDER_RADIUS,
+  modalZIndex: DEFAULT_MODAL_Z_INDEX,
+  appName: DEFAULT_APP_NAME,
+  hideFooter: false,
+  font: DEFAULT_FONT,
+  walletLayout: DEFAULT_WALLET_LAYOUT
+};
+var defaultDarkThemeConfig = {
+  logo: "",
+  theme: "dark",
+  primaryColor: "#ffffff",
+  borderRadius: DEFAULT_BORDER_RADIUS,
+  modalZIndex: DEFAULT_MODAL_Z_INDEX,
+  appName: DEFAULT_APP_NAME,
+  hideFooter: false,
+  font: DEFAULT_FONT,
+  walletLayout: DEFAULT_WALLET_LAYOUT
+};
+var getDefaultThemeConfig = (theme) => {
+  return theme === "dark" ? defaultDarkThemeConfig : defaultLightThemeConfig;
+};
+
+// src/constants/layout.ts
+var PAGE_CONTENT_PADDING = 0.25;
+var PAGE_MIN_HEIGHT = "8rem";
+var PAGE_MAX_HEIGHT = "600";
+var HEADER_HEIGHT = "3.5rem";
+var POWERED_BY_SPACER_REM = 2.5;
+var contentWrapperStyle = { paddingTop: HEADER_HEIGHT };
+
+// src/hooks/usePageTransition.ts
+function useContentHeight(contentRef, transitionKey) {
+  const [contentHeight, setContentHeight] = useState3(null);
+  useLayoutEffect(() => {
+    if (contentRef.current) {
+      setContentHeight(contentRef.current.scrollHeight);
+    }
+  }, [transitionKey]);
+  useEffect2(() => {
+    if (!contentRef.current) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContentHeight(entry.target.scrollHeight);
+      }
+    });
+    resizeObserver.observe(contentRef.current);
+    return () => resizeObserver.disconnect();
+  }, [transitionKey]);
+  return contentHeight;
+}
+function usePageActiveState(transitionKey) {
+  const prevKeyRef = useRef(transitionKey);
+  const [isPageActive, setIsPageActive] = useState3(true);
+  useEffect2(() => {
+    if (prevKeyRef.current === transitionKey) return;
+    prevKeyRef.current = transitionKey;
+    setIsPageActive(false);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => setIsPageActive(true));
+    });
+  }, [transitionKey]);
+  return isPageActive;
+}
+function usePageContainerStyle(contentHeight) {
+  return useMemo(
+    () => ({
+      height: contentHeight ? `${contentHeight / 16 + PAGE_CONTENT_PADDING * 2}rem` : "auto",
+      minHeight: PAGE_MIN_HEIGHT,
+      maxHeight: PAGE_MAX_HEIGHT,
+      padding: `${PAGE_CONTENT_PADDING}rem`,
+      margin: `${-PAGE_CONTENT_PADDING}rem`,
+      width: `calc(100% + ${PAGE_CONTENT_PADDING * 2}rem)`,
+      boxSizing: "border-box",
+      transition: contentHeight ? `height ${ANIMATION_DURATION.MODAL_HEIGHT_TRANSITION}ms cubic-bezier(0.4, 0, 0.2, 1)` : "none"
+    }),
+    [contentHeight]
+  );
+}
+
+// src/components/PageTransitionContainer/PageTransitionContainer.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var PageTransitionContainer = ({ transitionKey, children }) => {
+  const pageRef = useRef2(null);
+  const contentRef = useRef2(null);
+  const contentHeight = useContentHeight(contentRef, transitionKey);
+  const isPageActive = usePageActiveState(transitionKey);
+  const containerStyle = usePageContainerStyle(contentHeight);
+  return /* @__PURE__ */ jsx8("div", { className: "modal-page-container", style: containerStyle, children: /* @__PURE__ */ jsx8("div", { ref: pageRef, className: `modal-page ${isPageActive ? "active" : ""}`, children: /* @__PURE__ */ jsx8("div", { ref: contentRef, style: contentWrapperStyle, children }) }, transitionKey) });
+};
+
+// src/components/PoweredBy/PoweredBy.tsx
+import { AurumLogo } from "@aurum-sdk/logos/react";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var PoweredBy = () => {
+  const { brandConfig } = useWidgetContext();
+  return /* @__PURE__ */ jsx9("div", { className: "powered-by-container", children: /* @__PURE__ */ jsx9(Row, { align: "center", justify: "center", gap: 0, children: /* @__PURE__ */ jsxs4(
+    Button,
+    {
+      variant: "text",
+      size: "xs",
+      onClick: () => window.open("https://npmjs.com/package/@aurum-sdk/core", "_blank"),
+      style: { gap: "0.15rem" },
+      children: [
+        /* @__PURE__ */ jsx9(Text, { variant: "secondary", size: "xs", children: "Powered by" }),
+        /* @__PURE__ */ jsxs4(Row, { align: "center", justify: "center", gap: 0, children: [
+          /* @__PURE__ */ jsx9(
+            AurumLogo,
+            {
+              variant: "icon",
+              size: 22,
+              radius: brandConfig.borderRadius,
+              sizeSlot: "xs",
+              color: "var(--color-foreground-muted)",
+              title: "Aurum"
+            }
+          ),
+          /* @__PURE__ */ jsx9(Text, { variant: "secondary", weight: "bold", style: { fontSize: "13px" }, children: "Aurum" })
+        ] })
+      ]
+    }
+  ) }) });
+};
+
+// src/ui/Modal/Modal.tsx
+import { Fragment, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var Modal = ({
+  isOpen,
+  onCloseComplete,
+  children,
+  closeOnOverlayClick = true,
+  transitionKey = "default",
+  brandConfig
+}) => {
+  const overlayRef = useRef3(null);
+  const dialogRef = useRef3(null);
+  const headerPortalRef = useRef3(null);
+  const [animState, setAnimState] = useState4("closed");
+  useEffect3(() => {
+    if (isOpen && animState === "closed") {
+      setAnimState("entering");
+    }
+  }, [isOpen, animState]);
+  useEffect3(() => {
+    if (animState !== "entering") return;
+    const rafId = requestAnimationFrame(() => {
+      setAnimState("open");
+      dialogRef.current?.focus();
+    });
+    return () => cancelAnimationFrame(rafId);
+  }, [animState]);
+  useEffect3(() => {
+    if (animState !== "exiting") return;
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const handleTransitionEnd = (e) => {
+      if (e.target === dialog) {
+        setAnimState("closed");
+        onCloseComplete();
+      }
+    };
+    dialog.addEventListener("transitionend", handleTransitionEnd);
+    return () => dialog.removeEventListener("transitionend", handleTransitionEnd);
+  }, [animState, onCloseComplete]);
+  useEffect3(() => {
+    if (animState === "closed") return;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [animState]);
+  const handleClose = useCallback(() => {
+    if (animState === "open" || animState === "entering") {
+      setAnimState("exiting");
+    }
+  }, [animState]);
+  const handleOverlayClick = useCallback(
+    (e) => {
+      if (closeOnOverlayClick && e.target === overlayRef.current) {
+        handleClose();
+      }
+    },
+    [closeOnOverlayClick, handleClose]
+  );
+  const focusTrapOptions = useMemo2(
+    () => ({
+      isActive: animState !== "closed",
+      onEscape: handleClose,
+      refocusKey: transitionKey
+    }),
+    [animState, handleClose, transitionKey]
+  );
+  useFocusTrap(dialogRef, focusTrapOptions);
+  const overlayClassName = useMemo2(() => {
+    const classes = ["modal-overlay"];
+    if (animState === "open") classes.push("modal-open");
+    if (animState === "exiting") classes.push("modal-exiting");
+    return classes.join(" ");
+  }, [animState]);
+  if (animState === "closed") return null;
+  return /* @__PURE__ */ jsx10(WidgetProvider, { mode: "modal", brandConfig, onDismiss: handleClose, headerPortalRef, children: /* @__PURE__ */ jsx10("div", { ref: overlayRef, className: overlayClassName, onClick: handleOverlayClick, children: /* @__PURE__ */ jsxs5("div", { ref: dialogRef, className: "modal-content", role: "dialog", "aria-modal": "true", tabIndex: -1, children: [
+    /* @__PURE__ */ jsx10("div", { ref: headerPortalRef }),
+    /* @__PURE__ */ jsx10(PageTransitionContainer, { transitionKey, children }),
+    brandConfig.hideFooter ? /* @__PURE__ */ jsx10(Spacer, { size: "0.3125rem" }) : /* @__PURE__ */ jsxs5(Fragment, { children: [
+      /* @__PURE__ */ jsx10(Spacer, { size: `${POWERED_BY_SPACER_REM}rem` }),
+      /* @__PURE__ */ jsx10(PoweredBy, {})
+    ] })
+  ] }) }) });
+};
+
+// src/ui/Row/Row.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Row = ({
+  align = "center",
+  justify = "center",
+  children,
+  gap = 8,
+  style,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: align,
+        justifyContent: justify,
+        gap: `${gap}px`,
+        ...style
+      },
+      ...props,
+      children
+    }
+  );
+};
+
+// src/ui/Spacer/Spacer.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Spacer = ({ size = 16 }) => {
+  return /* @__PURE__ */ jsx12("div", { style: { height: size } });
+};
+
+// src/ui/Spinner/Spinner.tsx
+import { Loader2 } from "lucide-react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Spinner = ({
+  size = 16,
+  color = "var(--aurum-primary-color)",
+  strokeWidth = 2
+}) => {
+  return /* @__PURE__ */ jsx13(
+    Loader2,
+    {
+      className: "spinner",
+      strokeWidth,
+      size,
+      style: {
+        width: `${size}px`,
+        height: `${size}px`,
+        color
+      }
+    }
+  );
+};
+
+// src/ui/Text/Text.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Text = ({
+  variant = "primary",
+  as = "p",
+  size = "md",
+  weight = "normal",
+  align = "left",
+  children,
+  className,
+  style,
+  ...props
+}) => {
+  const Element = as;
+  const baseClassName = "aurum-text";
+  const classes = [
+    baseClassName,
+    `${baseClassName}--${variant}`,
+    size && `${baseClassName}--${size}`,
+    weight && `${baseClassName}--${weight}`,
+    align && `${baseClassName}--align-${align}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx14(Element, { className: classes, ...props, style, children });
+};
+
+// src/ui/ThemeContainer.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var ThemeContainer = ({ children, theme = "light" }) => {
+  return /* @__PURE__ */ jsx15("div", { className: "aurum-sdk", "data-theme": theme, children });
+};
+
+// src/components/ConnectModal/SelectWallet.tsx
+import { X } from "lucide-react";
+
+// src/components/ModalHeader/ModalHeader.tsx
+import { useLayoutEffect as useLayoutEffect2, useState as useState5 } from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+var ModalHeader = ({ leftAction, rightAction, title }) => {
+  const { headerPortalRef, mode } = useWidgetContext();
+  const [portalTarget, setPortalTarget] = useState5(null);
+  useLayoutEffect2(() => {
+    if (headerPortalRef) {
+      setPortalTarget(headerPortalRef.current);
+    }
+  }, [headerPortalRef]);
+  const resolvedRightAction = mode === "widget" ? null : rightAction;
+  const headerContent = /* @__PURE__ */ jsxs6("header", { className: "modal-header", children: [
+    /* @__PURE__ */ jsx16("div", { className: "modal-header-left", children: leftAction }),
+    /* @__PURE__ */ jsx16("div", { className: "modal-header-center", children: typeof title === "string" ? /* @__PURE__ */ jsx16(Text, { align: "center", variant: "secondary", style: { fontSize: "15px" }, children: title }) : title }),
+    /* @__PURE__ */ jsx16("div", { className: "modal-header-right", children: resolvedRightAction })
+  ] });
+  if (!portalTarget) return null;
+  return createPortal(headerContent, portalTarget);
+};
+
+// src/components/ConnectModal/EmailAuth.tsx
+import { useEffect as useEffect4, useState as useState7 } from "react";
+
+// src/contexts/EmailAuthContext.tsx
+import { createContext as createContext3, useContext as useContext3, useState as useState6 } from "react";
+
+// src/services/sentry.ts
+import * as Sentry from "@sentry/browser";
+var initialized = false;
+var telemetryEnabled = true;
+function getEnvironment() {
+  if (typeof window !== "undefined") {
+    const hostname = window.location.hostname;
+    if (hostname === "localhost" || hostname === "127.0.0.1") {
+      return "development";
+    }
+  }
+  return "production";
+}
+function initSentry(enabled = true) {
+  telemetryEnabled = enabled;
+  if (initialized || !telemetryEnabled || true) return;
+  initialized = true;
+  Sentry.init({
+    dsn: "",
+    environment: getEnvironment(),
+    release: `@aurum-sdk/core@${"0.1.0"}`,
+    sendDefaultPii: false,
+    enableLogs: true
+  });
+}
+var sentryLogger = {
+  info: (message, attributes) => {
+    if (telemetryEnabled) Sentry.logger.info(message, attributes);
+  },
+  warn: (message, attributes) => {
+    if (telemetryEnabled) Sentry.logger.warn(message, attributes);
+  },
+  error: (message, attributes) => {
+    if (telemetryEnabled) Sentry.logger.error(message, attributes);
+  }
+};
+
+// src/utils/isConfigError.ts
+var isConfigError = (error) => {
+  const name = error?.name;
+  return name === "ConfigError";
+};
+var createConfigError = (adapterName) => {
+  const error = new Error(`Missing required project ID for ${adapterName}`);
+  error.name = "ConfigError";
+  return error;
+};
+
+// src/contexts/EmailAuthContext.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var EmailAuthContext = createContext3(null);
+var useEmailAuth = () => {
+  const context = useContext3(EmailAuthContext);
+  if (!context) {
+    throw new Error("useEmailAuth must be used within an EmailAuthProvider");
+  }
+  return context;
+};
+var EmailAuthProvider = ({
+  children,
+  displayedWallets,
+  onConnect,
+  navigateTo,
+  setSelectedWallet
+}) => {
+  const initialAuthState = {
+    email: "",
+    authResult: null,
+    step: "email"
+  };
+  const [error, setError] = useState6("");
+  const [emailAuthState, setEmailAuthState] = useState6(initialAuthState);
+  const resetEmailAuth = () => {
+    setEmailAuthState(initialAuthState);
+    setError("");
+  };
+  const clearError = () => {
+    setError("");
+  };
+  const attemptEmailAuth = async (email, emailAdapter) => {
+    setError("");
+    if (!emailAdapter.emailAuthStart) {
+      sentryLogger.error("emailAuthStart not implemented");
+      throw new Error("emailAuthStart not implemented");
+    }
+    const authResult = await emailAdapter.emailAuthStart(email);
+    setEmailAuthState((prev) => ({ ...prev, authResult, step: "otp" }));
+    navigateTo(PAGE_IDS.EMAIL_VERIFY_OTP);
+  };
+  const handleAlreadyAuthenticatedError = async (email, emailAdapter) => {
+    try {
+      await emailAdapter.disconnect();
+      await attemptEmailAuth(email, emailAdapter);
+    } catch (retryError) {
+      sentryLogger.error("Failed to retry email OTP after disconnect:", { error: retryError });
+      setError("Failed to send email verification");
+      setEmailAuthState((prev) => ({ ...prev, step: "email" }));
+    }
+  };
+  const sendEmailOTP = async (email) => {
+    const emailAdapter = displayedWallets.find((adapter) => adapter.id === "email");
+    if (!emailAdapter) {
+      sentryLogger.error("sendEmailOTP: Email adapter not found");
+      throw new Error("Email adapter not found");
+    }
+    setEmailAuthState((prev) => ({ ...prev, email }));
+    try {
+      await attemptEmailAuth(email, emailAdapter);
+    } catch (error2) {
+      setEmailAuthState((prev) => ({ ...prev, step: "email" }));
+      const errorMessage = error2.message?.toLowerCase() ?? "";
+      const isAlreadyAuthenticated = errorMessage.includes("user is already authenticated");
+      if (isConfigError(error2)) {
+        navigateTo(PAGE_IDS.CONFIG_ERROR);
+      } else if (isAlreadyAuthenticated) {
+        try {
+          await handleAlreadyAuthenticatedError(email, emailAdapter);
+        } catch {
+          setError("Failed to send email verification");
+        }
+      } else {
+        setError("Failed to send email verification");
+      }
+    }
+  };
+  const verifyEmailOTPAndConnect = async (otp) => {
+    try {
+      if (!emailAuthState.authResult) {
+        sentryLogger.error("No auth result found");
+        throw new Error("No auth result found");
+      }
+      const emailAdapter = displayedWallets.find((adapter) => adapter.id === "email");
+      if (!emailAdapter) {
+        sentryLogger.error("verifyEmailOTPAndConnect: Email adapter not found");
+        throw new Error("Email adapter not found");
+      }
+      setEmailAuthState((prev) => ({ ...prev, step: "connecting" }));
+      if (!emailAdapter.emailAuthVerify) {
+        sentryLogger.error("emailAuthVerify not implemented");
+        throw new Error("emailAuthVerify not implemented");
+      }
+      const verifyResult = await emailAdapter.emailAuthVerify(emailAuthState.authResult.flowId, otp);
+      setSelectedWallet(emailAdapter);
+      setEmailAuthState((prev) => ({ ...prev, step: "success" }));
+      setTimeout(() => {
+        onConnect({
+          walletId: emailAdapter.id,
+          address: verifyResult.user?.evmAccounts?.[0] ?? "",
+          provider: emailAdapter.getProvider(),
+          email: emailAuthState.email
+        });
+      }, 1500);
+    } catch {
+      setError("Invalid or expired code");
+      setEmailAuthState((prev) => ({ ...prev, step: "otp" }));
+    }
+  };
+  const contextValue = {
+    error,
+    emailAuthState,
+    clearError,
+    sendEmailOTP,
+    resetEmailAuth,
+    verifyEmailOTPAndConnect
+  };
+  return /* @__PURE__ */ jsx17(EmailAuthContext.Provider, { value: contextValue, children });
+};
+
+// src/components/ConnectModal/EmailAuth.tsx
+import { ChevronRight, Mail } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
+var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+var EmailAuth = () => {
+  const { emailAuthState, error, sendEmailOTP, clearError } = useEmailAuth();
+  const [email, setEmail] = useState7(emailAuthState.email);
+  const [isValidEmail, setIsValidEmail] = useState7(false);
+  const [isLoading, setIsLoading] = useState7(false);
+  const [isFocused, setIsFocused] = useState7(false);
+  const [isButtonFocused, setIsButtonFocused] = useState7(false);
+  const showPrimary = isValidEmail && (isFocused || isButtonFocused);
+  useEffect4(() => {
+    setIsValidEmail(EMAIL_REGEX.test(email));
+  }, [email]);
+  const handleSend = async () => {
+    try {
+      setIsLoading(true);
+      await sendEmailOTP(email);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (error) {
+      clearError();
+    }
+    if (e.key === "Enter" && isValidEmail) {
+      handleSend();
+    }
+  };
+  const getInputClassName = () => {
+    const classes = ["email-auth-input"];
+    if (error) classes.push("email-auth-input--error");
+    return classes.join(" ");
+  };
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsxs7("div", { style: { position: "relative", width: "100%" }, children: [
+      /* @__PURE__ */ jsx18("div", { className: "email-auth-icon", children: /* @__PURE__ */ jsx18(Mail, { size: 20, color: "var(--color-foreground-muted)" }) }),
+      /* @__PURE__ */ jsx18(
+        "input",
+        {
+          "aria-label": "Email address",
+          id: "email-input",
+          name: "email",
+          type: "email",
+          autoComplete: "email",
+          inputMode: "email",
+          value: email,
+          className: getInputClassName(),
+          disabled: isLoading,
+          onBlur: () => setIsFocused(false),
+          onKeyDown: handleKeyDown,
+          onFocus: () => setIsFocused(true),
+          placeholder: "Email address",
+          onChange: (e) => setEmail(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx18(
+        Button,
+        {
+          size: "sm",
+          variant: showPrimary ? "primary" : "secondary",
+          loading: isLoading,
+          onClick: handleSend,
+          disabled: !isValidEmail,
+          className: "email-auth-submit-button",
+          onFocus: () => setIsButtonFocused(true),
+          onBlur: () => setIsButtonFocused(false),
+          children: !isLoading && /* @__PURE__ */ jsx18(
+            ChevronRight,
+            {
+              size: 16,
+              color: showPrimary ? "var(--color-primary-foreground)" : "var(--color-foreground-subtle)"
+            }
+          )
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx18(Text, { variant: "error", size: "sm", align: "left", style: { width: "100%", marginTop: "0.3125rem" }, children: error })
+  ] });
+};
+
+// src/components/WalletLogoWrapper/WalletLogoWrapper.tsx
+import { WalletLogo as BaseLogo } from "@aurum-sdk/logos/react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var WalletLogoWrapper = ({ radius, variant = "brand", ...props }) => {
+  const { brandConfig } = useWidgetContext();
+  return /* @__PURE__ */ jsx19(BaseLogo, { radius: radius ?? brandConfig.borderRadius, variant, ...props });
+};
+
+// src/components/WalletButton/GridWalletButton.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var GridWalletButton = ({
+  wallet,
+  connectWallet
+}) => {
+  return /* @__PURE__ */ jsx20(
+    Button,
+    {
+      variant: "secondary",
+      onClick: () => connectWallet(wallet),
+      "aria-label": `Connect with ${wallet.name}`,
+      title: wallet.name,
+      children: /* @__PURE__ */ jsx20(WalletLogoWrapper, { id: wallet.id, size: 44, variant: "icon" })
+    }
+  );
+};
+
+// src/components/ConnectModal/WalletListGrid.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+var getGridColumns = (walletCount) => {
+  if (walletCount <= 2) return 2;
+  if (walletCount === 3) return 3;
+  if (walletCount === 5) return 3;
+  if (walletCount === 6) return 3;
+  return 4;
+};
+var WalletListGrid = ({ wallets }) => {
+  const { connectWallet } = useConnectModal();
+  const columns = getGridColumns(wallets.length);
+  return /* @__PURE__ */ jsx21("div", { className: "aurum-wallet-grid", style: { "--grid-columns": columns }, children: wallets.map((wallet) => /* @__PURE__ */ jsx21(GridWalletButton, { wallet, connectWallet }, wallet.id)) });
+};
+
+// src/components/ConnectModal/WalletListStacked.tsx
+import { ChevronRight as ChevronRight3 } from "lucide-react";
+
+// src/components/WalletButton/WalletButton.tsx
+import { QrCode } from "lucide-react";
+
+// src/components/WalletButton/WalletButtonLabel.tsx
+import { ChevronRight as ChevronRight2 } from "lucide-react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var WalletButtonLabel = ({ type }) => {
+  if (!type) return /* @__PURE__ */ jsx22(ChevronRight2, { size: 18, color: "var(--color-foreground-subtle)" });
+  return /* @__PURE__ */ jsx22(RecentBadge, {});
+};
+
+// src/components/WalletButton/WalletButton.tsx
+import { WalletId as WalletId2 } from "@aurum-sdk/types";
+import { jsx as jsx23, jsxs as jsxs8 } from "react/jsx-runtime";
+var WalletButton = ({
+  wallet,
+  connectWallet,
+  isLastUsed = false,
+  iconSize = 32
+}) => {
+  const label = isLastUsed ? "Recent" : void 0;
+  return /* @__PURE__ */ jsx23(
+    Button,
+    {
+      variant: "secondary",
+      onClick: () => connectWallet(wallet),
+      expand: true,
+      style: { borderRadius: "var(--aurum-border-radius-md)" },
+      children: /* @__PURE__ */ jsxs8(Row, { justify: "space-between", align: "center", style: { width: "100%" }, children: [
+        /* @__PURE__ */ jsxs8(Row, { align: "center", gap: 10, children: [
+          /* @__PURE__ */ jsx23(WalletLogoWrapper, { id: wallet.id, size: iconSize, sizeSlot: "sm" }),
+          /* @__PURE__ */ jsx23(Text, { weight: "semibold", size: "md", children: wallet.name })
+        ] }),
+        wallet.id === WalletId2.WalletConnect && !isLastUsed ? /* @__PURE__ */ jsx23(QrCode, { color: "var(--color-foreground)", size: 18 }) : /* @__PURE__ */ jsx23(WalletButtonLabel, { type: label })
+      ] })
+    },
+    wallet.id
+  );
+};
+
+// src/components/ConnectModal/AdditionalWalletsIcon.tsx
+import { jsx as jsx24, jsxs as jsxs9 } from "react/jsx-runtime";
+var AdditionalWalletsIcon = ({ additionalWallets, size = 32 }) => {
+  const walletCount = additionalWallets.length;
+  if (walletCount === 1) {
+    const iconSize2 = Math.floor(size * 0.7);
+    return /* @__PURE__ */ jsx24("div", { className: "additional-wallets-container", style: { width: size, height: size }, children: /* @__PURE__ */ jsx24(
+      WalletLogoWrapper,
+      {
+        id: additionalWallets[0].id,
+        size: iconSize2,
+        sizeSlot: "xs",
+        title: additionalWallets[0].name
+      }
+    ) });
+  }
+  if (walletCount === 2) {
+    const iconSize2 = Math.floor(size * 0.55);
+    return /* @__PURE__ */ jsx24("div", { className: "additional-wallets-container", style: { width: size, height: size }, children: /* @__PURE__ */ jsxs9(Row, { align: "center", gap: 0, children: [
+      /* @__PURE__ */ jsx24(
+        "div",
+        {
+          className: "circular-icon-wrapper circular-icon-wrapper--front",
+          style: { width: iconSize2, height: iconSize2 },
+          children: /* @__PURE__ */ jsx24(
+            WalletLogoWrapper,
+            {
+              id: additionalWallets[0].id,
+              size: iconSize2,
+              sizeSlot: "xs",
+              title: additionalWallets[0].name
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx24(
+        "div",
+        {
+          className: "circular-icon-wrapper circular-icon-wrapper--back",
+          style: { width: iconSize2, height: iconSize2 },
+          children: /* @__PURE__ */ jsx24(
+            WalletLogoWrapper,
+            {
+              id: additionalWallets[1].id,
+              size: iconSize2,
+              sizeSlot: "xs",
+              title: additionalWallets[1].name
+            }
+          )
+        }
+      )
+    ] }) });
+  }
+  const walletsToShow = additionalWallets.slice(0, 4);
+  const iconSize = Math.floor(size * 0.4);
+  return /* @__PURE__ */ jsxs9("div", { className: "additional-wallets-grid", style: { width: size, height: size }, children: [
+    walletsToShow.map((wallet) => /* @__PURE__ */ jsx24("div", { className: "additional-wallets-grid-item", style: { width: iconSize, height: iconSize }, children: /* @__PURE__ */ jsx24(WalletLogoWrapper, { id: wallet.id, size: iconSize, sizeSlot: "xs", title: wallet.name }) }, wallet.id)),
+    walletsToShow.length === 3 && /* @__PURE__ */ jsx24("div", { className: "additional-wallets-placeholder", style: { width: iconSize, height: iconSize } })
+  ] });
+};
+
+// src/components/ConnectModal/WalletListStacked.tsx
+import { jsx as jsx25, jsxs as jsxs10 } from "react/jsx-runtime";
+var WalletListStacked = ({ wallets, hasEmailAuth }) => {
+  const { navigateTo } = useNavigation();
+  const { connectWallet } = useConnectModal();
+  const lastUsedWalletId = useAurumStore((state) => state.lastUsedWalletId);
+  const showAllButton = hasEmailAuth ? wallets.length > 4 : wallets.length > 5;
+  const walletsToShow = showAllButton ? wallets.slice(0, 3) : wallets;
+  const additionalWallets = showAllButton ? wallets.slice(3) : [];
+  const goToAllWallets = () => {
+    navigateTo(PAGE_IDS.ALL_WALLETS);
+  };
+  return /* @__PURE__ */ jsxs10(Column, { children: [
+    walletsToShow.map((wallet) => /* @__PURE__ */ jsx25(
+      WalletButton,
+      {
+        wallet,
+        connectWallet,
+        isLastUsed: wallet.id === lastUsedWalletId
+      },
+      wallet.id
+    )),
+    showAllButton && /* @__PURE__ */ jsx25(Button, { variant: "secondary", onClick: goToAllWallets, expand: true, children: /* @__PURE__ */ jsxs10(Row, { justify: "space-between", align: "center", style: { width: "100%" }, children: [
+      /* @__PURE__ */ jsxs10(Row, { align: "center", gap: 10, children: [
+        /* @__PURE__ */ jsx25(AdditionalWalletsIcon, { additionalWallets, size: 32 }),
+        /* @__PURE__ */ jsx25(Text, { weight: "semibold", size: "md", children: "All Wallets" })
+      ] }),
+      /* @__PURE__ */ jsx25(ChevronRight3, { size: 18, color: "var(--color-foreground-subtle)" })
+    ] }) })
+  ] });
+};
+
+// src/components/ConnectModal/SelectWallet.tsx
+import { WalletId as WalletId3 } from "@aurum-sdk/types";
+import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
+var SelectWalletPage = () => {
+  const { displayedWallets } = useConnectModal();
+  const { onDismiss, brandConfig } = useWidgetContext();
+  const hasEmailAuth = displayedWallets.some((wallet) => wallet.id === WalletId3.Email);
+  const sortedWallets = useMemo3(() => sortWallets(displayedWallets), [displayedWallets]);
+  const isGridLayout = brandConfig.walletLayout === "grid";
+  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+    /* @__PURE__ */ jsx26(
+      ModalHeader,
+      {
+        title: "Log in or sign up",
+        rightAction: /* @__PURE__ */ jsx26(Button, { size: "sm", variant: "close", onClick: onDismiss, "aria-label": "Close", children: /* @__PURE__ */ jsx26(X, { size: 20, color: "var(--color-foreground-muted)" }) })
+      }
+    ),
+    hasEmailAuth && /* @__PURE__ */ jsxs11(Fragment3, { children: [
+      /* @__PURE__ */ jsx26(Column, { align: "center", gap: 0, children: /* @__PURE__ */ jsx26(EmailAuth, {}) }),
+      sortedWallets.length > 0 && /* @__PURE__ */ jsxs11(Fragment3, { children: [
+        /* @__PURE__ */ jsx26(Spacer, { size: 20 }),
+        /* @__PURE__ */ jsx26(Divider, { children: "or continue with" }),
+        /* @__PURE__ */ jsx26(Spacer, { size: 20 })
+      ] })
+    ] }),
+    isGridLayout ? /* @__PURE__ */ jsx26(WalletListGrid, { wallets: sortedWallets }) : /* @__PURE__ */ jsx26(WalletListStacked, { wallets: sortedWallets, hasEmailAuth })
+  ] });
+};
+
+// src/components/ConnectModal/ConnectionStatus/ConnectionStatusBase.tsx
+import { useEffect as useEffect5, useState as useState8 } from "react";
+import { X as X3, ChevronLeft, CircleCheck } from "lucide-react";
+
+// src/components/ConnectModal/ConnectionStatus/ConnectionIconsRow.tsx
+import { AurumLogo as AurumLogo2 } from "@aurum-sdk/logos/react";
+import { RotateCcw } from "lucide-react";
+
+// src/components/ConnectModal/BrandLogo.tsx
+import { getLogoRadius } from "@aurum-sdk/logos/react";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var BrandLogo = ({ size = 70, sizeSlot = "sm" }) => {
+  const { brandConfig } = useWidgetContext();
+  return brandConfig.logo ? /* @__PURE__ */ jsx27(
+    "img",
+    {
+      src: brandConfig.logo,
+      alt: `${brandConfig.appName} logo`,
+      style: {
+        width: size,
+        height: size,
+        objectFit: "cover",
+        borderRadius: getLogoRadius(brandConfig.borderRadius, sizeSlot)
+      }
+    }
+  ) : null;
+};
+
+// src/components/ConnectModal/ConnectionStatus/StatusIcons.tsx
+import { X as X2 } from "lucide-react";
+import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
+var ELLIPSES_COUNT = 3;
+var StatusIcons = ({ success, error }) => {
+  const getStatusKey = () => {
+    if (success) return "success";
+    if (error) return "error";
+    return "connecting";
+  };
+  if (success) {
+    return /* @__PURE__ */ jsx28(
+      Row,
+      {
+        align: "center",
+        justify: "center",
+        gap: 0,
+        style: { padding: "0 0.5rem", minHeight: "3rem" },
+        children: /* @__PURE__ */ jsx28("div", { className: "ellipses-success", children: Array.from({ length: ELLIPSES_COUNT }, (_, i) => /* @__PURE__ */ jsx28("span", { children: "\xB7" }, i)) })
+      },
+      getStatusKey()
+    );
+  }
+  if (error) {
+    const dotsBeforeIcon = Math.floor(ELLIPSES_COUNT / 2);
+    const dotsAfterIcon = ELLIPSES_COUNT - dotsBeforeIcon - 1;
+    return /* @__PURE__ */ jsx28(
+      Row,
+      {
+        align: "center",
+        justify: "center",
+        gap: 0,
+        style: { padding: "0 0.5rem", minHeight: "3rem" },
+        children: /* @__PURE__ */ jsxs12("div", { className: "status-icon-with-dots error", children: [
+          Array.from({ length: dotsBeforeIcon }, (_, i) => /* @__PURE__ */ jsx28("span", { className: "dot", children: "\xB7" }, `before-${i}`)),
+          /* @__PURE__ */ jsx28("div", { className: "icon-center", children: /* @__PURE__ */ jsx28(X2, { size: 24, color: "var(--color-error)" }) }),
+          Array.from({ length: dotsAfterIcon }, (_, i) => /* @__PURE__ */ jsx28("span", { className: "dot", children: "\xB7" }, `after-${i}`))
+        ] })
+      },
+      getStatusKey()
+    );
+  }
+  return /* @__PURE__ */ jsx28(
+    Row,
+    {
+      align: "center",
+      justify: "center",
+      gap: 0,
+      style: { padding: "0 0.5rem", minHeight: "3rem" },
+      children: /* @__PURE__ */ jsx28("div", { className: "ellipses-loading", children: Array.from({ length: ELLIPSES_COUNT }, (_, i) => /* @__PURE__ */ jsx28("span", { children: "\xB7" }, i)) })
+    },
+    getStatusKey()
+  );
+};
+
+// src/components/ConnectModal/ConnectionStatus/ConnectionIconsRow.tsx
+import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
+var ConnectionIconsRow = ({
+  brandConfig,
+  walletId,
+  walletName,
+  success,
+  error,
+  shouldShake,
+  onRetry
+}) => {
+  return /* @__PURE__ */ jsx29("div", { className: `connection-icons-row ${shouldShake ? "wallet-icon-shake" : ""}`, children: /* @__PURE__ */ jsxs13(Row, { gap: 4, children: [
+    /* @__PURE__ */ jsx29("div", { className: "brand-logo-container", children: brandConfig.logo ? /* @__PURE__ */ jsx29(BrandLogo, { size: 54, sizeSlot: "md" }) : /* @__PURE__ */ jsx29(AurumLogo2, { variant: "black", size: 53, radius: brandConfig.borderRadius, sizeSlot: "md", title: "Aurum" }) }),
+    /* @__PURE__ */ jsx29(StatusIcons, { success, error }),
+    /* @__PURE__ */ jsxs13("div", { className: "wallet-logo-with-retry", children: [
+      /* @__PURE__ */ jsx29(WalletLogoWrapper, { id: walletId, size: 54, sizeSlot: "md", title: walletName }),
+      error && /* @__PURE__ */ jsx29(Button, { variant: "secondary", className: "retry-icon-overlay", onClick: onRetry, "aria-label": "Retry connection", children: /* @__PURE__ */ jsx29(RotateCcw, { size: 18 }) })
+    ] })
+  ] }) });
+};
+
+// src/components/ConnectModal/ConnectionStatus/ConnectionStatusBase.tsx
+import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
+var ConnectionStatusBase = ({
+  title,
+  pendingHeaderText,
+  pendingSubContent,
+  extraContent
+}) => {
+  const { selectedWallet, error, success, goBackToHome, retryConnection } = useConnectModal();
+  const { onDismiss, brandConfig } = useWidgetContext();
+  const [shouldShake, setShouldShake] = useState8(false);
+  useEffect5(() => {
+    if (error) {
+      setShouldShake(true);
+      const timer = setTimeout(() => {
+        setShouldShake(false);
+      }, ANIMATION_DURATION.SHAKE);
+      return () => clearTimeout(timer);
+    }
+  }, [error]);
+  if (!selectedWallet) {
+    return null;
+  }
+  const getHeaderVariant = () => {
+    if (success) return "success";
+    if (error) return "error";
+    return "primary";
+  };
+  const getHeaderText = () => {
+    if (success) return "";
+    if (error) return "Request Rejected";
+    return pendingHeaderText;
+  };
+  const renderSubContent = () => {
+    if (success) {
+      return /* @__PURE__ */ jsx30("div", { className: "success-icon-large", children: /* @__PURE__ */ jsx30(CircleCheck, { color: "var(--aurum-primary-color)", size: 46 }) });
+    }
+    if (error) {
+      return /* @__PURE__ */ jsxs14(Text, { align: "center", size: "sm", variant: "secondary", children: [
+        "Please try again or select a ",
+        "\n",
+        "different wallet"
+      ] });
+    }
+    return pendingSubContent;
+  };
+  return /* @__PURE__ */ jsxs14(Fragment4, { children: [
+    /* @__PURE__ */ jsx30(
+      ModalHeader,
+      {
+        leftAction: success ? null : /* @__PURE__ */ jsx30(Button, { size: "sm", variant: "close", onClick: goBackToHome, "aria-label": "Go back", children: /* @__PURE__ */ jsx30(ChevronLeft, { size: 20, color: "var(--color-foreground-muted)" }) }),
+        rightAction: success ? null : /* @__PURE__ */ jsx30(Button, { size: "sm", variant: "close", onClick: onDismiss, "aria-label": "Close", children: /* @__PURE__ */ jsx30(X3, { size: 20, color: "var(--color-foreground-muted)" }) }),
+        title: title || selectedWallet.name
+      }
+    ),
+    /* @__PURE__ */ jsx30(Spacer, { size: 12 }),
+    /* @__PURE__ */ jsxs14(Column, { align: "center", style: { maxWidth: "15.625rem", margin: "0 auto" }, gap: 8, children: [
+      /* @__PURE__ */ jsx30(
+        ConnectionIconsRow,
+        {
+          brandConfig,
+          walletId: selectedWallet.id,
+          walletName: selectedWallet.name,
+          success,
+          error,
+          shouldShake,
+          onRetry: retryConnection
+        }
+      ),
+      /* @__PURE__ */ jsx30(Spacer, { size: 12 }),
+      /* @__PURE__ */ jsx30(Column, { align: "center", justify: "start", gap: 0, style: { minHeight: "5rem", width: "100%" }, children: /* @__PURE__ */ jsxs14(Column, { gap: 8, style: { width: "100%" }, align: "center", children: [
+        /* @__PURE__ */ jsx30(Row, { align: "center", justify: "center", gap: 0, style: { width: "100%" }, children: /* @__PURE__ */ jsx30(Text, { size: "lg", variant: getHeaderVariant(), weight: "bold", align: "center", children: getHeaderText() }) }),
+        /* @__PURE__ */ jsx30(Row, { align: "center", justify: "center", gap: 0, style: { width: "100%", whiteSpace: "pre-line" }, children: renderSubContent() }),
+        extraContent
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx30(Spacer, { size: 12 })
+  ] });
+};
+
+// src/components/ConnectModal/ConnectionStatus/Desktop.tsx
+import { WalletId as WalletId4 } from "@aurum-sdk/types";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var ConnectionStatusPage = () => {
+  const { selectedWallet } = useConnectModal();
+  return /* @__PURE__ */ jsx31(
+    ConnectionStatusBase,
+    {
+      pendingHeaderText: `Approve in ${selectedWallet?.name}`,
+      pendingSubContent: /* @__PURE__ */ jsx31(Text, { align: "center", size: "sm", variant: "secondary", children: selectedWallet?.id === WalletId4.Ledger ? `Please wait for the Ledger Live modal to open` : `Please check your wallet to
+approve the connection` })
+    }
+  );
+};
+
+// src/components/ConnectModal/ConnectionStatus/Mobile.tsx
+import { useState as useState9, useEffect as useEffect6 } from "react";
+import { jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
+var ConnectionStatusMobilePage = () => {
+  const { selectedWallet, error, success, retryConnection } = useConnectModal();
+  const [showLaunchButton, setShowLaunchButton] = useState9(false);
+  useEffect6(() => {
+    const timer = setTimeout(() => setShowLaunchButton(true), 5e3);
+    return () => clearTimeout(timer);
+  }, []);
+  return /* @__PURE__ */ jsx32(
+    ConnectionStatusBase,
+    {
+      title: selectedWallet?.name,
+      pendingHeaderText: `Opening ${selectedWallet?.name}`,
+      pendingSubContent: /* @__PURE__ */ jsxs15(Text, { size: "sm", variant: "secondary", align: "center", style: { maxWidth: "18.75rem" }, children: [
+        "If ",
+        selectedWallet?.name,
+        " doesn't open automatically, click the button below"
+      ] }),
+      extraContent: showLaunchButton && !success && !error ? /* @__PURE__ */ jsx32(Button, { variant: "tertiary", size: "md", onClick: retryConnection, style: { width: "100%", marginTop: "0.5rem" }, children: "Launch App" }) : void 0
+    }
+  );
+};
+
+// src/components/ConnectModal/QRCodePage.tsx
+import { useEffect as useEffect8, useState as useState10, useRef as useRef5 } from "react";
+
+// src/components/QRCodeDisplay/QRCodeDisplay.tsx
+import { useRef as useRef4, useEffect as useEffect7 } from "react";
+import { QRCode } from "react-qrcode-logo";
+
+// src/utils/generateQrCodeWalletLogo.tsx
+import { getLogoDataUri } from "@aurum-sdk/logos";
+import { WalletId as WalletId5 } from "@aurum-sdk/types";
+var generateQrCodeWalletLogo = (walletAdapter) => {
+  if (walletAdapter && walletAdapter.id !== WalletId5.AppKit && walletAdapter.icon) {
+    return walletAdapter.icon;
+  }
+  return getLogoDataUri(WalletId5.WalletConnect) ?? "";
+};
+
+// src/components/QRCodeDisplay/QREye.tsx
+import { jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
+var QREye = ({ x, y, eyeSize, eyeRadius, dotSize, fillColor, bgColor }) => {
+  const padding = dotSize * 0.8;
+  const centerRadius = (eyeSize - 4 * padding) / 2 * 1.1;
+  return /* @__PURE__ */ jsxs16("g", { children: [
+    /* @__PURE__ */ jsx33(
+      "rect",
+      {
+        x,
+        y,
+        width: eyeSize,
+        height: eyeSize,
+        fill: fillColor,
+        rx: eyeRadius,
+        ry: eyeRadius,
+        className: "qr-skeleton-eye"
+      }
+    ),
+    /* @__PURE__ */ jsx33(
+      "rect",
+      {
+        x: x + padding,
+        y: y + padding,
+        width: eyeSize - 2 * padding,
+        height: eyeSize - 2 * padding,
+        fill: bgColor,
+        rx: eyeRadius / 2,
+        ry: eyeRadius / 2
+      }
+    ),
+    /* @__PURE__ */ jsx33("circle", { cx: x + eyeSize / 2, cy: y + eyeSize / 2, r: centerRadius, fill: fillColor, className: "qr-skeleton-eye" })
+  ] });
+};
+
+// src/components/QRCodeDisplay/generateSkeletonDots.tsx
+import { jsx as jsx34 } from "react/jsx-runtime";
+var generateSkeletonDots = ({
+  logoSize,
+  dotSize,
+  eyeSize,
+  gridSize,
+  fillColor
+}) => {
+  const dots = [];
+  for (let row = 0; row < gridSize; row++) {
+    for (let col = 0; col < gridSize; col++) {
+      const x = col * dotSize;
+      const y = row * dotSize;
+      const eyeAreaWithPadding = Math.ceil(eyeSize / dotSize);
+      const isTopLeftEye = row < eyeAreaWithPadding && col < eyeAreaWithPadding;
+      const isTopRightEye = row < eyeAreaWithPadding && col >= gridSize - eyeAreaWithPadding;
+      const isBottomLeftEye = row >= gridSize - eyeAreaWithPadding && col < eyeAreaWithPadding;
+      const centerX = (gridSize - 1) / 2;
+      const centerY = (gridSize - 1) / 2;
+      const logoPaddingInGridUnits = 6 / dotSize;
+      const logoHalfSize = logoSize / dotSize / 2 + logoPaddingInGridUnits;
+      const isLogoArea = Math.abs(col - centerX) < logoHalfSize && Math.abs(row - centerY) < logoHalfSize;
+      if (!isTopLeftEye && !isTopRightEye && !isBottomLeftEye && !isLogoArea) {
+        dots.push(
+          /* @__PURE__ */ jsx34(
+            "circle",
+            {
+              cx: x + dotSize / 2,
+              cy: y + dotSize / 2,
+              r: dotSize * 0.25,
+              fill: fillColor,
+              className: "qr-skeleton-dot"
+            },
+            `${row}-${col}`
+          )
+        );
+      }
+    }
+  }
+  return dots;
+};
+
+// src/components/QRCodeDisplay/QRCodeSkeleton.tsx
+import { jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
+var QRCodeSkeleton = ({ size = 128 }) => {
+  const { brandConfig } = useWidgetContext();
+  const { selectedWallet } = useConnectModal();
+  const fillColor = brandConfig.theme === "light" ? "#777777" : "#6b7280";
+  const bgColor = brandConfig.theme === "light" ? "#ffffff" : "#121212";
+  const logoSize = size * 0.2;
+  const eyeRadius = 6;
+  const dotSize = size / 40;
+  const eyeSize = 32;
+  const gridSize = 40;
+  return /* @__PURE__ */ jsx35("div", { className: "qr-skeleton-container", style: { height: size }, children: /* @__PURE__ */ jsxs17("svg", { width: size, height: size, className: "qr-skeleton-svg", children: [
+    /* @__PURE__ */ jsx35("rect", { width: size, height: size, fill: bgColor }),
+    generateSkeletonDots({ logoSize, dotSize, eyeSize, gridSize, fillColor }),
+    /* @__PURE__ */ jsx35(
+      QREye,
+      {
+        x: 0,
+        y: 0,
+        eyeSize,
+        eyeRadius,
+        dotSize,
+        fillColor,
+        bgColor
+      }
+    ),
+    /* @__PURE__ */ jsx35(
+      QREye,
+      {
+        x: size - eyeSize,
+        y: 0,
+        eyeSize,
+        eyeRadius,
+        dotSize,
+        fillColor,
+        bgColor
+      }
+    ),
+    /* @__PURE__ */ jsx35(
+      QREye,
+      {
+        x: 0,
+        y: size - eyeSize,
+        eyeSize,
+        eyeRadius,
+        dotSize,
+        fillColor,
+        bgColor
+      }
+    ),
+    /* @__PURE__ */ jsx35(
+      "rect",
+      {
+        x: size / 2 - logoSize / 2,
+        y: size / 2 - logoSize / 2,
+        width: logoSize,
+        height: logoSize,
+        fill: bgColor,
+        rx: 6,
+        ry: 6
+      }
+    ),
+    /* @__PURE__ */ jsx35(
+      "image",
+      {
+        x: size / 2 - logoSize / 2,
+        y: size / 2 - logoSize / 2,
+        width: logoSize,
+        height: logoSize,
+        href: generateQrCodeWalletLogo(selectedWallet || void 0),
+        opacity: "1.0"
+      }
+    )
+  ] }) });
+};
+
+// src/components/QRCodeDisplay/QRCodeDisplay.tsx
+import { WalletId as WalletId6 } from "@aurum-sdk/types";
+import { jsx as jsx36, jsxs as jsxs18 } from "react/jsx-runtime";
+var QRCodeDisplay = ({ uri, size = 256 }) => {
+  const { brandConfig } = useWidgetContext();
+  const { selectedWallet, displayedWallets, connectWallet } = useConnectModal();
+  const qrCodeDisplayColor = brandConfig.theme === "light" ? "#000000" : "#6b7280";
+  const bgColor = brandConfig.theme === "light" ? "#ffffff" : "#121212";
+  const logoWalletRef = useRef4(null);
+  useEffect7(() => {
+    if (selectedWallet && selectedWallet.id !== WalletId6.AppKit) {
+      logoWalletRef.current = selectedWallet;
+    }
+  }, [selectedWallet]);
+  const logoWallet = logoWalletRef.current || selectedWallet;
+  const appKitAdapter = displayedWallets.find(({ id }) => id === WalletId6.AppKit);
+  const handleAppKitConnect = async () => {
+    if (appKitAdapter) {
+      connectWallet(appKitAdapter);
+    }
+  };
+  return /* @__PURE__ */ jsx36(Column, { align: "center", gap: 16, children: /* @__PURE__ */ jsxs18(Column, { align: "center", gap: 4, children: [
+    /* @__PURE__ */ jsx36(
+      "div",
+      {
+        className: `qr-container ${!uri ? "qr-container-shimmer" : ""}`,
+        style: {
+          width: size,
+          height: size
+        },
+        children: !uri ? /* @__PURE__ */ jsx36(QRCodeSkeleton, { size }) : /* @__PURE__ */ jsx36(
+          QRCode,
+          {
+            value: uri,
+            size,
+            quietZone: 0,
+            bgColor,
+            fgColor: qrCodeDisplayColor,
+            logoImage: generateQrCodeWalletLogo(logoWallet || void 0),
+            logoWidth: size * 0.2,
+            logoHeight: size * 0.2,
+            removeQrCodeBehindLogo: true,
+            logoPadding: 6,
+            qrStyle: "dots",
+            eyeRadius: getBorderRadiusScale(brandConfig.borderRadius).xs
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs18(Row, { justify: appKitAdapter ? "space-between" : "center", style: { width: "100%" }, children: [
+      /* @__PURE__ */ jsx36(CopyButton, { text: uri || "", disabled: !uri, variant: "secondary", label: "Copy URI" }),
+      appKitAdapter && /* @__PURE__ */ jsx36(
+        Button,
+        {
+          variant: "text",
+          size: "sm",
+          onClick: handleAppKitConnect,
+          style: { color: "var(--color-foreground-muted)", fontWeight: "500" },
+          children: "Open Modal"
+        }
+      )
+    ] })
+  ] }) });
+};
+
+// src/components/ConnectModal/QRCodePage.tsx
+import { ChevronLeft as ChevronLeft2, X as X4, SquareArrowOutUpRight, CircleCheck as CircleCheck2 } from "lucide-react";
+import { WalletId as WalletId7, WalletName } from "@aurum-sdk/types";
+import { Fragment as Fragment5, jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
+var QRCodePage = () => {
+  const { onDismiss } = useWidgetContext();
+  const { navigateTo } = useNavigation();
+  const { selectedWallet, error, configError, retryConnection, qrSuccess } = useConnectModal();
+  const [connectionUri, setConnectionUri] = useState10(null);
+  const originalWalletRef = useRef5(null);
+  useEffect8(() => {
+    if (selectedWallet && selectedWallet.id !== WalletId7.AppKit) {
+      originalWalletRef.current = selectedWallet;
+    }
+  }, [selectedWallet]);
+  const displayWallet = originalWalletRef.current || selectedWallet;
+  const goBackToHome = () => {
+    navigateTo(PAGE_IDS.SELECT_WALLET);
+  };
+  const title = displayWallet?.name === WalletName.WalletConnect || displayWallet?.name === WalletName.AppKit ? "Scan QR code" : `Scan with ${displayWallet?.name} app`;
+  useEffect8(() => {
+    const handleWalletConnectURI = (event) => {
+      setConnectionUri(event.detail.uri);
+    };
+    window.addEventListener("walletconnect:uri", handleWalletConnectURI);
+    return () => {
+      window.removeEventListener("walletconnect:uri", handleWalletConnectURI);
+    };
+  }, []);
+  useEffect8(() => {
+    if (error && !configError) {
+      setConnectionUri(null);
+      retryConnection();
+    }
+  }, [error, configError]);
+  if (!selectedWallet) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs19(Fragment5, { children: [
+    /* @__PURE__ */ jsx37(
+      ModalHeader,
+      {
+        leftAction: qrSuccess ? null : /* @__PURE__ */ jsx37(Button, { size: "sm", variant: "close", onClick: goBackToHome, "aria-label": "Go back", children: /* @__PURE__ */ jsx37(ChevronLeft2, { size: 20, color: "var(--color-foreground-muted)" }) }),
+        title,
+        rightAction: qrSuccess ? null : /* @__PURE__ */ jsx37(Button, { size: "sm", variant: "close", onClick: onDismiss, "aria-label": "Close", children: /* @__PURE__ */ jsx37(X4, { size: 20, color: "var(--color-foreground-muted)" }) })
+      }
+    ),
+    qrSuccess ? /* @__PURE__ */ jsx37(Column, { align: "center", style: { height: "8rem" }, children: /* @__PURE__ */ jsx37(CircleCheck2, { color: "var(--aurum-primary-color)", size: 46 }) }) : /* @__PURE__ */ jsxs19(Fragment5, { children: [
+      /* @__PURE__ */ jsx37(Column, { align: "center", gap: 24, children: /* @__PURE__ */ jsx37(QRCodeDisplay, { uri: error ? null : connectionUri }) }),
+      displayWallet?.downloadUrl && /* @__PURE__ */ jsxs19(Fragment5, { children: [
+        /* @__PURE__ */ jsx37(Spacer, { size: 15 }),
+        /* @__PURE__ */ jsxs19(
+          Button,
+          {
+            variant: "tertiary",
+            expand: true,
+            onClick: () => window.open(displayWallet.downloadUrl ?? "", "_blank", "noopener,noreferrer"),
+            children: [
+              /* @__PURE__ */ jsx37(SquareArrowOutUpRight, { size: 16, color: "var(--color-foreground-muted)" }),
+              /* @__PURE__ */ jsxs19(Text, { size: "sm", weight: "semibold", variant: "secondary", children: [
+                "Download ",
+                displayWallet.name
+              ] })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/ConnectModal/AllWallets.tsx
+import { useMemo as useMemo4 } from "react";
+import { X as X5, ChevronLeft as ChevronLeft3 } from "lucide-react";
+import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
+var AllWalletsPage = () => {
+  const { onDismiss } = useWidgetContext();
+  const { navigateTo } = useNavigation();
+  const { displayedWallets, connectWallet } = useConnectModal();
+  const lastUsedWalletId = useAurumStore((state) => state.lastUsedWalletId);
+  const sortedWallets = useMemo4(() => sortWallets(displayedWallets), [displayedWallets]);
+  const goBackToSelectWallet = () => {
+    navigateTo(PAGE_IDS.SELECT_WALLET);
+  };
+  return /* @__PURE__ */ jsxs20(Fragment6, { children: [
+    /* @__PURE__ */ jsx38(
+      ModalHeader,
+      {
+        leftAction: /* @__PURE__ */ jsx38(Button, { size: "sm", variant: "close", onClick: goBackToSelectWallet, "aria-label": "Go back", children: /* @__PURE__ */ jsx38(ChevronLeft3, { size: 20, color: "var(--color-foreground-muted)" }) }),
+        rightAction: /* @__PURE__ */ jsx38(Button, { size: "sm", variant: "close", onClick: onDismiss, "aria-label": "Close", children: /* @__PURE__ */ jsx38(X5, { size: 20, color: "var(--color-foreground-muted)" }) }),
+        title: "All Wallets"
+      }
+    ),
+    /* @__PURE__ */ jsx38(Column, { justify: "start", style: { maxHeight: "22rem", overflowY: "auto" }, children: sortedWallets.map((wallet) => {
+      return /* @__PURE__ */ jsx38(
+        WalletButton,
+        {
+          wallet,
+          connectWallet,
+          isLastUsed: wallet.id === lastUsedWalletId
+        },
+        wallet.id
+      );
+    }) })
+  ] });
+};
+
+// src/components/ConnectModal/DownloadWalletPage.tsx
+import { X as X6, SquareArrowOutUpRight as SquareArrowOutUpRight2, ChevronLeft as ChevronLeft4 } from "lucide-react";
+import { Fragment as Fragment7, jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
+var DownloadWalletPage = () => {
+  const { selectedWallet, goBackToHome } = useConnectModal();
+  const { onDismiss } = useWidgetContext();
+  if (!selectedWallet) {
+    return null;
+  }
+  const downloadUrl = selectedWallet.downloadUrl;
+  const handleDownload = () => {
+    if (downloadUrl) {
+      window.open(downloadUrl, "_blank", "noopener,noreferrer");
+    }
+  };
+  return /* @__PURE__ */ jsxs21(Fragment7, { children: [
+    /* @__PURE__ */ jsx39(
+      ModalHeader,
+      {
+        leftAction: /* @__PURE__ */ jsx39(Button, { size: "sm", variant: "close", onClick: goBackToHome, "aria-label": "Go back", children: /* @__PURE__ */ jsx39(ChevronLeft4, { size: 20, color: "var(--color-foreground-muted)" }) }),
+        rightAction: /* @__PURE__ */ jsx39(Button, { size: "sm", variant: "close", onClick: onDismiss, "aria-label": "Close", children: /* @__PURE__ */ jsx39(X6, { size: 20, color: "var(--color-foreground-muted)" }) }),
+        title: `Install ${selectedWallet.name}`
+      }
+    ),
+    /* @__PURE__ */ jsxs21(Column, { align: "center", gap: 24, justify: "center", children: [
+      /* @__PURE__ */ jsx39(WalletLogoWrapper, { id: selectedWallet.id, size: 64, sizeSlot: "lg", title: selectedWallet.name }),
+      /* @__PURE__ */ jsxs21(Column, { align: "center", gap: 12, children: [
+        /* @__PURE__ */ jsxs21(Text, { size: "lg", weight: "semibold", align: "center", children: [
+          "Install ",
+          selectedWallet.name
+        ] }),
+        /* @__PURE__ */ jsxs21(Text, { size: "md", variant: "secondary", align: "center", style: { maxWidth: "20rem" }, children: [
+          selectedWallet.name,
+          " not installed. Please download then try again."
+        ] })
+      ] }),
+      downloadUrl && /* @__PURE__ */ jsx39(Fragment7, { children: /* @__PURE__ */ jsxs21(Button, { variant: "tertiary", onClick: handleDownload, expand: true, children: [
+        /* @__PURE__ */ jsx39(SquareArrowOutUpRight2, { size: 16, color: "var(--color-foreground-muted)" }),
+        /* @__PURE__ */ jsxs21(Text, { size: "sm", weight: "semibold", variant: "secondary", children: [
+          "Download ",
+          selectedWallet.name
+        ] })
+      ] }) })
+    ] })
+  ] });
+};
+
+// src/components/ConnectModal/EmailVerifyOtp/EmailVerifyOtp.tsx
+import { X as X7, ChevronLeft as ChevronLeft5, Check, CircleCheck as CircleCheck3 } from "lucide-react";
+
+// src/components/ConnectModal/EmailVerifyOtp/constants.ts
+var OTP_LENGTH = 6;
+var RESEND_COUNTDOWN_SECONDS = 30;
+
+// src/components/ConnectModal/EmailVerifyOtp/styles.ts
+var getOtpInputStyles = (isFocused, hasError, hideCaret) => ({
+  width: "2.625rem",
+  height: "3rem",
+  textAlign: "center",
+  fontFamily: "inherit",
+  fontSize: "1.375rem",
+  border: `${hasError || !isFocused ? "0.0625rem" : "0.125rem"} solid ${hasError ? "var(--color-error)" : isFocused ? "var(--color-border-focus)" : "var(--color-border-muted)"}`,
+  borderRadius: "var(--aurum-border-radius-sm)",
+  outline: "none",
+  backgroundColor: "var(--color-accent)",
+  color: "var(--color-foreground)",
+  caretColor: hideCaret ? "transparent" : "auto",
+  transition: "border-color 0.3s ease"
+});
+var emailHighlightStyles = {
+  fontWeight: "bold",
+  color: "var(--color-primary)"
+};
+
+// src/components/ConnectModal/EmailVerifyOtp/useCountdown.ts
+import { useState as useState11, useEffect as useEffect9 } from "react";
+var useCountdown = () => {
+  const [countdown, setCountdown] = useState11(0);
+  const [canResend, setCanResend] = useState11(true);
+  const startCountdown = (seconds) => {
+    setCanResend(false);
+    setCountdown(seconds);
+  };
+  useEffect9(() => {
+    if (countdown <= 0) return;
+    const timer = setTimeout(() => {
+      const newCountdown = countdown - 1;
+      setCountdown(newCountdown);
+      if (newCountdown === 0) {
+        setCanResend(true);
+      }
+    }, 1e3);
+    return () => clearTimeout(timer);
+  }, [countdown]);
+  return { countdown, canResend, startCountdown };
+};
+
+// src/components/ConnectModal/EmailVerifyOtp/useOtpInputs.ts
+import { useState as useState12, useRef as useRef6, useEffect as useEffect10 } from "react";
+var useOtpInputs = ({
+  emailAuthState,
+  error,
+  clearError,
+  onComplete,
+  isVerifying
+}) => {
+  const [otp, setOtp] = useState12(Array(OTP_LENGTH).fill(""));
+  const [focusedIndex, setFocusedIndex] = useState12(0);
+  const inputRefs = useRef6([]);
+  const isOtpComplete = otp.every((digit) => digit !== "");
+  const handleInputChange = (index, value) => {
+    if (error) clearError();
+    if (emailAuthState.step === "connecting" || !/^\d*$/.test(value)) return;
+    const newOtp = [...otp];
+    newOtp[index] = value.slice(-1);
+    setOtp(newOtp);
+    if (value && index < OTP_LENGTH - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+  const handleKeyDown = (index, e) => {
+    if (e.key === "Backspace" && !otp[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    if (error) clearError();
+    if (emailAuthState.step === "connecting" || !/^\d*$/.test(e.clipboardData.getData("text"))) return;
+    const pastedData = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, OTP_LENGTH);
+    const newOtp = Array(OTP_LENGTH).fill("").map((_, i) => pastedData[i] || "");
+    setOtp(newOtp);
+    const nextEmptyIndex = newOtp.findIndex((digit) => !digit);
+    if (nextEmptyIndex !== -1) {
+      inputRefs.current[nextEmptyIndex]?.focus();
+    }
+  };
+  useEffect10(() => {
+    if (isOtpComplete && otp.join("").length === OTP_LENGTH) {
+      onComplete(otp.join(""));
+    }
+  }, [otp]);
+  useEffect10(() => {
+    inputRefs.current[0]?.focus();
+    const timer = setTimeout(() => {
+      inputRefs.current[0]?.focus();
+    }, 100);
+    return () => clearTimeout(timer);
+  }, []);
+  useEffect10(() => {
+    if (error) {
+      setOtp(Array(OTP_LENGTH).fill(""));
+      inputRefs.current[0]?.focus();
+    }
+  }, [error]);
+  useEffect10(() => {
+    if (isVerifying) {
+      setFocusedIndex(0);
+    }
+  }, [isVerifying]);
+  return {
+    otp,
+    setOtp,
+    focusedIndex,
+    setFocusedIndex,
+    inputRefs,
+    handleInputChange,
+    handleKeyDown,
+    handlePaste
+  };
+};
+
+// src/components/ConnectModal/EmailVerifyOtp/EmailVerifyOtp.tsx
+import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
+var EmailVerifyOTP = () => {
+  const { onDismiss } = useWidgetContext();
+  const { goBackToHome } = useConnectModal();
+  const { emailAuthState, sendEmailOTP, verifyEmailOTPAndConnect, error, clearError } = useEmailAuth();
+  const isVerifying = emailAuthState.step === "connecting" && !error;
+  const { otp, setOtp, focusedIndex, setFocusedIndex, inputRefs, handleInputChange, handleKeyDown, handlePaste } = useOtpInputs({
+    emailAuthState,
+    error,
+    clearError,
+    onComplete: verifyEmailOTPAndConnect,
+    isVerifying
+  });
+  const { canResend, startCountdown } = useCountdown();
+  const isSuccess = emailAuthState.step === "success";
+  const showOtpInputs = !isVerifying && !isSuccess;
+  const canResendOtp = canResend && emailAuthState.step !== "success";
+  const handleBackToHome = () => {
+    if (emailAuthState.step !== "otp") return;
+    clearError();
+    goBackToHome();
+  };
+  const handleResendOTP = async () => {
+    if (!canResendOtp) return;
+    if (error) clearError();
+    startCountdown(RESEND_COUNTDOWN_SECONDS);
+    await sendEmailOTP(emailAuthState.email);
+    setOtp(Array(OTP_LENGTH).fill(""));
+    inputRefs.current[0]?.focus();
+  };
+  return /* @__PURE__ */ jsxs22("div", { children: [
+    /* @__PURE__ */ jsx40(
+      ModalHeader,
+      {
+        leftAction: isSuccess ? null : /* @__PURE__ */ jsx40(Button, { size: "sm", variant: "close", onClick: handleBackToHome, "aria-label": "Go back", children: /* @__PURE__ */ jsx40(ChevronLeft5, { size: 20, color: "var(--color-foreground-muted)" }) }),
+        rightAction: isSuccess ? null : /* @__PURE__ */ jsx40(Button, { size: "sm", variant: "close", onClick: onDismiss, "aria-label": "Close", children: /* @__PURE__ */ jsx40(X7, { size: 20, color: "var(--color-foreground-muted)" }) }),
+        title: "Verify Email"
+      }
+    ),
+    /* @__PURE__ */ jsxs22(Column, { gap: 24, children: [
+      /* @__PURE__ */ jsxs22(Text, { align: "center", variant: "secondary", children: [
+        "Enter the 6-digit code sent to",
+        /* @__PURE__ */ jsx40("br", {}),
+        " ",
+        /* @__PURE__ */ jsx40("span", { style: emailHighlightStyles, children: emailAuthState.email })
+      ] }),
+      /* @__PURE__ */ jsxs22(Column, { align: "center", gap: 12, children: [
+        /* @__PURE__ */ jsxs22("div", { style: { position: "relative", height: "3rem" }, children: [
+          /* @__PURE__ */ jsx40(
+            Row,
+            {
+              justify: "center",
+              gap: 8,
+              style: {
+                opacity: showOtpInputs ? 1 : 0,
+                pointerEvents: showOtpInputs ? "auto" : "none",
+                position: "relative"
+              },
+              children: otp.map((digit, index) => /* @__PURE__ */ jsx40(
+                "input",
+                {
+                  "aria-label": "OTP input",
+                  id: `otp-input-${index}`,
+                  type: "text",
+                  autoFocus: index === 0,
+                  maxLength: 1,
+                  value: digit,
+                  inputMode: "numeric",
+                  onPaste: handlePaste,
+                  onBlur: () => setFocusedIndex(null),
+                  onFocus: () => setFocusedIndex(index),
+                  onKeyDown: (e) => handleKeyDown(index, e),
+                  ref: (el) => inputRefs.current[index] = el,
+                  style: getOtpInputStyles(focusedIndex === index, !!error, !showOtpInputs),
+                  onChange: (e) => handleInputChange(index, e.target.value)
+                },
+                index
+              ))
+            }
+          ),
+          !showOtpInputs && /* @__PURE__ */ jsx40(Column, { align: "center", justify: "center", style: { position: "absolute", inset: 0 }, children: isVerifying ? /* @__PURE__ */ jsx40(Spinner, { size: 32, color: "var(--aurum-primary-color)" }) : isSuccess ? /* @__PURE__ */ jsx40(CircleCheck3, { size: 46, color: "var(--aurum-primary-color)" }) : null })
+        ] }),
+        /* @__PURE__ */ jsx40(
+          Text,
+          {
+            align: "center",
+            variant: "error",
+            size: "sm",
+            style: { visibility: error ? "visible" : "hidden", height: "1rem", display: isSuccess ? "none" : "block" },
+            children: error
+          }
+        )
+      ] }),
+      !isSuccess && /* @__PURE__ */ jsx40(Column, { align: "center", justify: "center", children: /* @__PURE__ */ jsx40(Row, { align: "center", justify: "center", style: { minHeight: "2rem" }, children: canResend ? /* @__PURE__ */ jsxs22(Row, { align: "baseline", gap: 2, children: [
+        /* @__PURE__ */ jsx40(Text, { size: "sm", variant: "secondary", children: "Didn't receive the code?" }),
+        /* @__PURE__ */ jsx40(
+          Button,
+          {
+            size: "sm",
+            variant: "text",
+            onClick: handleResendOTP,
+            onMouseDown: (e) => e.preventDefault(),
+            disabled: !canResendOtp,
+            children: "Resend"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs22(Row, { align: "center", gap: 4, children: [
+        /* @__PURE__ */ jsx40(Text, { size: "sm", variant: "secondary", children: "Email re-sent" }),
+        /* @__PURE__ */ jsx40(Check, { size: 14, color: "var(--color-foreground-muted)" })
+      ] }) }) })
+    ] })
+  ] });
+};
+
+// src/components/ConnectModal/ConfigErrorPage.tsx
+import { X as X8, AlertTriangle, ChevronLeft as ChevronLeft6 } from "lucide-react";
+import { Fragment as Fragment8, jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
+var ConfigErrorPage = () => {
+  const { onDismiss } = useWidgetContext();
+  const { goBackToHome } = useConnectModal();
+  return /* @__PURE__ */ jsxs23(Fragment8, { children: [
+    /* @__PURE__ */ jsx41(
+      ModalHeader,
+      {
+        leftAction: /* @__PURE__ */ jsx41(Button, { size: "sm", variant: "close", onClick: goBackToHome, "aria-label": "Go back", children: /* @__PURE__ */ jsx41(ChevronLeft6, { size: 20, color: "var(--color-foreground-muted)" }) }),
+        rightAction: /* @__PURE__ */ jsx41(Button, { size: "sm", variant: "close", onClick: onDismiss, "aria-label": "Close", children: /* @__PURE__ */ jsx41(X8, { size: 20, color: "var(--color-foreground-muted)" }) }),
+        title: "Error"
+      }
+    ),
+    /* @__PURE__ */ jsxs23(Column, { align: "center", gap: 24, justify: "center", children: [
+      /* @__PURE__ */ jsx41(
+        "div",
+        {
+          style: {
+            width: 64,
+            height: 64,
+            borderRadius: "var(--aurum-border-radius-md)",
+            backgroundColor: "color-mix(in srgb, var(--color-error) 80%, transparent)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ jsx41(AlertTriangle, { size: 32, color: "white" })
+        }
+      ),
+      /* @__PURE__ */ jsxs23(Column, { align: "center", gap: 12, children: [
+        /* @__PURE__ */ jsx41(Text, { size: "lg", weight: "semibold", align: "center", children: "Configuration Error" }),
+        /* @__PURE__ */ jsx41(Text, { size: "md", variant: "secondary", align: "center", style: { maxWidth: "20rem" }, children: "Missing required project ID" })
+      ] }),
+      /* @__PURE__ */ jsx41(Button, { variant: "secondary", onClick: goBackToHome, expand: true, children: /* @__PURE__ */ jsx41(Text, { size: "sm", weight: "semibold", children: "Back" }) })
+    ] })
+  ] });
+};
+
+// src/components/ConnectModal/PageIds.tsx
+import { jsx as jsx42 } from "react/jsx-runtime";
+var PAGE_IDS = {
+  SELECT_WALLET: "select-wallet",
+  ALL_WALLETS: "all-wallets",
+  QR_CODE: "qr-code",
+  MOBILE_DEEP_LINK: "mobile-deep-link",
+  DOWNLOAD_WALLET: "download-wallet",
+  CONNECTING: "connecting",
+  EMAIL_VERIFY_OTP: "email-verify-otp",
+  CONFIG_ERROR: "config-error"
+};
+var PAGE_COMPONENTS = {
+  [PAGE_IDS.SELECT_WALLET]: /* @__PURE__ */ jsx42(SelectWalletPage, {}),
+  [PAGE_IDS.ALL_WALLETS]: /* @__PURE__ */ jsx42(AllWalletsPage, {}),
+  [PAGE_IDS.QR_CODE]: /* @__PURE__ */ jsx42(QRCodePage, {}),
+  [PAGE_IDS.MOBILE_DEEP_LINK]: /* @__PURE__ */ jsx42(ConnectionStatusMobilePage, {}),
+  [PAGE_IDS.DOWNLOAD_WALLET]: /* @__PURE__ */ jsx42(DownloadWalletPage, {}),
+  [PAGE_IDS.CONNECTING]: /* @__PURE__ */ jsx42(ConnectionStatusPage, {}),
+  [PAGE_IDS.EMAIL_VERIFY_OTP]: /* @__PURE__ */ jsx42(EmailVerifyOTP, {}),
+  [PAGE_IDS.CONFIG_ERROR]: /* @__PURE__ */ jsx42(ConfigErrorPage, {})
+};
+
+// src/utils/walletConnectDeepLink.ts
+var clearExistingDeepLinkListeners = () => {
+  const existingListeners = window.__aurumDeepLinkListeners ?? [];
+  existingListeners.forEach((cleanup) => cleanup());
+  window.__aurumDeepLinkListeners = [];
+};
+var createWalletConnectHandlers = (deepLinkBaseUrl, onRejection) => {
+  const handleUri = (event) => {
+    const uri = event.detail.uri;
+    if (uri && deepLinkBaseUrl) {
+      const deepLinkUrl = `${deepLinkBaseUrl}${encodeURIComponent(uri)}`;
+      window.location.href = deepLinkUrl;
+    }
+  };
+  const handleDisconnect = () => {
+    onRejection();
+  };
+  return { handleUri, handleDisconnect };
+};
+var setupEventListeners = (handlers) => {
+  const { handleUri, handleDisconnect } = handlers;
+  window.addEventListener("walletconnect:uri", handleUri);
+  window.addEventListener("walletconnect:disconnect", handleDisconnect);
+  return () => {
+    window.removeEventListener("walletconnect:uri", handleUri);
+    window.removeEventListener("walletconnect:disconnect", handleDisconnect);
+  };
+};
+var registerGlobalCleanup = (cleanupFn) => {
+  if (!window.__aurumDeepLinkListeners) {
+    window.__aurumDeepLinkListeners = [];
+  }
+  const cleanup = () => {
+    const cleanupList = window.__aurumDeepLinkListeners ?? [];
+    const index = cleanupList.indexOf(cleanup);
+    if (index > -1) cleanupList.splice(index, 1);
+    cleanupFn();
+  };
+  window.__aurumDeepLinkListeners?.push(cleanup);
+  return cleanup;
+};
+
+// src/hooks/useConnectSelectedWallet.tsx
+import { WalletId as WalletId8 } from "@aurum-sdk/types";
+var useConnectSelectedWallet = () => {
+  const { navigateTo } = useNavigation();
+  const connectInstalledWallet = async ({ adapter, onConnect, setSuccess }) => {
+    navigateTo(PAGE_IDS.CONNECTING);
+    try {
+      const { address, provider } = await adapter.connect();
+      setSuccess?.(true);
+      setTimeout(() => {
+        onConnect({ walletId: adapter.id, address, provider });
+      }, 1e3);
+    } catch (error) {
+      if (isConfigError(error)) {
+        navigateTo(PAGE_IDS.CONFIG_ERROR);
+        return;
+      }
+      throw error;
+    }
+  };
+  const connectUninstalledWalletQRCode = async ({ displayedWallets, onConnect, setSuccess }) => {
+    const walletConnectAdapter = displayedWallets?.find(({ id }) => id === WalletId8.WalletConnect);
+    if (!walletConnectAdapter) {
+      sentryLogger.error("connectUninstalledWalletQRCode: WalletConnect adapter not found");
+      throw new Error("WalletConnect adapter not found");
+    }
+    navigateTo(PAGE_IDS.QR_CODE);
+    try {
+      const { address, provider } = await walletConnectAdapter.connect();
+      setSuccess?.(true);
+      setTimeout(() => {
+        onConnect({ walletId: walletConnectAdapter.id, address, provider });
+      }, 1e3);
+    } catch (error) {
+      if (isConfigError(error)) {
+        navigateTo(PAGE_IDS.CONFIG_ERROR);
+        return;
+      }
+      throw error;
+    }
+  };
+  const connectWithMobileDeepLink = async ({
+    displayedWallets,
+    adapter,
+    onConnect,
+    setSuccess
+  }) => {
+    const walletConnectAdapter = displayedWallets?.find(({ id }) => id === WalletId8.WalletConnect);
+    if (!walletConnectAdapter) {
+      sentryLogger.error("connectWithMobileDeepLink: WalletConnect adapter not found");
+      throw new Error("WalletConnect adapter not found");
+    }
+    let isRejected = false;
+    clearExistingDeepLinkListeners();
+    const handlers = createWalletConnectHandlers(adapter.wcDeepLinkUrl, () => {
+      isRejected = true;
+    });
+    const cleanupEventListeners = setupEventListeners(handlers);
+    const cleanupGlobal = registerGlobalCleanup(cleanupEventListeners);
+    try {
+      navigateTo(PAGE_IDS.MOBILE_DEEP_LINK);
+      const { address, provider } = await walletConnectAdapter.connect();
+      cleanupGlobal();
+      if (isRejected) {
+        return;
+      }
+      setSuccess?.(true);
+      setTimeout(() => {
+        onConnect({ walletId: walletConnectAdapter.id, address, provider });
+      }, 1e3);
+    } catch (error) {
+      cleanupGlobal();
+      if (isConfigError(error)) {
+        navigateTo(PAGE_IDS.CONFIG_ERROR);
+        return;
+      }
+      throw error;
+    }
+  };
+  const connectAppKit = async ({ adapter, onConnect, setSuccess }) => {
+    try {
+      const { address, provider } = await adapter.connect();
+      setSuccess?.(true);
+      setTimeout(() => {
+        onConnect({ walletId: adapter.id, address, provider });
+      }, 1e3);
+    } catch (error) {
+      if (isConfigError(error)) {
+        navigateTo(PAGE_IDS.CONFIG_ERROR);
+        return;
+      }
+    }
+  };
+  const redirectToDownloadPage = async () => {
+    navigateTo(PAGE_IDS.DOWNLOAD_WALLET);
+  };
+  return {
+    // Both mobile and desktop
+    connectInstalledWallet,
+    connectAppKit,
+    redirectToDownloadPage,
+    // Desktop only
+    connectUninstalledWalletQRCode,
+    // Mobile only
+    connectWithMobileDeepLink
+  };
+};
+
+// src/contexts/ConnectModalContext.tsx
+import { WalletId as WalletId9 } from "@aurum-sdk/types";
+import { jsx as jsx43 } from "react/jsx-runtime";
+var ConnectModalContext = createContext4(null);
+var useConnectModal = () => {
+  const context = useContext4(ConnectModalContext);
+  if (!context) {
+    throw new Error("useConnectModal must be used within a ConnectModalProvider");
+  }
+  return context;
+};
+var ConnectModalProvider = ({ children, displayedWallets, onConnect }) => {
+  const { navigateTo } = useNavigation();
+  const {
+    redirectToDownloadPage,
+    connectInstalledWallet,
+    connectWithMobileDeepLink,
+    connectUninstalledWalletQRCode,
+    connectAppKit
+  } = useConnectSelectedWallet();
+  const [error, setError] = useState13(false);
+  const [configError, setConfigError] = useState13(false);
+  const [success, setSuccess] = useState13(false);
+  const [qrSuccess, setQrSuccess] = useState13(false);
+  const [selectedWallet, setSelectedWallet] = useState13(null);
+  const connectWallet = async (wallet) => {
+    try {
+      setError(false);
+      setConfigError(false);
+      setSuccess(false);
+      setQrSuccess(false);
+      setSelectedWallet(wallet);
+      const isOnMobile = isMobile();
+      const isDesktop = !isOnMobile;
+      const hasDeepLink = Boolean(wallet.wcDeepLinkUrl);
+      if (isDesktop) {
+        if (wallet.id === WalletId9.AppKit)
+          return await connectAppKit({ adapter: wallet, onConnect, setSuccess: setQrSuccess });
+        if (!wallet.isInstalled() && !hasDeepLink) {
+          return await redirectToDownloadPage();
+        }
+        if (wallet.id === WalletId9.WalletConnect || !wallet.isInstalled())
+          return await connectUninstalledWalletQRCode({
+            adapter: wallet,
+            displayedWallets,
+            onConnect,
+            setSuccess: setQrSuccess
+          });
+        return await connectInstalledWallet({ adapter: wallet, onConnect, setSuccess });
+      }
+      if (isOnMobile) {
+        if (wallet.id === WalletId9.WalletConnect || wallet.id === WalletId9.AppKit) {
+          const appkitAdapter = displayedWallets?.find(({ id }) => id === WalletId9.AppKit);
+          if (!appkitAdapter) {
+            sentryLogger.error("AppKit adapter not found");
+            throw new Error("AppKit adapter not found");
+          }
+          return await connectAppKit({ adapter: appkitAdapter, onConnect, setSuccess: setQrSuccess });
+        }
+        if (wallet.isInstalled()) return await connectInstalledWallet({ adapter: wallet, onConnect, setSuccess });
+        if (hasDeepLink) {
+          return await connectWithMobileDeepLink({ adapter: wallet, displayedWallets, onConnect, setSuccess });
+        }
+        return await redirectToDownloadPage();
+      }
+    } catch (err) {
+      setError(true);
+      if (isConfigError(err)) {
+        setConfigError(true);
+      }
+    }
+  };
+  const retryConnection = () => {
+    if (selectedWallet) connectWallet(selectedWallet);
+  };
+  const goBackToHome = () => {
+    navigateTo(PAGE_IDS.SELECT_WALLET);
+    setSelectedWallet(null);
+    setError(false);
+    setConfigError(false);
+    setSuccess(false);
+    setQrSuccess(false);
+  };
+  const contextValue = {
+    error,
+    configError,
+    success,
+    qrSuccess,
+    selectedWallet,
+    displayedWallets,
+    goBackToHome,
+    connectWallet,
+    retryConnection,
+    setSelectedWallet,
+    setSuccess,
+    setQrSuccess
+  };
+  return /* @__PURE__ */ jsx43(ConnectModalContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx43(
+    EmailAuthProvider,
+    {
+      onConnect,
+      navigateTo,
+      displayedWallets,
+      setSelectedWallet,
+      children
+    }
+  ) });
+};
+
+// src/components/ConnectUIProviders.tsx
+import { jsx as jsx44 } from "react/jsx-runtime";
+var ConnectUIProviders = ({ children, onConnect, displayedWallets }) => /* @__PURE__ */ jsx44(NavigationProvider, { initialPage: PAGE_IDS.SELECT_WALLET, children: /* @__PURE__ */ jsx44(ConnectModalProvider, { onConnect, displayedWallets, children }) });
+
+// src/components/ConnectModal/ConnectPages.tsx
+var ConnectPages = () => {
+  const { currentPage } = useNavigation();
+  return PAGE_COMPONENTS[currentPage] || PAGE_COMPONENTS[PAGE_IDS.SELECT_WALLET];
+};
+
+// 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: grid;\n  grid-template-columns: repeat(var(--grid-columns, 3), 1fr);\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) {
+  const r = getBorderRadiusScale(brandConfig.borderRadius);
+  const fontFamily = brandConfig.font === DEFAULT_FONT ? brandConfig.font : `${brandConfig.font}, ${DEFAULT_FONT}`;
+  return `
+    .aurum-sdk {
+      --aurum-primary-color: ${brandConfig.primaryColor};
+      --aurum-border-radius-xs: ${r.xs}px;
+      --aurum-border-radius-sm: ${r.sm}px;
+      --aurum-border-radius-md: ${r.md}px;
+      --aurum-border-radius-lg: ${r.lg}px;
+      --aurum-border-radius-xl: ${r.xl}px;
+      --aurum-border-radius: ${r.md}px;
+      --aurum-modal-z-index: ${brandConfig.modalZIndex};
+      --aurum-font-family: ${fontFamily};
+    }
+  `;
+}
+function generateCompleteStyles(brandConfig) {
+  return `${bundledStyles}
+${generateBrandCssVariables(brandConfig)}`;
+}
+
+export {
+  useAurumStore,
+  waitForStoreHydration,
+  useWidgetContext,
+  WidgetProvider,
+  DEFAULT_THEME,
+  getDefaultThemeConfig,
+  POWERED_BY_SPACER_REM,
+  PageTransitionContainer,
+  PoweredBy,
+  Modal,
+  Spacer,
+  ThemeContainer,
+  useNavigation,
+  sortWallets,
+  initSentry,
+  sentryLogger,
+  createConfigError,
+  isMobile,
+  ConnectUIProviders,
+  ConnectPages,
+  generateCompleteStyles
+};
+//# sourceMappingURL=chunk-U5BSED2R.mjs.map