@opexa/portal-components 0.0.46 → 0.0.48

package/dist/components/Account/Account.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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, useGlobalStore, useLocaleInfo, useSignOutMutation, useUnreadMessagesCountQuery, useWalletQuery, } from '../../client/hooks/index.js';
 import { AlertCircleIcon, ChevronRightIcon, CoinsStacked02Icon, CoinsSwap02Icon, Gift01Icon, Logout01Icon, Settings02Icon, XIcon, } from '../../icons/index.js';
@@ -20,10 +21,14 @@ export function Account(props) {
     const betRecordsUrl = props.betRecordsUrl ?? '/bet-records';
     const transactionsUrl = props.transactionsUrl ?? '/transactions';
     const accountSettingsUrl = props.accountSettingsUrl ?? '/account';
+    const [mobileOffsetTop, desktopOffsetTop] = Array.isArray(props.offsetTop)
+        ? props.offsetTop
+        : [props.offsetTop ?? '0px', props.offsetTop ?? '0px'];
     return (_jsxs(_Fragment, { children: [_jsxs(Drawer.Root, { open: globalStore.account__mobile.open, onOpenChange: (details) => {
                     globalStore.account__mobile.setOpen(details.open);
-                }, lazyMount: true, unmountOnExit: true, children: [_jsx(Drawer.Trigger, { asChild: true, className: "lg:hidden", children: props.children ?? (_jsx(IconButton, { size: "sm", colorScheme: "gray", children: globalStore.account__mobile.open ? (_jsx(XIcon, {})) : (_jsx(Image, { src: avatarPlaceholder, alt: "", width: 100, height: 100, className: "size-10" })) })) }), _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsxs(Drawer.Content, { className: "relative top-[var(--top,0px)] flex h-[calc(100%-var(--top,0px))] w-full flex-col px-xl py-6", style: {
-                                    ['--top']: props.offsetTop ?? '0px',
+                }, lazyMount: true, unmountOnExit: true, children: [_jsx(Drawer.Trigger, { asChild: true, className: "lg:hidden", children: props.children ?? (_jsx(IconButton, { size: "sm", colorScheme: "gray", children: globalStore.account__mobile.open ? (_jsx(XIcon, {})) : (_jsx(Image, { src: avatarPlaceholder, alt: "", width: 100, height: 100, className: "size-10" })) })) }), _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 })] }) }) })] }), _jsxs(Popover.Root, { open: globalStore.account.open, onOpenChange: (details) => {
                     globalStore.account.setOpen(details.open);
                 }, lazyMount: true, unmountOnExit: true, positioning: {

package/dist/components/BetRecords/BetRecords.js

@@ -29,7 +29,7 @@ export function BetRecords(props) {
             delimiter: capitalize.delimiters.UNDERSCORE,
         }),
     });
-    const { page, pageSize, hasNextPage, hasPrevPage, next, prev, rows, setPageSize, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useBetRecordsQuery, {
+    const { page, hasNextPage, hasPrevPage, next, prev, rows, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useBetRecordsQuery, {
         filter: {
             ...(state.type && {
                 game__type: {
@@ -58,7 +58,7 @@ export function BetRecords(props) {
             }),
         },
     });
-    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold leading-tight", children: "Bet Records" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm leading-tight", children: "Review your betting history" }), _jsx("div", { className: "mt-lg", children: _jsxs(SegmentGroup.Root, { value: state.type, onValueChange: (details) => {
+    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-sm font-semibold leading-tight lg:text-lg", children: "Bet Records" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm leading-tight", children: "Review your betting history" }), _jsx("div", { className: "mt-lg lg:mt-2xl", children: _jsxs(SegmentGroup.Root, { value: state.type, onValueChange: (details) => {
                         firstPage();
                         setState({
                             type: z
@@ -67,7 +67,7 @@ export function BetRecords(props) {
                         });
                     }, children: [props.gameTypes.map((type) => (_jsxs(SegmentGroup.Item, { value: type, children: [_jsx(SegmentGroup.ItemText, { children: capitalize(type, {
                                         delimiter: capitalize.delimiters.UNDERSCORE,
-                                    }) }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }, type))), _jsx(SegmentGroup.Indicator, {})] }) }), _jsx("h3", { className: "text-text-secondary-700 mt-3xl text-sm font-semibold", children: "Table" }), _jsxs("div", { className: "mt-xl flex flex-col gap-lg lg:flex-row lg:items-center", children: [_jsxs(DatePicker.Root, { lazyMount: true, unmountOnExit: true, value: [state.timestamp?.start, state.timestamp?.end]
+                                    }) }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }, type))), _jsx(SegmentGroup.Indicator, {})] }) }), _jsx("div", { className: "border-border-secondary mt-2xl hidden border-t lg:block" }), _jsx("h3", { className: "text-text-secondary-700 mt-3xl text-sm font-semibold", children: "Table" }), _jsxs("div", { className: "mt-xl flex flex-col gap-lg lg:flex-row lg:items-center", children: [_jsxs(DatePicker.Root, { lazyMount: true, unmountOnExit: true, value: [state.timestamp?.start, state.timestamp?.end]
                             .filter(Boolean)
                             .map((d) => parseDate(d)), onValueChange: (details) => {
                             firstPage();
@@ -134,7 +134,7 @@ export function BetRecords(props) {
                                                             delimiter: capitalize.delimiters.UNDERSCORE,
                                                         }) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, status))) }) }) }) })] })] }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
                     ? 'Fetching latest bet records...'
-                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-3xl', 'border-y', 'border-border-primary', 'relative', 'left-1/2', 'right-1/2', '-mx-[50dvw]', 'w-dvw', 'lg:-mx-0', 'lg:-ml-0', 'lg:left-0', 'lg:right-0', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-primary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-xl rounded-b-none border-b", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Bet Time" }), _jsx(Table.Heading, { children: "Settlement Time" }), _jsx(Table.Heading, { children: "Bet Content" }), _jsx(Table.Heading, { children: "Odds" }), _jsx(Table.Heading, { children: "Bet Amount" }), _jsx(Table.Heading, { children: "Valid Bet" }), _jsx(Table.Heading, { children: "Settled Amount" }), _jsx(Table.Heading, { children: "Jackpot Contribution" }), _jsx(Table.Heading, { children: "Jackpot Payout" }), _jsx(Table.Heading, { children: "Bet Status" }), _jsx(Table.Heading, { children: "Game Name" }), _jsx(Table.Heading, { children: "Vendor Round ID" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsxs(Table.Cell, { className: "!py-1", children: [_jsx("div", { className: "leading-tight", children: format(data.dateTimeCreated, 'MM/dd/yyyy', {
+                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'relative', 'left-1/2', 'right-1/2', '-mx-[50dvw]', 'w-dvw', 'lg:mt-3xl', 'lg:-mx-0', 'lg:-ml-0', 'lg:left-0', 'lg:right-0', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Bet Time" }), _jsx(Table.Heading, { children: "Settlement Time" }), _jsx(Table.Heading, { children: "Bet Content" }), _jsx(Table.Heading, { children: "Odds" }), _jsx(Table.Heading, { children: "Bet Amount" }), _jsx(Table.Heading, { children: "Valid Bet" }), _jsx(Table.Heading, { children: "Settled Amount" }), _jsx(Table.Heading, { children: "Jackpot Contribution" }), _jsx(Table.Heading, { children: "Jackpot Payout" }), _jsx(Table.Heading, { children: "Bet Status" }), _jsx(Table.Heading, { children: "Game Name" }), _jsx(Table.Heading, { children: "Vendor Round ID" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsxs(Table.Cell, { className: "!py-1", children: [_jsx("div", { className: "leading-tight", children: format(data.dateTimeCreated, 'MM/dd/yyyy', {
                                                             in: tz(localeInfo.timezone),
                                                         }) }), _jsx("div", { className: "text-text-tertiary-600 leading-tight", children: format(data.dateTimeCreated, 'hh:mm a', {
                                                             in: tz(localeInfo.timezone),
@@ -163,24 +163,13 @@ export function BetRecords(props) {
                                                             ? 'blue'
                                                             : 'danger', children: _jsx(Badge.Label, { children: capitalize(data.status, {
                                                             delimiter: capitalize.delimiters.UNDERSCORE,
-                                                        }) }) }) }), _jsx(Table.Cell, { className: "!py-1", children: data.game.name }), _jsx(Table.Cell, { className: "!py-1", children: data.vendorRoundId })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center gap-lg px-4 py-3", children: [_jsxs("p", { className: "text-text-secondary-700 order-2 grow text-center text-sm font-medium lg:order-none lg:grow-0", children: ["Page ", page, " of ", totalPages] }), _jsx("div", { className: "hidden grow lg:block" }), _jsx(Select.Root, { size: "sm", value: [pageSize.toString()], onValueChange: (details) => {
-                                    const n = parseInt(details.value[0]);
-                                    const v = isNaN(n) ? 10 : n;
-                                    setPageSize(v);
-                                }, collection: pageSizeCollection, lazyMount: true, className: "hidden lg:block", positioning: {
-                                    sameWidth: true,
-                                }, children: _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: pageSizeCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: pageSizeCollection.stringifyItem(item) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item))) }) }) })] }) }), _jsxs("div", { className: "contents lg:flex", children: [_jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", className: "order-1 lg:order-none lg:rounded-r-none lg:border-r-0", disabled: !hasPrevPage || loading, onClick: () => prev(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", className: "order-3 lg:order-none lg:rounded-l-none", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] })] }))] }));
+                                                        }) }) }) }), _jsx(Table.Cell, { className: "!py-1", children: data.game.name }), _jsx(Table.Cell, { className: "!py-1", children: data.vendorRoundId })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center justify-between gap-lg px-4 py-3", children: [_jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasPrevPage || loading, onClick: () => prev(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsxs("p", { className: "text-text-secondary-700 text-sm font-medium", children: ["Page ", page, " of ", totalPages] }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] }))] }));
 }
 const BET_RECORD_STATUSES = [
     'CANCELLED',
     'SETTLED',
     'STARTED',
 ];
-const pageSizeCollection = createListCollection({
-    items: useInfiniteQueryHelper.config.pageSizes,
-    itemToValue: (item) => item.toString(),
-    itemToString: (item) => `${item} items per page`,
-});
 const statusCollection = createListCollection({
     items: BET_RECORD_STATUSES,
     itemToValue: (item) => item,

package/dist/components/Messages/Messages.d.ts

@@ -1 +1,14 @@
-export declare function Messages(): import("react/jsx-runtime").JSX.Element;
+export interface MessagesProps {
+    children?: React.ReactNode;
+    /**
+     * @default '0px'
+     * @example
+     * ```tsx
+     * offsetTop="1em"
+     * offsetTop="1rem"
+     * offsetTop="16px"
+     * ```
+     */
+    offsetTop?: string | [mobile: string, desktop: string];
+}
+export declare function Messages(props: MessagesProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Messages/Messages.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Portal } from '@ark-ui/react';
+import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore, useMessagesQuery, useUnreadMessagesCountQuery, } from '../../client/hooks/index.js';
@@ -10,7 +11,7 @@ import { InfiniteScroll } from '../InfiniteScroll.js';
 import { MessageItem } from './MessageItem.js';
 import { MessagePopup } from './MessagePopup.js';
 const TABS = ['ALL', 'UNREAD'];
-export function Messages() {
+export function Messages(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({ messages: ctx.messages })));
     const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, { refetchInterval: 5000 });
     const unreadMessagesCount = unreadMessagesCountQuery.data ?? 0;
@@ -25,7 +26,13 @@ export function Messages() {
         }),
     }, { refetchInterval: 5000 });
     const messages = messagesQuery.data?.pages.flatMap((page) => page.edges.map((e) => e.node)) ?? [];
-    return (_jsxs(_Fragment, { children: [_jsxs(Drawer.Root, { open: globalStore.messages.open, onOpenChange: ({ open }) => globalStore.messages.setOpen(open), lazyMount: true, unmountOnExit: true, children: [_jsx(Drawer.Trigger, { asChild: true, children: _jsxs(IconButton, { size: "sm", colorScheme: "gray", className: "relative", children: [!!unreadMessagesCount && (_jsx("div", { className: "bg-brand-500 leading-4.5 text-button-primary-fg absolute -right-1.5 -top-1.5 rounded-full border px-1.5 text-2xs font-semibold", children: unreadMessagesCount })), _jsx(Bell01Icon, {})] }) }), _jsxs(Portal, { children: [_jsx(Drawer.Backdrop, {}), _jsx(Drawer.Positioner, { children: _jsx(Drawer.Content, { className: "bg-gray-50 bg-bg-primary flex flex-col", children: _jsxs("div", { className: "flex flex-col space-y-6", children: [_jsxs("div", { className: "flex items-end justify-between px-4 pt-6", children: [_jsx("p", { className: "text-text-primary-brand text-xl font-semibold", children: "Notifications" }), _jsx(Drawer.CloseTrigger, { className: "p-2", children: _jsx(XIcon, {}) })] }), _jsxs(Tabs.Root, { value: globalStore.messages.tab, onValueChange: (details) => globalStore.messages.setTab(z.enum(TABS).parse(details.value)), lazyMount: true, unmountOnExit: true, children: [_jsx("div", { className: "mb-4 w-full px-4", children: _jsxs(Tabs.List, { className: "border-border-secondary w-full border", children: [_jsx(Tabs.Trigger, { value: "ALL", className: "flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600", children: "All" }), _jsxs(Tabs.Trigger, { value: "UNREAD", className: "flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600 flex items-center justify-center space-x-2", children: [_jsx("div", { children: "Unread" }), !!unreadMessagesCount && (_jsx("div", { className: "border-border-primary bg-bg-secondary rounded-full border px-2 py-0.5", children: unreadMessagesCount }))] }), _jsx(Tabs.Indicator, { className: "bg-bg-active" })] }) }), _jsx("div", { className: "border-border-secondary mb-10 w-full border-t" }), TABS.map((tab) => (_jsxs(Tabs.Content, { id: "messages-scrollable", value: tab, className: "scrollbar:w-2 scrollbar-track:bg-bg-primary-alt scrollbar-track:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-thumb:rounded-full max-h-[calc(100vh-197px)] overflow-y-auto pb-4 pl-4", style: { scrollbarGutter: 'stable' }, children: [messages.length > 0 && (_jsx("div", { className: "flex flex-col space-y-4", children: messages.map((message) => (_jsx(MessageItem, { message: message }, message.id))) })), _jsx(InfiniteScroll, { loader: _jsx(SpinnerIcon, { className: "mx-auto size-5" }), hasMore: !!messagesQuery.hasNextPage, loadMore: async () => {
-                                                                    await messagesQuery.fetchNextPage();
-                                                                }, className: "mt-4" })] }, tab)))] })] }) }) })] })] }), _jsx(MessagePopup, {})] }));
+    const [mobileOffsetTop, desktopOffsetTop] = Array.isArray(props.offsetTop)
+        ? props.offsetTop
+        : [props.offsetTop ?? '0px', props.offsetTop ?? '0px'];
+    return (_jsxs(_Fragment, { children: [_jsxs(Drawer.Root, { open: globalStore.messages.open, onOpenChange: ({ open }) => globalStore.messages.setOpen(open), lazyMount: true, unmountOnExit: true, children: [_jsx(Drawer.Trigger, { asChild: true, children: props.children ?? (_jsxs(IconButton, { size: "sm", colorScheme: "gray", className: "relative", children: [!!unreadMessagesCount && (_jsx("div", { className: "bg-brand-500 leading-4.5 text-button-primary-fg absolute -right-1.5 -top-1.5 rounded-full border px-1.5 text-2xs font-semibold", children: unreadMessagesCount })), _jsx(Bell01Icon, {})] })) }), _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsx(Drawer.Content, { className: twMerge('flex', 'flex-col', 'border-border-secondary', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'lg:border-l', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]'), style: {
+                                    ['--offset-top-mobile']: mobileOffsetTop,
+                                    ['--offset-top-desktop']: desktopOffsetTop,
+                                }, children: _jsxs("div", { className: "flex flex-col space-y-6", children: [_jsxs("div", { className: "flex items-end justify-between px-4 pt-6", children: [_jsx("p", { className: "text-text-primary-brand text-xl font-semibold", children: "Notifications" }), _jsx(Drawer.CloseTrigger, { className: "p-2", children: _jsx(XIcon, {}) })] }), _jsxs(Tabs.Root, { value: globalStore.messages.tab, onValueChange: (details) => globalStore.messages.setTab(z.enum(TABS).parse(details.value)), lazyMount: true, unmountOnExit: true, children: [_jsx("div", { className: "mb-4 w-full px-4", children: _jsxs(Tabs.List, { className: "border-border-secondary w-full border", children: [_jsx(Tabs.Trigger, { value: "ALL", className: "flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600", children: "All" }), _jsxs(Tabs.Trigger, { value: "UNREAD", className: "flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600 flex items-center justify-center space-x-2", children: [_jsx("div", { children: "Unread" }), !!unreadMessagesCount && (_jsx("div", { className: "border-border-primary bg-bg-secondary rounded-full border px-2 py-0.5", children: unreadMessagesCount }))] }), _jsx(Tabs.Indicator, { className: "bg-bg-active" })] }) }), _jsx("div", { className: "border-border-secondary w-full border-t" }), TABS.map((tab) => (_jsxs(Tabs.Content, { value: tab, className: "scrollbar:w-2 scrollbar-track:bg-bg-primary-alt scrollbar-track:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-thumb:rounded-full max-h-[calc(100vh-197px)] overflow-y-auto p-xl", style: { scrollbarGutter: 'stable' }, children: [messages.length > 0 && (_jsx("div", { className: "flex flex-col space-y-4", children: messages.map((message) => (_jsx(MessageItem, { message: message }, message.id))) })), _jsx(InfiniteScroll, { loader: _jsx(SpinnerIcon, { className: "mx-auto size-5" }), hasMore: !!messagesQuery.hasNextPage, loadMore: async () => {
+                                                                await messagesQuery.fetchNextPage();
+                                                            }, className: "mt-4" })] }, tab)))] })] }) }) }) })] }), _jsx(MessagePopup, {})] }));
 }

package/dist/components/TransactionRecords/DepositRecordsTable.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createListCollection, Portal } from '@ark-ui/react';
 import { tz, TZDateMini } from '@date-fns/tz';
 import {} from '@opexa/portal-sdk-core';
 import { endOfDay, format, startOfDay } from 'date-fns';
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useDepositRecordsQuery, useInfiniteQueryHelper, useLocaleInfo, } from '../../client/hooks/index.js';
-import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, File02Icon, SpinnerIcon, } from '../../icons/index.js';
-import { Badge, IconButton, Select, Table } from '../../ui/index.js';
+import { ChevronLeftIcon, ChevronRightIcon, File02Icon, SpinnerIcon, } from '../../icons/index.js';
+import { Badge, IconButton, Table } from '../../ui/index.js';
 import { capitalize, formatNumber } from '../../utils/index.js';
 import { Empty } from '../Empty.js';
 import { TableFilters } from './TableFilters.js';
@@ -15,7 +14,7 @@ export function DepositRecordsTable() {
     const [timestamp, setTimestamp] = useState();
     const [depositStatus, setDepositStatus] = useState();
     const localeInfo = useLocaleInfo();
-    const { page, pageSize, hasNextPage, hasPrevPage, next, prev, rows, setPageSize, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useDepositRecordsQuery, {
+    const { page, hasNextPage, hasPrevPage, next, prev, rows, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useDepositRecordsQuery, {
         filter: {
             ...(depositStatus && {
                 status: {
@@ -45,7 +44,7 @@ export function DepositRecordsTable() {
                     setDepositStatus(value.depositStatus);
                 } }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
                     ? 'Fetching latest deposit records...'
-                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-3xl', 'border-y', 'border-border-primary', 'relative', 'left-1/2', 'right-1/2', '-mx-[50dvw]', 'w-dvw', 'lg:-mx-0', 'lg:-ml-0', 'lg:left-0', 'lg:right-0', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-primary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-xl rounded-b-none border-b", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Deposit No." }), _jsx(Table.Heading, { children: "Reference" }), _jsx(Table.Heading, { children: "Deposit Method" }), _jsx(Table.Heading, { children: "Applied Amount" }), _jsx(Table.Heading, { children: "Recieved Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Deposit Time" }), _jsx(Table.Heading, { children: "Recieved Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.depositNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
+                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'relative', 'left-1/2', 'right-1/2', '-mx-[50dvw]', 'w-dvw', 'lg:mt-3xl', 'lg:-mx-0', 'lg:-ml-0', 'lg:left-0', 'lg:right-0', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Deposit No." }), _jsx(Table.Heading, { children: "Reference" }), _jsx(Table.Heading, { children: "Deposit Method" }), _jsx(Table.Heading, { children: "Applied Amount" }), _jsx(Table.Heading, { children: "Recieved Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Deposit Time" }), _jsx(Table.Heading, { children: "Recieved Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.depositNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
                                                     delimiter: capitalize.delimiters.UNDERSCORE,
                                                 }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.amount, {
                                                     currency: localeInfo.currency.code,
@@ -73,16 +72,5 @@ export function DepositRecordsTable() {
                                                             ? 'warning'
                                                             : 'success', children: _jsx(Badge.Label, { children: capitalize(data.status, {
                                                             delimiter: capitalize.delimiters.UNDERSCORE,
-                                                        }) }) }) })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center gap-lg px-4 py-3", children: [_jsxs("p", { className: "text-text-secondary-700 order-2 grow text-center text-sm font-medium lg:order-none lg:grow-0", children: ["Page ", page, " of ", totalPages] }), _jsx("div", { className: "hidden grow lg:block" }), _jsx(Select.Root, { size: "sm", value: [pageSize.toString()], onValueChange: (details) => {
-                                    const n = parseInt(details.value[0]);
-                                    const v = isNaN(n) ? 10 : n;
-                                    setPageSize(v);
-                                }, collection: pageSizeCollection, lazyMount: true, className: "hidden lg:block", positioning: {
-                                    sameWidth: true,
-                                }, children: _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: pageSizeCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: pageSizeCollection.stringifyItem(item) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item))) }) }) })] }) }), _jsxs("div", { className: "contents lg:flex", children: [_jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", className: "order-1 lg:order-none lg:rounded-r-none lg:border-r-0", disabled: !hasPrevPage || loading, onClick: () => prev(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", className: "order-3 lg:order-none lg:rounded-l-none", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] })] }))] }));
+                                                        }) }) }) })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center justify-between gap-lg px-4 py-3", children: [_jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasPrevPage || loading, onClick: () => prev(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsxs("p", { className: "text-text-secondary-700 text-sm font-medium", children: ["Page ", page, " of ", totalPages] }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] }))] }));
 }
-const pageSizeCollection = createListCollection({
-    items: useInfiniteQueryHelper.config.pageSizes,
-    itemToValue: (item) => item.toString(),
-    itemToString: (item) => `${item} items per page`,
-});

package/dist/components/TransactionRecords/TransactionRecords.js

@@ -5,5 +5,5 @@ import { DepositRecordsTable } from './DepositRecordsTable.js';
 import { TransactionRecordsTable } from './TransactionRecordsTable.js';
 import { WithdrawalRecordsTable } from './WithdrawalRecordsTable.js';
 export function TransactionRecords(props) {
-    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold leading-tight", children: "Transaction Records" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm leading-tight", children: "View your transaction records" }), _jsxs(Tabs.Root, { className: "mt-lg", defaultValue: "transactions", lazyMount: true, unmountOnExit: true, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "transactions", children: "Transactions" }), _jsx(Tabs.Trigger, { value: "deposits", children: "Deposits" }), _jsx(Tabs.Trigger, { value: "withdrawals", children: "Withdrawals" }), _jsx(Tabs.Indicator, {})] }), _jsx("h3", { className: "text-text-secondary-700 mt-3xl text-sm font-semibold", children: "Table" }), _jsx(Tabs.Content, { value: "transactions", className: "mt-xl", children: _jsx(TransactionRecordsTable, {}) }), _jsx(Tabs.Content, { value: "deposits", className: "mt-xl", children: _jsx(DepositRecordsTable, {}) }), _jsx(Tabs.Content, { value: "withdrawals", className: "mt-xl", children: _jsx(WithdrawalRecordsTable, {}) })] })] }));
+    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-sm font-semibold leading-tight lg:text-lg", children: "Transactions" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm leading-tight", children: "View your transaction records" }), _jsxs(Tabs.Root, { className: "mt-lg lg:mt-2xl", defaultValue: "transactions", lazyMount: true, unmountOnExit: true, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "transactions", children: "Transactions" }), _jsx(Tabs.Trigger, { value: "deposits", children: "Deposits" }), _jsx(Tabs.Trigger, { value: "withdrawals", children: "Withdrawals" }), _jsx(Tabs.Indicator, {})] }), _jsx("div", { className: "border-border-secondary mt-2xl hidden border-t lg:block" }), _jsx("h3", { className: "text-text-secondary-700 mt-3xl text-sm font-semibold", children: "Table" }), _jsx(Tabs.Content, { value: "transactions", className: "mt-xl", children: _jsx(TransactionRecordsTable, {}) }), _jsx(Tabs.Content, { value: "deposits", className: "mt-xl", children: _jsx(DepositRecordsTable, {}) }), _jsx(Tabs.Content, { value: "withdrawals", className: "mt-xl", children: _jsx(WithdrawalRecordsTable, {}) })] })] }));
 }

package/dist/components/TransactionRecords/TransactionRecordsTable.js

@@ -1,19 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createListCollection, Portal } from '@ark-ui/react';
 import { tz, TZDateMini } from '@date-fns/tz';
 import { endOfDay, format, startOfDay } from 'date-fns';
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useInfiniteQueryHelper, useLocaleInfo, useTransactionRecordsQuery, } from '../../client/hooks/index.js';
-import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, File02Icon, SpinnerIcon, } from '../../icons/index.js';
-import { IconButton, Select, Table } from '../../ui/index.js';
+import { ChevronLeftIcon, ChevronRightIcon, File02Icon, SpinnerIcon, } from '../../icons/index.js';
+import { IconButton, Table } from '../../ui/index.js';
 import { capitalize, formatNumber } from '../../utils/index.js';
 import { Empty } from '../Empty.js';
 import { TableFilters } from './TableFilters.js';
 export function TransactionRecordsTable() {
     const [timestamp, setTimestamp] = useState();
     const localeInfo = useLocaleInfo();
-    const { page, pageSize, hasNextPage, hasPrevPage, next, prev, rows, setPageSize, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useTransactionRecordsQuery, {
+    const { page, hasNextPage, hasPrevPage, next, prev, rows, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useTransactionRecordsQuery, {
         filter: {
             ...(timestamp && {
                 dateTimeCreated: {
@@ -36,7 +35,7 @@ export function TransactionRecordsTable() {
                     transactionType: true,
                 } }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
                     ? 'Fetching latest transaction records...'
-                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-3xl', 'border-y', 'border-border-primary', 'relative', 'left-1/2', 'right-1/2', '-mx-[50dvw]', 'w-dvw', 'lg:-mx-0', 'lg:-ml-0', 'lg:left-0', 'lg:right-0', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-primary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-b-none border-b lg:rounded-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Transaction Type" }), _jsx(Table.Heading, { children: "Transaction Time" }), _jsx(Table.Heading, { children: "Amount" }), _jsx(Table.Heading, { children: "Current Balance" }), _jsx(Table.Heading, { children: "Reference Number" }), _jsx(Table.Heading, { children: "Content" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
+                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'relative', 'left-1/2', 'right-1/2', '-mx-[50dvw]', 'w-dvw', 'lg:mt-3xl', 'lg:-mx-0', 'lg:-ml-0', 'lg:left-0', 'lg:right-0', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Transaction Type" }), _jsx(Table.Heading, { children: "Transaction Time" }), _jsx(Table.Heading, { children: "Amount" }), _jsx(Table.Heading, { children: "Current Balance" }), _jsx(Table.Heading, { children: "Reference Number" }), _jsx(Table.Heading, { children: "Content" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
                                                     delimiter: capitalize.delimiters.UNDERSCORE,
                                                 }) }), _jsxs(Table.Cell, { className: "!py-1", children: [_jsx("div", { className: "leading-tight", children: format(data.dateTimeCreated, 'MM/dd/yyyy', {
                                                             in: tz(localeInfo.timezone),
@@ -48,16 +47,5 @@ export function TransactionRecordsTable() {
                                                 }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.currentBalance, {
                                                     currency: localeInfo.currency.code,
                                                     minDecimalPlaces: 2,
-                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: data.referenceNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.content || '/' })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center gap-lg px-4 py-3", children: [_jsxs("p", { className: "text-text-secondary-700 order-2 grow text-center text-sm font-medium lg:order-none lg:grow-0", children: ["Page ", page, " of ", totalPages] }), _jsx("div", { className: "hidden grow lg:block" }), _jsx(Select.Root, { size: "sm", value: [pageSize.toString()], onValueChange: (details) => {
-                                    const n = parseInt(details.value[0]);
-                                    const v = isNaN(n) ? 10 : n;
-                                    setPageSize(v);
-                                }, collection: pageSizeCollection, lazyMount: true, className: "hidden lg:block", positioning: {
-                                    sameWidth: true,
-                                }, children: _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: pageSizeCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: pageSizeCollection.stringifyItem(item) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item))) }) }) })] }) }), _jsxs("div", { className: "contents lg:flex", children: [_jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", className: "order-1 lg:order-none lg:rounded-r-none lg:border-r-0", disabled: !hasPrevPage || loading, onClick: () => prev(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", className: "order-3 lg:order-none lg:rounded-l-none", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] })] }))] }));
+                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: data.referenceNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.content || '/' })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center justify-between gap-lg px-4 py-3", children: [_jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasPrevPage || loading, onClick: () => prev(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsxs("p", { className: "text-text-secondary-700 text-sm font-medium", children: ["Page ", page, " of ", totalPages] }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] }))] }));
 }
-const pageSizeCollection = createListCollection({
-    items: useInfiniteQueryHelper.config.pageSizes,
-    itemToValue: (item) => item.toString(),
-    itemToString: (item) => `${item} items per page`,
-});

package/dist/components/TransactionRecords/WithdrawalRecordsTable.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createListCollection, Portal } from '@ark-ui/react';
 import { tz, TZDateMini } from '@date-fns/tz';
 import { endOfDay, format, startOfDay } from 'date-fns';
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useInfiniteQueryHelper, useLocaleInfo, useWithdrawalRecordsQuery, } from '../../client/hooks/index.js';
-import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, File02Icon, SpinnerIcon, } from '../../icons/index.js';
-import { Badge, IconButton, Select, Table } from '../../ui/index.js';
+import { ChevronLeftIcon, ChevronRightIcon, File02Icon, SpinnerIcon, } from '../../icons/index.js';
+import { Badge, IconButton, Table } from '../../ui/index.js';
 import { capitalize, formatNumber } from '../../utils/index.js';
 import { Empty } from '../Empty.js';
 import { TableFilters } from './TableFilters.js';
@@ -14,7 +13,7 @@ export function WithdrawalRecordsTable() {
     const [timestamp, setTimestamp] = useState();
     const [withdrawalStatus, setWithdrawalStatus] = useState();
     const localeInfo = useLocaleInfo();
-    const { page, pageSize, hasNextPage, hasPrevPage, next, prev, rows, setPageSize, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useWithdrawalRecordsQuery, {
+    const { page, hasNextPage, hasPrevPage, next, prev, rows, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useWithdrawalRecordsQuery, {
         filter: {
             ...(withdrawalStatus && {
                 status: {
@@ -44,7 +43,7 @@ export function WithdrawalRecordsTable() {
                     setWithdrawalStatus(value.withdrawalStatus);
                 } }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
                     ? 'Fetching latest withdrawal records...'
-                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-3xl', 'border-y', 'border-border-primary', 'relative', 'left-1/2', 'right-1/2', '-mx-[50dvw]', 'w-dvw', 'lg:-mx-0', 'lg:-ml-0', 'lg:left-0', 'lg:right-0', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-primary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-xl rounded-b-none border-b", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Withdrawal No." }), _jsx(Table.Heading, { children: "Reference" }), _jsx(Table.Heading, { children: "Withdrawal Method" }), _jsx(Table.Heading, { children: "Mobile Number" }), _jsx(Table.Heading, { children: "Withdrawal Amount" }), _jsx(Table.Heading, { children: "Net Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Bank Name" }), _jsx(Table.Heading, { children: "Withdrawal Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.withdrawalNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
+                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'relative', 'left-1/2', 'right-1/2', '-mx-[50dvw]', 'w-dvw', 'lg:mt-3xl', 'lg:-mx-0', 'lg:-ml-0', 'lg:left-0', 'lg:right-0', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Withdrawal No." }), _jsx(Table.Heading, { children: "Reference" }), _jsx(Table.Heading, { children: "Withdrawal Method" }), _jsx(Table.Heading, { children: "Mobile Number" }), _jsx(Table.Heading, { children: "Withdrawal Amount" }), _jsx(Table.Heading, { children: "Net Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Bank Name" }), _jsx(Table.Heading, { children: "Withdrawal Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.withdrawalNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
                                                     delimiter: capitalize.delimiters.UNDERSCORE,
                                                 }) }), _jsx(Table.Cell, { className: "!py-1", children: data.recipientMobileNumber }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.amount, {
                                                     currency: localeInfo.currency.code,
@@ -67,16 +66,5 @@ export function WithdrawalRecordsTable() {
                                                             ? 'warning'
                                                             : 'success', children: _jsx(Badge.Label, { children: capitalize(data.status, {
                                                             delimiter: capitalize.delimiters.UNDERSCORE,
-                                                        }) }) }) })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center gap-lg px-4 py-3", children: [_jsxs("p", { className: "text-text-secondary-700 order-2 grow text-center text-sm font-medium lg:order-none lg:grow-0", children: ["Page ", page, " of ", totalPages] }), _jsx("div", { className: "hidden grow lg:block" }), _jsx(Select.Root, { size: "sm", value: [pageSize.toString()], onValueChange: (details) => {
-                                    const n = parseInt(details.value[0]);
-                                    const v = isNaN(n) ? 10 : n;
-                                    setPageSize(v);
-                                }, collection: pageSizeCollection, lazyMount: true, className: "hidden lg:block", positioning: {
-                                    sameWidth: true,
-                                }, children: _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: pageSizeCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: pageSizeCollection.stringifyItem(item) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item))) }) }) })] }) }), _jsxs("div", { className: "contents lg:flex", children: [_jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", className: "order-1 lg:order-none lg:rounded-r-none lg:border-r-0", disabled: !hasPrevPage || loading, onClick: () => prev(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", className: "order-3 lg:order-none lg:rounded-l-none", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] })] }))] }));
+                                                        }) }) }) })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center justify-between gap-lg px-4 py-3", children: [_jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasPrevPage || loading, onClick: () => prev(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsxs("p", { className: "text-text-secondary-700 text-sm font-medium", children: ["Page ", page, " of ", totalPages] }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] }))] }));
 }
-const pageSizeCollection = createListCollection({
-    items: useInfiniteQueryHelper.config.pageSizes,
-    itemToValue: (item) => item.toString(),
-    itemToString: (item) => `${item} items per page`,
-});

package/dist/styles/theme.css

@@ -211,6 +211,7 @@
   --color-bg-brand-secondary: #ca8504;
   --color-bg-brand-secondary-alt: #22262f;
   --color-bg-secondary: #13161b;
+  --color-bg-secondary-alt: #0c0e12;
   --color-bg-tertiary: #22262f;
   --color-bg-quaternary: #373a41;
   --color-bg-active: #22262f;