@opexa/portal-components 0.0.99 → 0.0.100

package/dist/client/utils/createRecipeContext.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { createSplitProps } from '../../utils/index.js';
+import { createSplitProps } from '../../utils/createSplitProps.js';
 export function createRecipeContext(recipe) {
     const RecipeContext = React.createContext(null);
     function useContext() {

package/dist/client/utils/toaster.d.ts

@@ -1,2 +1,2 @@
-import { type CreateToasterReturn } from '@ark-ui/react';
+import { type CreateToasterReturn } from '@ark-ui/react/toast';
 export declare const toaster: CreateToasterReturn;

package/dist/client/utils/toaster.js

@@ -1,4 +1,4 @@
-import { createToaster } from '@ark-ui/react';
+import { createToaster } from '@ark-ui/react/toast';
 export const toaster = createToaster({
     placement: 'top',
     duration: 5000,

package/dist/components/Account/Account.d.ts

@@ -1,23 +1,3 @@
-export interface AccountProps {
-    /**
-     * @default '0px'
-     * @example
-     * ```tsx
-     * offsetTop="1em"
-     * offsetTop="1rem"
-     * offsetTop="16px"
-     * ```
-     */
-    offsetTop?: string;
-    /** @default true */
-    shouldShowSettings?: boolean;
-    /** @default '/rewards' */
-    rewardsUrl?: string;
-    /** @default '/bet-records' */
-    betRecordsUrl?: string;
-    /** @default '/transactions' */
-    transactionsUrl?: string;
-    /** @default '/account' */
-    accountSettingsUrl?: string;
-}
-export declare function Account(props: AccountProps): import("react/jsx-runtime").JSX.Element;
+import type { AccountProps } from './Account.lazy';
+export declare function Account(props: AccountProps): import("react/jsx-runtime").JSX.Element | undefined;
+export type { AccountProps };

package/dist/components/Account/Account.js

@@ -1,119 +1,14 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Portal } from '@ark-ui/react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { twMerge } from 'tailwind-merge';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
 import { useShallow } from 'zustand/shallow';
-import { useAccountQuery, useBonusesCountQuery, useCashbackBonusesCountQuery, useGlobalStore, useLocaleInfo, useProfileCompletionQuery, useSignOutMutation, useUnreadMessagesCountQuery, useWalletQuery, } from '../../client/hooks/index.js';
-import { AlertCircleIcon, Bell01Icon, ChevronRightIcon, CoinsStacked02Icon, CoinsSwap02Icon, Gift01Icon, Logout01Icon, Settings02Icon, } from '../../icons/index.js';
-import avatarPlaceholder from '../../images/placeholder-avatar.png';
-import { Badge, Button, Drawer, Popover } from '../../ui/index.js';
-import { formatNumber, parseDecimal } from '../../utils/index.js';
-import { accountRecipe } from './account.recipe.js';
-const recipe = accountRecipe();
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+const Component = dynamic(() => import('./Account.lazy.js').then((m) => m.Account), {
+    ssr: false,
+    loading: () => null,
+});
 export function Account(props) {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        account: ctx.account,
-        account__mobile: ctx.account__mobile,
-    })));
-    const rewardsUrl = props.rewardsUrl ?? '/rewards';
-    const betRecordsUrl = props.betRecordsUrl ?? '/bet-records';
-    const transactionsUrl = props.transactionsUrl ?? '/transactions';
-    const accountSettingsUrl = props.accountSettingsUrl ?? '/account';
-    const shouldShowSettings = props.shouldShowSettings ?? true;
-    const [mobileOffsetTop, desktopOffsetTop] = Array.isArray(props.offsetTop)
-        ? props.offsetTop
-        : [props.offsetTop ?? '0px', props.offsetTop ?? '0px'];
-    return (_jsxs(_Fragment, { children: [_jsx(Drawer.Root, { open: globalStore.account__mobile.open, onOpenChange: (details) => {
-                    globalStore.account__mobile.setOpen(details.open);
-                }, lazyMount: true, unmountOnExit: true, children: _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsxs(Drawer.Content, { className: twMerge('relative', 'flex', 'flex-col', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'w-full', 'px-xl', 'py-6', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]'), style: {
-                                ['--offset-top-mobile']: mobileOffsetTop,
-                                ['--offset-top-desktop']: desktopOffsetTop,
-                            }, children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { rewardsUrl: rewardsUrl, betRecordsUrl: betRecordsUrl, transactionsUrl: transactionsUrl, accountSettingsUrl: accountSettingsUrl, shouldShowSettings: shouldShowSettings })] }) }) }) }), _jsx(Popover.Root, { open: globalStore.account.open, onOpenChange: (details) => {
-                    globalStore.account.setOpen(details.open);
-                }, lazyMount: true, unmountOnExit: true, positioning: {
-                    placement: 'bottom',
-                    strategy: 'fixed',
-                }, ids: {
-                    trigger: 'opexa-portal-components:account-trigger',
-                }, children: _jsx(Portal, { children: _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { 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: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { rewardsUrl: rewardsUrl, betRecordsUrl: betRecordsUrl, transactionsUrl: transactionsUrl, accountSettingsUrl: accountSettingsUrl, shouldShowSettings: shouldShowSettings })] }) }) }) })] }));
-}
-function Profile() {
-    const accountQuery = useAccountQuery();
-    const account = accountQuery.data;
-    return (_jsxs("div", { className: "flex shrink-0 items-center gap-lg", children: [_jsx(Image, { src: avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-12" }), _jsxs("div", { className: "grow", children: [_jsx("p", { className: "text-text-secondary-700 font-semibold leading-tight", children: account?.name }), _jsxs("div", { className: "flex", children: [_jsx("p", { className: "text-text-tertiary-600 grow items-center leading-tight", children: account?.id }), _jsxs(Badge.Root, { colorScheme: account?.verified ? 'success' : 'danger', className: "self-start", children: [_jsx(Badge.Indicator, {}), _jsx(Badge.Label, { children: account?.verified ? 'Verified' : 'Unverified' })] })] })] })] }));
-}
-function Wallet() {
-    const localeInfo = useLocaleInfo();
-    const walletQuery = useWalletQuery({
-        refetchInterval: 1000,
-    });
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        profile: ctx.account,
-        mobileProfile: ctx.account__mobile,
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
-    const depositBalance = parseDecimal(walletQuery.data?.balance, 0);
-    const bonusBalance = parseDecimal(walletQuery.data?.bonus, 0);
-    const totalBalance = depositBalance + bonusBalance;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "border-border-primary bg-bg-tertiary mt-3 rounded-xl border p-xl", children: [_jsx("div", { className: "text-text-secondary-700 text-sm", children: "Total Balance" }), _jsx("div", { className: "text-3xl font-bold", children: formatNumber(totalBalance, {
-                            currency: localeInfo?.currency.code,
-                            minDecimalPlaces: 2,
-                        }) }), _jsxs("div", { className: "mt-1.5 flex gap-7xl", children: [_jsxs("div", { children: [_jsx("p", { className: "text-text-secondary-700 text-2xs", children: "Deposit Balance" }), _jsx("p", { className: "text-medium text-text-primary-brand", children: formatNumber(depositBalance, {
-                                            currency: localeInfo?.currency.code,
-                                            minDecimalPlaces: 2,
-                                        }) })] }), _jsxs("div", { children: [_jsx("p", { className: "text-text-secondary-700 text-2xs", children: "Bonus Balance" }), _jsx("p", { className: "text-medium text-text-primary-brand", children: formatNumber(bonusBalance, {
-                                            currency: localeInfo?.currency.code,
-                                            minDecimalPlaces: 2,
-                                        }) })] })] })] }), ' ', _jsxs("div", { className: "mt-3 flex gap-lg", children: [_jsx(Button, { size: "xs", variant: "outline", onClick: () => {
-                            globalStore.depositWithdrawal.setOpen(true);
-                            globalStore.depositWithdrawal.setTab('WITHDRAWAL');
-                            globalStore.profile.setOpen(false);
-                            globalStore.mobileProfile.setOpen(false);
-                        }, children: "Withdraw" }), _jsx(Button, { size: "xs", onClick: () => {
-                            globalStore.depositWithdrawal.setOpen(true);
-                            globalStore.depositWithdrawal.setTab('DEPOSIT');
-                            globalStore.profile.setOpen(false);
-                            globalStore.mobileProfile.setOpen(false);
-                        }, children: "Deposit" })] })] }));
-}
-function Links(props) {
-    const signOutMutation = useSignOutMutation();
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        account: ctx.account,
-        account__mobile: ctx.account__mobile,
-        messages: ctx.messages,
-    })));
-    const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, { refetchInterval: 5000 });
-    const unreadMessagesCount = unreadMessagesCountQuery.data ?? 0;
-    const profileCompletionQuery = useProfileCompletionQuery();
-    const profileCompletion = profileCompletionQuery.data;
-    const profileCompletionPercentage = parseDecimal(profileCompletion?.completionPercentage, 0);
-    const bonusesCountQuery = useBonusesCountQuery();
-    const bonusesCount = bonusesCountQuery.data ?? 0;
-    const cashbackBonusesCountQuery = useCashbackBonusesCountQuery();
-    const cashbackBonusesCount = cashbackBonusesCountQuery.data ?? 0;
-    const rewardsCount = bonusesCount + cashbackBonusesCount;
-    return (_jsxs("nav", { className: recipe.nav({ className: 'mt-xl' }), children: [_jsxs("ul", { children: [_jsx("li", { className: recipe.navItemRoot(), children: _jsxs("button", { type: "button", className: recipe.navItemLink(), onClick: () => {
-                                globalStore.account.setOpen(false);
-                                globalStore.account__mobile.setOpen(false);
-                                globalStore.messages.setOpen(true);
-                            }, children: [_jsx(Bell01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Notifications" }), unreadMessagesCount > 0 && (_jsx("span", { className: recipe.navItemBadge(), "data-type": "warning", children: unreadMessagesCount })), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }), _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.rewardsUrl, className: recipe.navItemLink(), onClick: () => {
-                                globalStore.account.setOpen(false);
-                                globalStore.account__mobile.setOpen(false);
-                            }, children: [_jsx(Gift01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Rewards" }), rewardsCount > 0 && (_jsx("span", { className: recipe.navItemBadge(), "data-type": "warning", children: rewardsCount })), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) })] }), props.shouldShowSettings && (_jsx("ul", { children: _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.accountSettingsUrl, className: recipe.navItemLink(), onClick: () => {
-                            globalStore.account.setOpen(false);
-                            globalStore.account__mobile.setOpen(false);
-                        }, children: [_jsx(Settings02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Settings" }), profileCompletionPercentage < 100 && (_jsx("span", { className: recipe.navItemBadge(), "data-type": "error", children: _jsx(AlertCircleIcon, {}) })), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }) })), _jsxs("ul", { children: [_jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.betRecordsUrl, className: recipe.navItemLink(), onClick: () => {
-                                globalStore.account.setOpen(false);
-                                globalStore.account__mobile.setOpen(false);
-                            }, children: [_jsx(CoinsStacked02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Bet Records" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }), _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.transactionsUrl, className: recipe.navItemLink(), onClick: () => {
-                                globalStore.account.setOpen(false);
-                                globalStore.account__mobile.setOpen(false);
-                            }, children: [_jsx(CoinsSwap02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Transactions" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) })] }), _jsx("ul", { children: _jsx("li", { className: recipe.navItemRoot(), children: _jsxs("button", { type: "button", className: recipe.navItemLink(), disabled: signOutMutation.isPending, onClick: () => {
-                            signOutMutation.mutate();
-                            globalStore.account.setOpen(false);
-                            globalStore.account__mobile.setOpen(false);
-                        }, children: [_jsx(Logout01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Log Out" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }) })] }));
+    const touched = useGlobalStore(useShallow((ctx) => ctx.account['~touched']));
+    if (touched)
+        return _jsx(Component, { ...props });
 }

package/dist/components/Account/Account.lazy.d.ts

@@ -0,0 +1,23 @@
+export interface AccountProps {
+    /**
+     * @default '0px'
+     * @example
+     * ```tsx
+     * offsetTop="1em"
+     * offsetTop="1rem"
+     * offsetTop="16px"
+     * ```
+     */
+    offsetTop?: string;
+    /** @default true */
+    shouldShowSettings?: boolean;
+    /** @default '/rewards' */
+    rewardsUrl?: string;
+    /** @default '/bet-records' */
+    betRecordsUrl?: string;
+    /** @default '/transactions' */
+    transactionsUrl?: string;
+    /** @default '/account' */
+    accountSettingsUrl?: string;
+}
+export declare function Account(props: AccountProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Account/Account.lazy.js

@@ -0,0 +1,138 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
+import { useBonusesCountQuery } from '../../client/hooks/useBonusesCountQuery.js';
+import { useCashbackBonusesCountQuery } from '../../client/hooks/useCashbackBonusesCountQuery.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useProfileCompletionQuery } from '../../client/hooks/useProfileCompletionQuery.js';
+import { useSignOutMutation } from '../../client/hooks/useSignOutMutation.js';
+import { useUnreadMessagesCountQuery } from '../../client/hooks/useUnreadMessagesCountQuery.js';
+import { useWalletQuery } from '../../client/hooks/useWalletQuery.js';
+import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
+import { Bell01Icon } from '../../icons/Bell01Icon.js';
+import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
+import { CoinsStacked02Icon } from '../../icons/CoinsStacked02Icon.js';
+import { CoinsSwap02Icon } from '../../icons/CoinsSwap02Icon.js';
+import { Gift01Icon } from '../../icons/Gift01Icon.js';
+import { Logout01Icon } from '../../icons/Logout01Icon.js';
+import { Settings02Icon } from '../../icons/Settings02Icon.js';
+import avatarPlaceholder from '../../images/placeholder-avatar.png';
+import { Badge } from '../../ui/Badge/index.js';
+import { Button } from '../../ui/Button/index.js';
+import { Drawer } from '../../ui/Drawer/index.js';
+import { Popover } from '../../ui/Popover/index.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { accountRecipe } from './account.recipe.js';
+const recipe = accountRecipe();
+export function Account(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        account: ctx.account,
+        account__mobile: ctx.account__mobile,
+    })));
+    const rewardsUrl = props.rewardsUrl ?? '/rewards';
+    const betRecordsUrl = props.betRecordsUrl ?? '/bet-records';
+    const transactionsUrl = props.transactionsUrl ?? '/transactions';
+    const accountSettingsUrl = props.accountSettingsUrl ?? '/account';
+    const shouldShowSettings = props.shouldShowSettings ?? true;
+    const [mobileOffsetTop, desktopOffsetTop] = Array.isArray(props.offsetTop)
+        ? props.offsetTop
+        : [props.offsetTop ?? '0px', props.offsetTop ?? '0px'];
+    return (_jsxs(_Fragment, { children: [_jsx(Drawer.Root, { open: globalStore.account__mobile.open, onOpenChange: (details) => {
+                    globalStore.account__mobile.setOpen(details.open);
+                }, lazyMount: true, unmountOnExit: true, children: _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsxs(Drawer.Content, { className: twMerge('relative', 'flex', 'flex-col', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'w-full', 'px-xl', 'py-6', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]'), style: {
+                                ['--offset-top-mobile']: mobileOffsetTop,
+                                ['--offset-top-desktop']: desktopOffsetTop,
+                            }, children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { rewardsUrl: rewardsUrl, betRecordsUrl: betRecordsUrl, transactionsUrl: transactionsUrl, accountSettingsUrl: accountSettingsUrl, shouldShowSettings: shouldShowSettings })] }) }) }) }), _jsx(Popover.Root, { open: globalStore.account.open, onOpenChange: (details) => {
+                    globalStore.account.setOpen(details.open);
+                }, lazyMount: true, unmountOnExit: true, positioning: {
+                    placement: 'bottom',
+                    strategy: 'fixed',
+                }, ids: {
+                    trigger: 'opexa-portal-components:account-trigger',
+                }, children: _jsx(Portal, { children: _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { 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: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { rewardsUrl: rewardsUrl, betRecordsUrl: betRecordsUrl, transactionsUrl: transactionsUrl, accountSettingsUrl: accountSettingsUrl, shouldShowSettings: shouldShowSettings })] }) }) }) })] }));
+}
+function Profile() {
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    return (_jsxs("div", { className: "flex shrink-0 items-center gap-lg", children: [_jsx(Image, { src: avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-12" }), _jsxs("div", { className: "grow", children: [_jsx("p", { className: "text-text-secondary-700 font-semibold leading-tight", children: account?.name }), _jsxs("div", { className: "flex", children: [_jsx("p", { className: "text-text-tertiary-600 grow items-center leading-tight", children: account?.id }), _jsxs(Badge.Root, { colorScheme: account?.verified ? 'success' : 'danger', className: "self-start", children: [_jsx(Badge.Indicator, {}), _jsx(Badge.Label, { children: account?.verified ? 'Verified' : 'Unverified' })] })] })] })] }));
+}
+function Wallet() {
+    const localeInfo = useLocaleInfo();
+    const walletQuery = useWalletQuery({
+        refetchInterval: 1000,
+    });
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        profile: ctx.account,
+        mobileProfile: ctx.account__mobile,
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const depositBalance = parseDecimal(walletQuery.data?.balance, 0);
+    const bonusBalance = parseDecimal(walletQuery.data?.bonus, 0);
+    const totalBalance = depositBalance + bonusBalance;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "border-border-primary bg-bg-tertiary mt-3 rounded-xl border p-xl", children: [_jsx("div", { className: "text-text-secondary-700 text-sm", children: "Total Balance" }), _jsx("div", { className: "text-3xl font-bold", children: formatNumber(totalBalance, {
+                            currency: localeInfo?.currency.code,
+                            minDecimalPlaces: 2,
+                        }) }), _jsxs("div", { className: "mt-1.5 flex gap-7xl", children: [_jsxs("div", { children: [_jsx("p", { className: "text-text-secondary-700 text-2xs", children: "Deposit Balance" }), _jsx("p", { className: "text-medium text-text-primary-brand", children: formatNumber(depositBalance, {
+                                            currency: localeInfo?.currency.code,
+                                            minDecimalPlaces: 2,
+                                        }) })] }), _jsxs("div", { children: [_jsx("p", { className: "text-text-secondary-700 text-2xs", children: "Bonus Balance" }), _jsx("p", { className: "text-medium text-text-primary-brand", children: formatNumber(bonusBalance, {
+                                            currency: localeInfo?.currency.code,
+                                            minDecimalPlaces: 2,
+                                        }) })] })] })] }), ' ', _jsxs("div", { className: "mt-3 flex gap-lg", children: [_jsx(Button, { size: "xs", variant: "outline", onClick: () => {
+                            globalStore.depositWithdrawal.setOpen(true);
+                            globalStore.depositWithdrawal.setTab('WITHDRAWAL');
+                            globalStore.profile.setOpen(false);
+                            globalStore.mobileProfile.setOpen(false);
+                        }, children: "Withdraw" }), _jsx(Button, { size: "xs", onClick: () => {
+                            globalStore.depositWithdrawal.setOpen(true);
+                            globalStore.depositWithdrawal.setTab('DEPOSIT');
+                            globalStore.profile.setOpen(false);
+                            globalStore.mobileProfile.setOpen(false);
+                        }, children: "Deposit" })] })] }));
+}
+function Links(props) {
+    const signOutMutation = useSignOutMutation();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        account: ctx.account,
+        account__mobile: ctx.account__mobile,
+        messages: ctx.messages,
+    })));
+    const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, { refetchInterval: 5000 });
+    const unreadMessagesCount = unreadMessagesCountQuery.data ?? 0;
+    const profileCompletionQuery = useProfileCompletionQuery();
+    const profileCompletion = profileCompletionQuery.data;
+    const profileCompletionPercentage = parseDecimal(profileCompletion?.completionPercentage, 0);
+    const bonusesCountQuery = useBonusesCountQuery();
+    const bonusesCount = bonusesCountQuery.data ?? 0;
+    const cashbackBonusesCountQuery = useCashbackBonusesCountQuery();
+    const cashbackBonusesCount = cashbackBonusesCountQuery.data ?? 0;
+    const rewardsCount = bonusesCount + cashbackBonusesCount;
+    return (_jsxs("nav", { className: recipe.nav({ className: 'mt-xl' }), children: [_jsxs("ul", { children: [_jsx("li", { className: recipe.navItemRoot(), children: _jsxs("button", { type: "button", className: recipe.navItemLink(), onClick: () => {
+                                globalStore.account.setOpen(false);
+                                globalStore.account__mobile.setOpen(false);
+                                globalStore.messages.setOpen(true);
+                            }, children: [_jsx(Bell01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Notifications" }), unreadMessagesCount > 0 && (_jsx("span", { className: recipe.navItemBadge(), "data-type": "warning", children: unreadMessagesCount })), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }), _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.rewardsUrl, className: recipe.navItemLink(), onClick: () => {
+                                globalStore.account.setOpen(false);
+                                globalStore.account__mobile.setOpen(false);
+                            }, children: [_jsx(Gift01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Rewards" }), rewardsCount > 0 && (_jsx("span", { className: recipe.navItemBadge(), "data-type": "warning", children: rewardsCount })), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) })] }), props.shouldShowSettings && (_jsx("ul", { children: _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.accountSettingsUrl, className: recipe.navItemLink(), onClick: () => {
+                            globalStore.account.setOpen(false);
+                            globalStore.account__mobile.setOpen(false);
+                        }, children: [_jsx(Settings02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Settings" }), profileCompletionPercentage < 100 && (_jsx("span", { className: recipe.navItemBadge(), "data-type": "error", children: _jsx(AlertCircleIcon, {}) })), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }) })), _jsxs("ul", { children: [_jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.betRecordsUrl, className: recipe.navItemLink(), onClick: () => {
+                                globalStore.account.setOpen(false);
+                                globalStore.account__mobile.setOpen(false);
+                            }, children: [_jsx(CoinsStacked02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Bet Records" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }), _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.transactionsUrl, className: recipe.navItemLink(), onClick: () => {
+                                globalStore.account.setOpen(false);
+                                globalStore.account__mobile.setOpen(false);
+                            }, children: [_jsx(CoinsSwap02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Transactions" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) })] }), _jsx("ul", { children: _jsx("li", { className: recipe.navItemRoot(), children: _jsxs("button", { type: "button", className: recipe.navItemLink(), disabled: signOutMutation.isPending, onClick: () => {
+                            signOutMutation.mutate();
+                            globalStore.account.setOpen(false);
+                            globalStore.account__mobile.setOpen(false);
+                        }, children: [_jsx(Logout01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Log Out" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }) })] }));
+}

package/dist/components/Account/AccountTrigger.js

@@ -4,9 +4,9 @@ import { ark } from '@ark-ui/react';
 import Image from 'next/image';
 import { useMediaQuery } from 'usehooks-ts';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks/index.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import avatarPlaceholder from '../../images/placeholder-avatar.png';
-import { IconButton } from '../../ui/index.js';
+import { IconButton } from '../../ui/IconButton/index.js';
 export function AccountTrigger({ asChild, children, ...props }) {
     const desktop = useMediaQuery('(min-width: 1024px)', {
         defaultValue: true,

package/dist/components/AccountInfo/AccountInfo.js

@@ -7,11 +7,17 @@ import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
-import { useAccountQuery, useLocaleInfo, useMobileNumberParser, useUpdateAccountMutation, } from '../../client/hooks/index.js';
-import { toaster } from '../../client/utils/index.js';
-import { FacebookIcon, GoogleIcon } from '../../icons/index.js';
+import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useMobileNumberParser } from '../../client/hooks/useMobileNumberParser.js';
+import { useUpdateAccountMutation } from '../../client/hooks/useUpdateAccountMutation.js';
+import { toaster } from '../../client/utils/toaster.js';
+import { FacebookIcon } from '../../icons/FacebookIcon.js';
+import { GoogleIcon } from '../../icons/GoogleIcon.js';
 import avatar from '../../images/placeholder-avatar.png';
-import { Button, Field, IconButton } from '../../ui/index.js';
+import { Button } from '../../ui/Button/index.js';
+import { Field } from '../../ui/Field/index.js';
+import { IconButton } from '../../ui/IconButton/index.js';
 export function AccountInfo(props) {
     return (_jsxs("div", { className: twMerge('space-y-3xl', props.className), children: [_jsx(ProfileInfo, {}), _jsx(ContactInfo, {}), _jsx(PersonalInfo, {}), _jsx(SSO, {})] }));
 }

package/dist/components/AccountSecurity/AccountSecurity.js

@@ -5,11 +5,20 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
-import { useProfileCompletionQuery, useUpdateAccountMutation, } from '../../client/hooks/index.js';
-import { toaster } from '../../client/utils/index.js';
+import { useProfileCompletionQuery } from '../../client/hooks/useProfileCompletionQuery.js';
+import { useUpdateAccountMutation } from '../../client/hooks/useUpdateAccountMutation.js';
+import { toaster } from '../../client/utils/toaster.js';
 import { SECRET_QUESTIONS, SECRET_QUESTIONS_MAP } from '../../constants/index.js';
-import { AlertCircleIcon, CheckIcon, CheckVerified02Icon, ChevronDownIcon, EyeIcon, EyeOffIcon, } from '../../icons/index.js';
-import { Button, Field, PasswordInput, Select } from '../../ui/index.js';
+import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import { CheckVerified02Icon } from '../../icons/CheckVerified02Icon.js';
+import { ChevronDownIcon } from '../../icons/ChevronDownIcon.js';
+import { EyeIcon } from '../../icons/EyeIcon.js';
+import { EyeOffIcon } from '../../icons/EyeOffIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Field } from '../../ui/Field/index.js';
+import { PasswordInput } from '../../ui/PasswordInput/index.js';
+import { Select } from '../../ui/Select/index.js';
 export function AccountSecurity(props) {
     return (_jsxs("div", { className: twMerge('space-y-3xl', props.className), children: [_jsx(LoginPassword, {}), _jsx(TransactionPassword, {})] }));
 }

package/dist/components/AccountVerification/AccountVerification.js

@@ -3,9 +3,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react';
 import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore, useMemberVerificationQuery, useProfileCompletionQuery, } from '../../client/hooks/index.js';
-import { AlertCircleIcon, CheckVerified02Icon, CreditCard02Icon, FaceIdIcon, FileCheck02Icon, FileSearch02Icon, FileX02Icon, Globe05Icon, } from '../../icons/index.js';
-import { Button } from '../../ui/index.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
+import { useProfileCompletionQuery } from '../../client/hooks/useProfileCompletionQuery.js';
+import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
+import { CheckVerified02Icon } from '../../icons/CheckVerified02Icon.js';
+import { CreditCard02Icon } from '../../icons/CreditCard02Icon.js';
+import { FaceIdIcon } from '../../icons/FaceIdIcon.js';
+import { FileCheck02Icon } from '../../icons/FileCheck02Icon.js';
+import { FileSearch02Icon } from '../../icons/FileSearch02Icon.js';
+import { FileX02Icon } from '../../icons/FileX02Icon.js';
+import { Globe05Icon } from '../../icons/Globe05Icon.js';
+import { Button } from '../../ui/Button/index.js';
 export function AccountVerification(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         kyc: ctx.kyc,

package/dist/components/Banner/Banner.d.ts

@@ -1,10 +1,10 @@
 import type { ImageProps } from 'next/image';
-interface Banner {
+interface BannerEntry {
     src: ImageProps['src'];
     redirectUrl?: string;
 }
 export interface BannerProps {
-    banners: Banner[];
+    banners: BannerEntry[];
     className?: string;
 }
 export declare function Banner(props: BannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Banner/Banner.js

@@ -6,7 +6,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { Fragment, useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { dataAttr } from '../../utils/index.js';
+import { dataAttr } from '../../utils/dataAttr.js';
 export function Banner(props) {
     const [emblaRef, emblaApi] = useEmblaCarousel({
         loop: true,
@@ -31,7 +31,7 @@ export function Banner(props) {
     }, [emblaApi]);
     return (_jsxs("div", { className: twMerge('relative', props.className), children: [_jsx("div", { ref: emblaRef, className: "overflow-hidden", children: _jsx("div", { className: "flex gap-2", children: props.banners.map((banner, index) => {
                         const img = (_jsx(Image, { src: banner.src, alt: "", width: 1200, height: 300, className: "block h-auto w-full rounded-xl", priority: index === 0 }));
-                        return (_jsx(Fragment, { children: !banner.redirectUrl ? (_jsx("div", { className: "w-full shrink-0", children: img })) : (_jsx(Link, { href: banner.redirectUrl, className: "block w-full shrink-0", children: img })) }, index));
+                        return (_jsx(Fragment, { children: !banner.redirectUrl ? (_jsx("div", { className: "w-full shrink-0", children: img })) : (_jsx(Link, { href: banner.redirectUrl, className: "block w-full shrink-0", "aria-label": `Open ${banner.redirectUrl}`, children: img })) }, index));
                     }) }) }), _jsx("div", { className: "absolute bottom-lg left-1/2 flex w-fit -translate-x-1/2 gap-2", children: props.banners.map((_, index) => (_jsx("button", { type: "button", className: "ui-active:bg-brand-500 bg-gray-300 size-3 shrink-0 rounded-full border border-white transition-all duration-300 ui-active:w-9", onClick: () => {
                         emblaApi?.scrollTo(index);
                     }, "aria-label": `Go to slide ${index + 1}`, "data-active": dataAttr(index === currentIndex) }, index))) })] }));

package/dist/components/BetRecords/BetRecords.client.d.ts

@@ -0,0 +1,7 @@
+import type { GameProvider, GameType } from '../../types';
+export interface BetRecordsProps {
+    gameTypes: GameType[];
+    gameProviders: GameProvider[];
+    className?: string;
+}
+export declare function BetRecords__client(props: BetRecordsProps): import("react/jsx-runtime").JSX.Element;