@opexa/portal-components 0.0.52 → 0.0.54

package/dist/components/BetRecords/BetRecords.js

@@ -134,7 +134,7 @@ export function BetRecords(props) {
                                                             delimiter: capitalize.delimiters.UNDERSCORE,
                                                         }) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, status))) }) }) }) })] })] }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
                     ? 'Fetching latest bet records...'
-                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'relative', 'left-1/2', 'right-1/2', '-mx-[50dvw]', 'w-dvw', 'lg:mt-3xl', 'lg:-mx-0', 'lg:-ml-0', 'lg:left-0', 'lg:right-0', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Bet Time" }), _jsx(Table.Heading, { children: "Settlement Time" }), _jsx(Table.Heading, { children: "Bet Content" }), _jsx(Table.Heading, { children: "Odds" }), _jsx(Table.Heading, { children: "Bet Amount" }), _jsx(Table.Heading, { children: "Valid Bet" }), _jsx(Table.Heading, { children: "Settled Amount" }), _jsx(Table.Heading, { children: "Jackpot Contribution" }), _jsx(Table.Heading, { children: "Jackpot Payout" }), _jsx(Table.Heading, { children: "Bet Status" }), _jsx(Table.Heading, { children: "Game Name" }), _jsx(Table.Heading, { children: "Vendor Round ID" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsxs(Table.Cell, { className: "!py-1", children: [_jsx("div", { className: "leading-tight", children: format(data.dateTimeCreated, 'MM/dd/yyyy', {
+                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Bet Time" }), _jsx(Table.Heading, { children: "Settlement Time" }), _jsx(Table.Heading, { children: "Bet Content" }), _jsx(Table.Heading, { children: "Odds" }), _jsx(Table.Heading, { children: "Bet Amount" }), _jsx(Table.Heading, { children: "Valid Bet" }), _jsx(Table.Heading, { children: "Settled Amount" }), _jsx(Table.Heading, { children: "Jackpot Contribution" }), _jsx(Table.Heading, { children: "Jackpot Payout" }), _jsx(Table.Heading, { children: "Bet Status" }), _jsx(Table.Heading, { children: "Game Name" }), _jsx(Table.Heading, { children: "Vendor Round ID" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsxs(Table.Cell, { className: "!py-1", children: [_jsx("div", { className: "leading-tight", children: format(data.dateTimeCreated, 'MM/dd/yyyy', {
                                                             in: tz(localeInfo.timezone),
                                                         }) }), _jsx("div", { className: "text-text-tertiary-600 leading-tight", children: format(data.dateTimeCreated, 'hh:mm a', {
                                                             in: tz(localeInfo.timezone),

package/dist/components/KYC/Header.d.ts

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

package/dist/components/KYC/Header.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, XIcon } from '../../icons/index.js';
+import { Dialog, IconButton } from '../../ui/index.js';
+export function Header() {
+    return (_jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "bg-bg-primary-alt relative flex items-center gap-xl px-xl py-md lg:justify-center lg:bg-transparent lg:p-0", children: [_jsx(IconButton, { size: "2xs", variant: "outline", colorScheme: "gray", className: "lg:hidden", onClick: () => api.setOpen(false), children: _jsx(ChevronLeftIcon, {}) }), _jsx(Dialog.Title, { className: "text-lg font-semibold", children: "Personal Verification" }), _jsx("button", { type: "button", className: "text-text-quinary absolute right-0 top-1/2 hidden -translate-y-1/2 lg:block", onClick: () => api.setOpen(false), children: _jsx(XIcon, { className: "size-6" }) })] })) }));
+}

package/dist/components/KYC/Indicator.d.ts

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

package/dist/components/KYC/Indicator.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { noop } from 'lodash-es';
+import { ArrowLeftIcon } from '../../icons/index.js';
+import { Progress } from '../../ui/index.js';
+import { useKYCContext } from './KYCContext.js';
+export function Indicator() {
+    const context = useKYCContext();
+    return (_jsxs("div", { className: "mt-xl grid grid-cols-[max-content_auto_auto] items-center px-xl lg:mt-md lg:px-0", children: [_jsxs("button", { className: "text-text-tertiary-600 flex items-center gap-sm text-sm font-semibold", children: [_jsx(ArrowLeftIcon, { className: "size-5" }), "Back"] }), _jsxs("div", { className: "flex justify-center gap-2", children: [_jsx(Progress.Root, { className: "w-[5.625rem] shrink-0", value: context.step >= 2 ? 100 : 50, onValueChange: noop, children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx(Progress.Root, { className: "w-[5.625rem] shrink-0", value: context.step >= 3 ? 50 : 0, onValueChange: noop, children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) })] })] }));
+}

package/dist/components/KYC/KYC.js

@@ -1,14 +1,26 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Portal } from '@ark-ui/react';
+import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/index.js';
 import { Dialog } from '../../ui/index.js';
+import { Header } from './Header.js';
+import { Indicator } from './Indicator.js';
+import { KYCContext } from './KYCContext.js';
+import { Step1 } from './Step1.js';
+import { Step2 } from './Step2.js';
+import { Step3 } from './Step3.js';
+import { Step4 } from './Step4.js';
+import { useKYC } from './useKYC.js';
 export function KYC() {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         kyc: ctx.kyc,
     })));
-    return (_jsx(Dialog.Root, { open: globalStore.kyc.open, onOpenChange: (details) => {
-            globalStore.kyc.setOpen(details.open);
-        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsx(Dialog.Content, { children: "Hello" }) })] }) }));
+    const context = useKYC();
+    return (_jsx(KYCContext, { value: context, children: _jsx(Dialog.Root, { open: globalStore.kyc.open, onOpenChange: (details) => {
+                globalStore.kyc.setOpen(details.open);
+            }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: twMerge(context.step === 4 && 'flex items-center'), children: _jsxs(Dialog.Content, { className: twMerge(context.step < 4
+                                ? 'bg-bg-primary lg:bg-bg-primary-alt mx-auto h-full w-full lg:h-auto lg:w-[400px] lg:p-3xl'
+                                : 'mx-auto w-[25rem] max-w-[calc(100%-2rem)] p-3xl'), children: [context.step < 4 && _jsx(Header, {}), context.step < 4 && _jsx(Indicator, {}), context.step === 1 && _jsx(Step1, {}), context.step === 2 && _jsx(Step2, {}), context.step === 3 && _jsx(Step3, {}), context.step === 4 && _jsx(Step4, {})] }) })] }) }) }));
 }

package/dist/components/KYC/KYCContext.d.ts

@@ -1 +1,3 @@
-export declare function KYCContext(): null;
+import type { UseKYCReturn } from './useKYC';
+export declare const KYCContext: import("react").Context<UseKYCReturn | null>;
+export declare const useKYCContext: () => UseKYCReturn;

package/dist/components/KYC/KYCContext.js

@@ -1,3 +1,8 @@
-export function KYCContext() {
-    return null;
-}
+import { createContext, useContext } from 'react';
+import invariant from 'tiny-invariant';
+export const KYCContext = createContext(null);
+export const useKYCContext = () => {
+    const context = useContext(KYCContext);
+    invariant(context);
+    return context;
+};

package/dist/components/KYC/KYCTrigger.js

@@ -7,8 +7,8 @@ export function KYCTrigger(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         kyc: ctx.kyc,
     })));
-    return (_jsx(ark.button, { type: "button", ...props, onClick: (e) => {
+    return (_jsx(ark.button, { type: "button", "aria-label": "Verify your identity now", "data-state": globalStore.kyc.open ? 'open' : 'closed', ...props, onClick: (e) => {
             globalStore.kyc.setOpen(true);
             return props.onClick?.(e);
-        }, "data-state": globalStore.kyc.open ? 'open' : 'closed' }));
+        } }));
 }

package/dist/components/KYC/Step1.d.ts

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

package/dist/components/KYC/Step1.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { CheckIcon, XIcon } from '../../icons/index.js';
+import uploadId from '../../images/capture-id-banner.png';
+import { Button } from '../../ui/index.js';
+import { useKYCContext } from './KYCContext.js';
+export function Step1() {
+    const context = useKYCContext();
+    return (_jsxs("div", { className: "mt-2xl px-xl lg:mt-3xl lg:px-0", children: [_jsx("p", { className: "lg:text-text-secondary-700 text-center text-2xl font-semibold lg:text-base", children: "Prepare to upload your ID" }), _jsxs("div", { className: "border-border-secondary bg-bg-primary-alt mt-6 rounded-xl border p-4 lg:mt-2xl lg:border-0 lg:bg-transparent lg:p-0", children: [_jsx(Image, { src: uploadId, alt: "", className: "h-auto w-full", width: 600, height: 352 }), _jsxs("ul", { className: "mt-2xl space-y-3", children: [_jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Upload front side of your ID"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Take a photo in a well lit room"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(XIcon, { className: "text-text-featured-icon-light-error size-6" }), "Don't edit image of your ID"] })] }), _jsxs("div", { className: "mt-4xl space-y-lg", children: [_jsx(Button, { onClick: () => {
+                                    context.setStep(2);
+                                }, children: "Continue" }), _jsx(Button, { variant: "outline", children: "Continue on phone" })] })] })] }));
+}

package/dist/components/KYC/Step2.d.ts

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

package/dist/components/KYC/Step2.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { CheckIcon, XIcon } from '../../icons/index.js';
+import selfie from '../../images/capture-selfie-banner.png';
+import { Button } from '../../ui/index.js';
+import { useKYCContext } from './KYCContext.js';
+export function Step2() {
+    const context = useKYCContext();
+    return (_jsxs("div", { className: "mt-2xl px-xl lg:mt-3xl lg:px-0", children: [_jsx("p", { className: "lg:text-text-secondary-700 text-center text-2xl font-semibold lg:text-base", children: "Take a selfie holding your ID" }), _jsxs("div", { className: "border-border-secondary bg-bg-primary-alt mt-6 rounded-xl border p-4 lg:mt-2xl lg:border-0 lg:bg-transparent lg:p-0", children: [_jsx(Image, { src: selfie, alt: "", className: "h-auto w-full", width: 600, height: 352 }), _jsxs("ul", { className: "mt-2xl space-y-3", children: [_jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Face and ID must be clearly visible"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Take a photo in a well lit room"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(XIcon, { className: "text-text-featured-icon-light-error size-6" }), "No hats, sunglasses, or masks"] })] }), _jsxs("div", { className: "mt-4xl space-y-lg", children: [_jsx(Button, { size: "sm", onClick: () => {
+                                    context.setStep(3);
+                                }, children: "Continue" }), _jsx(Button, { variant: "outline", children: "Continue on phone" })] })] })] }));
+}

package/dist/components/KYC/Step3.d.ts

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

package/dist/components/KYC/Step3.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon } from '../../icons/index.js';
+import { Button, Checkbox, Field } from '../../ui/index.js';
+import { useKYCContext } from './KYCContext.js';
+export function Step3() {
+    const context = useKYCContext();
+    return (_jsxs("div", { className: "mt-2xl px-xl lg:mt-3xl lg:px-0", children: [_jsx("p", { className: "lg:text-text-secondary-700 text-center text-2xl font-semibold lg:text-base", children: "Enter your basic and work-related information" }), _jsxs("form", { className: "border-border-secondary bg-bg-primary-alt mt-6 rounded-xl border p-4 lg:mt-2xl lg:border-0 lg:bg-transparent lg:p-0", onSubmit: (e) => {
+                    e.preventDefault();
+                    context.setStep(4);
+                }, children: [_jsxs(Field.Root, { children: [_jsx(Field.Label, { children: "Permanent address" }), _jsx(Field.Input, { placeholder: "Enter your permanent address" })] }), _jsxs(Checkbox.Root, { className: "mt-2xl", children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { children: "Same as permanent address" }), _jsx(Checkbox.HiddenInput, {})] }), _jsxs(Field.Root, { className: "mt-sm", children: [_jsx(Field.Label, { children: "Current address" }), _jsx(Field.Input, { placeholder: "Enter your current address" })] }), _jsxs(Field.Root, { className: "mt-2xl", children: [_jsx(Field.Label, { children: "Source of income" }), _jsx(Field.Input, { placeholder: "Enter your source of income" })] }), _jsxs(Field.Root, { className: "mt-2xl", children: [_jsx(Field.Label, { children: "Work Description" }), _jsx(Field.Input, { placeholder: "Enter your work description" })] }), _jsxs(Field.Root, { className: "mt-2xl", children: [_jsx(Field.Label, { children: "Place of birth" }), _jsx(Field.Input, { placeholder: "Enter your place of birth" })] }), _jsxs(Field.Root, { className: "mt-2xl", children: [_jsx(Field.Label, { children: "Nationality" }), _jsx(Field.Input, { placeholder: "Enter your nationality" })] }), _jsx(Button, { type: "submit", className: "mt-4xl", children: "Submit" })] })] }));
+}

package/dist/components/KYC/Step4.d.ts

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

package/dist/components/KYC/Step4.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircleIcon } from '../../icons/index.js';
+import { Button, Dialog } from '../../ui/index.js';
+export function Step4() {
+    return (_jsxs("div", { children: [_jsx("div", { className: "bg-bg-success-secondary text-text-featured-icon-light-success mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(CheckCircleIcon, {}) }), _jsx("h2", { className: "mt-3 text-center", children: "Submission Successful" }), _jsx("p", { className: "text-text-tertiary-600 text-center", children: "Your documents have been submitted successfully. They\u2019re now under review, and you\u2019ll receive a notification as soon as your account is verified." }), _jsx(Dialog.Context, { children: (api) => (_jsx(Button, { className: "mt-3xl", onClick: () => api.setOpen(false), children: "Ok" })) })] }));
+}

package/dist/components/KYC/useKYC.d.ts

@@ -1,4 +1,8 @@
-type Step = 1 | 2 | 3;
+type Step = 1 | 2 | 3 | 4;
+export interface UseKYCReturn {
+    step: Step;
+    setStep: (step: Step) => void;
+}
 export declare function useKYC(): {
     step: Step;
     setStep: import("react").Dispatch<import("react").SetStateAction<Step>>;

package/dist/components/TransactionRecords/DepositRecordsTable.js

@@ -44,7 +44,7 @@ export function DepositRecordsTable() {
                     setDepositStatus(value.depositStatus);
                 } }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
                     ? 'Fetching latest deposit records...'
-                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'relative', 'left-1/2', 'right-1/2', '-mx-[50dvw]', 'w-dvw', 'lg:mt-3xl', 'lg:-mx-0', 'lg:-ml-0', 'lg:left-0', 'lg:right-0', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Deposit No." }), _jsx(Table.Heading, { children: "Reference" }), _jsx(Table.Heading, { children: "Deposit Method" }), _jsx(Table.Heading, { children: "Applied Amount" }), _jsx(Table.Heading, { children: "Recieved Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Deposit Time" }), _jsx(Table.Heading, { children: "Recieved Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.depositNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
+                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Deposit No." }), _jsx(Table.Heading, { children: "Reference" }), _jsx(Table.Heading, { children: "Deposit Method" }), _jsx(Table.Heading, { children: "Applied Amount" }), _jsx(Table.Heading, { children: "Recieved Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Deposit Time" }), _jsx(Table.Heading, { children: "Recieved Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.depositNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
                                                     delimiter: capitalize.delimiters.UNDERSCORE,
                                                 }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.amount, {
                                                     currency: localeInfo.currency.code,

package/dist/components/TransactionRecords/TransactionRecordsTable.js

@@ -35,7 +35,7 @@ export function TransactionRecordsTable() {
                     transactionType: true,
                 } }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
                     ? 'Fetching latest transaction records...'
-                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'relative', 'left-1/2', 'right-1/2', '-mx-[50dvw]', 'w-dvw', 'lg:mt-3xl', 'lg:-mx-0', 'lg:-ml-0', 'lg:left-0', 'lg:right-0', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Transaction Type" }), _jsx(Table.Heading, { children: "Transaction Time" }), _jsx(Table.Heading, { children: "Amount" }), _jsx(Table.Heading, { children: "Current Balance" }), _jsx(Table.Heading, { children: "Reference Number" }), _jsx(Table.Heading, { children: "Content" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
+                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Transaction Type" }), _jsx(Table.Heading, { children: "Transaction Time" }), _jsx(Table.Heading, { children: "Amount" }), _jsx(Table.Heading, { children: "Current Balance" }), _jsx(Table.Heading, { children: "Reference Number" }), _jsx(Table.Heading, { children: "Content" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
                                                     delimiter: capitalize.delimiters.UNDERSCORE,
                                                 }) }), _jsxs(Table.Cell, { className: "!py-1", children: [_jsx("div", { className: "leading-tight", children: format(data.dateTimeCreated, 'MM/dd/yyyy', {
                                                             in: tz(localeInfo.timezone),

package/dist/components/TransactionRecords/WithdrawalRecordsTable.js

@@ -43,7 +43,7 @@ export function WithdrawalRecordsTable() {
                     setWithdrawalStatus(value.withdrawalStatus);
                 } }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
                     ? 'Fetching latest withdrawal records...'
-                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'relative', 'left-1/2', 'right-1/2', '-mx-[50dvw]', 'w-dvw', 'lg:mt-3xl', 'lg:-mx-0', 'lg:-ml-0', 'lg:left-0', 'lg:right-0', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Withdrawal No." }), _jsx(Table.Heading, { children: "Reference" }), _jsx(Table.Heading, { children: "Withdrawal Method" }), _jsx(Table.Heading, { children: "Mobile Number" }), _jsx(Table.Heading, { children: "Withdrawal Amount" }), _jsx(Table.Heading, { children: "Net Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Bank Name" }), _jsx(Table.Heading, { children: "Withdrawal Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.withdrawalNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
+                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Withdrawal No." }), _jsx(Table.Heading, { children: "Reference" }), _jsx(Table.Heading, { children: "Withdrawal Method" }), _jsx(Table.Heading, { children: "Mobile Number" }), _jsx(Table.Heading, { children: "Withdrawal Amount" }), _jsx(Table.Heading, { children: "Net Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Bank Name" }), _jsx(Table.Heading, { children: "Withdrawal Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.withdrawalNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
                                                     delimiter: capitalize.delimiters.UNDERSCORE,
                                                 }) }), _jsx(Table.Cell, { className: "!py-1", children: data.recipientMobileNumber }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.amount, {
                                                     currency: localeInfo.currency.code,

package/dist/styles/theme.css

@@ -668,6 +668,24 @@
   --arrow-size: --value([\*]);
 }
 
+@utility bleed {
+  position: relative;
+  width: 100dvw;
+  left: 50%;
+  right: 50%;
+  margin-left: -50dvw;
+  margin-right: -50dvw;
+}
+
+@utility not-bleed {
+  position: relative;
+  width: auto;
+  left: auto;
+  right: auto;
+  margin-left: 0;
+  margin-right: 0;
+}
+
 @custom-variant icon (& svg);
 @custom-variant tr (& tr);
 @custom-variant td (& td);