@sudobility/components 2.0.12 → 2.0.14

package/dist/index.esm.js

@@ -1,11 +1,11 @@
 import { clsx as Hn } from "clsx";
 import { twMerge as Un } from "tailwind-merge";
 import * as x from "react";
-import P, { lazy as ve, Suspense as He, useEffect as V, useState as R, useCallback as re, useRef as U, useLayoutEffect as Nr, Component as Er, memo as Ue, useMemo as $t } from "react";
-import { jsx as i, Fragment as q, jsxs as h } from "react/jsx-runtime";
+import P, { lazy as ve, Suspense as He, useEffect as V, useState as R, useCallback as re, useRef as q, useLayoutEffect as Nr, Component as Er, memo as Ue, useMemo as $t } from "react";
+import { jsx as i, Fragment as H, jsxs as h } from "react/jsx-runtime";
 import { onCLS as qn, onINP as Gn, onFCP as Kn, onLCP as Yn, onTTFB as Qn } from "web-vitals";
 import { XCircleIcon as Ar, ExclamationTriangleIcon as Pr, CheckCircleIcon as Tr, InformationCircleIcon as Je, ArrowPathIcon as Xn, ChevronRightIcon as Lt, Cog6ToothIcon as Qt, CurrencyDollarIcon as Zn, AdjustmentsHorizontalIcon as Jn, LinkIcon as ea, FunnelIcon as ta, ChatBubbleLeftRightIcon as ra, ShieldCheckIcon as na, ArrowRightIcon as $r, ChevronUpIcon as aa, ChevronDownIcon as oa, ExclamationCircleIcon as ia, XMarkIcon as sa, CheckIcon as Lr, ClipboardDocumentIcon as la, ClipboardIcon as ca, EnvelopeIcon as da, LanguageIcon as ua } from "@heroicons/react/24/outline";
-import { ArrowLeftIcon as M0, ArrowRightIcon as O0, Bars3Icon as D0, BellIcon as z0, BellSlashIcon as W0, ChartBarIcon as B0, CheckCircleIcon as j0, CheckIcon as F0, ChevronDownIcon as _0, ChevronLeftIcon as V0, ChevronRightIcon as H0, ChevronUpIcon as U0, ClockIcon as q0, CodeBracketIcon as G0, Cog6ToothIcon as K0, CreditCardIcon as Y0, DocumentTextIcon as Q0, EnvelopeIcon as X0, ExclamationTriangleIcon as Z0, EyeSlashIcon as J0, GlobeAltIcon as eg, HomeIcon as tg, InboxIcon as rg, InformationCircleIcon as ng, KeyIcon as ag, MegaphoneIcon as og, MinusIcon as ig, PaperAirplaneIcon as sg, PaperClipIcon as lg, PlusIcon as cg, RocketLaunchIcon as dg, ShieldCheckIcon as ug, SparklesIcon as mg, StarIcon as gg, TrashIcon as pg, UserGroupIcon as fg, XMarkIcon as hg } from "@heroicons/react/24/outline";
+import { ArrowLeftIcon as O0, ArrowRightIcon as D0, Bars3Icon as z0, BellIcon as W0, BellSlashIcon as B0, ChartBarIcon as j0, CheckCircleIcon as F0, CheckIcon as _0, ChevronDownIcon as V0, ChevronLeftIcon as H0, ChevronRightIcon as U0, ChevronUpIcon as q0, ClockIcon as G0, CodeBracketIcon as K0, Cog6ToothIcon as Y0, CreditCardIcon as Q0, DocumentTextIcon as X0, EnvelopeIcon as Z0, ExclamationTriangleIcon as J0, EyeSlashIcon as eg, GlobeAltIcon as tg, HomeIcon as rg, InboxIcon as ng, InformationCircleIcon as ag, KeyIcon as og, MegaphoneIcon as ig, MinusIcon as sg, PaperAirplaneIcon as lg, PaperClipIcon as cg, PlusIcon as dg, RocketLaunchIcon as ug, ShieldCheckIcon as mg, SparklesIcon as gg, StarIcon as pg, TrashIcon as fg, UserGroupIcon as hg, XMarkIcon as yg } from "@heroicons/react/24/outline";
 import { Slot as ma, createSlot as ga, createSlottable as pa } from "@radix-ui/react-slot";
 import { cva as F } from "class-variance-authority";
 import { Root as Ir } from "@radix-ui/react-label";
@@ -18,7 +18,7 @@ import xa, { createPortal as va } from "react-dom";
 import { Link as st } from "react-router-dom";
 import { TwitterIcon as wa, TwitterShareButton as ka, FacebookIcon as Ca, FacebookShareButton as Sa, LinkedinIcon as Na, LinkedinShareButton as Ea, RedditIcon as Aa, RedditShareButton as Pa, TelegramIcon as Ta, TelegramShareButton as $a, WhatsappIcon as La, WhatsappShareButton as Ia } from "react-share";
 import { useTranslation as Br } from "react-i18next";
-import { CheckCircleIcon as bg, CheckIcon as xg, ExclamationTriangleIcon as vg, StarIcon as wg } from "@heroicons/react/24/solid";
+import { CheckCircleIcon as xg, CheckIcon as vg, ExclamationTriangleIcon as wg, StarIcon as kg } from "@heroicons/react/24/solid";
 import { Helmet as Ra } from "react-helmet-async";
 function v(...e) {
   return Un(Hn(e));
@@ -674,7 +674,7 @@ function fd(e, t = {}) {
         d(!0);
       }, a);
       return () => clearTimeout(u);
-    }, []), c ? /* @__PURE__ */ i(q, { children: r }) : null;
+    }, []), c ? /* @__PURE__ */ i(H, { children: r }) : null;
   };
   return P.forwardRef((c, d) => /* @__PURE__ */ i(He, { fallback: /* @__PURE__ */ i(l, {}), children: /* @__PURE__ */ i(s, { ...c, ref: d }) }));
 }
@@ -1361,7 +1361,7 @@ const Ya = (e) => {
   onError: r,
   className: n = ""
 }) => {
-  const a = U(null), o = U(null);
+  const a = q(null), o = q(null);
   return V(() => {
     if (!e)
       return;
@@ -2076,7 +2076,7 @@ const Ya = (e) => {
   className: o = "",
   threshold: s = 0.1
 }) => {
-  const [l, c] = R(!1), [d, u] = R(!1), m = U(null);
+  const [l, c] = R(!1), [d, u] = R(!1), m = q(null);
   V(() => {
     if (!Xt() || typeof IntersectionObserver > "u") {
       c(!0), n && u(!0);
@@ -2722,7 +2722,7 @@ const so = {
     emerald: "bg-emerald-100 dark:bg-emerald-900/20",
     pink: "bg-pink-100 dark:bg-pink-900/20",
     gray: "bg-gray-100 dark:bg-gray-900/20"
-  }, w = g[o], k = typeof e == "string", C = () => /* @__PURE__ */ h(q, { children: [
+  }, w = g[o], k = typeof e == "string", C = () => /* @__PURE__ */ h(H, { children: [
     k ? (
       // Emoji or text icon
       /* @__PURE__ */ i("div", { className: "text-4xl mb-4", children: e })
@@ -3328,7 +3328,7 @@ const iu = ({
   maxPullDistance: l = 120,
   className: c = ""
 }) => {
-  const [d, u] = R(0), [m, p] = R(!1), [g, f] = R(!1), b = U(0), w = U(null);
+  const [d, u] = R(0), [m, p] = R(!1), [g, f] = R(!1), b = q(0), w = q(null);
   V(() => {
     const N = w.current;
     if (!N) return;
@@ -3339,8 +3339,8 @@ const iu = ({
       if (!g) return;
       const z = D.touches[0].clientY - b.current;
       if (z > 0 && N.scrollTop <= 0) {
-        const H = Math.min(z / l, 1), W = Math.min(
-          z * (1 - H * 0.5),
+        const U = Math.min(z / l, 1), W = Math.min(
+          z * (1 - U * 0.5),
           l
         );
         u(W), z > 10 && D.preventDefault();
@@ -3629,7 +3629,7 @@ const du = ({
   parentSectionId: n,
   onSubsectionSelect: a
 }) => {
-  const o = U(null), [s, l] = R(void 0);
+  const o = q(null), [s, l] = R(void 0);
   return V(() => {
     if (o.current) {
       const c = o.current.scrollHeight;
@@ -3800,7 +3800,7 @@ const du = ({
   onAccountSelect: n,
   onAccountSettings: a
 }) => {
-  const o = U(null), [s, l] = R(void 0);
+  const o = q(null), [s, l] = R(void 0);
   return V(() => {
     if (o.current) {
       const c = o.current.scrollHeight;
@@ -5102,7 +5102,7 @@ const xi = (e) => ({
     }, g = zt(a), f = Dt(g), b = await s.getDimensions(d), w = g === "y", k = w ? "top" : "left", C = w ? "bottom" : "right", S = w ? "clientHeight" : "clientWidth", E = o.reference[f] + o.reference[g] - p[g] - o.floating[f], N = p[g] - o.reference[g], $ = await (s.getOffsetParent == null ? void 0 : s.getOffsetParent(d));
     let A = $ ? $[S] : 0;
     (!A || !await (s.isElement == null ? void 0 : s.isElement($))) && (A = l.floating[S] || o.floating[f]);
-    const O = E / 2 - N / 2, D = A / 2 - b[f] / 2 - 1, M = pe(m[k], D), z = pe(m[C], D), H = M, W = A - b[f] - z, B = A / 2 - b[f] / 2 + O, G = Nt(H, B, W), j = !c.arrow && Te(a) != null && B !== G && o.reference[f] / 2 - (B < H ? M : z) - b[f] / 2 < 0, K = j ? B < H ? B - H : B - W : 0;
+    const O = E / 2 - N / 2, D = A / 2 - b[f] / 2 - 1, M = pe(m[k], D), z = pe(m[C], D), U = M, W = A - b[f] - z, B = A / 2 - b[f] / 2 + O, G = Nt(U, B, W), j = !c.arrow && Te(a) != null && B !== G && o.reference[f] / 2 - (B < U ? M : z) - b[f] / 2 < 0, K = j ? B < U ? B - U : B - W : 0;
     return {
       [g]: p[g] + K,
       data: {
@@ -5151,7 +5151,7 @@ const xi = (e) => ({
         placement: a,
         overflows: D
       }], !D.every((B) => B <= 0)) {
-        var z, H;
+        var z, U;
         const B = (((z = o.flip) == null ? void 0 : z.index) || 0) + 1, G = A[B];
         if (G && (!(m === "alignment" ? C !== te(G) : !1) || // We leave the current main axis only if every placement on that axis
         // overflows the main axis.
@@ -5165,7 +5165,7 @@ const xi = (e) => ({
               placement: G
             }
           };
-        let j = (H = M.filter((K) => K.overflows[0] <= 0).sort((K, L) => K.overflows[1] - L.overflows[1])[0]) == null ? void 0 : H.placement;
+        let j = (U = M.filter((K) => K.overflows[0] <= 0).sort((K, L) => K.overflows[1] - L.overflows[1])[0]) == null ? void 0 : U.placement;
         if (!j)
           switch (g) {
             case "bestFit": {
@@ -5421,8 +5421,8 @@ const Ci = function(e) {
       const C = b - u.top - u.bottom, S = f - u.left - u.right, E = pe(b - u[w], C), N = pe(f - u[k], S), $ = !t.middlewareData.shift;
       let A = E, O = N;
       if ((r = t.middlewareData.shift) != null && r.enabled.x && (O = S), (n = t.middlewareData.shift) != null && n.enabled.y && (A = C), $ && !p) {
-        const M = Q(u.left, 0), z = Q(u.right, 0), H = Q(u.top, 0), W = Q(u.bottom, 0);
-        g ? O = f - 2 * (M !== 0 || z !== 0 ? M + z : Q(u.left, u.right)) : A = b - 2 * (H !== 0 || W !== 0 ? H + W : Q(u.top, u.bottom));
+        const M = Q(u.left, 0), z = Q(u.right, 0), U = Q(u.top, 0), W = Q(u.bottom, 0);
+        g ? O = f - 2 * (M !== 0 || z !== 0 ? M + z : Q(u.left, u.right)) : A = b - 2 * (U !== 0 || W !== 0 ? U + W : Q(u.top, u.bottom));
       }
       await c({
         ...t,
@@ -6010,7 +6010,7 @@ function ls(e) {
     L !== $.current && ($.current = L, b(L));
   }, []), S = x.useCallback((L) => {
     L !== A.current && (A.current = L, k(L));
-  }, []), E = o || f, N = s || w, $ = x.useRef(null), A = x.useRef(null), O = x.useRef(u), D = c != null, M = yt(c), z = yt(a), H = yt(d), W = x.useCallback(() => {
+  }, []), E = o || f, N = s || w, $ = x.useRef(null), A = x.useRef(null), O = x.useRef(u), D = c != null, M = yt(c), z = yt(a), U = yt(d), W = x.useCallback(() => {
     if (!$.current || !A.current)
       return;
     const L = {
@@ -6025,13 +6025,13 @@ function ls(e) {
         // but still mounted (such as when transitioning out). To ensure
         // `isPositioned` will be `false` initially on the next open, avoid
         // setting it to `true` when `open === false` (must be specified).
-        isPositioned: H.current !== !1
+        isPositioned: U.current !== !1
       };
       B.current && !nt(O.current, ee) && (O.current = ee, Wr.flushSync(() => {
         m(ee);
       }));
     });
-  }, [p, t, r, z, H]);
+  }, [p, t, r, z, U]);
   Ze(() => {
     d === !1 && O.current.isPositioned && (O.current.isPositioned = !1, m((L) => ({
       ...L,
@@ -6199,11 +6199,11 @@ var _t = "PopperContent", [ws, ks] = dn(_t), hn = x.forwardRef(
       updatePositionStrategy: g = "optimized",
       onPlaced: f,
       ...b
-    } = e, w = mn(_t, r), [k, C] = x.useState(null), S = we(t, (Le) => C(Le)), [E, N] = x.useState(null), $ = xs(E), A = $?.width ?? 0, O = $?.height ?? 0, D = n + (o !== "center" ? "-" + o : ""), M = typeof u == "number" ? u : { top: 0, right: 0, bottom: 0, left: 0, ...u }, z = Array.isArray(d) ? d : [d], H = z.length > 0, W = {
+    } = e, w = mn(_t, r), [k, C] = x.useState(null), S = we(t, (Le) => C(Le)), [E, N] = x.useState(null), $ = xs(E), A = $?.width ?? 0, O = $?.height ?? 0, D = n + (o !== "center" ? "-" + o : ""), M = typeof u == "number" ? u : { top: 0, right: 0, bottom: 0, left: 0, ...u }, z = Array.isArray(d) ? d : [d], U = z.length > 0, W = {
       padding: M,
       boundary: z.filter(Ss),
       // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
-      altBoundary: H
+      altBoundary: U
     }, { refs: B, floatingStyles: G, placement: j, isPositioned: K, middlewareData: L } = ls({
       // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
       strategy: "fixed",
@@ -6843,72 +6843,85 @@ const ll = {
   size: n = "sm",
   className: a,
   version: o,
-  onStatusChange: s
+  onStatusChange: s,
+  isNetworkOnline: l = !0
 }) => {
-  const [l, c] = R({
+  const [c, d] = R({
     status: "operational",
     version: o || "1.0.0",
     message: "All systems operational"
-  }), [d, u] = R(!1);
+  }), [u, m] = R(!1);
   V(() => {
-    const f = async () => {
+    const w = async () => {
       if (t) {
-        u(!0);
+        m(!0);
         try {
-          const b = await fetch(t);
-          if (b.ok) {
-            const w = await b.json();
-            let k;
-            w.status?.indicator ? k = {
+          const k = await fetch(t);
+          if (k.ok) {
+            const C = await k.json();
+            let S;
+            C.status?.indicator ? S = {
               status: {
                 none: "operational",
                 minor: "degraded",
                 major: "major-outage",
                 critical: "major-outage"
-              }[w.status.indicator] || "operational",
+              }[C.status.indicator] || "operational",
               version: o,
-              message: w.status.description
-            } : k = w, c(k), s?.(k);
+              message: C.status.description
+            } : S = C, d(S), s?.(S);
           }
         } catch {
         } finally {
-          u(!1);
+          m(!1);
         }
       }
     };
-    if (f(), r > 0) {
-      const b = setInterval(f, r);
-      return () => clearInterval(b);
+    if (w(), r > 0) {
+      const k = setInterval(w, r);
+      return () => clearInterval(k);
     }
   }, [t, r, s, o]);
-  const m = ll[l.status], p = (f) => {
-    f.preventDefault(), window.open(e, "_blank", "noopener,noreferrer");
-  }, g = /* @__PURE__ */ h("div", { className: "text-xs", children: [
-    l.version && /* @__PURE__ */ h("div", { className: "font-semibold mb-1", children: [
-      "Version ",
-      l.version
-    ] }),
-    /* @__PURE__ */ i("div", { children: l.message || m.label }),
-    l.incidents && l.incidents.length > 0 && /* @__PURE__ */ h("div", { className: "mt-2 text-[10px] opacity-90", children: [
-      /* @__PURE__ */ i("div", { className: "font-medium", children: "Current incidents:" }),
-      /* @__PURE__ */ i("ul", { className: "list-disc list-inside", children: l.incidents.map((f, b) => /* @__PURE__ */ i("li", { children: f }, b)) })
+  const p = l ? c.status : "major-outage", g = ll[p], f = (w) => {
+    if (w.preventDefault(), !l) {
+      window.alert(
+        "Network is not available. Please check your internet connection and try again later."
+      );
+      return;
+    }
+    window.open(e, "_blank", "noopener,noreferrer");
+  }, b = /* @__PURE__ */ i("div", { className: "text-xs", children: l ? (
+    // Normal system status
+    /* @__PURE__ */ h(H, { children: [
+      c.version && /* @__PURE__ */ h("div", { className: "font-semibold mb-1", children: [
+        "Version ",
+        c.version
+      ] }),
+      /* @__PURE__ */ i("div", { children: c.message || g.label }),
+      c.incidents && c.incidents.length > 0 && /* @__PURE__ */ h("div", { className: "mt-2 text-[10px] opacity-90", children: [
+        /* @__PURE__ */ i("div", { className: "font-medium", children: "Current incidents:" }),
+        /* @__PURE__ */ i("ul", { className: "list-disc list-inside", children: c.incidents.map((w, k) => /* @__PURE__ */ i("li", { children: w }, k)) })
+      ] })
     ] })
-  ] });
+  ) : (
+    // Network offline message
+    /* @__PURE__ */ i("div", { children: "Network unavailable" })
+  ) });
   return /* @__PURE__ */ i(rl, { delayDuration: 200, children: /* @__PURE__ */ h(nl, { children: [
     /* @__PURE__ */ i(al, { asChild: !0, children: /* @__PURE__ */ i(
       "button",
       {
-        onClick: p,
+        onClick: f,
         className: v(
           "rounded-full flex-shrink-0 transition-all duration-200 cursor-pointer",
           "ring-offset-2 focus:outline-none focus:ring-2 focus:ring-offset-2",
-          m.color,
-          m.hoverColor,
+          g.color,
+          g.hoverColor,
           cl[n],
-          d && "animate-pulse",
+          (u || !l) && "animate-pulse",
           a
         ),
-        "aria-label": `System status: ${m.label}`
+        "aria-label": `System status: ${g.label}`
       }
     ) }),
     /* @__PURE__ */ i(ol, { children: /* @__PURE__ */ h(
@@ -6917,7 +6930,7 @@ const ll = {
         className: "z-50 overflow-hidden rounded-md bg-gray-900 dark:bg-gray-800 px-3 py-2 text-white shadow-md animate-in fade-in-0 zoom-in-95",
         sideOffset: 5,
         children: [
-          g,
+          b,
           /* @__PURE__ */ i(sl, { className: "fill-gray-900 dark:fill-gray-800" })
         ]
       }
@@ -7347,7 +7360,7 @@ const Ru = (e, t) => x.useMemo(() => {
   "aria-describedby": p,
   closeAriaLabel: g = "Close modal"
 }) => {
-  const f = U(null), b = U(null);
+  const f = q(null), b = q(null);
   if (V(() => {
     if (!e || !c) return;
     const S = (E) => {
@@ -7365,7 +7378,7 @@ const Ru = (e, t) => x.useMemo(() => {
     return v(S, E);
   }, k = (S) => {
     l && S.target === S.currentTarget && t();
-  }, C = /* @__PURE__ */ h(q, { children: [
+  }, C = /* @__PURE__ */ h(H, { children: [
     /* @__PURE__ */ i(
       "div",
       {
@@ -7971,7 +7984,7 @@ const Ru = (e, t) => x.useMemo(() => {
           text: "text-2xl"
         };
     }
-  })(), u = /* @__PURE__ */ h(q, { children: [
+  })(), u = /* @__PURE__ */ h(H, { children: [
     /* @__PURE__ */ i("img", { src: a, alt: o, className: d.image }),
     r && /* @__PURE__ */ i(
       "div",
@@ -8090,7 +8103,7 @@ ${e.description}`
         )
       }
     ),
-    t && /* @__PURE__ */ h(q, { children: [
+    t && /* @__PURE__ */ h(H, { children: [
       /* @__PURE__ */ i(
         "div",
         {
@@ -8098,7 +8111,7 @@ ${e.description}`
           onClick: () => r(!1)
         }
       ),
-      /* @__PURE__ */ i("div", { className: "absolute right-0 top-10 z-[999999] w-32 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 py-1", children: o ? /* @__PURE__ */ i("div", { className: "flex items-center justify-center px-3 py-2", children: /* @__PURE__ */ i("div", { className: "w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }) }) : /* @__PURE__ */ h(q, { children: [
+      /* @__PURE__ */ i("div", { className: "absolute right-0 top-10 z-[999999] w-32 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 py-1", children: o ? /* @__PURE__ */ i("div", { className: "flex items-center justify-center px-3 py-2", children: /* @__PURE__ */ i("div", { className: "w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }) }) : /* @__PURE__ */ h(H, { children: [
         c.map((u, m) => {
           const p = u.component, g = u.icon;
           return /* @__PURE__ */ i(
@@ -8315,10 +8328,10 @@ ${e.description}`
             onClick: () => d(r, u),
             className: "flex items-center space-x-1 text-gray-300 hover:text-white transition-colors text-sm",
             "aria-label": m ? "Copied!" : "Copy code",
-            children: m ? /* @__PURE__ */ h(q, { children: [
+            children: m ? /* @__PURE__ */ h(H, { children: [
               /* @__PURE__ */ i(Lr, { className: "h-4 w-4" }),
               /* @__PURE__ */ i("span", { children: "Copied!" })
-            ] }) : /* @__PURE__ */ h(q, { children: [
+            ] }) : /* @__PURE__ */ h(H, { children: [
               /* @__PURE__ */ i(ca, { className: "h-4 w-4" }),
               /* @__PURE__ */ i("span", { children: "Copy" })
             ] })
@@ -8335,7 +8348,7 @@ ${e.description}`
   parentSectionId: n,
   onSubsectionSelect: a
 }) => {
-  const o = U(null), [s, l] = R(void 0);
+  const o = q(null), [s, l] = R(void 0);
   return Nr(() => {
     if (o.current) {
       const c = o.current.scrollHeight;
@@ -8346,15 +8359,17 @@ ${e.description}`
     {
       className: "overflow-hidden transition-all duration-300 ease-in-out",
       style: { height: s !== void 0 ? `${s}px` : "auto" },
-      children: /* @__PURE__ */ i("div", { ref: o, className: "ml-6 mt-2 space-y-1", children: e.map((c) => /* @__PURE__ */ i(
-        "button",
-        {
-          onClick: () => a?.(c.id, n),
-          className: `block w-full text-left px-3 py-2 rounded-md text-sm transition-all duration-200 hover:scale-[1.02] ${r === c.id ? "bg-blue-100 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 shadow-sm" : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200"}`,
-          children: c.title
-        },
-        c.id
-      )) })
+      children: /* @__PURE__ */ i("div", { ref: o, className: "ml-6 mt-2 space-y-1", children: e.map((c) => /* @__PURE__ */ h("div", { className: "relative", children: [
+        r === c.id && /* @__PURE__ */ i("div", { className: "absolute top-0 bottom-0 left-0 right-4 bg-blue-500/20 dark:bg-blue-400/20 rounded-lg pointer-events-none border-2 border-blue-500/30 dark:border-blue-400/30" }),
+        /* @__PURE__ */ i(
+          "button",
+          {
+            onClick: () => a?.(c.id, n),
+            className: `relative z-10 block w-full text-left px-3 py-2 rounded-md text-sm transition-all duration-200 hover:scale-[1.02] ${r === c.id ? "text-blue-700 dark:text-blue-300" : "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"}`,
+            children: c.title
+          }
+        )
+      ] }, c.id)) })
     }
   );
 }, Ku = ({
@@ -8374,12 +8389,13 @@ ${e.description}`
     s?.(e);
   }, g = n && n.length > 0;
   return /* @__PURE__ */ h("div", { className: c, children: [
-    /* @__PURE__ */ h("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ h("div", { className: "relative flex items-center", children: [
+      a && !o && /* @__PURE__ */ i("div", { className: "absolute top-1 bottom-1 left-3 right-4 bg-blue-500/20 dark:bg-blue-400/20 rounded-lg pointer-events-none border-2 border-blue-500/30 dark:border-blue-400/30" }),
       /* @__PURE__ */ i(
         "button",
         {
           onClick: p,
-          className: `flex-1 text-left px-3 py-4 text-base font-medium transition-all duration-200 hover:bg-gray-50 dark:hover:bg-gray-800 ${a && !o ? "bg-blue-50 dark:bg-blue-900/10 text-blue-700 dark:text-blue-300" : "text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100"}`,
+          className: `relative z-10 flex-1 text-left px-3 py-4 text-base font-medium transition-all duration-200 ${a && !o ? "text-blue-700 dark:text-blue-300" : "text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100"}`,
           children: t
         }
       ),
@@ -8818,7 +8834,7 @@ class tm extends Er {
     ] }) }) : t;
   }
 }
-const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), am = (e, t, r) => {
+const rm = ({ children: e }) => /* @__PURE__ */ i(H, { children: e }), nm = ({ children: e }) => /* @__PURE__ */ i(H, { children: e }), am = (e, t, r) => {
   const n = Ue(e, t);
   return r && (n.displayName = `Memo(${r})`), process.env.NODE_ENV === "development" ? (a) => ($t(() => {
     let s = 0;
@@ -8834,13 +8850,13 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
       }
       return o.current;
     }, [t, r]);
-    return /* @__PURE__ */ i(q, { children: e(s) });
+    return /* @__PURE__ */ i(H, { children: e(s) });
   }
 ), sm = Ue(
   ({ item: e, index: t, style: r, renderItem: n }) => /* @__PURE__ */ i("div", { style: r, children: n(e, t) }),
   (e, t) => e.index === t.index && e.item === t.item && e.style.height === t.style.height && e.style.top === t.style.top
 ), lm = Ue(
-  ({ condition: e, children: t, fallback: r = null }) => e ? /* @__PURE__ */ i(q, { children: t }) : /* @__PURE__ */ i(q, { children: r })
+  ({ condition: e, children: t, fallback: r = null }) => e ? /* @__PURE__ */ i(H, { children: t }) : /* @__PURE__ */ i(H, { children: r })
 ), cm = ({
   children: e,
   threshold: t = 0.1,
@@ -8869,7 +8885,7 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
   }), P.useEffect(() => {
     const a = performance.now() - n.current;
     a > t && r?.(a);
-  }), /* @__PURE__ */ i(q, { children: e });
+  }), /* @__PURE__ */ i(H, { children: e });
 }, um = ({
   children: e,
   batchSize: t = 5,
@@ -8883,7 +8899,7 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
       }, r);
       return () => clearTimeout(o);
     }
-  }, [n, e.length, t, r]), /* @__PURE__ */ i(q, { children: e.slice(0, n) });
+  }, [n, e.length, t, r]), /* @__PURE__ */ i(H, { children: e.slice(0, n) });
 }, mm = ({
   src: e,
   alt: t,
@@ -8894,7 +8910,7 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
   className: s = "",
   ...l
 }) => {
-  const [c, d] = R(!1), [u, m] = R(o), [p, g] = R(!1), f = U(null), b = U(null);
+  const [c, d] = R(!1), [u, m] = R(o), [p, g] = R(!1), f = q(null), b = q(null);
   V(() => {
     if (o) {
       m(!0);
@@ -9062,6 +9078,46 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
   /* @__PURE__ */ i("h1", { className: "text-3xl font-bold text-gray-900 dark:text-white", children: e }),
   t && /* @__PURE__ */ i("p", { className: "mt-2 text-gray-600 dark:text-gray-400", children: t })
 ] }), hm = ({
+  isSelected: e,
+  onClick: t,
+  icon: r,
+  label: n,
+  description: a,
+  className: o = ""
+}) => /* @__PURE__ */ h(
+  "div",
+  {
+    onClick: t,
+    className: `relative flex items-start p-4 cursor-pointer transition-all border-b border-gray-200 dark:border-gray-700 last:border-b-0 group ${o}`,
+    children: [
+      e && /* @__PURE__ */ i("div", { className: "absolute inset-1 bg-blue-500/10 dark:bg-blue-400/10 rounded-lg pointer-events-none" }),
+      /* @__PURE__ */ h("div", { className: "relative z-10 flex items-start w-full", children: [
+        r && /* @__PURE__ */ i(
+          r,
+          {
+            className: `h-5 w-5 mt-0.5 mr-3 flex-shrink-0 transition-colors ${e ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300"}`
+          }
+        ),
+        /* @__PURE__ */ h("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ i(
+            "div",
+            {
+              className: `font-medium transition-colors ${e ? "text-blue-600 dark:text-blue-400" : "text-gray-900 dark:text-gray-100 group-hover:text-gray-700 dark:group-hover:text-gray-300"}`,
+              children: n
+            }
+          ),
+          a && /* @__PURE__ */ i(
+            "div",
+            {
+              className: `text-xs mt-0.5 transition-colors ${e ? "text-blue-500 dark:text-blue-300" : "text-gray-500 dark:text-gray-400"}`,
+              children: a
+            }
+          )
+        ] })
+      ] })
+    ]
+  }
+), ym = ({
   masterTitle: e,
   masterSubtitle: t,
   backButtonText: r,
@@ -9082,7 +9138,7 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
   animationDuration: k = 300,
   animationRef: C
 }) => {
-  const S = `gap-${Math.round(f / 4)}` || "gap-8", E = (G) => G ? G.split("-")[0].trim() : "Back", N = r ? E(r) : e ? E(e) : "Back", [$, A] = R(!1), [O, D] = R("auto"), M = U(null), z = U(
+  const S = `gap-${Math.round(f / 4)}` || "gap-8", E = (G) => G ? G.split("-")[0].trim() : "Back", N = r ? E(r) : e ? E(e) : "Back", [$, A] = R(!1), [O, D] = R("auto"), M = q(null), z = q(
     null
   );
   V(() => (C && (C.current = {
@@ -9109,7 +9165,7 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
   }), () => {
     z.current && clearTimeout(z.current);
   }), [w, k, C]);
-  const H = w ? {
+  const U = w ? {
     height: O === "auto" ? "auto" : `${O}px`,
     transition: `height ${k}ms cubic-bezier(0.4, 0, 0.2, 1)`,
     width: "100%",
@@ -9117,7 +9173,7 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
   } : { width: "100%", maxWidth: "100%" }, W = w ? `${$ ? "opacity-0 transform translate-y-2" : "opacity-100 transform translate-y-0"}` : "", B = w ? {
     transition: `opacity ${k}ms ease-in-out, transform ${k}ms ease-in-out`
   } : {};
-  return /* @__PURE__ */ h(q, { children: [
+  return /* @__PURE__ */ h(H, { children: [
     /* @__PURE__ */ i(
       "div",
       {
@@ -9159,7 +9215,7 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
               {
                 ref: M,
                 className: `bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-8 overflow-hidden ${d}`,
-                style: H,
+                style: U,
                 children: /* @__PURE__ */ h("div", { className: W, style: B, children: [
                   o && /* @__PURE__ */ i(
                     "h1",
@@ -9216,7 +9272,7 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
                   {
                     ref: M,
                     className: `bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-8 overflow-hidden ${d}`,
-                    style: H,
+                    style: U,
                     children: /* @__PURE__ */ h("div", { className: W, style: B, children: [
                       o && /* @__PURE__ */ i(
                         "h1",
@@ -9236,7 +9292,7 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
       )
     ] })
   ] });
-}, ym = ({
+}, bm = ({
   children: e
 }) => (V(() => {
   const t = () => {
@@ -9378,7 +9434,7 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
   };
   return t(), r(), n(), a(), s(), l(), c(), d(), setTimeout(o, 2e3), () => {
   };
-}, []), /* @__PURE__ */ i(q, { children: e })), bm = () => (V(() => {
+}, []), /* @__PURE__ */ i(H, { children: e })), xm = () => (V(() => {
   if (typeof window > "u" || typeof document > "u" || !document.documentElement)
     return;
   const e = () => {
@@ -9474,9 +9530,9 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
       } catch {
       }
   };
-}, []), null), xm = ({
+}, []), null), vm = ({
   children: e
-}) => /* @__PURE__ */ i(q, { children: e }), Wl = {
+}) => /* @__PURE__ */ i(H, { children: e }), Wl = {
   // Static/rarely changing data - longer cache durations
   user: { duration: 300 * 1e3, maxSize: 100, staleWhileRevalidate: !0 },
   // 5 minutes
@@ -9606,7 +9662,7 @@ class Fl {
   }
 }
 const _l = new Fl();
-class vm {
+class wm {
   constructor(t, r = {}) {
     this.requestInterceptors = [], this.responseInterceptors = [], this.baseURL = t, this.defaultHeaders = r;
   }
@@ -9662,7 +9718,7 @@ class vm {
     return this.request(t, { method: "DELETE" });
   }
 }
-const wm = async (e, t = 3, r = 1e3) => {
+const km = async (e, t = 3, r = 1e3) => {
   let n;
   for (let a = 0; a <= t; a++)
     try {
@@ -9675,7 +9731,7 @@ const wm = async (e, t = 3, r = 1e3) => {
     }
   throw n;
 };
-class km {
+class Cm {
   constructor() {
     this.abortController = new AbortController();
   }
@@ -9692,7 +9748,7 @@ class km {
     this.abortController.abort();
   }
 }
-const Cm = {
+const Sm = {
   invalidate: (e) => Se.invalidate(e),
   clear: () => Se.clear(),
   getStats: () => Se.getStats(),
@@ -9736,19 +9792,19 @@ function Ul() {
 function ql() {
   return Hl() ? "localhost" : Vl() ? "wallet-browser" : Ul() ? "network" : "production";
 }
-function Sm() {
+function Nm() {
   const e = ql();
   return e === "localhost" || e === "wallet-browser";
 }
-function Nm(e) {
+function Em(e) {
 }
 function Gl() {
   return typeof window < "u";
 }
-function Em() {
+function Am() {
   return typeof window < "u";
 }
-function Am(e, t) {
+function Pm(e, t) {
   if (Gl())
     e();
   else
@@ -9820,7 +9876,7 @@ const Kl = {
   "object-src": ["'none'"],
   "base-uri": ["'self'"],
   "form-action": ["'self'"]
-}, Yl = () => Object.entries(Kl).map(([e, t]) => `${e} ${t.join(" ")}`).join("; "), Pm = {
+}, Yl = () => Object.entries(Kl).map(([e, t]) => `${e} ${t.join(" ")}`).join("; "), Tm = {
   "X-Frame-Options": "DENY",
   "X-Content-Type-Options": "nosniff",
   "X-XSS-Protection": "1; mode=block",
@@ -9831,7 +9887,7 @@ const Kl = {
   "Cross-Origin-Opener-Policy": "same-origin-allow-popups",
   "Cross-Origin-Resource-Policy": "cross-origin",
   "Content-Security-Policy": Yl()
-}, Tm = {
+}, $m = {
   fonts: "public, max-age=31536000, immutable",
   images: "public, max-age=31536000, immutable",
   js: "public, max-age=31536000, immutable",
@@ -9839,10 +9895,10 @@ const Kl = {
   serviceWorker: "public, max-age=0, must-revalidate",
   manifest: "public, max-age=86400",
   api: "no-cache, no-store, must-revalidate"
-}, $m = () => {
+}, Lm = () => {
   typeof window < "u" && document.addEventListener("securitypolicyviolation", () => {
   });
-}, Lm = {
+}, Im = {
   walletConnections: "Always verify wallet signatures and never trust client-side data",
   rpcEndpoints: "Use reputable RPC providers and consider rate limiting",
   contractInteractions: "Validate all smart contract interactions on the backend",
@@ -9860,7 +9916,7 @@ function Ql() {
   qt = e && e < 4 || t && t < 4;
 }
 Ql();
-function Im(e, t, r = {}) {
+function Rm(e, t, r = {}) {
   const {
     retries: n = 3,
     timeout: a = 1e4,
@@ -10023,7 +10079,7 @@ const ze = class ze {
 };
 ze.routeMap = /* @__PURE__ */ new Map(), ze.routeUsageStats = /* @__PURE__ */ new Map(), ze.currentRoute = "";
 let br = ze;
-const Rm = ({ src: e, alt: t, className: r, placeholder: n, priority: a = "medium" }) => {
+const Mm = ({ src: e, alt: t, className: r, placeholder: n, priority: a = "medium" }) => {
   const [o, s] = R(!1), [l, c] = R(!1), d = P.useRef(null);
   V(() => {
     if (!d.current) return;
@@ -10061,10 +10117,10 @@ const Rm = ({ src: e, alt: t, className: r, placeholder: n, priority: a = "mediu
     !o && l && /* @__PURE__ */ i("div", { className: "absolute inset-0 bg-gray-200 animate-pulse rounded" })
   ] });
 };
-function Mm() {
+function Om() {
   ce.clear(), at.clear();
 }
-function Om() {
+function Dm() {
   return {
     cachedComponents: ce.size,
     preloadQueue: at.size,
@@ -10109,17 +10165,17 @@ const Jl = ({ message: e }) => /* @__PURE__ */ h("div", { className: "flex items
     throw o;
   }), a = ec(t);
   return (o) => /* @__PURE__ */ i(He, { fallback: /* @__PURE__ */ i(a, {}), children: /* @__PURE__ */ i(n, { ...o }) });
-}, Dm = async (e) => {
+}, zm = async (e) => {
   try {
     await e();
   } catch {
   }
-}, zm = (e) => {
+}, Wm = (e) => {
   const t = {};
   return Object.entries(e).forEach(([r, n]) => {
     t[r] = tc(n, "skeleton");
   }), t;
-}, Wm = (e) => e, rc = {
+}, Bm = (e) => e, rc = {
   // Critical routes (preload immediately)
   critical: ["/", "/connect", "/mail"],
   // Secondary routes (preload on idle)
@@ -10158,7 +10214,7 @@ const Jl = ({ message: e }) => /* @__PURE__ */ h("div", { className: "flex items
 };
 We.preloadedComponents = /* @__PURE__ */ new Set(), We.preloadQueue = [], We.isPreloading = !1;
 let xr = We;
-const Bm = () => {
+const jm = () => {
   "requestIdleCallback" in window && window.requestIdleCallback(() => {
     rc.secondary.forEach((e) => {
     });
@@ -10167,7 +10223,7 @@ const Bm = () => {
   /* @__PURE__ */ i("div", { className: "animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500" }),
   /* @__PURE__ */ i("span", { className: "ml-2 text-sm text-gray-600", children: e })
 ] }), Ve = /* @__PURE__ */ new Map();
-function jm(e, t) {
+function Fm(e, t) {
   const {
     condition: r,
     fallback: n,
@@ -10212,7 +10268,7 @@ function jm(e, t) {
   };
   return c.displayName = `ConditionalLazy(${l})`, c;
 }
-const Fm = {
+const _m = {
   // Example: Premium features only for subscribed users
   // PremiumEmailFeatures: createConditionalLazyComponent(
   //   () => import('../components/premium/PremiumEmailFeatures'),
@@ -10225,7 +10281,7 @@ const Fm = {
   //     priority: 'high'
   //   }
   // ),
-}, _m = {
+}, Vm = {
   // Examples of platform-specific conditional loading
   // These can be implemented as needed for specific platform optimizations
 };
@@ -10245,10 +10301,10 @@ async function nc(e, t, r) {
     }
   throw n;
 }
-function Vm() {
+function Hm() {
   Ve.clear();
 }
-function Hm() {
+function Um() {
   return {
     cachedComponents: Ve.size,
     cacheEntries: Array.from(Ve.entries()).map(([e, t]) => ({
@@ -10469,15 +10525,15 @@ class ac {
   }
 }
 let Re = null;
-function Um() {
+function qm() {
   Re || (Re = new ac(), document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", () => {
     Re?.initializePreloading();
   }) : Re.initializePreloading());
 }
-function qm() {
+function Gm() {
   return Re?.getPreloadingStats();
 }
-function Gm(e) {
+function Km(e) {
   const t = {
     // Core AI Classification
     "ai-content-type": e.contentType,
@@ -10548,7 +10604,7 @@ function oc(e) {
     ]
   } : t;
 }
-function Km(e, t) {
+function Ym(e, t) {
   return t.map((r) => ({
     type: "related-content",
     target: r.url,
@@ -10591,7 +10647,7 @@ function sc(e) {
   ];
   return e.contentType === "governance-page" ? [...t, ...r] : t;
 }
-function Ym(e, t) {
+function Qm(e, t) {
   return {
     contentClassification: {
       type: e.contentType,
@@ -10617,7 +10673,7 @@ function lc(e) {
     documentation: "TechArticle"
   }[e] || "WebPage";
 }
-function Qm(e) {
+function Xm(e) {
   return {
     "@context": "https://schema.org",
     "@type": "MonitorAction",
@@ -10639,7 +10695,7 @@ function Qm(e) {
     }
   };
 }
-const Xm = {
+const Zm = {
   governancePage: {
     contentType: "governance-page",
     primaryTopic: "DAO Governance Communication Platform",
@@ -10775,14 +10831,14 @@ function Rn(e) {
   );
   return a.displayName = `Lazy${e}Provider`, xt.set(t, a), a;
 }
-function Zm({
+function Jm({
   children: e
 }) {
   const t = In();
   return t.filter((r) => r.priority <= 2 && r.detected).forEach((r) => {
     setTimeout(() => {
     }, 1e3);
-  }), /* @__PURE__ */ h(q, { children: [
+  }), /* @__PURE__ */ h(H, { children: [
     t.map((r) => {
       const n = Rn(r.name);
       return /* @__PURE__ */ i(n, {}, r.name);
@@ -10810,7 +10866,7 @@ const Gt = class Gt {
 };
 Gt.preloadedWallets = /* @__PURE__ */ new Set();
 let ot = Gt;
-function Jm() {
+function e0() {
   return {
     availableWallets: In(),
     preloadWallet: (n) => {
@@ -10820,7 +10876,7 @@ function Jm() {
     hasWallet: (n) => De.has(n.toLowerCase())
   };
 }
-function e0({
+function t0({
   walletName: e,
   onConnect: t,
   disabled: r = !1
@@ -10841,7 +10897,7 @@ function e0({
     }
   );
 }
-class t0 {
+class r0 {
   constructor() {
     this.criticalResources = [], this.observedMetrics = {
       fcp: 0,
@@ -11079,28 +11135,28 @@ const vt = {
   clearEntries: (e) => {
     typeof performance < "u" && (e ? (performance.clearMeasures?.(e), performance.clearMarks?.(e)) : (performance.clearMeasures?.(), performance.clearMarks?.()));
   }
-}, r0 = (e, t = []) => {
+}, n0 = (e, t = []) => {
   V(() => (vt.mark(`${e}-start`), () => {
     vt.mark(`${e}-end`), vt.measure(e, `${e}-start`, `${e}-end`);
   }), [e, t]);
-}, n0 = (e) => {
-  const t = U(e);
+}, a0 = (e) => {
+  const t = q(e);
   return t.current = e, re(
     (...r) => t.current(...r),
     []
   );
-}, a0 = (e, t, r) => {
-  const n = U(t), a = U(void 0);
+}, o0 = (e, t, r) => {
+  const n = q(t), a = q(void 0);
   return $t(() => (r && process.env.NODE_ENV === "development" && t.some(
     (o, s) => o !== n.current[s]
   ), n.current = t, a.current = e(), a.current), [e, r, t]);
-}, it = /* @__PURE__ */ new Map(), o0 = (e) => {
+}, it = /* @__PURE__ */ new Map(), i0 = (e) => {
   const t = it.get(e) || 0;
   it.set(e, t + 1), V(() => {
     process.env.NODE_ENV;
   });
-}, i0 = () => Object.fromEntries(it), s0 = () => it.clear(), l0 = (e) => P.lazy(e), c0 = (e = 0.1) => {
-  const [t, r] = R(/* @__PURE__ */ new Set()), n = U(null);
+}, s0 = () => Object.fromEntries(it), l0 = () => it.clear(), c0 = (e) => P.lazy(e), d0 = (e = 0.1) => {
+  const [t, r] = R(/* @__PURE__ */ new Set()), n = q(null);
   V(() => (n.current = new IntersectionObserver(
     (o) => {
       o.forEach((s) => {
@@ -11118,7 +11174,7 @@ const vt = {
     o && n.current && n.current.observe(o);
   }, []);
   return { loadedImages: t, observeImage: a };
-}, d0 = (e) => {
+}, u0 = (e) => {
   typeof window < "u" && "requestIdleCallback" in window ? window.requestIdleCallback(() => {
     e().catch(() => {
     });
@@ -11126,20 +11182,20 @@ const vt = {
     e().catch(() => {
     });
   }, 100);
-}, Mn = {}, u0 = (e) => {
+}, Mn = {}, m0 = (e) => {
   Mn[e.name] = e.value, process.env.NODE_ENV;
-}, m0 = () => Mn, g0 = (e, t = "script") => {
+}, g0 = () => Mn, p0 = (e, t = "script") => {
   if (typeof document < "u") {
     const r = document.createElement("link");
     r.rel = "prefetch", r.href = e, r.as = t, document.head.appendChild(r);
   }
-}, p0 = (e, t = "script", r) => {
+}, f0 = (e, t = "script", r) => {
   if (typeof document < "u") {
     const n = document.createElement("link");
     n.rel = "preload", n.href = e, n.as = t, r && (n.crossOrigin = "anonymous"), document.head.appendChild(n);
   }
-}, f0 = (e) => {
-  const t = U(/* @__PURE__ */ new Set()), r = U(/* @__PURE__ */ new Set()), n = re((o, s) => {
+}, h0 = (e) => {
+  const t = q(/* @__PURE__ */ new Set()), r = q(/* @__PURE__ */ new Set()), n = re((o, s) => {
     const l = setTimeout(() => {
       t.current.delete(l), o();
     }, s);
@@ -11180,7 +11236,7 @@ const vt = {
       `CLS (${e.CLS}) exceeds budget (${me.maxCLS})`
     ), t;
   }
-}, h0 = ({
+}, y0 = ({
   contentType: e,
   aiSummary: t,
   technicalComplexity: r = "intermediate"
@@ -11188,13 +11244,13 @@ const vt = {
   /* @__PURE__ */ i("meta", { name: "ai:content-type", content: e }),
   /* @__PURE__ */ i("meta", { name: "ai:summary", content: t }),
   /* @__PURE__ */ i("meta", { name: "ai:complexity", content: r })
-] }), y0 = ({
+] }), b0 = ({
   children: e,
   className: t,
   ...r
-}) => /* @__PURE__ */ i("main", { className: t, ...r, role: "main", children: e }), b0 = ({
+}) => /* @__PURE__ */ i("main", { className: t, ...r, role: "main", children: e }), x0 = ({
   children: e
-}) => /* @__PURE__ */ i(q, { children: e }), Pe = (e) => Array.isArray(e) ? e : typeof e == "string" ? e.split(",").map((t) => t.trim()).filter(Boolean) : [], kr = (e) => {
+}) => /* @__PURE__ */ i(H, { children: e }), Pe = (e) => Array.isArray(e) ? e : typeof e == "string" ? e.split(",").map((t) => t.trim()).filter(Boolean) : [], kr = (e) => {
   const t = Pe(e.audience);
   return {
     "@context": "https://schema.org",
@@ -11353,7 +11409,7 @@ const vt = {
       "Smart contract integration"
     ]
   };
-}, x0 = (e) => ({
+}, v0 = (e) => ({
   "@context": "https://schema.org",
   "@type": "FAQPage",
   mainEntity: e.map((t) => ({
@@ -11498,7 +11554,7 @@ const vt = {
     "content:expertise": "technical",
     "content:trustworthiness": "verified"
   };
-}, v0 = (e) => ({
+}, w0 = (e) => ({
   structuredData: {
     product: kr(e),
     article: Cr(e),
@@ -11512,7 +11568,7 @@ const vt = {
     Cr(e),
     Sr(e)
   ]
-}), w0 = {
+}), k0 = {
   homepage: {
     title: "0xmail.box - Revolutionary Web3 Email Platform | Wallet-Based Authentication",
     description: "Transform your email experience with 0xmail.box - the first Web3 email platform using wallet authentication. No passwords, enhanced security, ENS/SNS domain support, and smart contract integration.",
@@ -11576,7 +11632,7 @@ const vt = {
     readingTime: 8,
     relatedTopics: ["Token economics", "Reward systems", "Referral marketing"]
   }
-}, k0 = (e) => {
+}, C0 = (e) => {
   const {
     level: t,
     text: r,
@@ -11654,7 +11710,7 @@ const vt = {
     className: t,
     semanticContext: "feature"
   })
-}, C0 = (e) => {
+}, S0 = (e) => {
   const t = [], r = [], n = e.filter((a) => a.level === 1).length;
   n === 0 ? t.push("Missing H1 tag - every page should have exactly one H1") : n > 1 && t.push(
     `Multiple H1 tags found (${n}) - use only one H1 per page`
@@ -11674,7 +11730,7 @@ const vt = {
     errors: t,
     suggestions: r
   };
-}, S0 = {
+}, N0 = {
   walletConnection: ie.pageTitle("Connect Your Web3 Wallet"),
   emailBenefits: ie.majorSection("Why Choose Web3 Email?"),
   securityFeature: ie.feature("Secure & Private"),
@@ -11684,7 +11740,7 @@ const vt = {
   setupStep1: ie.step("Connect Your Wallet", 1),
   setupStep2: ie.step("Verify Your Identity", 2),
   setupStep3: ie.step("Access Your Emails", 3)
-}, N0 = [
+}, E0 = [
   {
     term: "Web3 Email",
     definition: "Email system that uses blockchain wallet addresses as authentication instead of traditional passwords",
@@ -11769,7 +11825,7 @@ const vt = {
     examples: ["Gmail to Web3 email", "Outlook integration"],
     context: "Web2/Web3 bridge ensures compatibility with existing email infrastructure"
   }
-], E0 = (e) => ({
+], A0 = (e) => ({
   // Semantic markup for AI understanding
   "@context": "https://schema.org",
   "@type": "LearningResource",
@@ -11787,7 +11843,7 @@ const vt = {
   keywords: e.concepts,
   applicationExample: e.practicalApplications,
   isRelatedTo: e.relatedConcepts
-}), A0 = (e) => {
+}), P0 = (e) => {
   const t = {
     nodes: e.map((r) => ({
       id: r.term,
@@ -11812,7 +11868,7 @@ const vt = {
       });
     });
   }), t;
-}, P0 = (e) => {
+}, T0 = (e) => {
   const t = [];
   return e.examples?.forEach((r) => {
     t.push({
@@ -11832,7 +11888,7 @@ const vt = {
     type: "definition",
     confidence: 1
   }), t;
-}, T0 = (e) => {
+}, $0 = (e) => {
   const t = [];
   return e.forEach((r) => {
     t.push({
@@ -11857,7 +11913,7 @@ const vt = {
       difficulty: "intermediate"
     });
   }), t;
-}, $0 = {
+}, L0 = {
   homepage: {
     domain: "Web3 Email Platform",
     category: "Web3 Communication",
@@ -11948,52 +12004,52 @@ const vt = {
  * @author John Qiu Huang
  * @license MIT
  */
-const L0 = {
+const I0 = {
   utils: {
     cn: v
   }
 };
 export {
-  h0 as AIMeta,
-  b0 as AITrainingEnhancer,
-  $0 as AI_TRAINING_CONFIGS,
+  y0 as AIMeta,
+  x0 as AITrainingEnhancer,
+  L0 as AI_TRAINING_CONFIGS,
   jd as AddressLink,
   Vd as Alert,
   _d as AlertDescription,
   Fd as AlertTitle,
   Ne as AnimatedSection,
-  M0 as ArrowLeftIcon,
-  O0 as ArrowRightIcon,
-  D0 as Bars3Icon,
+  O0 as ArrowLeftIcon,
+  D0 as ArrowRightIcon,
+  z0 as Bars3Icon,
   um as BatchRender,
-  z0 as BellIcon,
-  W0 as BellSlashIcon,
+  W0 as BellIcon,
+  B0 as BellSlashIcon,
   Lu as BodyText,
   Dl as Breadcrumb,
   Uu as BreadcrumbSection,
   be as Button,
   gm as CTASection,
   Xd as CalloutBox,
-  km as CancellableRequest,
+  Cm as CancellableRequest,
   Fr as Card,
   Kd as CardContent,
   Yd as CardFooter,
   Gd as CardHeader,
   To as ChainBadge,
-  B0 as ChartBarIcon,
-  j0 as CheckCircleIcon,
-  bg as CheckCircleIconSolid,
-  F0 as CheckIcon,
-  xg as CheckIconSolid,
-  _0 as ChevronDownIcon,
-  V0 as ChevronLeftIcon,
-  H0 as ChevronRightIcon,
-  U0 as ChevronUpIcon,
-  q0 as ClockIcon,
+  j0 as ChartBarIcon,
+  F0 as CheckCircleIcon,
+  xg as CheckCircleIconSolid,
+  _0 as CheckIcon,
+  vg as CheckIconSolid,
+  V0 as ChevronDownIcon,
+  H0 as ChevronLeftIcon,
+  U0 as ChevronRightIcon,
+  q0 as ChevronUpIcon,
+  G0 as ClockIcon,
   qu as CodeBlock,
-  G0 as CodeBracketIcon,
+  K0 as CodeBracketIcon,
   Gu as CodeExampleBlock,
-  K0 as Cog6ToothIcon,
+  Y0 as Cog6ToothIcon,
   Ku as CollapsibleDocumentationTopic,
   rr as CollapsibleEmailField,
   Zd as ComparisonSection,
@@ -12001,20 +12057,20 @@ export {
   lm as ConditionalRender,
   Du as ConfirmationDialog,
   eu as ContentContainer,
-  Y0 as CreditCardIcon,
-  Q0 as DocumentTextIcon,
+  Q0 as CreditCardIcon,
+  X0 as DocumentTextIcon,
   tu as Dropdown,
   gu as EmailAccountsList,
   qr as EmailInputField,
   ku as EmailInputGroup,
   Vo as EmptyState,
-  X0 as EnvelopeIcon,
+  Z0 as EnvelopeIcon,
   em as ErrorBoundary,
   tm as ErrorBoundaryLazy,
-  Z0 as ExclamationTriangleIcon,
-  vg as ExclamationTriangleIconSolid,
+  J0 as ExclamationTriangleIcon,
+  wg as ExclamationTriangleIconSolid,
   im as ExpensiveComponent,
-  J0 as EyeSlashIcon,
+  eg as EyeSlashIcon,
   Ud as FadeInScale,
   Hd as FadeInUp,
   _u as FeatureBlock,
@@ -12025,55 +12081,56 @@ export {
   Mt as FormFieldGroup,
   Fu as FormSection,
   Wu as FreeEmailBanner,
-  eg as GlobeAltIcon,
+  tg as GlobeAltIcon,
   ou as HeroBannerWithBadge,
-  tg as HomeIcon,
+  rg as HomeIcon,
   zu as IconContainer,
-  rg as InboxIcon,
+  ng as InboxIcon,
   Qd as InfoCard,
   Bu as InfoPanel,
-  ng as InformationCircleIcon,
+  ag as InformationCircleIcon,
   vo as Input,
   Bd as KYCLevelCard,
   zd as KYCStatusBadge,
-  ag as KeyIcon,
+  og as KeyIcon,
   _r as Label,
   Zu as LanguageSelector,
   cm as LazyComponent,
-  Rm as LazyImage,
+  Mm as LazyImage,
   _a as LazyLoadQueue,
-  e0 as LazyWalletButton,
+  t0 as LazyWalletButton,
   hd as LazyWrapper,
   jr as LoadPriority,
-  bm as LoadingOptimizer,
+  xm as LoadingOptimizer,
   vu as LoadingState,
   Hu as Logo,
-  hm as MasterDetailLayout,
-  og as MegaphoneIcon,
+  ym as MasterDetailLayout,
+  hm as MasterListItem,
+  ig as MegaphoneIcon,
   iu as MetricsGrid,
-  ig as MinusIcon,
+  sg as MinusIcon,
   yl as Modal,
   bl as ModalContent,
   xl as ModalFooter,
   Ou as ModalHeader,
   wu as NoContent,
-  vm as OptimizedAPIClient,
+  wm as OptimizedAPIClient,
   mm as OptimizedImage,
-  xm as OptimizedRoutePreloader,
+  vm as OptimizedRoutePreloader,
   bu as PageContainer,
   fm as PageHeader,
   Tu as PageTitle,
-  sg as PaperAirplaneIcon,
-  lg as PaperClipIcon,
+  lg as PaperAirplaneIcon,
+  cg as PaperClipIcon,
   dm as PerformanceBoundary,
-  ym as PerformanceOptimizer,
-  _m as PlatformSpecificComponents,
-  cg as PlusIcon,
+  bm as PerformanceOptimizer,
+  Vm as PlatformSpecificComponents,
+  dg as PlusIcon,
   Va as PriorityLoader,
   su as ProcessSteps,
   Yu as PromotionalBanner,
   lu as PullToRefresh,
-  dg as RocketLaunchIcon,
+  ug as RocketLaunchIcon,
   br as RouteBasedLazyLoader,
   rm as SafeAppWrapper,
   xu as Section,
@@ -12092,22 +12149,22 @@ export {
   So as SelectSeparator,
   wt as SelectTrigger,
   ko as SelectValue,
-  y0 as SemanticHTML,
+  b0 as SemanticHTML,
   pu as SettingsList,
-  ug as ShieldCheckIcon,
+  mg as ShieldCheckIcon,
   Mu as SmartContent,
   Ln as SmartLink,
-  Zm as SmartWalletProviders,
-  mg as SparklesIcon,
+  Jm as SmartWalletProviders,
+  gg as SparklesIcon,
   tr as Spinner,
   pm as StandardPageLayout,
-  gg as StarIcon,
-  wg as StarIconSolid,
+  pg as StarIcon,
+  kg as StarIconSolid,
   ju as StatCard,
   mu as StatusBadge,
   Eu as StatusIndicator,
   Ju as StepList,
-  Fm as SubscriptionGatedComponents,
+  _m as SubscriptionGatedComponents,
   Wd as SumsubWebSDK,
   No as Switch,
   Au as SystemStatusIndicator,
@@ -12121,105 +12178,105 @@ export {
   Iu as TextLink,
   Qu as TrackedButton,
   Xu as TrackedLink,
-  pg as TrashIcon,
+  fg as TrashIcon,
   hu as UseCaseGrid,
-  fg as UserGroupIcon,
+  hg as UserGroupIcon,
   sm as VirtualListItem,
-  N0 as WEB3_CONCEPTS,
-  S0 as WEB3_EMAIL_HEADINGS,
+  E0 as WEB3_CONCEPTS,
+  N0 as WEB3_EMAIL_HEADINGS,
   ie as WEB3_HEADING_PATTERNS,
   Vu as WalletIcon,
   ot as WalletPreloader,
-  hg as XMarkIcon,
+  yg as XMarkIcon,
   xd as addResourceHint,
-  Xm as aiOptimizationPresets,
+  Zm as aiOptimizationPresets,
   kd as appStorage,
   Ed as autoConnectWalletBrowser,
   Wc as batchDOMUpdates,
   Oe as bundleAnalysis,
   io as buttonVariants,
-  Tm as cacheHeaders,
-  Cm as cacheUtils,
+  $m as cacheHeaders,
+  Sm as cacheUtils,
   $d as checkPerformanceBudget,
-  Mm as clearComponentCache,
-  Vm as clearConditionalCache,
-  s0 as clearRenderCounts,
+  Om as clearComponentCache,
+  Hm as clearConditionalCache,
+  l0 as clearRenderCounts,
   v as cn,
   v as combineClassNames,
-  Am as conditionalCSS,
+  Pm as conditionalCSS,
   Rd as convertFileSize,
   mc as createAIMetaTags,
   Sr as createAIOptimizedSchema,
-  Im as createAdvancedLazyComponent,
+  Rm as createAdvancedLazyComponent,
   ud as createBreadcrumb,
   Rc as createCSSVariables,
   Zt as createComparisonData,
   ad as createConditionalImports,
-  jm as createConditionalLazyComponent,
+  Fm as createConditionalLazyComponent,
   Jd as createEmailComparisonData,
-  x0 as createEnhancedFAQSchema,
+  v0 as createEnhancedFAQSchema,
   dc as createEnhancedOpenGraph,
   uc as createEnhancedTwitterCard,
   Jt as createFeature,
   tc as createLazyComponent,
-  l0 as createLazyComponentFactory,
+  c0 as createLazyComponentFactory,
   yd as createLazyRoute,
   Rn as createLazyWalletProvider,
-  Wm as createLibraryImports,
+  Bm as createLibraryImports,
   am as createMemoComponent,
   $c as createOptimizedStyles,
   fd as createProgressiveComponent,
   au as createSecurityFeatures,
   od as createSelectiveExports,
   om as createSelectiveMemoComponent,
-  k0 as createSemanticHeading,
+  C0 as createSemanticHeading,
   Nd as createSimpleStorage,
   Cr as createTechnicalArticleSchema,
   id as createTreeShakingConfig,
-  zm as createUIComponents,
+  Wm as createUIComponents,
   kr as createWeb3ProductSchema,
-  t0 as criticalPathOptimizer,
+  r0 as criticalPathOptimizer,
   Kl as cspDirectives,
   Ba as cssOptimization,
   Me as deadCodeElimination,
-  L0 as default,
+  I0 as default,
   Ga as defaultPerformanceBudget,
   In as detectAvailableWallets,
   Ha as detectWalletBrowser,
   Ld as exportPerformanceData,
   Id as formatFileSize,
-  Gm as generateAIMetaTags,
-  E0 as generateAIMetadata,
-  Ym as generateAIStructuredData,
-  v0 as generateAdvancedSEO,
+  Km as generateAIMetaTags,
+  A0 as generateAIMetadata,
+  Qm as generateAIStructuredData,
+  w0 as generateAdvancedSEO,
   Yl as generateCSP,
-  A0 as generateConceptGraph,
-  Km as generateContentRelationships,
+  P0 as generateConceptGraph,
+  Ym as generateContentRelationships,
   ic as generateEntityRecognition,
   qc as generateImageSEO,
-  Qm as generatePerformanceTrackingSchema,
+  Xm as generatePerformanceTrackingSchema,
   Zc as generatePictureElement,
   rd as generatePlaceholder,
-  T0 as generateQAPairs,
+  $0 as generateQAPairs,
   oc as generateSemanticMarkup,
   Kc as generateSizes,
   Yc as generateSocialImageMeta,
   Gc as generateSrcSet,
   sc as generateTopicClustering,
-  P0 as generateTrainingExamples,
+  T0 as generateTrainingExamples,
   dd as getActiveNavItem,
-  Hm as getConditionalStats,
+  Um as getConditionalStats,
   ql as getEnvironmentType,
-  Om as getLazyLoadingStats,
+  Dm as getLazyLoadingStats,
   Xc as getOptimalImageFormat,
   Rt as getPerformanceMonitor,
-  qm as getPreloadingStats,
-  i0 as getRenderCounts,
+  Gm as getPreloadingStats,
+  s0 as getRenderCounts,
   se as getUINavigationService,
-  m0 as getWebVitals,
-  Um as initializeAdvancedPreloading,
+  g0 as getWebVitals,
+  qm as initializeAdvancedPreloading,
   Ad as initializePerformanceMonitoring,
-  Bm as initializePreloading,
+  jm as initializePreloading,
   jc as inlineCriticalStyles,
   Hl as isLocalhost,
   Ul as isNetworkAccess,
@@ -12228,7 +12285,7 @@ export {
   vd as lazyLoadQueue,
   pd as lazyWithPreload,
   gd as lazyWithRetry,
-  Nm as loadCSS,
+  Em as loadCSS,
   Lc as loadCriticalCSS,
   Ic as loadNonCriticalCSS,
   Td as measureAsyncOperation,
@@ -12241,57 +12298,57 @@ export {
   _c as optimizeGrid,
   zc as optimizeWillChange,
   jl as optimizedFetch,
-  w0 as pageSEOConfigs,
+  k0 as pageSEOConfigs,
   Md as parseFileSize,
   me as performanceBudget,
   vt as performanceUtils,
   Oa as prefersReducedMotion,
-  g0 as prefetchResource,
-  Dm as preloadComponent,
+  p0 as prefetchResource,
+  zm as preloadComponent,
   Jc as preloadImage,
-  p0 as preloadResource,
-  d0 as preloadRoute,
+  f0 as preloadResource,
+  u0 as preloadRoute,
   nd as preserveAspectRatio,
   wd as priorityLoader,
-  u0 as reportWebVitals,
+  m0 as reportWebVitals,
   rc as routeConfig,
-  Pm as securityHeaders,
-  $m as setupCSPReporting,
+  Tm as securityHeaders,
+  Lm as setupCSPReporting,
   Qc as setupLazyLoading,
   ed as setupProgressiveLoading,
-  Sm as shouldEnableWallet,
+  Nm as shouldEnableWallet,
   bt as smartLinkVariants,
   za as supportsAVIF,
-  Em as supportsCSSImports,
+  Am as supportsCSSImports,
   Da as supportsWebP,
   Cd as themeStorage,
   Ka as useClickOutside,
   Ya as useCodeLoader,
   qa as useComponentPerformance,
   Od as useCopyToClipboard,
-  a0 as useDebugMemo,
+  o0 as useDebugMemo,
   bd as useDynamicImport,
-  c0 as useImageLazyLoading,
+  d0 as useImageLazyLoading,
   Fa as useLazyLoad,
   Fc as useLazyStyles,
   ld as useLocation,
   Hc as useMediaQuery,
-  f0 as useMemoryLeakDetection,
+  h0 as useMemoryLeakDetection,
   Dd as useMultipleCopyToClipboard,
   sd as useNavigation,
   Uc as useOptimizedTheme,
-  Jm as useOptimizedWallets,
-  r0 as usePerformanceMark,
+  e0 as useOptimizedWallets,
+  n0 as usePerformanceMark,
   Oc as useReducedMotion,
-  o0 as useRenderCount,
+  i0 as useRenderCount,
   Mc as useResponsiveStyles,
   cd as useSearchParams,
   Ru as useSmartLinks,
-  n0 as useStableCallback,
+  a0 as useStableCallback,
   Wa as utils,
-  C0 as validateHeadingStructure,
+  S0 as validateHeadingStructure,
   Sd as walletStorage,
-  Lm as web3SecurityNotes,
+  Im as web3SecurityNotes,
   Pd as withPerformanceTracking,
-  wm as withRetry
+  km as withRetry
 };