@loafmarkets/ui 0.1.8 → 0.1.9

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import * as o from 'react';
-import o__default, { createElement } from 'react';
+import o__default, { useState, useEffect, createElement } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -2871,6 +2871,9 @@ function lt(t) {
 "production" !== process.env.NODE_ENV && "undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");
 var mt = "__sc-".concat(a, "__");
 "production" !== process.env.NODE_ENV && "test" !== process.env.NODE_ENV && "undefined" != typeof window && (window[mt] || (window[mt] = 0), 1 === window[mt] && console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page for more info."), window[mt] += 1);
+
+// src/assets/Loaf-logo-Banner.png
+var Loaf_logo_Banner_default = "./Loaf-logo-Banner-DYV62HAW.png";
 var pulse = lt`
   0%, 100% {
     opacity: 0.45;
@@ -3053,7 +3056,7 @@ var LoafLiquidityBadge = o.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsxs(LogoText, { children: [
-            /* @__PURE__ */ jsx(LoafLogoImage, { src: "/Loaf-logo-Banner.png", alt: "Loaf" }),
+            /* @__PURE__ */ jsx(LoafLogoImage, { src: Loaf_logo_Banner_default, alt: "Loaf" }),
             /* @__PURE__ */ jsx(LiquidityText, { children: children ?? "Liquidity" })
           ] }),
           /* @__PURE__ */ jsxs(IconWrapper, { children: [
@@ -4339,6 +4342,225 @@ function TradeConfirmationModal({
     ] })
   ] }) });
 }
+var pulse2 = lt`
+  0%, 100% {
+    opacity: 0.45;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.08);
+  }
+`;
+var shimmer2 = lt`
+  0% {
+    background-position: -100% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+`;
+var LogoContainer2 = at.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.35rem 0.6rem;
+  background: linear-gradient(
+    135deg,
+    rgba(240, 185, 11, 0.05) 0%,
+    rgba(240, 185, 11, 0.1) 50%,
+    rgba(240, 185, 11, 0.05) 100%
+  );
+  border: 1px solid rgba(240, 185, 11, 0.3);
+  border-radius: 5px;
+  position: relative;
+  overflow: visible;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  line-height: 1.4;
+
+  ${(props) => props.$isGlowing && `
+    border-color: rgba(240, 185, 11, 1);
+    box-shadow: 0 0 25px rgba(240, 185, 11, 0.8),
+                0 0 40px rgba(240, 185, 11, 0.5),
+                inset 0 0 20px rgba(240, 185, 11, 0.3);
+    background: linear-gradient(
+      135deg,
+      rgba(240, 185, 11, 0.2) 0%,
+      rgba(240, 185, 11, 0.3) 50%,
+      rgba(240, 185, 11, 0.2) 100%
+    );
+    animation: quickPulse 0.35s ease-out;
+
+    @keyframes quickPulse {
+      0% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.05);
+      }
+      100% {
+        transform: scale(1);
+      }
+    }
+  `}
+
+  @media (max-width: 768px) {
+    padding: 0.3rem 0.4rem 0.3rem 0.25rem;
+    gap: 0.25rem;
+    border-radius: 4px;
+    transform: none !important;
+    transition: none;
+
+    &:active {
+      transform: none !important;
+    }
+  }
+
+  @media (max-width: 480px) {
+    padding: 0.2rem 0.3rem 0.2rem 0.2rem;
+    gap: 0.2rem;
+    transform: none !important;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      border-color: rgba(240, 185, 11, 0.6);
+      background: linear-gradient(
+        135deg,
+        rgba(240, 185, 11, 0.1) 0%,
+        rgba(240, 185, 11, 0.15) 50%,
+        rgba(240, 185, 11, 0.1) 100%
+      );
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(240, 185, 11, 0.2);
+    }
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(240, 185, 11, 0.1),
+      transparent
+    );
+    background-size: 200% 100%;
+    animation: ${shimmer2} 3s infinite;
+    pointer-events: none;
+  }
+`;
+var IconWrapper2 = at.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 16px;
+  height: 16px;
+
+  @media (max-width: 768px) {
+    width: 16px;
+    height: 16px;
+  }
+
+  @media (max-width: 480px) {
+    width: 14px;
+    height: 14px;
+  }
+`;
+var IconCircle2 = at.div`
+  position: absolute;
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
+  border: 2px solid ${(props) => props.$color};
+  border-radius: 50%;
+  animation: ${pulse2} ${(props) => props.$duration}s infinite cubic-bezier(0.4, 0, 0.6, 1);
+  animation-delay: ${(props) => props.$delay}s;
+  transform-origin: center;
+  will-change: transform, opacity;
+`;
+var IconCore2 = at.div`
+  width: 5px;
+  height: 5px;
+  background: linear-gradient(135deg, #0ecb81 0%, #2ecc71 100%);
+  border-radius: 50%;
+  box-shadow: 0 0 6px rgba(14, 203, 129, 0.6);
+  position: relative;
+  z-index: 1;
+`;
+var LogoText2 = at.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  position: relative;
+  z-index: 1;
+  vertical-align: middle;
+`;
+var LoafLogoImage2 = at.img`
+  height: 20px;
+  position: relative;
+  z-index: 1;
+
+  @media (max-width: 768px) {
+    height: 20px;
+  }
+
+  @media (max-width: 480px) {
+    height: 18px;
+  }
+`;
+var LiquidityText2 = at.span`
+  font-size: 0.65rem;
+  font-weight: 400;
+  background: linear-gradient(135deg, #f0b90b 0%, #ffd700 50%, #f0b90b 100%);
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  letter-spacing: 0.3px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  opacity: 0.75;
+  align-self: center;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  position: relative;
+  top: 1px;
+
+  @media (max-width: 768px) {
+    font-size: 0.6rem;
+    letter-spacing: 0.2px;
+  }
+
+  @media (max-width: 480px) {
+    font-size: 0.55rem;
+    letter-spacing: 0.1px;
+  }
+`;
+var LoafLiquidityLogo = ({
+  onClick,
+  isGlowing,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs(LogoContainer2, { onClick, $isGlowing: isGlowing, className, children: [
+    /* @__PURE__ */ jsxs(LogoText2, { children: [
+      /* @__PURE__ */ jsx(LoafLogoImage2, { src: Loaf_logo_Banner_default, alt: "Loaf" }),
+      /* @__PURE__ */ jsx(LiquidityText2, { children: "Liquidity" })
+    ] }),
+    /* @__PURE__ */ jsxs(IconWrapper2, { children: [
+      /* @__PURE__ */ jsx(IconCore2, {}),
+      /* @__PURE__ */ jsx(IconCircle2, { $size: 10, $color: "rgba(14, 203, 129, 0.5)", $duration: 4, $delay: 0 }),
+      /* @__PURE__ */ jsx(IconCircle2, { $size: 13, $color: "rgba(14, 203, 129, 0.35)", $duration: 5.2, $delay: 0.7 }),
+      /* @__PURE__ */ jsx(IconCircle2, { $size: 16, $color: "rgba(14, 203, 129, 0.25)", $duration: 6.3, $delay: 1.3 })
+    ] })
+  ] });
+};
+LoafLiquidityLogo.displayName = "LoafLiquidityLogo";
 var DEFAULT_TABS = [
   { id: "portfolio", label: "Portfolio" },
   { id: "openOrders", label: "Open Orders" },
@@ -5507,76 +5729,842 @@ var PriceBlock = at.span`
   border-left: 1px solid rgba(255, 255, 255, 0.25);
   min-height: 1.5rem;
 `;
-var PropertySubheader = o.forwardRef(
-  ({ className, tabs, activeTabId, onTabChange, actions, ...props }, ref) => {
-    const tabsContainerRef = o.useRef(null);
-    o.useEffect(() => {
-      const container = tabsContainerRef.current;
-      if (!container) return;
-      const isMobile = window.innerWidth <= 768;
-      if (!isMobile) return;
-      const forceScrollbar = () => {
-        if (container.scrollWidth > container.clientWidth) {
-          container.scrollTop = 1;
-          container.scrollTop = 0;
-          container.scrollLeft = 1;
-          container.scrollLeft = 0;
-        }
-      };
-      setTimeout(forceScrollbar, 100);
-      window.addEventListener("resize", forceScrollbar);
-      return () => window.removeEventListener("resize", forceScrollbar);
-    }, [tabs]);
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: cn(
-          "w-full font-normal",
-          "flex flex-col-reverse gap-3",
-          "md:flex-row md:items-center md:justify-between",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
+var DEFAULT_TRADE_URL = "https://loafx-frontend-web.vercel.app/";
+var DEFAULT_TRADE_PATH = "/trade";
+var DEFAULT_HOME_PATH = "/";
+var DEFAULT_ABOUT_PATH = "/about";
+var DEFAULT_OFFERINGS_PATH = "/ipo/musgrave";
+var DEFAULT_PROPERTY_MAP_PATH = "/map";
+var DEFAULT_LOAF_LIQUIDITY_PATH = "/loaf-liquidity";
+var DEFAULT_AUTH_LOGIN_URL = "http://localhost:5174/";
+var DEFAULT_AUTH_RETURN_PARAM = "returnTo";
+var Header = ({
+  currentUser,
+  isAuthenticated = false,
+  locationPath = DEFAULT_HOME_PATH,
+  activeTab,
+  onNavigate,
+  onLogout,
+  onSignInClick,
+  loginPopupComponent: LoginPopupComponent,
+  tradeUrl = DEFAULT_TRADE_URL,
+  tradePath = DEFAULT_TRADE_PATH,
+  homePath = DEFAULT_HOME_PATH,
+  aboutPath = DEFAULT_ABOUT_PATH,
+  offeringsPath = DEFAULT_OFFERINGS_PATH,
+  propertyMapPath = DEFAULT_PROPERTY_MAP_PATH,
+  loafLiquidityPath = DEFAULT_LOAF_LIQUIDITY_PATH,
+  authLoginUrl = DEFAULT_AUTH_LOGIN_URL,
+  authReturnParam = DEFAULT_AUTH_RETURN_PARAM,
+  getAuthReturnUrl,
+  logoHref,
+  onLogoClick,
+  onLoafLiquidityClick,
+  onTradeClick,
+  onProfileNavigate,
+  onOrdersNavigate,
+  onWalletNavigate
+}) => {
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isMoreMenuOpen, setIsMoreMenuOpen] = useState(false);
+  const [showLoginPopup, setShowLoginPopup] = useState(false);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      if (!target) return;
+      const clickedInsideUserMenu = target.closest(".user-menu") || target.closest(".user-menu-dropdown");
+      if (isUserMenuOpen && !clickedInsideUserMenu) {
+        console.log("[Header] Closing user menu due to outside click");
+        setIsUserMenuOpen(false);
+      }
+      if (isMobileMenuOpen && !target.closest(".mobile-menu") && !target.closest(".mobile-menu-button")) {
+        setIsMobileMenuOpen(false);
+      }
+      if (isMoreMenuOpen && !target.closest(".more-menu")) {
+        setIsMoreMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isUserMenuOpen, isMobileMenuOpen, isMoreMenuOpen]);
+  const closeMenus = () => {
+    setIsMobileMenuOpen(false);
+    setIsUserMenuOpen(false);
+    setIsMoreMenuOpen(false);
+  };
+  const handleUserMenuToggle = () => {
+    const nextState = !isUserMenuOpen;
+    console.log("[Header] User dropdown toggle clicked", { nextState });
+    setIsUserMenuOpen(nextState);
+  };
+  const performNavigation = (path) => {
+    if (onNavigate) {
+      onNavigate(path);
+    } else if (typeof window !== "undefined") {
+      window.location.href = path;
+    }
+  };
+  const handleNavigation = (path) => {
+    closeMenus();
+    performNavigation(path);
+  };
+  const handleLogoNavigation = (event) => {
+    event.preventDefault();
+    closeMenus();
+    if (onLogoClick) {
+      onLogoClick();
+      return;
+    }
+    performNavigation(logoHref ?? homePath);
+  };
+  const handleLoafLiquidityNavigation = () => {
+    closeMenus();
+    if (onLoafLiquidityClick) {
+      onLoafLiquidityClick();
+      return;
+    }
+    performNavigation(loafLiquidityPath);
+  };
+  const handleTradeNavigation = () => {
+    closeMenus();
+    if (onTradeClick) {
+      onTradeClick();
+      return;
+    }
+    if (typeof window !== "undefined") {
+      window.location.href = tradeUrl;
+    }
+  };
+  const handleLogoutClick = async (event) => {
+    event?.preventDefault();
+    closeMenus();
+    console.log("[Header] Logout option selected, invoking onLogout handler");
+    await onLogout?.();
+  };
+  const userPrimaryLabel = currentUser?.displayName?.trim() || "User";
+  const resolveAuthReturnUrl = () => {
+    if (getAuthReturnUrl) {
+      return getAuthReturnUrl();
+    }
+    if (typeof window !== "undefined") {
+      return window.location.href;
+    }
+    return null;
+  };
+  const redirectToAuthLogin = () => {
+    if (!authLoginUrl) {
+      return false;
+    }
+    const nextUrl = resolveAuthReturnUrl();
+    let finalUrl = authLoginUrl;
+    if (authReturnParam && nextUrl) {
+      try {
+        const parsed = new URL(authLoginUrl, typeof window !== "undefined" ? window.location.origin : void 0);
+        parsed.searchParams.set(authReturnParam, nextUrl);
+        finalUrl = parsed.toString();
+      } catch {
+        const delimiter2 = authLoginUrl.includes("?") ? "&" : "?";
+        finalUrl = `${authLoginUrl}${delimiter2}${encodeURIComponent(authReturnParam)}=${encodeURIComponent(nextUrl)}`;
+      }
+    }
+    if (typeof window !== "undefined") {
+      window.location.href = finalUrl;
+      return true;
+    }
+    return false;
+  };
+  const handleSignIn = () => {
+    if (onSignInClick) {
+      onSignInClick();
+      return;
+    }
+    if (redirectToAuthLogin()) {
+      return;
+    }
+    if (LoginPopupComponent) {
+      setShowLoginPopup(true);
+    }
+  };
+  const inferredActiveTab = (() => {
+    if (locationPath === tradePath) return "trade";
+    if (locationPath === homePath) return "home";
+    if (locationPath === aboutPath) return "about";
+    if (locationPath.startsWith(offeringsPath)) return "offerings";
+    if (locationPath === propertyMapPath) return "propertyMap";
+    return null;
+  })();
+  const resolvedActiveTab = activeTab ?? inferredActiveTab;
+  const tradeActive = resolvedActiveTab === "trade";
+  const homeActive = resolvedActiveTab === "home";
+  const offeringsActive = resolvedActiveTab === "offerings";
+  const propertyMapActive = resolvedActiveTab === "propertyMap";
+  const aboutActive = resolvedActiveTab === "about";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Overlay, { $isOpen: isMobileMenuOpen, onClick: () => setIsMobileMenuOpen(false) }),
+    /* @__PURE__ */ jsxs(HeaderContainer, { children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxs(Logo, { children: [
+          /* @__PURE__ */ jsx(LogoLink, { href: logoHref ?? homePath, onClick: handleLogoNavigation, children: /* @__PURE__ */ jsx("img", { src: Loaf_logo_Banner_default, alt: "LOAF Logo" }) }),
+          /* @__PURE__ */ jsx("h1", { children: "LOAF" })
+        ] }),
+        /* @__PURE__ */ jsxs(Nav, { $isOpen: isMobileMenuOpen, className: "mobile-menu", children: [
+          !isMobileMenuOpen && /* @__PURE__ */ jsxs(
             "div",
             {
-              ref: tabsContainerRef,
-              className: cn(
-                "flex items-center border-b border-white/10",
-                "overflow-x-auto md:overflow-visible",
-                "[-webkit-overflow-scrolling:touch]",
-                "[scroll-behavior:smooth]",
-                "[touch-action:pan-x]",
-                "md:border-b-0"
-              ),
-              style: { WebkitTapHighlightColor: "transparent" },
-              children: /* @__PURE__ */ jsx("div", { className: "flex min-w-max", children: tabs.map((tab) => {
-                const active = tab.id === activeTabId;
-                return /* @__PURE__ */ jsxs(
-                  "button",
+              style: { display: "flex", flexDirection: "row", alignItems: "center", height: "56px" },
+              className: "desktop-nav",
+              children: [
+                /* @__PURE__ */ jsx(
+                  NavLink,
                   {
-                    type: "button",
-                    onClick: () => onTabChange?.(tab.id),
-                    className: cn(
-                      "relative whitespace-nowrap",
-                      "px-6 py-4",
-                      "font-normal",
-                      "transition-colors",
-                      "max-[768px]:px-[1.2rem] max-[768px]:py-[0.8rem]",
-                      "max-[480px]:px-4 max-[480px]:py-[0.7rem] max-[480px]:text-[0.9rem]",
-                      active ? "font-semibold text-[var(--color-accent,#e6c87e)]" : "text-white/60 hover:text-white"
-                    ),
-                    style: {
-                      borderBottom: active ? "2px solid var(--color-accent, #e6c87e)" : "2px solid transparent",
-                      minWidth: "80px",
-                      touchAction: "manipulation"
+                    href: homePath,
+                    className: homeActive ? "active" : "",
+                    onClick: (event) => {
+                      event.preventDefault();
+                      handleNavigation(homePath);
                     },
-                    children: [
-                      tab.label,
-                      tab.hasNotification ? /* @__PURE__ */ jsx(
-                        "span",
+                    children: "Home"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  NavLink,
+                  {
+                    href: aboutPath,
+                    className: aboutActive ? "active" : "",
+                    onClick: (event) => {
+                      event.preventDefault();
+                      handleNavigation(aboutPath);
+                    },
+                    children: "About"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  NavLink,
+                  {
+                    href: tradeUrl,
+                    className: tradeActive ? "active" : "",
+                    onClick: (event) => {
+                      event.preventDefault();
+                      handleTradeNavigation();
+                    },
+                    children: "Trade"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  NavLink,
+                  {
+                    href: offeringsPath,
+                    className: offeringsActive ? "active" : "",
+                    onClick: (event) => {
+                      event.preventDefault();
+                      handleNavigation(offeringsPath);
+                    },
+                    children: "Offerings"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  NavLink,
+                  {
+                    href: propertyMapPath,
+                    className: propertyMapActive ? "active" : "",
+                    onClick: (event) => {
+                      event.preventDefault();
+                      handleNavigation(propertyMapPath);
+                    },
+                    children: "Property Map"
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { style: { marginLeft: "auto", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: { cursor: "pointer", marginLeft: "12px" },
+                    onClick: handleLoafLiquidityNavigation,
+                    role: "button",
+                    tabIndex: 0,
+                    onKeyDown: (event) => {
+                      if (event.key === "Enter" || event.key === " ") {
+                        event.preventDefault();
+                        handleLoafLiquidityNavigation();
+                      }
+                    },
+                    children: /* @__PURE__ */ jsx(LoafLiquidityLogo, {})
+                  }
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "mobile-menu-content", children: [
+            /* @__PURE__ */ jsx(MobileMenuHeader, { children: /* @__PURE__ */ jsx(MobileMenuClose, { onClick: () => setIsMobileMenuOpen(false), "aria-label": "Close menu", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }) }),
+            /* @__PURE__ */ jsxs(SearchBar, { children: [
+              /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zM5 9.5C5 7.01 7.01 5 9.5 5S14 7.01 14 9.5 11.99 14 9.5 14 5 11.99 5 9.5z" }) }),
+              /* @__PURE__ */ jsx("input", { type: "text", placeholder: "Search..." })
+            ] }),
+            /* @__PURE__ */ jsx(MobileNavItem, { onClick: () => handleNavigation(homePath), children: "Home" }),
+            /* @__PURE__ */ jsx(
+              MobileNavItem,
+              {
+                onClick: () => {
+                  handleTradeNavigation();
+                },
+                children: "Trade"
+              }
+            ),
+            /* @__PURE__ */ jsx(MobileNavItem, { onClick: () => handleNavigation(offeringsPath), children: "Offerings" }),
+            /* @__PURE__ */ jsx(MobileNavItem, { onClick: () => handleNavigation(propertyMapPath), children: "Property Map" }),
+            /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid #2b3139", margin: "8px 0" } }),
+            /* @__PURE__ */ jsx(
+              MobileNavItem,
+              {
+                onClick: handleLoafLiquidityNavigation,
+                style: { display: "flex", justifyContent: "center", padding: "16px 24px" },
+                children: /* @__PURE__ */ jsx(LoafLiquidityLogo, {})
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid #2b3139", margin: "8px 0" } }),
+            isAuthenticated && /* @__PURE__ */ jsx(MobileNavItem, { onClick: handleLogoutClick, style: { color: "#f6465d" }, children: "Logout" })
+          ] })
+        ] })
+      ] }),
+      isMobileMenuOpen && /* @__PURE__ */ jsx(
+        MobileOnlyButton,
+        {
+          onClick: () => setIsMobileMenuOpen(false),
+          $isOpen: true,
+          style: { position: "fixed", right: "1rem", top: "4rem" },
+          "aria-label": "Close menu",
+          children: "\u2715"
+        }
+      ),
+      isAuthenticated ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxs(UserMenu, { children: [
+          /* @__PURE__ */ jsxs(
+            UserButton,
+            {
+              onClick: handleUserMenuToggle,
+              isOpen: isUserMenuOpen,
+              className: "user-menu",
+              children: [
+                /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: "0.95rem" }, children: userPrimaryLabel }) }),
+                /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M7 10l5 5 5-5H7z" }) })
+              ]
+            }
+          ),
+          isUserMenuOpen && /* @__PURE__ */ jsxs(DropdownMenu, { className: "user-menu-dropdown", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  padding: "12px 16px",
+                  borderBottom: "1px solid rgba(255,255,255,0.08)",
+                  textAlign: "left"
+                },
+                children: /* @__PURE__ */ jsx("p", { style: { margin: 0, fontWeight: 600 }, children: userPrimaryLabel })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: (event) => {
+                  console.log("[Header] Logout menu item clicked");
+                  void handleLogoutClick(event);
+                },
+                children: /* @__PURE__ */ jsx(MenuItem, { className: "logout", children: "Logout" })
+              }
+            )
+          ] })
+        ] }),
+        !isMobileMenuOpen && /* @__PURE__ */ jsx(
+          MobileOnlyButton,
+          {
+            onClick: () => setIsMobileMenuOpen(true),
+            $isOpen: false,
+            className: "mobile-menu-button",
+            "aria-label": "Open menu",
+            children: "\u2630"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx(Button2, { className: "signup", onClick: handleSignIn, children: "Sign in / Connect" }),
+        !isMobileMenuOpen && /* @__PURE__ */ jsx(
+          MobileOnlyButton,
+          {
+            onClick: () => setIsMobileMenuOpen(true),
+            isOpen: false,
+            className: "mobile-menu-button",
+            "aria-label": "Open menu",
+            children: "\u2630"
+          }
+        )
+      ] })
+    ] }),
+    LoginPopupComponent && showLoginPopup && /* @__PURE__ */ jsx(LoginPopupComponent, { onClose: () => setShowLoginPopup(false) })
+  ] });
+};
+Header.displayName = "Header";
+var Overlay = at.div`
+  display: ${(props) => props.$isOpen ? "block" : "none"};
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(3px);
+  z-index: 999;
+`;
+var MobileOnlyButton = at.button.attrs({ type: "button" })`
+  display: none;
+  background-color: ${(props) => props.$isOpen ? "rgba(240, 185, 11, 0.2)" : "#f0b90b"};
+  color: ${(props) => props.$isOpen ? "#ffffff" : "#0b0e11"};
+  font-size: 24px;
+  font-weight: bold;
+  width: 44px;
+  height: 44px;
+  justify-content: center;
+  align-items: center;
+  margin-left: 0.75rem;
+  z-index: 1100;
+  border-radius: 8px;
+  border: ${(props) => props.$isOpen ? "1px solid #f0b90b" : "none"};
+  line-height: 1;
+  padding: 0;
+  cursor: pointer;
+  box-shadow: ${(props) => props.$isOpen ? "0 2px 8px rgba(0, 0, 0, 0.3)" : "none"};
+
+  &:hover {
+    background-color: ${(props) => props.$isOpen ? "rgba(240, 185, 11, 0.3)" : "#e0aa0b"};
+  }
+
+  &:active {
+    background-color: ${(props) => props.$isOpen ? "rgba(240, 185, 11, 0.4)" : "#d19f0a"};
+  }
+
+  @media (max-width: 1300px) {
+    display: flex;
+  }
+`;
+var HeaderContainer = at.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 2rem;
+  background-color: #0d1117;
+  border-bottom: 1px solid #232a32;
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 56px;
+  box-sizing: border-box;
+
+  @media (max-width: 768px) {
+    padding: 0 1rem;
+  }
+`;
+var Logo = at.div`
+  display: flex;
+  align-items: center;
+  margin-right: 24px;
+  height: 56px;
+
+  img {
+    height: 28px;
+    display: block;
+  }
+
+  h1 {
+    display: none;
+  }
+
+  @media (max-width: 768px) {
+    img {
+      height: 30px;
+    }
+  }
+`;
+var LogoLink = at.a`
+  display: inline-flex;
+  align-items: center;
+`;
+var Nav = at.nav`
+  display: flex;
+  flex-direction: column;
+
+  .desktop-nav {
+    display: flex;
+  }
+
+  .mobile-menu-content {
+    display: none;
+  }
+
+  .mobile-loaf-logo {
+    display: none;
+  }
+
+  @media (max-width: 1300px) {
+    .mobile-loaf-logo {
+      display: flex !important;
+      align-items: center;
+      height: 56px;
+    }
+  }
+
+  @media (max-width: 1300px) {
+    position: fixed;
+    top: 56px;
+    right: ${(props) => props.$isOpen ? "0" : "-100%"} ;
+    width: 280px;
+    max-width: 280px;
+    height: calc(100vh - 56px);
+    background: linear-gradient(180deg, #0f1419 0%, #0a0e13 100%);
+    z-index: 1000;
+    transition: right 0.3s ease;
+    box-shadow: ${(props) => props.$isOpen ? "-10px 0 30px rgba(0, 0, 0, 0.5)" : "none"};
+    overflow-y: auto;
+    border-left: 1px solid rgba(255, 255, 255, 0.05);
+
+    .desktop-nav {
+      display: none;
+    }
+
+    .mobile-menu-content {
+      display: flex;
+      flex-direction: column;
+      padding-top: 0;
+      border-top: 1px solid rgba(255, 255, 255, 0.1);
+    }
+  }
+`;
+var NavLink = at.a`
+  margin: 0 12px;
+  color: #eaecef;
+  font-weight: 500;
+  font-size: 14px;
+  padding: 0 4px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  transition: color 0.2s ease;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
+  letter-spacing: 0.2px;
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  &:hover,
+  &.active {
+    color: #f0b90b;
+  }
+
+  &.active::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background-color: #f0b90b;
+  }
+
+  @media (max-width: 768px) {
+    margin: 0;
+    padding: 16px 24px;
+    width: 100%;
+    height: auto;
+    text-align: left;
+    font-size: 16px;
+    color: #eaecef;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      background-color: #2b3139;
+    }
+
+    &.active::after {
+      display: none;
+    }
+
+    svg {
+      margin-right: 12px;
+      width: 20px;
+      height: 20px;
+    }
+  }
+`;
+var Button2 = at.button.attrs({ type: "button" })`
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  font-weight: 500;
+  font-size: 13px;
+  margin-left: 0.75rem;
+  transition: all 0.2s ease;
+
+  &.login {
+    background-color: transparent;
+    border: 1px solid #f0b90b;
+    color: #f0b90b;
+
+    &:hover {
+      background-color: rgba(240, 185, 11, 0.1);
+    }
+
+    @media (max-width: 768px) {
+      display: none;
+    }
+  }
+
+  &.signup {
+    background-color: #f0b90b;
+    color: #0b0e11;
+    border: none;
+
+    &:hover {
+      background-color: #f8d12f;
+    }
+  }
+
+  @media (max-width: 768px) {
+    padding: 0.65rem 1.25rem;
+    font-size: 0.9rem;
+    margin-left: 0.5rem;
+  }
+`;
+var UserMenu = at.div`
+  position: relative;
+  margin-left: 0.75rem;
+  height: 56px;
+  display: flex;
+  align-items: center;
+
+  @media (max-width: 768px) {
+    margin-left: auto;
+  }
+`;
+var UserButton = at.button.attrs({ type: "button" })`
+  display: flex;
+  align-items: center;
+  background: transparent;
+  color: #eaecef;
+  font-size: 13px;
+  padding: 0 6px;
+  height: 32px;
+  border-radius: 4px;
+
+  &:hover {
+    background-color: #2b3139;
+  }
+
+  span {
+    margin-right: 0.5rem;
+  }
+
+  svg {
+    width: 12px;
+    height: 12px;
+    transition: transform 0.2s ease;
+    transform: ${(props) => props.isOpen ? "rotate(180deg)" : "rotate(0)"};
+  }
+`;
+var DropdownMenu = at.div`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 0.25rem;
+  background-color: #0d1117;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  min-width: 180px;
+  overflow: hidden;
+  z-index: 10;
+  padding: 0.5rem 0;
+
+  button {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    text-align: left;
+    cursor: pointer;
+    color: inherit;
+    display: block;
+  }
+`;
+var MenuItem = at.div`
+  padding: 0.75rem 1.25rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: #eaecef;
+  font-size: 14px;
+  font-weight: 400;
+  display: block;
+  width: 100%;
+  border-bottom: none;
+
+  &:hover {
+    color: #f0b90b;
+    background-color: rgba(240, 185, 11, 0.08);
+  }
+
+  &.logout {
+    color: #f6465d;
+  }
+`;
+var MobileMenuHeader = at.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 16px 20px;
+  margin-top: 60px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  background: rgba(0, 0, 0, 0.2);
+`;
+var MobileMenuClose = at.button.attrs({ type: "button" })`
+  background: none;
+  border: none;
+  color: #eaecef;
+  cursor: pointer;
+  padding: 8px;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+var SearchBar = at.div`
+  display: flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 6px;
+  padding: 10px 14px;
+  margin: 16px 20px 12px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  transition: all 0.2s ease;
+
+  &:focus-within {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(240, 185, 11, 0.3);
+  }
+
+  svg {
+    color: rgba(240, 185, 11, 0.5);
+    margin-right: 10px;
+    width: 16px;
+    height: 16px;
+  }
+
+  input {
+    background: none;
+    border: none;
+    color: #ffffff;
+    font-size: 14px;
+    width: 100%;
+    outline: none;
+    height: 20px;
+
+    &::placeholder {
+      color: rgba(255, 255, 255, 0.4);
+    }
+  }
+`;
+var MobileNavItem = at.div`
+  display: flex;
+  align-items: center;
+  padding: 14px 20px;
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 15px;
+  cursor: pointer;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+  font-weight: 400;
+  transition: all 0.2s ease;
+  letter-spacing: 0.2px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.05);
+    color: #ffffff;
+    padding-left: 24px;
+  }
+`;
+var PropertySubheader = o.forwardRef(
+  ({ className, tabs, activeTabId, onTabChange, actions, ...props }, ref) => {
+    const tabsContainerRef = o.useRef(null);
+    o.useEffect(() => {
+      const container = tabsContainerRef.current;
+      if (!container) return;
+      const isMobile = window.innerWidth <= 768;
+      if (!isMobile) return;
+      const forceScrollbar = () => {
+        if (container.scrollWidth > container.clientWidth) {
+          container.scrollTop = 1;
+          container.scrollTop = 0;
+          container.scrollLeft = 1;
+          container.scrollLeft = 0;
+        }
+      };
+      setTimeout(forceScrollbar, 100);
+      window.addEventListener("resize", forceScrollbar);
+      return () => window.removeEventListener("resize", forceScrollbar);
+    }, [tabs]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full font-normal",
+          "flex flex-col-reverse gap-3",
+          "md:flex-row md:items-center md:justify-between",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: tabsContainerRef,
+              className: cn(
+                "flex items-center border-b border-white/10",
+                "overflow-x-auto md:overflow-visible",
+                "[-webkit-overflow-scrolling:touch]",
+                "[scroll-behavior:smooth]",
+                "[touch-action:pan-x]",
+                "md:border-b-0"
+              ),
+              style: { WebkitTapHighlightColor: "transparent" },
+              children: /* @__PURE__ */ jsx("div", { className: "flex min-w-max", children: tabs.map((tab) => {
+                const active = tab.id === activeTabId;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onTabChange?.(tab.id),
+                    className: cn(
+                      "relative whitespace-nowrap",
+                      "px-6 py-4",
+                      "font-normal",
+                      "transition-colors",
+                      "max-[768px]:px-[1.2rem] max-[768px]:py-[0.8rem]",
+                      "max-[480px]:px-4 max-[480px]:py-[0.7rem] max-[480px]:text-[0.9rem]",
+                      active ? "font-semibold text-[var(--color-accent,#e6c87e)]" : "text-white/60 hover:text-white"
+                    ),
+                    style: {
+                      borderBottom: active ? "2px solid var(--color-accent, #e6c87e)" : "2px solid transparent",
+                      minWidth: "80px",
+                      touchAction: "manipulation"
+                    },
+                    children: [
+                      tab.label,
+                      tab.hasNotification ? /* @__PURE__ */ jsx(
+                        "span",
                         {
                           className: "absolute right-[10px] top-[10px] h-2 w-2 rounded-full animate-pulse",
                           style: {
@@ -5632,6 +6620,737 @@ var PropertySubheader = o.forwardRef(
   }
 );
 PropertySubheader.displayName = "PropertySubheader";
+var DEFAULT_LOGO_SRC = "/loaf-logo.png";
+var DEFAULT_LOGO_ALT = "Loaf";
+var OTP_INPUT_LENGTH = 6;
+var LoginPopup = ({
+  onClose,
+  onOpenEarlyAccess,
+  isAuthenticated,
+  currentUser,
+  onSendEmailCode,
+  onVerifyEmailCode,
+  onDemoLogin,
+  logoSrc = DEFAULT_LOGO_SRC,
+  logoAlt = DEFAULT_LOGO_ALT,
+  autoCloseOnAuth = true
+}) => {
+  const [view, setView] = useState("main");
+  const [email, setEmail] = useState("");
+  const [handle, setHandle] = useState("");
+  const [otp, setOtp] = useState(Array(OTP_INPUT_LENGTH).fill(""));
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [isSignUp, setIsSignUp] = useState(false);
+  useEffect(() => {
+    if (!autoCloseOnAuth) {
+      return;
+    }
+    if (isAuthenticated || currentUser) {
+      onClose();
+    }
+  }, [autoCloseOnAuth, currentUser, isAuthenticated, onClose]);
+  const handleWalletLogin = () => {
+    onClose();
+    if (onOpenEarlyAccess) {
+      onOpenEarlyAccess();
+    }
+  };
+  const handleEmailClick = (signUp = false) => {
+    setIsSignUp(signUp);
+    setView("email");
+    setError("");
+  };
+  const handleSendCode = async (event) => {
+    event?.preventDefault();
+    if (!email || !email.includes("@")) {
+      setError("Please enter a valid email address");
+      return;
+    }
+    if (isSignUp && !handle.trim()) {
+      setError("Please claim a handle to continue");
+      return;
+    }
+    setLoading(true);
+    setError("");
+    const normalizedHandle = isSignUp ? handle.trim() : void 0;
+    try {
+      const demoResult = await onDemoLogin?.(email, normalizedHandle ?? null);
+      if (demoResult && demoResult.success) {
+        setLoading(false);
+        return;
+      }
+    } catch (err) {
+      console.warn("Demo login failed, attempting email OTP", err);
+    }
+    if (!onSendEmailCode) {
+      setError("Email authentication is not configured for this popup.");
+      setLoading(false);
+      return;
+    }
+    setView("otp");
+    setOtp(Array(OTP_INPUT_LENGTH).fill(""));
+    try {
+      await onSendEmailCode({ email, isSignUp, handle: normalizedHandle ?? null });
+    } catch (err) {
+      setView("email");
+      setError(err instanceof Error ? err.message : "Failed to send verification code");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleOTPChange = (index, value) => {
+    const sanitizedValue = value.replace(/\D/g, "");
+    if (sanitizedValue.length > 1) {
+      const digits = sanitizedValue.slice(0, OTP_INPUT_LENGTH).split("");
+      const newOtp2 = [...otp];
+      digits.forEach((digit, i) => {
+        if (index + i < OTP_INPUT_LENGTH) {
+          newOtp2[index + i] = digit;
+        }
+      });
+      setOtp(newOtp2);
+      const nextIndex = Math.min(index + digits.length, OTP_INPUT_LENGTH - 1);
+      document.getElementById(`otp-${nextIndex}`)?.focus();
+      return;
+    }
+    const newOtp = [...otp];
+    newOtp[index] = sanitizedValue;
+    setOtp(newOtp);
+    if (sanitizedValue && index < OTP_INPUT_LENGTH - 1) {
+      document.getElementById(`otp-${index + 1}`)?.focus();
+    }
+  };
+  const handleOTPKeyDown = (index, event) => {
+    if (event.key === "Backspace" && !otp[index] && index > 0) {
+      document.getElementById(`otp-${index - 1}`)?.focus();
+    }
+  };
+  const handleVerifyCode = async (event) => {
+    event.preventDefault();
+    const code = otp.join("");
+    if (code.length !== OTP_INPUT_LENGTH) {
+      setError("Please enter the 6-digit code");
+      return;
+    }
+    if (!onVerifyEmailCode) {
+      setError("Verification handler missing. Cannot verify code.");
+      return;
+    }
+    setLoading(true);
+    setError("");
+    try {
+      await onVerifyEmailCode({ code, email });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Invalid verification code");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleBack = () => {
+    setView("main");
+    setEmail("");
+    setHandle("");
+    setOtp(Array(OTP_INPUT_LENGTH).fill(""));
+    setError("");
+  };
+  if (view === "main") {
+    return /* @__PURE__ */ jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+      /* @__PURE__ */ jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
+      /* @__PURE__ */ jsxs(Title, { children: [
+        /* @__PURE__ */ jsx(LogoContainer3, { children: /* @__PURE__ */ jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
+        "Welcome to Loaf"
+      ] }),
+      /* @__PURE__ */ jsxs(ButtonsContainer, { children: [
+        /* @__PURE__ */ jsxs(LoginButton, { onClick: () => handleEmailClick(false), children: [
+          /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" }) }),
+          "Sign in with Email"
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { textAlign: "center", color: "var(--color-text-secondary, #848e9c)", fontSize: "0.875rem" }, children: "or" }),
+        /* @__PURE__ */ jsxs(LoginButton, { onClick: handleWalletLogin, children: [
+          /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }) }),
+          "Sign in with Wallet"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginTop: "0.5rem", marginBottom: "1rem" }, children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          onClick: () => handleEmailClick(true),
+          style: {
+            color: "var(--color-text-secondary, #848e9c)",
+            fontSize: "0.8rem",
+            cursor: "pointer",
+            textDecoration: "underline"
+          },
+          children: "Sign Up"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsxs(AnnotationContainer, { children: [
+        /* @__PURE__ */ jsxs(Annotation, { children: [
+          /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }) }),
+          /* @__PURE__ */ jsxs(AnnotationText, { children: [
+            /* @__PURE__ */ jsx(AnnotationLabel, { children: "\u2190 Digital Asset users" }),
+            "Connect your Web3 wallet to access your assets"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Annotation, { children: [
+          /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" }) }),
+          /* @__PURE__ */ jsxs(AnnotationText, { children: [
+            /* @__PURE__ */ jsx(AnnotationLabel, { children: "\u2190 Traditional Finance users" }),
+            "Sign in with email, no web3 experience needed"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Annotation, { children: [
+          /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" }) }),
+          /* @__PURE__ */ jsxs(AnnotationText, { children: [
+            /* @__PURE__ */ jsx(AnnotationLabel, { children: "\u2190 Self-custodied" }),
+            "We never have ownership of your assets. All units are self-custodied"
+          ] })
+        ] })
+      ] })
+    ] }) });
+  }
+  if (view === "email") {
+    return /* @__PURE__ */ jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+      /* @__PURE__ */ jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
+      /* @__PURE__ */ jsxs(BackButton, { onClick: handleBack, children: [
+        /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" }) }),
+        "Back"
+      ] }),
+      /* @__PURE__ */ jsxs(Title, { children: [
+        /* @__PURE__ */ jsx(LogoContainer3, { children: /* @__PURE__ */ jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
+        isSignUp ? "Sign up with Email" : "Sign in with Email"
+      ] }),
+      /* @__PURE__ */ jsx("form", { onSubmit: handleSendCode, children: /* @__PURE__ */ jsxs(EmailFormContainer, { children: [
+        /* @__PURE__ */ jsx(
+          EmailInput,
+          {
+            type: "email",
+            placeholder: "Enter your email address",
+            value: email,
+            onChange: (event) => setEmail(event.target.value),
+            autoFocus: true
+          }
+        ),
+        isSignUp && /* @__PURE__ */ jsx(
+          EmailInput,
+          {
+            type: "text",
+            placeholder: "Claim your handle (e.g. Landlord)",
+            value: handle,
+            onChange: (event) => setHandle(event.target.value),
+            style: { marginTop: "0.5rem" }
+          }
+        ),
+        /* @__PURE__ */ jsx(SubmitButton, { type: "submit", disabled: loading || !email || isSignUp && !handle, children: loading ? "Sending..." : "Continue" }),
+        error && /* @__PURE__ */ jsx(StatusMessage, { $error: true, children: error })
+      ] }) }),
+      /* @__PURE__ */ jsx(InfoText, { children: "We'll send you a verification code to sign in securely." }),
+      isSignUp && /* @__PURE__ */ jsx(MiniLiveFeed, {})
+    ] }) });
+  }
+  if (view === "otp") {
+    return /* @__PURE__ */ jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+      /* @__PURE__ */ jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
+      /* @__PURE__ */ jsxs(BackButton, { onClick: () => setView("email"), children: [
+        /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" }) }),
+        "Back"
+      ] }),
+      /* @__PURE__ */ jsxs(Title, { children: [
+        /* @__PURE__ */ jsx(LogoContainer3, { children: /* @__PURE__ */ jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
+        "Enter Verification Code"
+      ] }),
+      /* @__PURE__ */ jsxs(InfoText, { style: { marginBottom: "1.5rem" }, children: [
+        "We sent a code to ",
+        /* @__PURE__ */ jsx("strong", { style: { color: "#eaecef" }, children: email })
+      ] }),
+      /* @__PURE__ */ jsx("form", { onSubmit: handleVerifyCode, children: /* @__PURE__ */ jsxs(EmailFormContainer, { children: [
+        /* @__PURE__ */ jsx(OTPContainer, { children: otp.map((digit, index) => /* @__PURE__ */ jsx(
+          OTPInput,
+          {
+            id: `otp-${index}`,
+            type: "text",
+            inputMode: "numeric",
+            maxLength: 1,
+            value: digit,
+            onChange: (event) => handleOTPChange(index, event.target.value),
+            onKeyDown: (event) => handleOTPKeyDown(index, event),
+            autoFocus: index === 0
+          },
+          index
+        )) }),
+        /* @__PURE__ */ jsx(SubmitButton, { type: "submit", disabled: loading || otp.join("").length !== OTP_INPUT_LENGTH, children: loading ? "Verifying..." : "Verify" }),
+        error && /* @__PURE__ */ jsx(StatusMessage, { $error: true, children: error })
+      ] }) }),
+      /* @__PURE__ */ jsxs(InfoText, { children: [
+        "Didn't receive a code?",
+        " ",
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (event) => {
+              event.preventDefault();
+              void handleSendCode(event);
+            },
+            style: {
+              background: "none",
+              border: "none",
+              color: "#f0b90b",
+              cursor: "pointer",
+              textDecoration: "underline"
+            },
+            children: "Resend"
+          }
+        )
+      ] })
+    ] }) });
+  }
+  return null;
+};
+var Overlay2 = at.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(4px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+  animation: fadeIn 0.2s ease-in-out;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+var PopupContainer = at.div`
+  background-color: var(--color-background, #0a0a0a);
+  border: 1px solid rgba(230, 198, 86, 0.3);
+  border-radius: var(--border-radius, 12px);
+  padding: 2.5rem;
+  max-width: 440px;
+  width: 90%;
+  position: relative;
+  animation: slideUp 0.3s ease-out;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+
+  @keyframes slideUp {
+    from {
+      transform: translateY(20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @media (max-width: 768px) {
+    padding: 2rem;
+    max-width: 90%;
+  }
+`;
+var CloseButton = at.button`
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: none;
+  border: none;
+  color: var(--color-text-secondary, #848e9c);
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: var(--color-accent, #e6c656);
+  }
+`;
+var Title = at.h2`
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: var(--color-text, #eaecef);
+  margin-bottom: 2rem;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+`;
+var LogoContainer3 = at.div`
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0.5rem;
+`;
+var LogoImage = at.img`
+  height: 60px;
+`;
+var ButtonsContainer = at.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+`;
+var LoginButton = at.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem;
+  background-color: var(--color-background-light, #1a1a1a);
+  border: 1px solid rgba(230, 198, 86, 0.2);
+  border-radius: var(--border-radius, 8px);
+  color: var(--color-text, #eaecef);
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: rgba(230, 198, 86, 0.1);
+    border-color: var(--color-accent, #e6c656);
+  }
+
+  svg {
+    width: 20px;
+    height: 20px;
+    color: var(--color-accent, #e6c656);
+  }
+`;
+var Divider = at.div`
+  display: flex;
+  align-items: center;
+  margin: 1.5rem 0;
+
+  &::before,
+  &::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background-color: rgba(230, 198, 86, 0.2);
+  }
+`;
+var InfoText = at.p`
+  color: var(--color-text-secondary, #848e9c);
+  font-size: 0.875rem;
+  text-align: center;
+  line-height: 1.5;
+`;
+var AnnotationContainer = at.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid rgba(230, 198, 86, 0.2);
+`;
+var Annotation = at.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  color: var(--color-text-secondary, #848e9c);
+  font-size: 0.8rem;
+
+  svg {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    margin-top: 2px;
+    color: var(--color-accent, #e6c656);
+  }
+`;
+var AnnotationText = at.span`
+  flex: 1;
+  line-height: 1.4;
+`;
+var AnnotationLabel = at.span`
+  color: var(--color-text, #eaecef);
+  font-weight: 500;
+  margin-right: 0.25rem;
+`;
+var EmailFormContainer = at.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+`;
+var EmailInput = at.input`
+  width: 100%;
+  padding: 1rem 1.25rem;
+  background-color: var(--color-background-light, #1a1a1a);
+  border: 1px solid rgba(230, 198, 86, 0.2);
+  border-radius: var(--border-radius, 8px);
+  color: var(--color-text, #eaecef);
+  font-size: 1rem;
+  transition: all 0.2s ease;
+
+  &:focus {
+    outline: none;
+    border-color: var(--color-accent, #e6c656);
+  }
+
+  &::placeholder {
+    color: var(--color-text-secondary, #848e9c);
+  }
+`;
+var OTPContainer = at.div`
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+`;
+var OTPInput = at.input`
+  width: 48px;
+  height: 56px;
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: 600;
+  background-color: var(--color-background-light, #1a1a1a);
+  border: 1px solid rgba(230, 198, 86, 0.2);
+  border-radius: var(--border-radius, 8px);
+  color: var(--color-accent, #e6c656);
+  transition: all 0.2s ease;
+
+  &:focus {
+    outline: none;
+    border-color: var(--color-accent, #e6c656);
+    box-shadow: 0 0 0 2px rgba(230, 198, 86, 0.2);
+  }
+`;
+var SubmitButton = at.button`
+  width: 100%;
+  padding: 1rem;
+  background-color: var(--color-accent, #e6c656);
+  border: none;
+  border-radius: var(--border-radius, 8px);
+  color: var(--color-background, #0a0a0a);
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    background-color: var(--color-accent-hover, #d4a50a);
+    transform: translateY(-1px);
+  }
+
+  &:disabled {
+    background-color: var(--color-background-light, #1a1a1a);
+    color: var(--color-text-secondary, #848e9c);
+    cursor: not-allowed;
+  }
+`;
+var BackButton = at.button`
+  background: none;
+  border: none;
+  color: var(--color-text-secondary, #848e9c);
+  font-size: 0.875rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+
+  &:hover {
+    color: var(--color-accent, #e6c656);
+  }
+`;
+var StatusMessage = at.p`
+  color: ${(props) => props.$error ? "#f6465d" : "#0ecb81"};
+  font-size: 0.875rem;
+  text-align: center;
+  margin-top: 0.5rem;
+`;
+var MiniLiveFeed = () => {
+  const [purchases, setPurchases] = useState([]);
+  useEffect(() => {
+    const handles = [
+      "Landlord",
+      "PropertyKing",
+      "RealEstateGuru",
+      "InvestorPro",
+      "WealthBuilder",
+      "AssetHunter",
+      "PortfolioMax",
+      "CapitalGains",
+      "DividendKing",
+      "YieldSeeker",
+      "BrickNMortar",
+      "EquityBoss",
+      "CashFlowKing",
+      "PropMogul",
+      "RentCollector",
+      "LandBaron",
+      "EstateBuilder",
+      "ValueInvestor",
+      "GrowthSeeker",
+      "PassiveIncome",
+      "WealthyOwl",
+      "SmartMoney",
+      "AlphaInvestor",
+      "DiamondHands",
+      "GoldenGoose",
+      "EliteHolder",
+      "TopTierInvestor",
+      "PlatinumPro",
+      "AussieInvestor",
+      "HarbourHero",
+      "James W.",
+      "Sarah M.",
+      "Michael T.",
+      "Emma L.",
+      "David K.",
+      "Sophie R.",
+      "Chris B.",
+      "Jessica H.",
+      "Andrew P.",
+      "Rachel S.",
+      "Daniel C.",
+      "Olivia N."
+    ];
+    const generatePurchase = () => {
+      const tokenPrice = 250;
+      const tokenCount = Math.floor(Math.random() * 150) + 10;
+      const amount = tokenPrice * tokenCount;
+      const randomHandle = handles[Math.floor(Math.random() * handles.length)];
+      return {
+        id: `p-${Date.now()}-${Math.random()}`,
+        name: randomHandle,
+        amount,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      };
+    };
+    const initial = Array.from({ length: 5 }, generatePurchase);
+    setPurchases(initial);
+    const interval = setInterval(() => {
+      setPurchases((prev2) => [generatePurchase(), ...prev2.slice(0, 5)]);
+    }, 2e3 + Math.random() * 2e3);
+    return () => clearInterval(interval);
+  }, []);
+  const formatCurrency3 = (amount) => `$${amount.toLocaleString()}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        marginTop: "1rem",
+        maxHeight: "180px",
+        overflow: "hidden",
+        borderRadius: "8px",
+        background: "rgba(0, 0, 0, 0.3)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              fontSize: "0.7rem",
+              color: "var(--color-text-secondary, #848e9c)",
+              padding: "0.5rem 0.75rem",
+              borderBottom: "1px solid rgba(255, 255, 255, 0.05)",
+              display: "flex",
+              alignItems: "center",
+              gap: "0.4rem"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    width: "6px",
+                    height: "6px",
+                    borderRadius: "50%",
+                    background: "#0ecb81",
+                    animation: "pulse 1.5s infinite"
+                  }
+                }
+              ),
+              "Handles will Appear:"
+            ]
+          }
+        ),
+        purchases.map((purchase, index) => {
+          const maxAmount = 4e4;
+          const barPercent = Math.min(80, Math.max(15, purchase.amount / maxAmount * 100));
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                padding: "0.4rem 0.75rem",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                borderBottom: "1px solid rgba(255, 255, 255, 0.03)",
+                position: "relative",
+                animation: index === 0 ? "slideIn 0.3s ease-out" : "none"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      right: 0,
+                      bottom: 0,
+                      width: `${barPercent}%`,
+                      background: "linear-gradient(90deg, transparent 0%, rgba(14, 203, 129, 0.12) 100%)",
+                      pointerEvents: "none"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      left: 0,
+                      top: 0,
+                      bottom: 0,
+                      width: "2px",
+                      background: index === 0 ? "rgba(14, 203, 129, 0.5)" : "transparent"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { style: { position: "relative", zIndex: 1 }, children: [
+                  /* @__PURE__ */ jsx("div", { style: { fontSize: "0.8rem", fontWeight: 500, color: "#fff" }, children: purchase.name }),
+                  /* @__PURE__ */ jsx("div", { style: { fontSize: "0.65rem", color: "var(--color-text-secondary, #848e9c)" }, children: "less than a minute ago" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", position: "relative", zIndex: 1 }, children: [
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: "0.75rem", color: "var(--color-text-secondary, #848e9c)" }, children: "bought" }),
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: "0.8rem", fontWeight: 600, color: "#fff" }, children: formatCurrency3(purchase.amount) })
+                ] })
+              ]
+            },
+            purchase.id
+          );
+        }),
+        /* @__PURE__ */ jsx("style", { children: `
+          @keyframes slideIn {
+            from { opacity: 0; transform: translateY(-10px); }
+            to { opacity: 1; transform: translateY(0); }
+          }
+          @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+          }
+        ` })
+      ]
+    }
+  );
+};
+LoginPopup.displayName = "LoginPopup";
 var PropertyCompareBar = o.forwardRef(
   ({
     className,
@@ -6020,6 +7739,6 @@ var PriceChange = at.span`
   color: ${(props) => props.$isPositive == null ? "var(--color-text-secondary, rgba(255, 255, 255, 0.6))" : props.$isPositive ? "var(--color-positive, #0ecb81)" : "var(--color-negative, #f6465d)"};
 `;
 
-export { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, MobileTradeNav, Orderbook, PortfolioSummary, PriceChart, PropertyCompareBar, PropertyHeroHeader, PropertyNewsUpdates, PropertySubheader, PropertyTour, TradeConfirmationModal, TradingSlider, YourOrders, badgeVariants, buttonVariants };
+export { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Header, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, LoafLiquidityLogo, LoginPopup, MobileTradeNav, Orderbook, PortfolioSummary, PriceChart, PropertyCompareBar, PropertyHeroHeader, PropertyNewsUpdates, PropertySubheader, PropertyTour, TradeConfirmationModal, TradingSlider, YourOrders, badgeVariants, buttonVariants };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map