@opexa/portal-components 0.0.28 → 0.0.30

package/dist/components/TransactionRecords/TableFilters.js

@@ -0,0 +1,212 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createListCollection, parseDate, Portal } from '@ark-ui/react';
+import { endOfDay, startOfDay } from 'date-fns';
+import { useState } from 'react';
+import { z } from 'zod';
+import { useControllableState } from '../../client/hooks/index.js';
+import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, } from '../../icons/index.js';
+import { DatePicker, SegmentGroup, Select } from '../../ui/index.js';
+import { capitalize } from '../../utils/index.js';
+const TabDefinition = z.enum(['all', 'today', 'custom']).catch('all');
+const DEPOSIT_STATUSES = [
+    'ACCEPTED',
+    'APPROVED',
+    'CANCELLED',
+    'CONFIRMED',
+    'FAILED',
+    'PENDING',
+    'REJECTED',
+];
+const WITHDRAWAL_STATUSES = [
+    'ACCEPTED',
+    'APPROVED',
+    'CANCELLED',
+    'CONFIRMED',
+    'FAILED',
+    'PENDING',
+    'REJECTED',
+];
+const TRANSACTION_TYPES = [
+    'DEPOSIT',
+    'WITHDRAWAL',
+    'BET',
+];
+const deviceTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+export function TableFilters(props) {
+    const gameTypeCollection = createListCollection({
+        items: props.gameTypeOptions ?? [],
+        itemToValue: (item) => item,
+        itemToString: (item) => capitalize(item, {
+            delimiter: capitalize.delimiters.UNDERSCORE,
+        }),
+    });
+    const gameProviderCollection = createListCollection({
+        items: props.gameProviderOptions ?? [],
+        itemToValue: (item) => item,
+        itemToString: (item) => capitalize(item, {
+            delimiter: capitalize.delimiters.UNDERSCORE,
+        }),
+    });
+    const depositStatusCollection = createListCollection({
+        items: DEPOSIT_STATUSES,
+        itemToValue: (item) => item,
+        itemToString: (item) => capitalize(item, {
+            delimiter: capitalize.delimiters.UNDERSCORE,
+        }),
+    });
+    const withdrawalStatusCollection = createListCollection({
+        items: WITHDRAWAL_STATUSES,
+        itemToValue: (item) => item,
+        itemToString: (item) => capitalize(item, {
+            delimiter: capitalize.delimiters.UNDERSCORE,
+        }),
+    });
+    const transactionTypeCollection = createListCollection({
+        items: TRANSACTION_TYPES,
+        itemToValue: (item) => item,
+        itemToString: (item) => capitalize(item, {
+            delimiter: capitalize.delimiters.UNDERSCORE,
+        }),
+    });
+    const [tab, setTab] = useState('all');
+    const handleChange = (next) => {
+        const prev = {
+            timestamp,
+            gameType,
+            gameProvider,
+            depositStatus,
+            withdrawalStatus,
+        };
+        props.onChange?.({
+            ...prev,
+            ...next,
+        });
+    };
+    const [timestamp, setTimestamp] = useControllableState({
+        value: props.value?.timestamp,
+        defaultValue: props.defaultValue?.timestamp ?? null,
+        onChange(timestamp) {
+            handleChange({ timestamp });
+        },
+    });
+    const [gameType, setGameType] = useControllableState({
+        value: props.value?.gameType,
+        defaultValue: props.defaultValue?.gameType ?? null,
+        onChange(gameType) {
+            handleChange({ gameType });
+        },
+    });
+    const [gameProvider, setGameProvider] = useControllableState({
+        value: props.value?.gameProvider,
+        defaultValue: props.defaultValue?.gameProvider ?? null,
+        onChange(gameProvider) {
+            handleChange({ gameProvider });
+        },
+    });
+    const [depositStatus, setDepositStatus] = useControllableState({
+        value: props.value?.depositStatus,
+        defaultValue: props.defaultValue?.depositStatus ?? null,
+        onChange(depositStatus) {
+            handleChange({ depositStatus });
+        },
+    });
+    const [withdrawalStatus, setWithdrawalStatus] = useControllableState({
+        value: props.value?.withdrawalStatus,
+        defaultValue: props.defaultValue?.withdrawalStatus ?? null,
+        onChange(withdrawalStatus) {
+            handleChange({ withdrawalStatus });
+        },
+    });
+    const [transactionType, setTransactionType] = useControllableState({
+        value: props.value?.transactionType,
+        defaultValue: props.defaultValue?.transactionType ?? null,
+        onChange(transactionType) {
+            handleChange({ transactionType });
+        },
+    });
+    return (_jsxs("div", { className: "flex flex-col gap-lg lg:flex-row lg:items-center", children: [_jsxs(DatePicker.Root, { lazyMount: true, unmountOnExit: true, value: [timestamp?.start, timestamp?.end]
+                    .filter(Boolean)
+                    .map((d) => parseDate(d)), onValueChange: (details) => {
+                    setTimestamp({
+                        start: details.value.at(0)?.toDate(deviceTimezone),
+                        end: details.value.at(1)?.toDate(deviceTimezone),
+                    });
+                }, onOpenChange: (details) => {
+                    if (details.open)
+                        return;
+                    if (timestamp)
+                        return;
+                    setTab('all');
+                }, selectionMode: "range", closeOnSelect: false, positioning: {
+                    gutter: 20,
+                    placement: 'bottom',
+                }, children: [_jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
+                            const value = TabDefinition.parse(details.value);
+                            if (value === 'today') {
+                                const now = new Date();
+                                setTimestamp({
+                                    start: startOfDay(now),
+                                    end: endOfDay(now),
+                                });
+                            }
+                            else {
+                                setTimestamp(null);
+                            }
+                            setTab(value);
+                        }, className: "w-full lg:w-fit", children: [_jsxs(SegmentGroup.Item, { value: "all", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "today", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "Today" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsx(DatePicker.Context, { children: (api) => (_jsx(SegmentGroup.Item, { value: "custom", onClick: () => api.setOpen(true), className: "w-full lg:w-auto", children: _jsxs(DatePicker.Control, { children: [_jsx(SegmentGroup.ItemText, { children: "Custom" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }) })) }), _jsx(SegmentGroup.Indicator, {})] }), _jsx(Portal, { children: _jsx(DatePicker.Positioner, { children: _jsx(DatePicker.Content, { children: _jsx(DatePicker.View, { view: "day", children: _jsx(DatePicker.Context, { children: (api) => (_jsxs(_Fragment, { children: [_jsxs(DatePicker.ViewControl, { children: [_jsx(DatePicker.PrevTrigger, { children: _jsx(ChevronLeftIcon, {}) }), _jsx(DatePicker.ViewTrigger, { children: _jsx(DatePicker.RangeText, {}) }), _jsx(DatePicker.NextTrigger, { children: _jsx(ChevronRightIcon, {}) })] }), _jsxs(DatePicker.Table, { children: [_jsx(DatePicker.TableHead, { children: _jsx(DatePicker.TableRow, { children: api.weekDays.map((weekDay, id) => (_jsx(DatePicker.TableHeader, { children: weekDay.short.substring(0, 2) }, id))) }) }), _jsx(DatePicker.TableBody, { children: api.weeks.map((week, id) => (_jsx(DatePicker.TableRow, { children: week.map((day, id) => (_jsx(DatePicker.TableCell, { value: day, children: _jsx(DatePicker.TableCellTrigger, { children: day.day }) }, id))) }, id))) })] })] })) }) }) }) }) })] }), _jsx("div", { className: "hidden grow lg:block" }), props.enabledFilters?.gameType && (_jsxs(Select.Root, { collection: gameTypeCollection, value: gameType ? [gameType] : [], onValueChange: (details) => {
+                    const value = z
+                        .enum((props.gameTypeOptions ?? []))
+                        .safeParse(details.value.at(0)).data;
+                    setGameType(value ?? null);
+                }, lazyMount: true, deselectable: true, positioning: {
+                    sameWidth: true,
+                }, children: [_jsxs(Select.Trigger, { className: "w-full lg:w-[14rem]", children: [_jsx(Select.ValueText, { placeholder: "Game Type" }), _jsx(Select.Context, { children: (api) => (_jsx(_Fragment, { children: api.value.length ? (_jsx(Select.ClearTrigger, { asChild: true, children: _jsx("span", { onClick: (e) => {
+                                                e.stopPropagation();
+                                            }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: gameTypeCollection.items.map((type) => (_jsxs(Select.Item, { item: type, children: [_jsx(Select.ItemText, { children: capitalize(type, {
+                                                    delimiter: capitalize.delimiters.UNDERSCORE,
+                                                }) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, type))) }) }) }) })] })), props.enabledFilters?.gameProvider && (_jsxs(Select.Root, { collection: gameProviderCollection, value: gameProvider ? [gameProvider] : [], onValueChange: (details) => {
+                    const value = z
+                        .enum((props.gameProviderOptions ?? []))
+                        .safeParse(details.value.at(0)).data;
+                    setGameProvider(value ?? null);
+                }, lazyMount: true, deselectable: true, positioning: {
+                    sameWidth: true,
+                }, children: [_jsxs(Select.Trigger, { className: "w-full lg:w-[14rem]", children: [_jsx(Select.ValueText, { placeholder: "Game Vendor" }), _jsx(Select.Context, { children: (api) => (_jsx(_Fragment, { children: api.value.length ? (_jsx(Select.ClearTrigger, { asChild: true, children: _jsx("span", { onClick: (e) => {
+                                                e.stopPropagation();
+                                            }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: gameProviderCollection.items.map((provider) => (_jsxs(Select.Item, { item: provider, children: [_jsx(Select.ItemText, { children: capitalize(provider, {
+                                                    delimiter: capitalize.delimiters.UNDERSCORE,
+                                                }) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, provider))) }) }) }) })] })), props.enabledFilters?.depositStatus && (_jsxs(Select.Root, { collection: depositStatusCollection, value: depositStatus ? [depositStatus] : [], onValueChange: (details) => {
+                    const value = z
+                        .enum(DEPOSIT_STATUSES)
+                        .safeParse(details.value.at(0)).data;
+                    setDepositStatus(value ?? null);
+                }, lazyMount: true, deselectable: true, positioning: {
+                    sameWidth: true,
+                }, children: [_jsxs(Select.Trigger, { className: "w-full lg:w-[14rem]", children: [_jsx(Select.ValueText, { placeholder: "Status" }), _jsx(Select.Context, { children: (api) => (_jsx(_Fragment, { children: api.value.length ? (_jsx(Select.ClearTrigger, { asChild: true, children: _jsx("span", { onClick: (e) => {
+                                                e.stopPropagation();
+                                            }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: withdrawalStatusCollection.items.map((status) => (_jsxs(Select.Item, { item: status, children: [_jsx(Select.ItemText, { children: capitalize(status, {
+                                                    delimiter: capitalize.delimiters.UNDERSCORE,
+                                                }) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, status))) }) }) }) })] })), props.enabledFilters?.withdrawalStatus && (_jsxs(Select.Root, { collection: withdrawalStatusCollection, value: withdrawalStatus ? [withdrawalStatus] : [], onValueChange: (details) => {
+                    const value = z
+                        .enum(WITHDRAWAL_STATUSES)
+                        .safeParse(details.value.at(0)).data;
+                    setWithdrawalStatus(value ?? null);
+                }, lazyMount: true, deselectable: true, positioning: {
+                    sameWidth: true,
+                }, children: [_jsxs(Select.Trigger, { className: "w-full lg:w-[14rem]", children: [_jsx(Select.ValueText, { placeholder: "Status" }), _jsx(Select.Context, { children: (api) => (_jsx(_Fragment, { children: api.value.length ? (_jsx(Select.ClearTrigger, { asChild: true, children: _jsx("span", { onClick: (e) => {
+                                                e.stopPropagation();
+                                            }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: depositStatusCollection.items.map((status) => (_jsxs(Select.Item, { item: status, children: [_jsx(Select.ItemText, { children: capitalize(status, {
+                                                    delimiter: capitalize.delimiters.UNDERSCORE,
+                                                }) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, status))) }) }) }) })] })), props.enabledFilters?.transactionType && (_jsxs(Select.Root, { collection: transactionTypeCollection, value: transactionType ? [transactionType] : [], onValueChange: (details) => {
+                    const value = z
+                        .enum(TRANSACTION_TYPES)
+                        .safeParse(details.value.at(0)).data;
+                    setTransactionType(value ?? null);
+                }, lazyMount: true, deselectable: true, positioning: {
+                    sameWidth: true,
+                }, children: [_jsxs(Select.Trigger, { className: "w-full lg:w-[14rem]", children: [_jsx(Select.ValueText, { placeholder: "Type" }), _jsx(Select.Context, { children: (api) => (_jsx(_Fragment, { children: api.value.length ? (_jsx(Select.ClearTrigger, { asChild: true, children: _jsx("span", { onClick: (e) => {
+                                                e.stopPropagation();
+                                            }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: transactionTypeCollection.items.map((type) => (_jsxs(Select.Item, { item: type, children: [_jsx(Select.ItemText, { children: capitalize(type, {
+                                                    delimiter: capitalize.delimiters.UNDERSCORE,
+                                                }) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, type))) }) }) }) })] }))] }));
+}

package/dist/components/TransactionRecords/TransactionRecords.d.ts

@@ -4,4 +4,4 @@ export interface TransactionRecordsProps {
     gameProviders: GameProvider[];
     className?: string;
 }
-export declare function TransactionRecords(props: TransactionRecordsProps): import("react").JSX.Element;
+export declare function TransactionRecords(props: TransactionRecordsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TransactionRecords/TransactionRecords.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { twMerge } from 'tailwind-merge';
+import { Tabs } from '../../ui/index.js';
+import { DepositRecordsTable } from './DepositRecordsTable.js';
+import { TransactionRecordsTable } from './TransactionRecordsTable.js';
+import { WithdrawalRecordsTable } from './WithdrawalRecordsTable.js';
+export function TransactionRecords(props) {
+    return (_jsxs("div", { className: twMerge('px-4 pb-3xl pt-4', 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, {}) })] })] }));
+}

package/dist/components/TransactionRecords/TransactionRecordsTable.d.ts

@@ -1 +1 @@
-export declare function TransactionRecordsTable(): import("react").JSX.Element;
+export declare function TransactionRecordsTable(): import("react/jsx-runtime").JSX.Element;

package/dist/components/TransactionRecords/TransactionRecordsTable.js

@@ -0,0 +1,62 @@
+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 { 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 { 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, {
+        filter: {
+            ...(timestamp && {
+                dateTimeCreated: {
+                    ...(timestamp.start && {
+                        greaterThanOrEqual: new TZDateMini(startOfDay(timestamp.start), localeInfo.timezone).toISOString(),
+                    }),
+                    ...(timestamp.end && {
+                        lesserThanOrEqual: new TZDateMini(endOfDay(timestamp.end), localeInfo.timezone).toISOString(),
+                    }),
+                },
+            }),
+        },
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(TableFilters, { value: {
+                    timestamp,
+                }, onChange: (value) => {
+                    setTimestamp(value.timestamp);
+                    firstPage();
+                }, enabledFilters: {
+                    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: "border-border-primary -ml-4 mt-3xl w-dvw border-y lg:-ml-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: "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),
+                                                        }) }), _jsx("div", { className: "text-text-tertiary-600 leading-tight", children: format(data.dateTimeCreated, 'hh:mm a', {
+                                                            in: tz(localeInfo.timezone),
+                                                        }) })] }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.amount, {
+                                                    currency: localeInfo.currency.code,
+                                                    minDecimalPlaces: 2,
+                                                }) }), _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" }) })] })] })] }))] }));
+}
+const pageSizeCollection = createListCollection({
+    items: useInfiniteQueryHelper.config.pageSizes,
+    itemToValue: (item) => item.toString(),
+    itemToString: (item) => `${item} items per page`,
+});

package/dist/components/TransactionRecords/WithdrawalRecordsTable.d.ts

@@ -1 +1 @@
-export declare function WithdrawalRecordsTable(): import("react").JSX.Element;
+export declare function WithdrawalRecordsTable(): import("react/jsx-runtime").JSX.Element;

package/dist/components/TransactionRecords/WithdrawalRecordsTable.js

@@ -0,0 +1,81 @@
+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 { 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 { capitalize, formatNumber } from '../../utils/index.js';
+import { Empty } from '../Empty.js';
+import { TableFilters } from './TableFilters.js';
+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, {
+        filter: {
+            ...(withdrawalStatus && {
+                status: {
+                    equal: withdrawalStatus,
+                },
+            }),
+            ...(timestamp && {
+                dateTimeCreated: {
+                    ...(timestamp.start && {
+                        greaterThanOrEqual: new TZDateMini(startOfDay(timestamp.start), localeInfo.timezone).toISOString(),
+                    }),
+                    ...(timestamp.end && {
+                        lesserThanOrEqual: new TZDateMini(endOfDay(timestamp.end), localeInfo.timezone).toISOString(),
+                    }),
+                },
+            }),
+        },
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(TableFilters, { enabledFilters: {
+                    withdrawalStatus: true,
+                }, value: {
+                    timestamp,
+                    withdrawalStatus,
+                }, onChange: (value) => {
+                    firstPage();
+                    setTimestamp(value.timestamp);
+                    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: "border-border-primary -ml-4 mt-3xl w-dvw border-y lg:-ml-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, {
+                                                    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,
+                                                    minDecimalPlaces: 2,
+                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.netAmount, {
+                                                    currency: localeInfo.currency.code,
+                                                    minDecimalPlaces: 2,
+                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.fee, {
+                                                    currency: localeInfo.currency.code,
+                                                    minDecimalPlaces: 2,
+                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: data.bank }), _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),
+                                                        }) })] }), _jsx(Table.Cell, { className: "!py-1", children: _jsx(Badge.Root, { variant: "subtle", colorScheme: data.status === 'FAILED' ||
+                                                        data.status === 'REJECTED' ||
+                                                        data.status === 'CANCELLED'
+                                                        ? 'danger'
+                                                        : data.status === 'PENDING'
+                                                            ? '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" }) })] })] })] }))] }));
+}
+const pageSizeCollection = createListCollection({
+    items: useInfiniteQueryHelper.config.pageSizes,
+    itemToValue: (item) => item.toString(),
+    itemToString: (item) => `${item} items per page`,
+});

package/dist/components/TransactionRecords/index.js

@@ -1 +1 @@
-export * from './TransactionRecords';
+export * from './TransactionRecords.js';

package/dist/components/index.js

@@ -1,32 +1,32 @@
-export * from './Account';
-export * from './AccountInfo';
-export * from './AccountPaymentMethods';
-export * from './AccountSecurity';
-export * from './AccountVerification';
-export * from './Banner';
-export * from './BetRecords';
-export * from './Bonus';
-export * from './Bonuses';
-export * from './DepositWithdrawal';
-export * from './Disclaimer';
-export * from './FavoriteGames';
-export * from './GameLaunch';
-export * from './GameProviders';
-export * from './Games';
-export * from './GamesSearch';
-export * from './JackpotCounter';
-export * from './Jackpots';
-export * from './KYC';
-export * from './Marquee';
-export * from './Messages';
-export * from './PortalProvider';
-export * from './Promo';
-export * from './Promos';
-export * from './Protected';
-export * from './Quests';
-export * from './SignIn';
-export * from './SignUp';
-export * from './TopWins';
-export * from './TournamentCounter';
-export * from './Tournaments';
-export * from './TransactionRecords';
+export * from './Account/index.js';
+export * from './AccountInfo/index.js';
+export * from './AccountPaymentMethods/index.js';
+export * from './AccountSecurity/index.js';
+export * from './AccountVerification/index.js';
+export * from './Banner/index.js';
+export * from './BetRecords/index.js';
+export * from './Bonus/index.js';
+export * from './Bonuses/index.js';
+export * from './DepositWithdrawal/index.js';
+export * from './Disclaimer/index.js';
+export * from './FavoriteGames/index.js';
+export * from './GameLaunch/index.js';
+export * from './GameProviders/index.js';
+export * from './Games/index.js';
+export * from './GamesSearch/index.js';
+export * from './JackpotCounter/index.js';
+export * from './Jackpots/index.js';
+export * from './KYC/index.js';
+export * from './Marquee/index.js';
+export * from './Messages/index.js';
+export * from './PortalProvider/index.js';
+export * from './Promo/index.js';
+export * from './Promos/index.js';
+export * from './Protected/index.js';
+export * from './Quests/index.js';
+export * from './SignIn/index.js';
+export * from './SignUp/index.js';
+export * from './TopWins/index.js';
+export * from './TournamentCounter/index.js';
+export * from './Tournaments/index.js';
+export * from './TransactionRecords/index.js';

package/dist/handlers.js

@@ -2,7 +2,7 @@ import { authenticate, createSession, destroySession, refreshSession, } from '@o
 import { addDays, addMinutes, subMinutes } from 'date-fns';
 import { NextResponse } from 'next/server';
 import { z } from 'zod';
-import { ACCESS_TOKEN_COOKIE_NAME, BYPASS_RECAPTCHA, ENVIRONMENT, PLATFORM_CODE, RECAPTCHA_HEADER_KEY, REFRESH_TOKEN_COOKIE_NAME, } from './constants';
+import { ACCESS_TOKEN_COOKIE_NAME, BYPASS_RECAPTCHA, ENVIRONMENT, PLATFORM_CODE, RECAPTCHA_HEADER_KEY, REFRESH_TOKEN_COOKIE_NAME, } from './constants/index.js';
 const CreateSessionDefinition = z.union([
     z.object({
         type: z.literal('NAME_AND_PASSWORD'),

package/dist/icons/AlertCircleIcon.d.ts

@@ -1,2 +1,2 @@
 import type { ComponentPropsWithRef } from 'react';
-export declare function AlertCircleIcon(props: ComponentPropsWithRef<'svg'>): import("react").JSX.Element;
+export declare function AlertCircleIcon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/AlertCircleIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function AlertCircleIcon(props) {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "M12 8V12M12 16H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" }) }));
+}

package/dist/icons/AlertTriangle.d.ts

@@ -1,2 +1,2 @@
 import type { ComponentPropsWithRef } from 'react';
-export declare function AlertTriangleIcon(props: ComponentPropsWithRef<'svg'>): import("react").JSX.Element;
+export declare function AlertTriangleIcon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/AlertTriangle.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function AlertTriangleIcon(props) {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "M11.9998 8.99999V13M11.9998 17H12.0098M10.6151 3.89171L2.39019 18.0983C1.93398 18.8863 1.70588 19.2803 1.73959 19.6037C1.769 19.8857 1.91677 20.142 2.14613 20.3088C2.40908 20.5 2.86435 20.5 3.77487 20.5H20.2246C21.1352 20.5 21.5904 20.5 21.8534 20.3088C22.0827 20.142 22.2305 19.8857 22.2599 19.6037C22.2936 19.2803 22.0655 18.8863 21.6093 18.0983L13.3844 3.89171C12.9299 3.10654 12.7026 2.71396 12.4061 2.58211C12.1474 2.4671 11.8521 2.4671 11.5935 2.58211C11.2969 2.71396 11.0696 3.10655 10.6151 3.89171Z" }) }));
+}

package/dist/icons/Announcement01Icon.d.ts

@@ -1,2 +1,2 @@
 import type { ComponentPropsWithRef } from 'react';
-export declare function Announcement01Icon(props: ComponentPropsWithRef<'svg'>): import("react").JSX.Element;
+export declare function Announcement01Icon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/Announcement01Icon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Announcement01Icon(props) {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "M22 7.99992V11.9999M10.25 5.49991H6.8C5.11984 5.49991 4.27976 5.49991 3.63803 5.82689C3.07354 6.11451 2.6146 6.57345 2.32698 7.13794C2 7.77968 2 8.61976 2 10.2999L2 11.4999C2 12.4318 2 12.8977 2.15224 13.2653C2.35523 13.7553 2.74458 14.1447 3.23463 14.3477C3.60218 14.4999 4.06812 14.4999 5 14.4999V18.7499C5 18.9821 5 19.0982 5.00963 19.1959C5.10316 20.1455 5.85441 20.8968 6.80397 20.9903C6.90175 20.9999 7.01783 20.9999 7.25 20.9999C7.48217 20.9999 7.59826 20.9999 7.69604 20.9903C8.64559 20.8968 9.39685 20.1455 9.49037 19.1959C9.5 19.0982 9.5 18.9821 9.5 18.7499V14.4999H10.25C12.0164 14.4999 14.1772 15.4468 15.8443 16.3556C16.8168 16.8857 17.3031 17.1508 17.6216 17.1118C17.9169 17.0756 18.1402 16.943 18.3133 16.701C18.5 16.4401 18.5 15.9179 18.5 14.8736V5.1262C18.5 4.08191 18.5 3.55976 18.3133 3.2988C18.1402 3.05681 17.9169 2.92421 17.6216 2.88804C17.3031 2.84903 16.8168 3.11411 15.8443 3.64427C14.1772 4.55302 12.0164 5.49991 10.25 5.49991Z" }) }));
+}

package/dist/icons/ArrowLeftIcon.d.ts

@@ -1,2 +1,2 @@
 import type { ComponentPropsWithRef } from 'react';
-export declare function ArrowLeftIcon(props: ComponentPropsWithRef<'svg'>): import("react").JSX.Element;
+export declare function ArrowLeftIcon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/ArrowLeftIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ArrowLeftIcon(props) {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "M19 12H5M5 12L12 19M5 12L12 5" }) }));
+}

package/dist/icons/ArrowNarrowDownIcon.d.ts

@@ -1,2 +1,2 @@
 import type { ComponentPropsWithRef } from 'react';
-export declare function ArrowNarrowDownIcon(props: ComponentPropsWithRef<'svg'>): import("react").JSX.Element;
+export declare function ArrowNarrowDownIcon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/ArrowNarrowDownIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ArrowNarrowDownIcon(props) {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "M12 4V20M12 20L18 14M12 20L6 14" }) }));
+}

package/dist/icons/ArrowNarrowUpIcon.d.ts

@@ -1,2 +1,2 @@
 import type { ComponentPropsWithRef } from 'react';
-export declare function ArrowNarrowUpIcon(props: ComponentPropsWithRef<'svg'>): import("react").JSX.Element;
+export declare function ArrowNarrowUpIcon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/ArrowNarrowUpIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ArrowNarrowUpIcon(props) {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "M12 20V4M12 4L6 10M12 4L18 10" }) }));
+}

package/dist/icons/ArrowNarrowUpRightIcon.d.ts

@@ -1,2 +1,2 @@
 import type { ComponentPropsWithRef } from 'react';
-export declare function ArrowNarrowUpRightIcon(props: ComponentPropsWithRef<'svg'>): import("react").JSX.Element;
+export declare function ArrowNarrowUpRightIcon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/ArrowNarrowUpRightIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ArrowNarrowUpRightIcon(props) {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "M6 18L18 6M18 6H10M18 6V14" }) }));
+}

package/dist/icons/ArrowRightIcon.d.ts

@@ -1,2 +1,2 @@
 import type { ComponentPropsWithRef } from 'react';
-export declare function ArrowRightIcon(props: ComponentPropsWithRef<'svg'>): import("react").JSX.Element;
+export declare function ArrowRightIcon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/ArrowRightIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ArrowRightIcon(props) {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "M5 12H19M19 12L12 5M19 12L12 19" }) }));
+}

package/dist/icons/Award01Icon.d.ts

@@ -1,2 +1,2 @@
 import type { ComponentPropsWithRef } from 'react';
-export declare function Award01Icon(props: ComponentPropsWithRef<'svg'>): import("react").JSX.Element;
+export declare function Award01Icon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/Award01Icon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Award01Icon(props) {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "M7 15.0903V22L11.7029 20.1188C11.8126 20.0749 11.8675 20.053 11.9242 20.0443C11.9744 20.0366 12.0256 20.0366 12.0758 20.0443C12.1325 20.053 12.1874 20.0749 12.2971 20.1188L17 22V15.0903M19.5 9.5C19.5 13.6421 16.1421 17 12 17C7.85786 17 4.5 13.6421 4.5 9.5C4.5 5.35786 7.85786 2 12 2C16.1421 2 19.5 5.35786 19.5 9.5Z" }) }));
+}

package/dist/icons/Award02Icon.d.ts

@@ -1,2 +1,2 @@
 import type { ComponentPropsWithRef } from 'react';
-export declare function Award02Icon(props: ComponentPropsWithRef<'svg'>): import("react").JSX.Element;
+export declare function Award02Icon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/Award02Icon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Award02Icon(props) {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "M7 15.0903V22L11.7029 20.1188C11.8126 20.0749 11.8675 20.053 11.9242 20.0443C11.9744 20.0366 12.0256 20.0366 12.0758 20.0443C12.1325 20.053 12.1874 20.0749 12.2971 20.1188L17 22V15.0903M19.5 9.5C19.5 13.6421 16.1421 17 12 17C7.85786 17 4.5 13.6421 4.5 9.5C4.5 5.35786 7.85786 2 12 2C16.1421 2 19.5 5.35786 19.5 9.5Z" }) }));
+}

package/dist/icons/BankIcon.d.ts

@@ -1,2 +1,2 @@
 import type { ComponentPropsWithRef } from 'react';
-export declare function BankIcon(props: ComponentPropsWithRef<'svg'>): import("react").JSX.Element;
+export declare function BankIcon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;