@opexa/portal-components 0.0.25 → 0.0.27

package/dist/components/Account/Account.mjs

@@ -1,10 +1,10 @@
 "use client";
-import { jsxs as a, jsx as e, Fragment as C } from "react/jsx-runtime";
-import { Portal as I } from "@ark-ui/react";
-import f from "next/image";
-import d from "next/link";
-import { useShallow as P } from "zustand/shallow";
-import { useAccountQuery as k } from "../../client/hooks/useAccountQuery.mjs";
+import { jsxs as o, Fragment as k, jsx as e } from "react/jsx-runtime";
+import { Portal as g } from "@ark-ui/react";
+import h from "next/image";
+import l from "next/link";
+import { useShallow as m } from "zustand/shallow";
+import { useAccountQuery as L } from "../../client/hooks/useAccountQuery.mjs";
 import "@tanstack/react-query";
 import "../../utils/capitalize.mjs";
 import { formatNumber as p } from "../../utils/formatNumber.mjs";
@@ -19,201 +19,121 @@ import "tiny-invariant";
 import "react";
 import "lodash-es";
 import "@opexa/portal-sdk-core/object-id";
-import { useGlobalStore as w } from "../../client/hooks/useGlobalStore.mjs";
+import { useGlobalStore as d } from "../../client/hooks/useGlobalStore.mjs";
 import "../../client/hooks/useInfiniteQueryHelper.mjs";
-import { useLocaleInfo as L } from "../../client/hooks/useLocaleInfo.mjs";
+import { useLocaleInfo as w } from "../../client/hooks/useLocaleInfo.mjs";
 import "usehooks-ts";
 import { useSignOutMutation as R } from "../../client/hooks/useSignOutMutation.mjs";
-import { useUnreadMessagesCountQuery as B } from "../../client/hooks/useUnreadMessagesCountQuery.mjs";
-import { useWalletQuery as S } from "../../client/hooks/useWalletQuery.mjs";
-import { AlertCircleIcon as W } from "../../icons/AlertCircleIcon.mjs";
-import { ChevronRightIcon as l } from "../../icons/ChevronRightIcon.mjs";
-import { CoinsStacked02Icon as z } from "../../icons/CoinsStacked02Icon.mjs";
+import { useUnreadMessagesCountQuery as P } from "../../client/hooks/useUnreadMessagesCountQuery.mjs";
+import { useWalletQuery as M } from "../../client/hooks/useWalletQuery.mjs";
+import { AlertCircleIcon as z } from "../../icons/AlertCircleIcon.mjs";
+import { ChevronLeftIcon as B } from "../../icons/ChevronLeftIcon.mjs";
+import { ChevronRightIcon as r } from "../../icons/ChevronRightIcon.mjs";
+import { CoinsStacked02Icon as W } from "../../icons/CoinsStacked02Icon.mjs";
 import { CoinsSwap02Icon as T } from "../../icons/CoinsSwap02Icon.mjs";
-import { Gift01Icon as D } from "../../icons/Gift01Icon.mjs";
-import { Logout01Icon as v } from "../../icons/Logout01Icon.mjs";
-import { Settings02Icon as Q } from "../../icons/Settings02Icon.mjs";
-import { XIcon as A } from "../../icons/XIcon.mjs";
-import h from "../../images/placeholder-avatar.png.mjs";
+import { CreditCard02Icon as A } from "../../icons/CreditCard02Icon.mjs";
+import { FileCheck02Icon as D } from "../../icons/FileCheck02Icon.mjs";
+import { Gift01Icon as Q } from "../../icons/Gift01Icon.mjs";
+import { Lock01Icon as V } from "../../icons/Lock01Icon.mjs";
+import { Logout01Icon as y } from "../../icons/Logout01Icon.mjs";
+import { Settings02Icon as $ } from "../../icons/Settings02Icon.mjs";
+import { User01Icon as E } from "../../icons/User01Icon.mjs";
+import { XIcon as j } from "../../icons/XIcon.mjs";
+import f from "../../images/placeholder-avatar.png.mjs";
 import "../../ui/AlertDialog/AlertDialog.mjs";
 import "../../ui/Avatar/Avatar.mjs";
-import { Root as M, Indicator as U, Label as $ } from "../../ui/Badge/Badge.mjs";
-import { Button as g } from "../../ui/Button/Button.mjs";
+import { Root as F, Indicator as G, Label as H } from "../../ui/Badge/Badge.mjs";
+import { Button as x } from "../../ui/Button/Button.mjs";
 import "../../ui/Checkbox/Checkbox.mjs";
 import "../../ui/Clipboard/Clipboard.mjs";
 import "../../ui/Collapsible/Collapsible.mjs";
 import "../../ui/Combobox/Combobox.mjs";
 import "../../ui/DatePicker/DatePicker.mjs";
 import "../../ui/Dialog/Dialog.mjs";
-import { Root as E, Trigger as j, Positioner as G, Content as F } from "../../ui/Drawer/Drawer.mjs";
+import { Root as X, Trigger as q, Positioner as J, Content as K } from "../../ui/Drawer/Drawer.mjs";
 import "../../ui/Field/Field.mjs";
-import { IconButton as x } from "../../ui/IconButton/IconButton.mjs";
+import { IconButton as I } from "../../ui/IconButton/IconButton.mjs";
 import "../../ui/NumberInput/NumberInput.mjs";
 import "../../ui/PasswordInput/PasswordInput.mjs";
 import "../../ui/PinInput/PinInput.mjs";
-import { Root as H, Trigger as V, Positioner as X, Content as q } from "../../ui/Popover/Popover.mjs";
-import "tailwind-merge";
+import { Root as Y, Trigger as Z, Positioner as ee, Content as te } from "../../ui/Popover/Popover.mjs";
+import { Presence as ae } from "../../ui/Presence.mjs";
 import "../../ui/Progress/Progress.mjs";
+import "tailwind-merge";
 import "../../ui/SegmentGroup/SegmentGroup.mjs";
 import "../../ui/Select/Select.mjs";
 import "../../ui/Table/Table.mjs";
 import "../../ui/Tabs/Tabs.mjs";
-import { accountRecipe as J } from "./account.recipe.mjs";
-const r = J();
-function rt(i) {
-  const t = w(
-    P((n) => ({
-      profile: n.profile,
-      mobileProfile: n.mobileProfile,
-      messages: n.messages
+import { accountRecipe as ne } from "./account.recipe.mjs";
+const t = ne();
+function It(n) {
+  const a = d(
+    m((c) => ({
+      account: c.account,
+      account__mobile: c.account__mobile,
+      accountSettings: c.accountSettings
     }))
-  ), o = R(), m = B(
-    {},
-    { refetchInterval: 5e3 }
-  ), s = /* @__PURE__ */ a("nav", { className: r.nav(), children: [
-    /* @__PURE__ */ a("ul", { children: [
-      /* @__PURE__ */ e("li", { className: r.navItemRoot(), children: /* @__PURE__ */ a(
-        "button",
-        {
-          type: "button",
-          className: r.navItemLink(),
-          onClick: () => {
-            t.profile.setOpen(!1), t.mobileProfile.setOpen(!1), t.messages.setOpen(!0);
-          },
-          children: [
-            /* @__PURE__ */ e(v, { className: r.navItemIcon() }),
-            /* @__PURE__ */ e("span", { className: r.navItemLabel(), children: "Notifications" }),
-            /* @__PURE__ */ e("span", { className: r.navItemBadge(), "data-type": "warning", children: m.data ?? 0 }),
-            /* @__PURE__ */ e(l, { className: r.navItemIndicator() })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ e("li", { className: r.navItemRoot(), children: /* @__PURE__ */ a(
-        d,
-        {
-          href: i.rewardsUrl ?? "/rewards",
-          className: r.navItemLink(),
-          onClick: () => {
-            t.profile.setOpen(!1), t.mobileProfile.setOpen(!1);
-          },
-          children: [
-            /* @__PURE__ */ e(D, { className: r.navItemIcon() }),
-            /* @__PURE__ */ e("span", { className: r.navItemLabel(), children: "Rewards" }),
-            /* @__PURE__ */ e("span", { className: r.navItemBadge(), "data-type": "warning", children: "0" }),
-            /* @__PURE__ */ e(l, { className: r.navItemIndicator() })
-          ]
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ e("ul", { children: /* @__PURE__ */ e("li", { className: r.navItemRoot(), children: /* @__PURE__ */ a(
-      "button",
+  );
+  return /* @__PURE__ */ o(k, { children: [
+    /* @__PURE__ */ o(
+      X,
       {
-        type: "button",
-        className: r.navItemLink(),
-        onClick: () => {
-          t.profile.setOpen(!1), t.mobileProfile.setOpen(!1);
-        },
-        children: [
-          /* @__PURE__ */ e(Q, { className: r.navItemIcon() }),
-          /* @__PURE__ */ e("span", { className: r.navItemLabel(), children: "Settings" }),
-          /* @__PURE__ */ e("span", { className: r.navItemBadge(), "data-type": "error", children: /* @__PURE__ */ e(W, {}) }),
-          /* @__PURE__ */ e(l, { className: r.navItemIndicator() })
-        ]
-      }
-    ) }) }),
-    /* @__PURE__ */ a("ul", { children: [
-      /* @__PURE__ */ e("li", { className: r.navItemRoot(), children: /* @__PURE__ */ a(
-        d,
-        {
-          href: i.betRecordsUrl ?? "/bet-records",
-          className: r.navItemLink(),
-          onClick: () => {
-            t.profile.setOpen(!1), t.mobileProfile.setOpen(!1);
-          },
-          children: [
-            /* @__PURE__ */ e(z, { className: r.navItemIcon() }),
-            /* @__PURE__ */ e("span", { className: r.navItemLabel(), children: "Bet Records" }),
-            /* @__PURE__ */ e(l, { className: r.navItemIndicator() })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ e("li", { className: r.navItemRoot(), children: /* @__PURE__ */ a(
-        d,
-        {
-          href: i.transactionsUrl ?? "/transactions",
-          className: r.navItemLink(),
-          onClick: () => {
-            t.profile.setOpen(!1), t.mobileProfile.setOpen(!1);
-          },
-          children: [
-            /* @__PURE__ */ e(T, { className: r.navItemIcon() }),
-            /* @__PURE__ */ e("span", { className: r.navItemLabel(), children: "Transactions" }),
-            /* @__PURE__ */ e(l, { className: r.navItemIndicator() })
-          ]
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ e("ul", { children: /* @__PURE__ */ e("li", { className: r.navItemRoot(), children: /* @__PURE__ */ a(
-      "button",
-      {
-        type: "button",
-        className: r.navItemLink(),
-        disabled: o.isPending,
-        onClick: () => {
-          o.mutate(), t.profile.setOpen(!1), t.mobileProfile.setOpen(!1);
-        },
-        children: [
-          /* @__PURE__ */ e(v, { className: r.navItemIcon() }),
-          /* @__PURE__ */ e("span", { className: r.navItemLabel(), children: "Log Out" }),
-          /* @__PURE__ */ e(l, { className: r.navItemIndicator() })
-        ]
-      }
-    ) }) })
-  ] });
-  return /* @__PURE__ */ a(C, { children: [
-    /* @__PURE__ */ a(
-      E,
-      {
-        open: t.mobileProfile.open,
-        onOpenChange: (n) => {
-          t.mobileProfile.setOpen(n.open);
+        open: a.account__mobile.open,
+        onOpenChange: (c) => {
+          a.account__mobile.setOpen(c.open), a.accountSettings.setCollapsed(!0);
         },
         lazyMount: !0,
         unmountOnExit: !0,
         children: [
-          /* @__PURE__ */ e(j, { asChild: !0, className: "lg:hidden", children: i.children ?? /* @__PURE__ */ e(x, { size: "sm", colorScheme: "gray", children: t.mobileProfile.open ? /* @__PURE__ */ e(A, {}) : /* @__PURE__ */ e(
-            f,
+          /* @__PURE__ */ e(q, { asChild: !0, className: "lg:hidden", children: n.children ?? /* @__PURE__ */ e(I, { size: "sm", colorScheme: "gray", children: a.account__mobile.open ? /* @__PURE__ */ e(j, {}) : /* @__PURE__ */ e(
+            h,
             {
-              src: h,
+              src: f,
               alt: "",
               width: 100,
               height: 100,
               className: "size-10"
             }
           ) }) }),
-          /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(G, { children: /* @__PURE__ */ a(
-            F,
+          /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(J, { children: /* @__PURE__ */ o(
+            K,
             {
-              className: "top-[var(--top,0px)] flex h-[calc(100%-var(--top,0px))] w-full flex-col px-xl py-6",
+              className: "relative top-[var(--top,0px)] flex h-[calc(100%-var(--top,0px))] w-full flex-col px-xl py-6",
               style: {
-                "--top": i.offsetTop ?? "0px"
+                "--top": n.offsetTop ?? "0px"
               },
               children: [
-                /* @__PURE__ */ e(y, {}),
-                /* @__PURE__ */ e(O, {}),
-                s
+                /* @__PURE__ */ e(S, {}),
+                /* @__PURE__ */ e(C, {}),
+                /* @__PURE__ */ e(
+                  U,
+                  {
+                    rewardsUrl: n.rewardsUrl,
+                    betRecordsUrl: n.betRecordsUrl,
+                    transactionsUrl: n.transactionsUrl
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  _,
+                  {
+                    accountInfoUrl: n.accountInfoUrl,
+                    accountSecurityUrl: n.accountSecurityUrl,
+                    accountVerificationUrl: n.accountVerificationUrl,
+                    accountPaymentMethodsUrl: n.accountPaymentMethodsUrl
+                  }
+                )
               ]
             }
           ) }) })
         ]
       }
     ),
-    /* @__PURE__ */ a(
-      H,
+    /* @__PURE__ */ o(
+      Y,
       {
-        open: t.profile.open,
-        onOpenChange: (n) => {
-          t.profile.setOpen(n.open);
+        open: a.account.open,
+        onOpenChange: (c) => {
+          a.account.setOpen(c.open), a.accountSettings.setCollapsed(!0);
         },
         lazyMount: !0,
         unmountOnExit: !0,
@@ -222,107 +142,123 @@ function rt(i) {
           strategy: "fixed"
         },
         children: [
-          /* @__PURE__ */ e(V, { className: "hidden lg:flex", asChild: !0, children: i.children ?? /* @__PURE__ */ e(x, { size: "sm", colorScheme: "gray", children: /* @__PURE__ */ e(
-            f,
+          /* @__PURE__ */ e(Z, { className: "hidden lg:flex", asChild: !0, children: n.children ?? /* @__PURE__ */ e(I, { size: "sm", colorScheme: "gray", children: /* @__PURE__ */ e(
+            h,
             {
-              src: h,
+              src: f,
               alt: "",
               width: 48,
               height: 48,
               className: "size-10"
             }
           ) }) }),
-          /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(X, { children: /* @__PURE__ */ a(q, { className: "border-border-primary bg-bg-primary z-popover w-[23.438rem] rounded-xl border p-xl ui-open:animate-fade-in ui-closed:animate-fade-out", children: [
-            /* @__PURE__ */ e(y, {}),
-            /* @__PURE__ */ e(O, {}),
-            s
+          /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(ee, { children: /* @__PURE__ */ o(te, { className: "border-border-primary bg-bg-primary relative z-popover w-[23.438rem] overflow-hidden rounded-xl border p-xl ui-open:animate-fade-in ui-closed:animate-fade-out", children: [
+            /* @__PURE__ */ e(S, {}),
+            /* @__PURE__ */ e(C, {}),
+            /* @__PURE__ */ e(
+              U,
+              {
+                rewardsUrl: n.rewardsUrl,
+                betRecordsUrl: n.betRecordsUrl,
+                transactionsUrl: n.transactionsUrl
+              }
+            ),
+            /* @__PURE__ */ e(
+              _,
+              {
+                accountInfoUrl: n.accountInfoUrl,
+                accountSecurityUrl: n.accountSecurityUrl,
+                accountVerificationUrl: n.accountVerificationUrl,
+                accountPaymentMethodsUrl: n.accountPaymentMethodsUrl
+              }
+            )
           ] }) }) })
         ]
       }
     )
   ] });
 }
-function y() {
-  const t = k().data;
-  return /* @__PURE__ */ a("div", { className: "flex shrink-0 items-center gap-lg", children: [
+function S() {
+  const a = L().data;
+  return /* @__PURE__ */ o("div", { className: "flex shrink-0 items-center gap-lg", children: [
     /* @__PURE__ */ e(
-      f,
+      h,
       {
-        src: h,
+        src: f,
         alt: "",
         width: 48,
         height: 48,
         className: "size-12"
       }
     ),
-    /* @__PURE__ */ a("div", { className: "grow", children: [
-      /* @__PURE__ */ e("p", { className: "text-text-secondary-700 font-semibold leading-tight", children: t == null ? void 0 : t.name }),
-      /* @__PURE__ */ e("p", { className: "text-text-tertiary-600 leading-tight", children: (t == null ? void 0 : t.nickName) ?? (t == null ? void 0 : t.emailAddress) ?? (t == null ? void 0 : t.realName) })
+    /* @__PURE__ */ o("div", { className: "grow", children: [
+      /* @__PURE__ */ e("p", { className: "text-text-secondary-700 font-semibold leading-tight", children: a == null ? void 0 : a.name }),
+      /* @__PURE__ */ e("p", { className: "text-text-tertiary-600 leading-tight", children: (a == null ? void 0 : a.nickName) ?? (a == null ? void 0 : a.emailAddress) ?? (a == null ? void 0 : a.realName) })
     ] }),
-    /* @__PURE__ */ a(
-      M,
+    /* @__PURE__ */ o(
+      F,
       {
-        colorScheme: t != null && t.verified ? "success" : "danger",
+        colorScheme: a != null && a.verified ? "success" : "danger",
         className: "self-start",
         children: [
-          /* @__PURE__ */ e(U, {}),
-          /* @__PURE__ */ e($, { children: t != null && t.verified ? "Verified" : "Unverified" })
+          /* @__PURE__ */ e(G, {}),
+          /* @__PURE__ */ e(H, { children: a != null && a.verified ? "Verified" : "Unverified" })
         ]
       }
     )
   ] });
 }
-function O() {
-  var u, N;
-  const i = L(), t = S({
+function C() {
+  var v, N;
+  const n = w(), a = M({
     refetchInterval: 1e3
-  }), o = w(
-    P((c) => ({
-      profile: c.profile,
-      mobileProfile: c.mobileProfile,
-      depositWithdrawal: c.depositWithdrawal
+  }), c = d(
+    m((u) => ({
+      profile: u.account,
+      mobileProfile: u.account__mobile,
+      depositWithdrawal: u.depositWithdrawal
     }))
-  ), m = b((u = t.data) == null ? void 0 : u.balance, 0), s = b((N = t.data) == null ? void 0 : N.bonus, 0), n = m + s;
-  return /* @__PURE__ */ a("div", { className: "border-border-primary bg-bg-tertiary mt-3 rounded-xl border p-xl", children: [
+  ), s = b((v = a.data) == null ? void 0 : v.balance, 0), i = b((N = a.data) == null ? void 0 : N.bonus, 0), O = s + i;
+  return /* @__PURE__ */ o("div", { className: "border-border-primary bg-bg-tertiary mt-3 rounded-xl border p-xl", children: [
     /* @__PURE__ */ e("div", { className: "text-text-secondary-700 text-sm", children: "Total Balance" }),
-    /* @__PURE__ */ e("div", { className: "text-3xl font-bold", children: p(n, {
-      currency: i == null ? void 0 : i.currency.code,
+    /* @__PURE__ */ e("div", { className: "text-3xl font-bold", children: p(O, {
+      currency: n == null ? void 0 : n.currency.code,
       minDecimalPlaces: 2
     }) }),
-    /* @__PURE__ */ a("div", { className: "mt-1.5 flex gap-7xl", children: [
-      /* @__PURE__ */ a("div", { children: [
+    /* @__PURE__ */ o("div", { className: "mt-1.5 flex gap-7xl", children: [
+      /* @__PURE__ */ o("div", { children: [
         /* @__PURE__ */ e("p", { className: "text-text-secondary-700 text-2xs", children: "Deposit Balance" }),
-        /* @__PURE__ */ e("p", { className: "text-medium text-text-primary-brand", children: p(m, {
-          currency: i == null ? void 0 : i.currency.code,
+        /* @__PURE__ */ e("p", { className: "text-medium text-text-primary-brand", children: p(s, {
+          currency: n == null ? void 0 : n.currency.code,
           minDecimalPlaces: 2
         }) })
       ] }),
-      /* @__PURE__ */ a("div", { children: [
+      /* @__PURE__ */ o("div", { children: [
         /* @__PURE__ */ e("p", { className: "text-text-secondary-700 text-2xs", children: "Bonus Balance" }),
-        /* @__PURE__ */ e("p", { className: "text-medium text-text-primary-brand", children: p(s, {
-          currency: i == null ? void 0 : i.currency.code,
+        /* @__PURE__ */ e("p", { className: "text-medium text-text-primary-brand", children: p(i, {
+          currency: n == null ? void 0 : n.currency.code,
           minDecimalPlaces: 2
         }) })
       ] })
     ] }),
-    /* @__PURE__ */ a("div", { className: "mt-3 flex gap-lg", children: [
+    /* @__PURE__ */ o("div", { className: "mt-3 flex gap-lg", children: [
       /* @__PURE__ */ e(
-        g,
+        x,
         {
           size: "xs",
           variant: "outline",
           onClick: () => {
-            o.depositWithdrawal.setOpen(!0), o.depositWithdrawal.setTab("WITHDRAWAL"), o.profile.setOpen(!1), o.mobileProfile.setOpen(!1);
+            c.depositWithdrawal.setOpen(!0), c.depositWithdrawal.setTab("WITHDRAWAL"), c.profile.setOpen(!1), c.mobileProfile.setOpen(!1);
           },
           children: "Withdraw"
         }
       ),
       /* @__PURE__ */ e(
-        g,
+        x,
         {
           size: "xs",
           onClick: () => {
-            o.depositWithdrawal.setOpen(!0), o.depositWithdrawal.setTab("DEPOSIT"), o.profile.setOpen(!1), o.mobileProfile.setOpen(!1);
+            c.depositWithdrawal.setOpen(!0), c.depositWithdrawal.setTab("DEPOSIT"), c.profile.setOpen(!1), c.mobileProfile.setOpen(!1);
           },
           children: "Deposit"
         }
@@ -330,6 +266,215 @@ function O() {
     ] })
   ] });
 }
+function U(n) {
+  const a = R(), c = d(
+    m((i) => ({
+      account: i.account,
+      account__mobile: i.account__mobile,
+      accountSettings: i.accountSettings,
+      messages: i.messages
+    }))
+  ), s = P(
+    {},
+    { refetchInterval: 5e3 }
+  );
+  return /* @__PURE__ */ o("nav", { className: t.nav({ className: "mt-xl" }), children: [
+    /* @__PURE__ */ o("ul", { children: [
+      /* @__PURE__ */ e("li", { className: t.navItemRoot(), children: /* @__PURE__ */ o(
+        "button",
+        {
+          type: "button",
+          className: t.navItemLink(),
+          onClick: () => {
+            c.account.setOpen(!1), c.account__mobile.setOpen(!1), c.messages.setOpen(!0);
+          },
+          children: [
+            /* @__PURE__ */ e(y, { className: t.navItemIcon() }),
+            /* @__PURE__ */ e("span", { className: t.navItemLabel(), children: "Notifications" }),
+            /* @__PURE__ */ e("span", { className: t.navItemBadge(), "data-type": "warning", children: s.data ?? 0 }),
+            /* @__PURE__ */ e(r, { className: t.navItemIndicator() })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e("li", { className: t.navItemRoot(), children: /* @__PURE__ */ o(
+        l,
+        {
+          href: n.rewardsUrl ?? "/rewards",
+          className: t.navItemLink(),
+          onClick: () => {
+            c.account.setOpen(!1), c.account__mobile.setOpen(!1);
+          },
+          children: [
+            /* @__PURE__ */ e(Q, { className: t.navItemIcon() }),
+            /* @__PURE__ */ e("span", { className: t.navItemLabel(), children: "Rewards" }),
+            /* @__PURE__ */ e("span", { className: t.navItemBadge(), "data-type": "warning", children: "0" }),
+            /* @__PURE__ */ e(r, { className: t.navItemIndicator() })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e("ul", { children: /* @__PURE__ */ e("li", { className: t.navItemRoot(), children: /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        className: t.navItemLink(),
+        onClick: () => {
+          c.accountSettings.setCollapsed(!1);
+        },
+        children: [
+          /* @__PURE__ */ e($, { className: t.navItemIcon() }),
+          /* @__PURE__ */ e("span", { className: t.navItemLabel(), children: "Settings" }),
+          /* @__PURE__ */ e("span", { className: t.navItemBadge(), "data-type": "error", children: /* @__PURE__ */ e(z, {}) }),
+          /* @__PURE__ */ e(r, { className: t.navItemIndicator() })
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ o("ul", { children: [
+      /* @__PURE__ */ e("li", { className: t.navItemRoot(), children: /* @__PURE__ */ o(
+        l,
+        {
+          href: n.betRecordsUrl ?? "/bet-records",
+          className: t.navItemLink(),
+          onClick: () => {
+            c.account.setOpen(!1), c.account__mobile.setOpen(!1);
+          },
+          children: [
+            /* @__PURE__ */ e(W, { className: t.navItemIcon() }),
+            /* @__PURE__ */ e("span", { className: t.navItemLabel(), children: "Bet Records" }),
+            /* @__PURE__ */ e(r, { className: t.navItemIndicator() })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e("li", { className: t.navItemRoot(), children: /* @__PURE__ */ o(
+        l,
+        {
+          href: n.transactionsUrl ?? "/transactions",
+          className: t.navItemLink(),
+          onClick: () => {
+            c.account.setOpen(!1), c.account__mobile.setOpen(!1);
+          },
+          children: [
+            /* @__PURE__ */ e(T, { className: t.navItemIcon() }),
+            /* @__PURE__ */ e("span", { className: t.navItemLabel(), children: "Transactions" }),
+            /* @__PURE__ */ e(r, { className: t.navItemIndicator() })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e("ul", { children: /* @__PURE__ */ e("li", { className: t.navItemRoot(), children: /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        className: t.navItemLink(),
+        disabled: a.isPending,
+        onClick: () => {
+          a.mutate(), c.account.setOpen(!1), c.account__mobile.setOpen(!1);
+        },
+        children: [
+          /* @__PURE__ */ e(y, { className: t.navItemIcon() }),
+          /* @__PURE__ */ e("span", { className: t.navItemLabel(), children: "Log Out" }),
+          /* @__PURE__ */ e(r, { className: t.navItemIndicator() })
+        ]
+      }
+    ) }) })
+  ] });
+}
+function _(n) {
+  const a = d(
+    m((c) => ({
+      account: c.account,
+      account__mobile: c.account__mobile,
+      accountSettings: c.accountSettings
+    }))
+  );
+  return /* @__PURE__ */ o(
+    ae,
+    {
+      present: !a.accountSettings.collapsed,
+      lazyMount: !0,
+      className: "bg-bg-primary ui-open:animate-slide-in-right ui-closed:animate-slide-out-right absolute left-0 top-0 size-full overflow-y-auto",
+      children: [
+        /* @__PURE__ */ o("div", { className: "bg-bg-primary-alt flex items-center gap-xl px-xl py-md", children: [
+          /* @__PURE__ */ e(
+            I,
+            {
+              size: "2xs",
+              variant: "outline",
+              colorScheme: "gray",
+              onClick: () => {
+                a.accountSettings.setCollapsed(!0);
+              },
+              children: /* @__PURE__ */ e(B, {})
+            }
+          ),
+          /* @__PURE__ */ e("h2", { className: "text-text-primary-900 text-lg font-semibold", children: "Settings" })
+        ] }),
+        /* @__PURE__ */ e("nav", { className: t.nav({ className: "p-4" }), children: /* @__PURE__ */ o("ul", { children: [
+          /* @__PURE__ */ e("li", { className: t.navItemRoot(), children: /* @__PURE__ */ o(
+            l,
+            {
+              href: n.accountInfoUrl ?? "/account",
+              className: t.navItemLink(),
+              onClick: () => {
+                a.account.setOpen(!1), a.account__mobile.setOpen(!1), a.accountSettings.setCollapsed(!0);
+              },
+              children: [
+                /* @__PURE__ */ e(E, { className: t.navItemIcon() }),
+                /* @__PURE__ */ e("span", { className: t.navItemLabel(), children: "Account Info" }),
+                /* @__PURE__ */ e(r, { className: t.navItemIndicator() })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ e("li", { className: t.navItemRoot(), children: /* @__PURE__ */ o(
+            l,
+            {
+              href: n.accountSecurityUrl ?? "/account/security",
+              className: t.navItemLink(),
+              onClick: () => {
+                a.account.setOpen(!1), a.account__mobile.setOpen(!1), a.accountSettings.setCollapsed(!0);
+              },
+              children: [
+                /* @__PURE__ */ e(V, { className: t.navItemIcon() }),
+                /* @__PURE__ */ e("span", { className: t.navItemLabel(), children: "Security" }),
+                /* @__PURE__ */ e(r, { className: t.navItemIndicator() })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ e("li", { className: t.navItemRoot(), children: /* @__PURE__ */ o(
+            l,
+            {
+              href: n.accountVerificationUrl ?? "/account/verification",
+              className: t.navItemLink(),
+              onClick: () => {
+                a.account.setOpen(!1), a.account__mobile.setOpen(!1), a.accountSettings.setCollapsed(!0);
+              },
+              children: [
+                /* @__PURE__ */ e(D, { className: t.navItemIcon() }),
+                /* @__PURE__ */ e("span", { className: t.navItemLabel(), children: "Personal Verification" }),
+                /* @__PURE__ */ e(r, { className: t.navItemIndicator() })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ e("li", { className: t.navItemRoot(), children: /* @__PURE__ */ o(
+            l,
+            {
+              href: n.accountPaymentMethodsUrl ?? "/account/payment-methods",
+              className: t.navItemLink(),
+              onClick: () => {
+                a.account.setOpen(!1), a.account__mobile.setOpen(!1), a.accountSettings.setCollapsed(!0);
+              },
+              children: [
+                /* @__PURE__ */ e(A, { className: t.navItemIcon() }),
+                /* @__PURE__ */ e("span", { className: t.navItemLabel(), children: "Payment Methods" }),
+                /* @__PURE__ */ e(r, { className: t.navItemIndicator() })
+              ]
+            }
+          ) })
+        ] }) })
+      ]
+    }
+  );
+}
 export {
-  rt as Account
+  It as Account
 };