@opexa/portal-components 0.0.29 → 0.0.31

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/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;

package/dist/icons/BankIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function BankIcon(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 9.00002V17M9.5 9.00002V17M14.5 9.00002V17M19 9.00002V17M3 18.6L3 19.4C3 19.9601 3 20.2401 3.10899 20.454C3.20487 20.6422 3.35785 20.7952 3.54601 20.891C3.75992 21 4.03995 21 4.6 21H19.4C19.9601 21 20.2401 21 20.454 20.891C20.6422 20.7952 20.7951 20.6422 20.891 20.454C21 20.2401 21 19.9601 21 19.4V18.6C21 18.04 21 17.7599 20.891 17.546C20.7951 17.3579 20.6422 17.2049 20.454 17.109C20.2401 17 19.9601 17 19.4 17H4.6C4.03995 17 3.75992 17 3.54601 17.109C3.35785 17.2049 3.20487 17.3579 3.10899 17.546C3 17.7599 3 18.04 3 18.6ZM11.6529 3.07715L4.25291 4.7216C3.80585 4.82094 3.58232 4.87062 3.41546 4.99082C3.26829 5.09685 3.15273 5.24092 3.08115 5.40759C3 5.59654 3 5.82553 3 6.28349L3 7.40002C3 7.96007 3 8.2401 3.10899 8.45401C3.20487 8.64217 3.35785 8.79515 3.54601 8.89103C3.75992 9.00002 4.03995 9.00002 4.6 9.00002H19.4C19.9601 9.00002 20.2401 9.00002 20.454 8.89103C20.6422 8.79515 20.7951 8.64217 20.891 8.45401C21 8.2401 21 7.96007 21 7.40002V6.2835C21 5.82553 21 5.59655 20.9188 5.40759C20.8473 5.24092 20.7317 5.09685 20.5845 4.99082C20.4177 4.87062 20.1942 4.82094 19.7471 4.7216L12.3471 3.07715C12.2176 3.04837 12.1528 3.03398 12.0874 3.02824C12.0292 3.02314 11.9708 3.02314 11.9126 3.02824C11.8472 3.03398 11.7824 3.04837 11.6529 3.07715Z" }) }));
+}

package/dist/icons/Bell01Icon.d.ts

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

package/dist/icons/Bell01Icon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Bell01Icon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", ...props, children: _jsx("path", { d: "M7.7952 17.5C8.38281 18.0186 9.15468 18.3333 10.0001 18.3333C10.8454 18.3333 11.6173 18.0186 12.2049 17.5M15.0001 6.66666C15.0001 5.34057 14.4733 4.0688 13.5356 3.13112C12.5979 2.19344 11.3261 1.66666 10.0001 1.66666C8.67397 1.66666 7.4022 2.19344 6.46452 3.13112C5.52684 4.0688 5.00006 5.34057 5.00006 6.66666C5.00006 9.24181 4.35045 11.005 3.62478 12.1712C3.01266 13.1549 2.7066 13.6467 2.71783 13.784C2.73025 13.9359 2.76244 13.9938 2.88487 14.0846C2.99544 14.1667 3.49388 14.1667 4.49077 14.1667H15.5093C16.5062 14.1667 17.0047 14.1667 17.1152 14.0846C17.2377 13.9938 17.2699 13.9359 17.2823 13.784C17.2935 13.6467 16.9875 13.1549 16.3753 12.1712C15.6497 11.005 15.0001 9.24181 15.0001 6.66666Z", strokeWidth: "1.66667", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}

package/dist/icons/BellRingIcon.d.ts

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

package/dist/icons/BellRingIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function BellRingIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 25 24", fill: "none", stroke: "currentColor", ...props, children: _jsx("path", { d: "M15.5002 19C15.5002 20.6569 14.1571 22 12.5002 22C10.8434 22 9.50025 20.6569 9.50025 19M14.2968 6.23856C14.7322 5.78864 15.0002 5.17562 15.0002 4.5C15.0002 3.11929 13.881 2 12.5002 2C11.1195 2 10.0002 3.11929 10.0002 4.5C10.0002 5.17562 10.2683 5.78864 10.7037 6.23856M3.04707 8.32296C3.03272 6.87161 3.8152 5.51631 5.07928 4.80306M21.9534 8.32296C21.9678 6.87161 21.1853 5.51631 19.9212 4.80306M18.5002 11.2C18.5002 9.82087 17.8681 8.49823 16.7429 7.52304C15.6177 6.54786 14.0915 6 12.5002 6C10.9089 6 9.38283 6.54786 8.25761 7.52304C7.13239 8.49823 6.50025 9.82087 6.50025 11.2C6.50025 13.4818 5.93438 15.1506 5.22831 16.3447C4.42359 17.7056 4.02122 18.3861 4.03711 18.5486C4.05529 18.7346 4.08876 18.7933 4.23959 18.9036C4.37142 19 5.03376 19 6.35844 19H18.6421C19.9667 19 20.6291 19 20.7609 18.9036C20.9117 18.7933 20.9452 18.7346 20.9634 18.5486C20.9793 18.3861 20.5769 17.7056 19.7722 16.3447C19.0661 15.1506 18.5002 13.4818 18.5002 11.2Z", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}

package/dist/icons/CalendarIcon.d.ts

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

package/dist/icons/CalendarIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CalendarIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "17", height: "18", viewBox: "0 0 17 18", fill: "none", stroke: "currentColor", ...props, children: _jsx("path", { d: "M11.5477 0.666687V4.00002M4.88102 0.666687V4.00002M4.71436 17.3334H11.7144C13.1145 17.3334 13.8146 17.3334 14.3493 17.0609C14.8197 16.8212 15.2022 16.4387 15.4419 15.9683C15.7144 15.4336 15.7144 14.7335 15.7144 13.3334V6.33335C15.7144 4.93322 15.7144 4.23316 15.4419 3.69838C15.2022 3.22797 14.8197 2.84552 14.3493 2.60584C13.8146 2.33335 13.1145 2.33335 11.7144 2.33335H4.71436C3.31422 2.33335 2.61416 2.33335 2.07938 2.60584C1.60897 2.84552 1.22652 3.22797 0.986839 3.69838C0.714355 4.23316 0.714355 4.93322 0.714355 6.33335V13.3334C0.714355 14.7335 0.714355 15.4336 0.986839 15.9683C1.22652 16.4387 1.60897 16.8212 2.07938 17.0609C2.61416 17.3334 3.31422 17.3334 4.71436 17.3334Z", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}

package/dist/icons/Camera01Icon.d.ts

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

package/dist/icons/Camera01Icon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Camera01Icon(props) {
+    return (_jsxs("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: "M2 8.37722C2 8.0269 2 7.85174 2.01462 7.70421C2.1556 6.28127 3.28127 5.1556 4.70421 5.01462C4.85174 5 5.03636 5 5.40558 5C5.54785 5 5.61899 5 5.67939 4.99634C6.45061 4.94963 7.12595 4.46288 7.41414 3.746C7.43671 3.68986 7.45781 3.62657 7.5 3.5C7.54219 3.37343 7.56329 3.31014 7.58586 3.254C7.87405 2.53712 8.54939 2.05037 9.32061 2.00366C9.38101 2 9.44772 2 9.58114 2H14.4189C14.5523 2 14.619 2 14.6794 2.00366C15.4506 2.05037 16.126 2.53712 16.4141 3.254C16.4367 3.31014 16.4578 3.37343 16.5 3.5C16.5422 3.62657 16.5633 3.68986 16.5859 3.746C16.874 4.46288 17.5494 4.94963 18.3206 4.99634C18.381 5 18.4521 5 18.5944 5C18.9636 5 19.1483 5 19.2958 5.01462C20.7187 5.1556 21.8444 6.28127 21.9854 7.70421C22 7.85174 22 8.0269 22 8.37722V16.2C22 17.8802 22 18.7202 21.673 19.362C21.3854 19.9265 20.9265 20.3854 20.362 20.673C19.7202 21 18.8802 21 17.2 21H6.8C5.11984 21 4.27976 21 3.63803 20.673C3.07354 20.3854 2.6146 19.9265 2.32698 19.362C2 18.7202 2 17.8802 2 16.2V8.37722Z" }), _jsx("path", { d: "M12 16.5C14.2091 16.5 16 14.7091 16 12.5C16 10.2909 14.2091 8.5 12 8.5C9.79086 8.5 8 10.2909 8 12.5C8 14.7091 9.79086 16.5 12 16.5Z" })] }));
+}

package/dist/icons/CheckCircleBrokenIcon.d.ts

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