@opexa/portal-components 0.0.920 → 0.0.922

package/dist/client/hooks/useUpdateMobileNumber.d.ts

@@ -0,0 +1,3 @@
+import { type UpdateMobileNumberInput } from '../../services/account';
+import type { Mutation } from '../../types';
+export declare const useUpdateMobileNumber: Mutation<void, UpdateMobileNumberInput>;

package/dist/client/hooks/useUpdateMobileNumber.js

@@ -0,0 +1,20 @@
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { updateMobileNumber, } from '../../services/account.js';
+import { getUpdateMobileNumberMutationKey } from '../../utils/mutationKeys.js';
+import { getSession } from '../services/getSession.js';
+export const useUpdateMobileNumber = (config) => {
+    return useMutation({
+        ...config,
+        mutationKey: getUpdateMobileNumberMutationKey(),
+        mutationFn: async (input) => {
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            await updateMobileNumber(input.verificationCode, input.mobileNumber, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+        },
+    });
+};

package/dist/components/AccountInfo/AccountInfo.js

@@ -29,6 +29,7 @@ import { FacebookIcon } from '../../icons/FacebookIcon.js';
 import { GoogleIcon } from '../../icons/GoogleIcon.js';
 import { LinkBroken02Icon } from '../../icons/LinkBroken02Icon.js';
 import { XIcon } from '../../icons/XIcon.js';
+import AlertCircleIconImage from '../../images/alert-circle-icon.png';
 import avatarPlaceholder from '../../images/placeholder-avatar.png';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
@@ -204,9 +205,7 @@ function ContactInfo({ variant }) {
             });
         }
     }, [account, form, parse]);
-    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "grow font-semibold text-sm text-text-secondary-700", children: "Contact Info" }), _jsx(ark.svg, { asChild: true, className: twMerge('size-6', profileCompletion?.personalInformation
-                            ? 'text-text-success-primary'
-                            : 'text-text-warning-primary'), children: profileCompletion?.personalInformation ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("form", { className: "mt-5 rounded-xl border border-border-secondary bg-bg-primary-alt shadow-xs", onSubmit: form.handleSubmit((data) => {
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "grow font-semibold text-sm text-text-secondary-700", children: "Contact Info" }), profileCompletion?.personalInformation ? (_jsx(ark.svg, { asChild: true, className: "size-6 text-text-success-primary", children: _jsx(CheckVerified02Icon, {}) })) : (_jsxs("div", { className: "flex items-center gap-1 rounded-sm border border-[#93370d] bg-[#4e1d09] px-sm py-xs", children: [_jsx(AlertCircleIcon, { className: "h-5 w-5 text-[#FEC84B]" }), _jsx("span", { className: "m-0 text-[#FEC84B] text-xs", children: "Not Set" })] }))] }), _jsx(AlertWarning, { title: "Please add an email address to your account to receive important notifications.", className: "my-3" }), _jsxs("form", { className: "rounded-xl border border-border-secondary bg-bg-primary-alt shadow-xs", onSubmit: form.handleSubmit((data) => {
                     updateAccountMutation.mutate({
                         emailAddress: data.emailAddress && account?.emailAddress !== data.emailAddress
                             ? data.emailAddress
@@ -316,3 +315,6 @@ function UnlinkGoogleAccount() {
                                                     unlinkGoogleMutation.mutate(account.id);
                                                 }, children: "Disconnect" })] })) })] }) })] })] }));
 }
+function AlertWarning({ title, className, }) {
+    return (_jsxs("div", { className: twMerge('flex items-center gap-2 rounded-xl border border-border-secondary bg-bg-primary-alt p-xl', className), children: [_jsx(Image, { src: AlertCircleIconImage, alt: "Alert", className: "w-10 object-contain", draggable: false }), _jsx("p", { className: "font-semibold text-sm text-text-tertiary-600", children: title })] }));
+}

package/dist/components/AccountSecurity/AccountSecurity.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createListCollection } from '@ark-ui/react/collection';
 import { ark } from '@ark-ui/react/factory';
 import { zodResolver } from '@hookform/resolvers/zod';
+import Image from 'next/image';
 import { useForm } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
@@ -16,6 +17,7 @@ import { CheckVerified02Icon } from '../../icons/CheckVerified02Icon.js';
 import { ChevronDownIcon } from '../../icons/ChevronDownIcon.js';
 import { EyeIcon } from '../../icons/EyeIcon.js';
 import { EyeOffIcon } from '../../icons/EyeOffIcon.js';
+import AlertCircleIconImage from '../../images/alert-circle-icon.png';
 import { Button } from '../../ui/Button/index.js';
 import { Field } from '../../ui/Field/index.js';
 import { PasswordInput } from '../../ui/PasswordInput/index.js';
@@ -158,14 +160,15 @@ function TransactionPassword() {
             confirmPassword: '',
         },
     });
-    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-start gap-8", children: [_jsxs("div", { className: "grow", children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Transaction password" }), _jsx("p", { className: "text-sm text-text-tertiary-600", children: "The transaction password secures and confirms your wallet withdrawals." })] }), _jsx(ark.svg, { asChild: true, className: twMerge('size-6', profileCompletion?.transactionPassword
-                            ? 'text-text-success-primary'
-                            : 'text-text-warning-primary'), children: profileCompletion?.transactionPassword ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("form", { className: "mt-5 rounded-xl border border-border-secondary bg-bg-primary-alt shadow-xs", onSubmit: form.handleSubmit((data) => {
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-start gap-8", children: [_jsxs("div", { className: "grow", children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Transaction password" }), _jsx("p", { className: "text-sm text-text-tertiary-600", children: "The transaction password secures and confirms your wallet withdrawals." })] }), profileCompletion?.personalInformation ? (_jsx(ark.svg, { asChild: true, className: "size-6 text-text-success-primary", children: _jsx(CheckVerified02Icon, {}) })) : (_jsxs("div", { className: "flex items-center gap-1 rounded-sm border border-[#93370d] bg-[#4e1d09] px-sm py-xs", children: [_jsx(AlertCircleIcon, { className: "h-5 w-5 text-[#FEC84B]" }), _jsx("span", { className: "m-0 text-nowrap text-[#FEC84B] text-xs", children: "Not Set" })] }))] }), _jsx(AlertWarning, { title: "Please set your transaction password. This is required when making withdrawals and helps secure your account.", className: "my-3" }), _jsxs("form", { className: "mt-5 rounded-xl border border-border-secondary bg-bg-primary-alt shadow-xs", onSubmit: form.handleSubmit((data) => {
                     updateAccountMutation.mutate({
                         transactionPassword: data.password,
                     });
                 }), children: [_jsxs("div", { className: "px-xl py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.confirmPassword, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Confirm Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.confirmPassword?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "flex justify-end gap-lg border-border-secondary border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: !form.formState.isValid || updateAccountMutation.isPending, children: "Save Changes" })] }))] })] }));
 }
+function AlertWarning({ title, className, }) {
+    return (_jsxs("div", { className: twMerge('flex items-center gap-2 rounded-xl border border-border-secondary bg-bg-primary-alt p-xl', className), children: [_jsx(Image, { src: AlertCircleIconImage, alt: "Alert", className: "w-10 object-contain", draggable: false }), _jsx("p", { className: "font-semibold text-sm text-text-tertiary-600", children: title })] }));
+}
 const secretQuestionCollection = createListCollection({
     items: SECRET_QUESTIONS,
     itemToValue: (item) => item,

package/dist/components/AccountVerification/AccountVerification.js

@@ -53,7 +53,7 @@ function Status__Missing() {
     return (_jsxs("div", { className: "mt-6 flex flex-col gap-2 rounded-xl border border-border-primary bg-bg-primary-alt p-xl shadow-xs lg:flex-row", children: [_jsx("div", { className: "flex size-[2.1875rem] items-center justify-center rounded-full border-2 border-text-warning-primary/10", children: _jsx("div", { className: "flex size-[1.666625rem] items-center justify-center rounded-full border-2 border-text-warning-primary/30", children: _jsx(AlertCircleIcon, { className: "size-5 text-text-warning-primary" }) }) }), _jsx("p", { className: "max-w-[800px] text-sm text-text-tertiary-600", children: "To serve you better and unlock all features, please provide valid identification documents. This helps protect your account and makes recovery easier if ever needed." })] }));
 }
 function Status__Pending() {
-    return (_jsxs("div", { className: "mt-6 flex flex-col gap-2 rounded-xl border border-border-primary bg-bg-primary-alt p-xl shadow-xs lg:flex-row", children: [_jsx("div", { className: "flex size-[2.1875rem] items-center justify-center rounded-full border-2 border-text-warning-primary/10", children: _jsx("div", { className: "flex size-[1.666625rem] items-center justify-center rounded-full border-2 border-text-warning-primary/30", children: _jsx(FileSearch02Icon, { className: "size-5 text-text-warning-primary" }) }) }), _jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Under review" }), _jsx("p", { className: "mt-xs text-sm text-text-tertiary-600", children: "To serve you better and unlock all features, please provide valid identification documents. This helps protect your account and makes recovery easier if ever needed." })] })] }));
+    return (_jsxs("div", { className: "mt-6 flex flex-col gap-2 rounded-xl border border-border-primary bg-bg-primary-alt p-xl shadow-xs lg:flex-row", children: [_jsx("div", { className: "flex size-[2.1875rem] items-center justify-center rounded-full border-2 border-text-warning-primary/10", children: _jsx("div", { className: "flex size-[1.666625rem] items-center justify-center rounded-full border-2 border-text-warning-primary/30", children: _jsx(FileSearch02Icon, { className: "size-5 text-text-warning-primary" }) }) }), _jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Under review" }), _jsx("p", { className: "mt-xs text-sm text-text-tertiary-600", children: "Your documents have been successfully submitted and are currently under review. This process may take some time. You will be notified once verification is complete." })] })] }));
 }
 function Status__Success() {
     return (_jsxs("div", { className: "mt-6 flex flex-col gap-2 rounded-xl border border-border-primary bg-bg-primary-alt p-xl shadow-xs lg:flex-row", children: [_jsx("div", { className: "flex size-[2.1875rem] items-center justify-center rounded-full border-2 border-text-success-primary/10", children: _jsx("div", { className: "flex size-[1.666625rem] items-center justify-center rounded-full border-2 border-text-success-primary/30", children: _jsx(FileCheck02Icon, { className: "size-5 text-text-success-primary" }) }) }), _jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Verification successful" }), _jsx("p", { className: "mt-xs text-sm text-text-tertiary-600", children: "Your account has been successfully verified. You now have full access to all features and improved account security." })] })] }));

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositContext.d.ts

@@ -1,7 +1,7 @@
 export declare const QRPHDepositContext: (props: {
     value: {
-        view: "form" | "qrCode";
-        status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+        view: "qrCode" | "form";
+        status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
         deposit: import("../../../../types").Deposit | null;
@@ -13,8 +13,8 @@ export declare const QRPHDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useQRPHDepositContext: () => {
-    view: "form" | "qrCode";
-    status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    view: "qrCode" | "form";
+    status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
     deposit: import("../../../../types").Deposit | null;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/useQRPHDeposit.d.ts

@@ -1,8 +1,8 @@
 import type { Deposit } from '../../../../types';
 export type UseQRPHDepositReturn = ReturnType<typeof useQRPHDeposit>;
 export declare function useQRPHDeposit(): {
-    view: "form" | "qrCode";
-    status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    view: "qrCode" | "form";
+    status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
     deposit: Deposit | null;

package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositContext.d.ts

@@ -1,7 +1,7 @@
 export declare const OnlineBankDepositContext: (props: {
     value: {
-        view: "form" | "vca";
-        status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+        view: "vca" | "form";
+        status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
         deposit: import("../../../../types").Deposit | null;
@@ -13,8 +13,8 @@ export declare const OnlineBankDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useOnlineBankDepositContext: () => {
-    view: "form" | "vca";
-    status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    view: "vca" | "form";
+    status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
     deposit: import("../../../../types").Deposit | null;

package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/useOnlineBankDeposit.d.ts

@@ -1,8 +1,8 @@
 import type { Deposit } from '../../../../types';
 export type UseOnlineBankDepositReturn = ReturnType<typeof useOnlineBankDeposit>;
 export declare function useOnlineBankDeposit(): {
-    view: "form" | "vca";
-    status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    view: "vca" | "form";
+    status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
     deposit: Deposit | null;

package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositContext.d.ts

@@ -1,7 +1,7 @@
 export declare const QRPHDepositContext: (props: {
     value: {
-        view: "form" | "qrCode";
-        status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+        view: "qrCode" | "form";
+        status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
         deposit: import("../../../../types").Deposit | null;
@@ -13,8 +13,8 @@ export declare const QRPHDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useQRPHDepositContext: () => {
-    view: "form" | "qrCode";
-    status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    view: "qrCode" | "form";
+    status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
     deposit: import("../../../../types").Deposit | null;

package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/useQRPHDeposit.d.ts

@@ -1,8 +1,8 @@
 import type { Deposit } from '../../../../types';
 export type UseQRPHDepositReturn = ReturnType<typeof useQRPHDeposit>;
 export declare function useQRPHDeposit(): {
-    view: "form" | "qrCode";
-    status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    view: "qrCode" | "form";
+    status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
     deposit: Deposit | null;

package/dist/components/KYC/KYCVerificationStatus.lazy.js

@@ -19,18 +19,15 @@ export function KYCVerificationStatus() {
     const icons = status === 'PENDING' ? bellIcon : alertIcon;
     return (_jsx(Dialog.Root, { open: globalStore.kycVerificationStatus.open, onOpenChange: (details) => {
             globalStore.kycVerificationStatus.setOpen(details.open);
-        }, closeOnEscape: false, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsx(Dialog.Content, { className: "mx-auto h-fit w-[450px] overflow-y-auto rounded-lg bg-bg-primary", children: _jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mb-3xl grid h-[200px] w-full place-items-center rounded-xl bg-radial from-40% from-button-primary-bg to-bg-brand-solid", children: _jsx(Image, { src: icons, alt: "icon", className: "w-60 object-contain", draggable: false, width: 120, height: 120 }) }), _jsxs("h1", { className: "font-semibold text-lg text-white", children: [status === 'PENDING' && 'Verification in Progress', status === 'REJECTED' && 'Verification Rejected', status === 'UNVERIFIED' ||
-                                            (status === 'CREATED' && 'Verification Required')] }), _jsxs("p", { className: "mb-4xl text-[#94969C] text-base", children: [status === 'PENDING' &&
+        }, closeOnEscape: false, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsx(Dialog.Content, { className: "mx-auto h-fit w-[450px] overflow-y-auto rounded-lg bg-bg-primary", children: _jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mb-3xl grid h-[200px] w-full place-items-center rounded-xl bg-radial from-40% from-button-primary-bg to-bg-brand-solid", children: _jsx(Image, { src: icons, alt: "icon", className: "w-60 object-contain", draggable: false, width: 120, height: 120 }) }), _jsxs("h1", { className: "font-semibold text-lg text-white", children: [status === 'PENDING' && 'Verification in Progress', status === 'REJECTED' && 'Verification Rejected', status === 'UNVERIFIED' && 'Verification Required'] }), _jsxs("p", { className: "mb-4xl text-[#94969C] text-base", children: [status === 'PENDING' &&
                                             `Your account verification is still under review. Please wait
 								until it's approved before you can continue playing or
 								depositing.`, status === 'REJECTED' &&
-                                            'Your account verification was not approved. Please resubmit your verification to regain full access.', status === 'UNVERIFIED' ||
-                                            (status === 'CREATED' &&
-                                                'Your account is not yet verified. Please complete the verification process to continue playing or depositing.')] }), _jsxs(Button, { variant: "solid", className: twMerge('mb-2 w-full', status === 'PENDING' && 'hidden'), onClick: () => {
+                                            'Your account verification was not approved. Please resubmit your verification to regain full access.', status === 'UNVERIFIED' &&
+                                            'Your account is not yet verified. Please complete the verification process to continue playing or depositing.'] }), _jsxs(Button, { variant: "solid", className: twMerge('mb-2 w-full', status === 'PENDING' && 'hidden'), onClick: () => {
                                         globalStore.kycVerificationStatus.setOpen(false);
                                         globalStore.kyc.setOpen(true);
-                                    }, children: [status === 'REJECTED' && 'Resubmit Verification', status === 'UNVERIFIED' ||
-                                            (status === 'CREATED' && 'Verify Now')] }), _jsx(Button, { type: "button", variant: "outline", onClick: () => {
+                                    }, children: [status === 'REJECTED' && 'Resubmit Verification', status === 'UNVERIFIED' && 'Verify Now'] }), _jsx(Button, { type: "button", variant: "outline", onClick: () => {
                                         globalStore.kycVerificationStatus.setOpen(false);
                                     }, children: "Close" })] }) }) })] }) }));
 }

package/dist/components/ResponsibleGaming/ResponsibleGamingV2.lazy.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image, {} from 'next/image';
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { ScrollToBottomIcon } from '../../icons/ScrollToBottomIcon.js';
-import decorativebackground from '../../images/decorative-patern.png';
-import pagcorLogo from '../../images/pagcor.png';
-import responsibleGamingLogo from '../../images/responsible-gaming.png';
+import { ScrollToTopIcon } from '../../icons/ScrollToTopIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
 export function ResponsibleGamingV2(props) {
+    const [hasReachedBottom, setHasReachedBottom] = useState(false);
+    const [isAtBottom, setIsAtBottom] = useState(false);
     const scrollableContentRef = useRef(null);
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         signIn: ctx.signIn,
@@ -19,6 +19,16 @@ export function ResponsibleGamingV2(props) {
         disclaimer: ctx.disclaimer,
         responsibleGaming: ctx.responsibleGaming,
     })));
+    useEffect(() => {
+        if (scrollableContentRef.current) {
+            const { scrollHeight, clientHeight } = scrollableContentRef.current;
+            const atBottom = scrollHeight <= clientHeight;
+            setIsAtBottom(atBottom);
+            if (atBottom) {
+                setHasReachedBottom(true);
+            }
+        }
+    }, []);
     return (_jsx(Dialog.Root, { open: globalStore.responsibleGaming.open, onOpenChange: (details) => {
             globalStore.responsibleGaming.setOpen(details.open);
             if (!details.open)
@@ -34,14 +44,27 @@ export function ResponsibleGamingV2(props) {
                 globalStore.disclaimer.setOpen(true);
             }
             globalStore.responsibleGaming.setNext(null);
-        }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: twMerge('relative flex h-full w-full flex-col items-start overflow-y-auto p-4 sm:p-6 lg:mx-auto lg:h-auto lg:max-h-[90vh] lg:w-[650px] lg:p-3xl', 'scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent'), children: [_jsx(Image, { src: decorativebackground, alt: "", width: 200, height: 200, className: "absolute top-safe-area-inset-top left-0 h-32 w-32 sm:h-40 sm:w-40 lg:h-50 lg:w-50" }), _jsx(Image, { src: props.logo, alt: "", width: 250, height: 150, className: "h-auto w-20 sm:w-24 lg:w-[7.5rem]", draggable: false }), _jsxs("div", { className: "relative w-full grow", children: [_jsx(Dialog.Title, { className: "mt-4 text-center font-semibold text-base text-brand-400 sm:mt-6 sm:text-lg lg:mt-3xl", children: "Responsible Gaming Guidelines" }), _jsxs("div", { ref: scrollableContentRef, className: "mt-2 scrollbar:h-2 max-h-[90vh] scrollbar:w-2 overflow-y-auto rounded-md scrollbar-thumb:rounded-full bg-[#021C25] p-3 sm:mt-xs sm:max-h-80 sm:p-4 lg:max-h-96", children: [_jsxs("div", { className: "flex flex-row items-center justify-center gap-4 sm:gap-6 lg:gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-12 w-auto shrink-0 sm:h-16 lg:h-[5.5rem]", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-8 w-auto shrink-0 sm:h-12 lg:h-[3.875rem]", draggable: false })] }), _jsx(Dialog.Description, { className: "text-xs leading-relaxed sm:text-sm sm:leading-2xl", children: props.content }), _jsx(Dialog.Context, { children: (api) => (_jsx("div", { className: "mt-3 flex items-center justify-center gap-x-sm sm:mt-4", children: _jsx("div", { className: "w-[80%]", children: _jsx(Button, { type: "button", className: "flex-1 py-2 text-sm sm:py-2.5 sm:text-base", onClick: () => {
-                                                                api.setOpen(false);
-                                                            }, children: "I Agree" }) }) })) })] })] }), _jsx(Button, { type: "button", className: "absolute right-6 bottom-7 w-fit flex-1 rounded-lg bg-bg-active py-2 sm:right-6 sm:bottom-6 sm:py-2.5 lg:right-9 lg:bottom-10", onClick: () => {
-                                    if (scrollableContentRef.current) {
-                                        scrollableContentRef.current.scrollTo({
-                                            top: scrollableContentRef.current.scrollHeight,
-                                            behavior: 'smooth',
-                                        });
-                                    }
-                                }, children: _jsx(ScrollToBottomIcon, {}) })] }) })] }) }));
+        }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: twMerge('relative flex h-full w-full flex-col items-start overflow-hidden p-4 sm:p-6 lg:mx-auto lg:max-h-[90vh] lg:w-[500px] lg:p-3xl', 'scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent'), children: [_jsx(Image, { src: props.logo, alt: "", width: 250, height: 150, className: "mx-auto h-auto w-20 sm:w-24 lg:w-[7.5rem]", draggable: false }), _jsxs("div", { className: "relative flex h-full w-full flex-col overflow-hidden", children: [_jsx(Dialog.Title, { className: "my-3 text-center font-semibold text-brand-400 sm:mt-6 sm:text-lg lg:my-xl lg:text-2xl", children: "Responsible Gaming Guidelines" }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col rounded-md bg-bg-primary-alt px-2 py-2", children: _jsxs("div", { ref: scrollableContentRef, className: "mt-2 scrollbar:h-2 scrollbar:w-2 flex-1 overflow-y-auto scrollbar-thumb:rounded-full scrollbar-track:rounded-full bg-bg-primary-alt scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-bg-primary p-3 pr-4 sm:mt-xs sm:p-4", onScroll: (e) => {
+                                                const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+                                                const atBottom = Math.abs(scrollHeight - clientHeight - scrollTop) < 1;
+                                                setIsAtBottom(atBottom);
+                                                if (atBottom) {
+                                                    setHasReachedBottom(true);
+                                                }
+                                            }, children: [_jsx(Dialog.Description, { className: "text-xs leading-relaxed sm:text-sm sm:leading-2xl", children: props.content }), _jsx(Button, { type: "button", className: twMerge('absolute right-6 bottom-7 z-10 size-10 rounded-lg transition-colors duration-75 ease-in-out sm:right-6 sm:bottom-6 lg:right-8 lg:bottom-8', isAtBottom
+                                                        ? 'border border-[#CECFD2] bg-bg-secondary'
+                                                        : 'bg-bg-brand-secondary'), onClick: () => {
+                                                        if (scrollableContentRef.current) {
+                                                            scrollableContentRef.current.scrollTo({
+                                                                top: isAtBottom
+                                                                    ? 0
+                                                                    : scrollableContentRef.current.scrollHeight,
+                                                                behavior: 'smooth',
+                                                            });
+                                                        }
+                                                    }, children: isAtBottom ? _jsx(ScrollToTopIcon, {}) : _jsx(ScrollToBottomIcon, {}) })] }) })] }), _jsx(Dialog.Context, { children: (api) => (_jsx(Button, { type: "button", className: twMerge('mt-4 w-full py-2 text-sm sm:py-2.5 sm:text-base', hasReachedBottom
+                                        ? 'bg-bg-brand-secondary'
+                                        : 'bg-bg-disabled text-text-disabled'), onClick: () => {
+                                        api.setOpen(false);
+                                    }, disabled: !hasReachedBottom, children: "I Agree" })) })] }) })] }) }));
 }

package/dist/components/TermsOfUse/TermsOfUseV2.lazy.js

@@ -1,24 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image, {} from 'next/image';
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { ScrollToBottomIcon } from '../../icons/ScrollToBottomIcon.js';
-import decorativebackground from '../../images/decorative-patern.png';
-import pagcorLogo from '../../images/pagcor.png';
-import responsibleGamingLogo from '../../images/responsible-gaming.png';
+import { ScrollToTopIcon } from '../../icons/ScrollToTopIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
 export function TermsOfUseV2({ logo, siteName, content, ...props }) {
     const scrollableContentRef = useRef(null);
+    const [hasReachedBottom, setHasReachedBottom] = useState(false);
+    const [isAtBottom, setIsAtBottom] = useState(false);
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         signIn: ctx.signIn,
         signUp: ctx.signUp,
         disclaimer: ctx.disclaimer,
         termsOfUse: ctx.termsOfUse,
     })));
+    useEffect(() => {
+        if (scrollableContentRef.current) {
+            const { scrollHeight, clientHeight } = scrollableContentRef.current;
+            const atBottom = scrollHeight <= clientHeight;
+            setIsAtBottom(atBottom);
+            if (atBottom) {
+                setHasReachedBottom(true);
+            }
+        }
+    }, []);
     return (_jsx(Dialog.Root, { open: globalStore.termsOfUse.open, onOpenChange: (details) => {
             globalStore.termsOfUse.setOpen(details.open);
             if (!details.open)
@@ -34,14 +44,25 @@ export function TermsOfUseV2({ logo, siteName, content, ...props }) {
                 globalStore.disclaimer.setOpen(true);
             }
             globalStore.termsOfUse.setNext(null);
-        }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: twMerge('relative flex h-full w-full flex-col items-start overflow-y-auto p-4 sm:p-6 lg:mx-auto lg:h-auto lg:max-h-[90vh] lg:w-[650px] lg:p-3xl', 'scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent'), children: [_jsx(Image, { src: decorativebackground, alt: "", width: 200, height: 200, className: "absolute top-safe-area-inset-top left-0 h-32 w-32 sm:h-40 sm:w-40 lg:h-50 lg:w-50" }), _jsx(Image, { src: logo, alt: "", width: 250, height: 150, className: "h-auto w-20 sm:w-24 lg:w-[7.5rem]", draggable: false }), _jsxs("div", { className: "relative w-full grow", children: [_jsxs(Dialog.Title, { className: 'mt-4 text-center font-semibold text-base text-brand-400 sm:mt-6 sm:text-lg lg:mt-3xl', children: [siteName, " Terms of Use"] }), _jsxs("div", { ref: scrollableContentRef, className: "mt-2 scrollbar:h-2 max-h-[90vh] scrollbar:w-2 overflow-y-auto rounded-md scrollbar-thumb:rounded-full bg-[#021C25] p-3 sm:mt-xs sm:max-h-80 sm:p-4 lg:max-h-96", children: [_jsxs("div", { className: "flex flex-row items-center justify-center gap-4 sm:gap-6 lg:gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-12 w-auto shrink-0 sm:h-16 lg:h-[5.5rem]", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-8 w-auto shrink-0 sm:h-12 lg:h-[3.875rem]", draggable: false })] }), _jsx(Dialog.Description, { className: "text-xs leading-relaxed sm:text-sm sm:leading-2xl", children: content }), _jsx(Dialog.Context, { children: (api) => (_jsx("div", { className: "mt-3 flex items-center justify-center gap-x-sm sm:mt-4", children: _jsx("div", { className: "w-[80%]", children: _jsx(Button, { type: "button", className: "flex-1 py-2 text-sm sm:py-2.5 sm:text-base", onClick: () => {
-                                                                api.setOpen(false);
-                                                            }, children: "I Agree" }) }) })) })] })] }), _jsx(Button, { type: "button", className: "absolute right-6 bottom-7 w-fit flex-1 rounded-lg bg-bg-active py-2 sm:right-6 sm:bottom-6 sm:py-2.5 lg:right-9 lg:bottom-10", onClick: () => {
-                                    if (scrollableContentRef.current) {
-                                        scrollableContentRef.current.scrollTo({
-                                            top: scrollableContentRef.current.scrollHeight,
-                                            behavior: 'smooth',
-                                        });
-                                    }
-                                }, children: _jsx(ScrollToBottomIcon, {}) })] }) })] }) }));
+        }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: twMerge('relative flex h-full w-full flex-col items-start overflow-hidden bg-bg-primary p-4 sm:p-6 lg:mx-auto lg:max-h-[90vh] lg:w-[500px] lg:p-3xl', 'scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent'), children: [_jsx(Image, { src: logo, alt: "", width: 250, height: 150, className: "mx-auto h-auto w-20 sm:w-24 lg:w-[7.5rem]", draggable: false }), _jsxs("div", { className: "relative flex h-full w-full flex-col overflow-hidden", children: [_jsx(Dialog.Title, { className: "my-3 text-center font-semibold text-brand-400 sm:mt-6 sm:text-lg lg:my-xl lg:text-2xl", children: "Terms of Use" }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col rounded-md bg-bg-primary-alt px-2 py-2", children: _jsxs("div", { ref: scrollableContentRef, className: "mt-2 scrollbar:h-2 scrollbar:w-2 flex-1 overflow-y-auto scrollbar-thumb:rounded-full scrollbar-track:rounded-full bg-bg-primary-alt scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-bg-primary p-3 pr-4 sm:mt-xs sm:p-4", onScroll: (e) => {
+                                                const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+                                                if (Math.abs(scrollHeight - clientHeight - scrollTop) < 1) {
+                                                    setHasReachedBottom(true);
+                                                }
+                                            }, children: [_jsx(Dialog.Description, { className: "text-xs leading-relaxed sm:text-sm sm:leading-2xl", children: content }), _jsx(Button, { type: "button", className: twMerge('absolute right-6 bottom-7 z-10 size-10 rounded-lg transition-colors duration-75 ease-in-out sm:right-6 sm:bottom-6 lg:right-8 lg:bottom-8', isAtBottom
+                                                        ? 'border border-[#CECFD2] bg-bg-secondary'
+                                                        : 'bg-bg-brand-secondary'), onClick: () => {
+                                                        if (scrollableContentRef.current) {
+                                                            scrollableContentRef.current.scrollTo({
+                                                                top: isAtBottom
+                                                                    ? 0
+                                                                    : scrollableContentRef.current.scrollHeight,
+                                                                behavior: 'smooth',
+                                                            });
+                                                        }
+                                                    }, children: isAtBottom ? _jsx(ScrollToTopIcon, {}) : _jsx(ScrollToBottomIcon, {}) })] }) })] }), _jsx(Dialog.Context, { children: (api) => (_jsx(Button, { type: "button", className: twMerge('mt-4 flex-1 py-2 text-sm sm:py-2.5 sm:text-base', hasReachedBottom
+                                        ? 'bg-bg-brand-secondary'
+                                        : 'bg-bg-disabled text-text-disabled'), onClick: () => {
+                                        api.setOpen(false);
+                                    }, disabled: !hasReachedBottom, children: "Accept" })) })] }) })] }) }));
 }

package/dist/components/TransactionRecords/TableFilters.js

@@ -42,9 +42,9 @@ const DEPOSIT_TYPES_MAP = {
     AIO_PAY_MAYA: 'AiO Maya',
     AIO_GRAB_PAY: 'AiO Grab Pay',
     AIO_PALAWAN_PAY: 'AiO Palawan Pay',
-    AURIX_PAY_QRPH: 'Aurix QRPH',
+    AURIX_PAY_QR_PH: 'Aurix QRPH',
     AURIX_PAY_GCASH: 'Aurix GCash',
-    AURIX_PAY_PAYMAYA: 'Aurix Maya',
+    AURIX_PAY_PAY_MAYA: 'Aurix Maya',
     AURIX_PAY_GRAB_PAY: 'Aurix GrabPay',
     MAYA_WEBPAY: 'Maya WebPay',
     TEST: 'Test',

package/dist/components/UpdateMobileNumber/UpdateMobileNumber.d.ts

@@ -0,0 +1,3 @@
+export declare function UpdateMobileNumber({ onClose }: {
+    onClose?: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/UpdateMobileNumber/UpdateMobileNumber.js

@@ -0,0 +1,136 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import Image from 'next/image';
+import { useRef, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import z from 'zod';
+import { useCooldown } from '../../client/hooks/useCooldown.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useMobileNumberParser } from '../../client/hooks/useMobileNumberParser.js';
+import { useSendVerificationCodeMutation } from '../../client/hooks/useSendVerificationCodeMutation.js';
+import { useUpdateMobileNumber } from '../../client/hooks/useUpdateMobileNumber.js';
+import { toaster } from '../../client/utils/toaster.js';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import inplayLogo from '../../images/inplay-logo.png';
+import lightBg from '../../images/light-bg.png';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Field } from '../../ui/Field/index.js';
+import { PinInput } from '../../ui/PinInput/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+export function UpdateMobileNumber({ onClose }) {
+    const [step, setStep] = useState(1);
+    const sendVerificationCodeMutation = useSendVerificationCodeMutation({
+        onSuccess: () => {
+            setStep(2);
+            cooldown.start();
+        },
+        onError: (err) => {
+            toaster.error({
+                title: 'Sign In Failed',
+                description: err.message,
+            });
+        },
+    });
+    const updateMobileNumberMutation = useUpdateMobileNumber({
+        onSuccess: async () => {
+            step1Form.reset();
+            step2Form.reset();
+            setStep(1);
+            toaster.success({
+                title: 'Verification Successful',
+                description: 'Your mobile number has been verified.',
+            });
+            onClose?.();
+        },
+        onError: (err) => {
+            const errorMessage = err.name === 'Forbidden'
+                ? 'Please enter the correct verification code'
+                : err.message;
+            toaster.error({
+                title: 'Sign In Failed',
+                description: errorMessage,
+            });
+        },
+    });
+    const localeInfo = useLocaleInfo();
+    const mobileNumberParser = useMobileNumberParser();
+    const Step1Definition = z.object({
+        mobileNumber: z
+            .string()
+            .min(1, 'Mobile number is required')
+            .superRefine((v, ctx) => {
+            if (!mobileNumberParser.validate(v)) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: 'Invalid mobile number',
+                });
+            }
+        }),
+    });
+    const Step2Definition = z.object({
+        verificationCode: z.array(z.string()).superRefine((val, ctx) => {
+            if (val.length !== 6 || val.some((v) => v.length !== 1)) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: 'Please enter your 6-digit verification code.',
+                });
+            }
+        }),
+    });
+    const step1Form = useForm({
+        resolver: zodResolver(Step1Definition),
+        defaultValues: {
+            mobileNumber: '',
+        },
+    });
+    const step2Form = useForm({
+        resolver: zodResolver(Step2Definition),
+        defaultValues: {
+            verificationCode: Array.from({ length: 6 }).fill(''),
+        },
+    });
+    const cooldown = useCooldown({
+        max: 60,
+        duration: 1000 * 60,
+    });
+    const formRef = useRef(null);
+    return (_jsx(Dialog.Root, { open: true, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: "flex items-center", children: _jsxs(Dialog.Content, { className: "flex w-[375px] flex-col items-center space-y-4 rounded-xl bg-[#111827] p-6 text-center", style: {
+                            backgroundImage: `url(${lightBg.src})`,
+                        }, children: [_jsx(Image, { src: inplayLogo, alt: "inplay logo", width: 82, height: 34, className: "h-auto w-[82px]" }), _jsxs("div", { children: [step === 1 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "font-bold text-sm", children: ["Get ", _jsx("span", { className: "text-[#F05127]", children: "\u20B150 Bonus" }), " when you verify your account and play."] }), _jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
+                                                    sendVerificationCodeMutation.mutateAsync({
+                                                        channel: 'SMS',
+                                                        recipient: mobileNumberParser.format(data.mobileNumber),
+                                                        strict: true,
+                                                    });
+                                                }), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, className: "text-left", children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx("div", { className: "-translate-y-1/2 absolute top-1/2 left-3.5 flex shrink-0 items-center gap-md", children: _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode }) }), _jsx(Field.Input, { style: {
+                                                                            paddingLeft: `calc(1.25rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
+                                                                        }, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Send Code" })] })] })), step === 2 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center font-semibold text-lg", children: "Check your Phone" }), _jsxs("p", { className: "mt-xs text-center text-sm text-text-secondary-700", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold text-[#F05127]", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: formRef, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
+                                                    updateMobileNumberMutation.mutateAsync({
+                                                        mobileNumber: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
+                                                        verificationCode: verificationCode.join(''),
+                                                    });
+                                                }), children: [_jsx(Controller, { name: "verificationCode", control: step2Form.control, render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, children: [_jsxs(PinInput.Root, { placeholder: "0", onKeyDown: (e) => {
+                                                                        if (e.key === 'Backspace') {
+                                                                            step2Form.reset();
+                                                                        }
+                                                                    }, value: o.field.value, onValueChange: (details) => {
+                                                                        o.field.onChange(details.value);
+                                                                        o.field.onBlur();
+                                                                    }, otp: true, onValueComplete: () => {
+                                                                        formRef.current?.requestSubmit();
+                                                                    }, blurOnComplete: true, readOnly: step2Form.formState.isSubmitting, type: "numeric", children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "font-medium text-2xl text-text-placeholder-subtle", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-4 flex w-full items-center justify-center gap-xs text-xs", children: [_jsx("span", { className: "text-[#9CA3AF]", children: "Didn't receive the code?" }), _jsx("button", { type: "button", className: "font-semibold text-[#C084FC]", disabled: cooldown.cooling, onClick: async () => {
+                                                                    await sendVerificationCodeMutation.mutateAsync({
+                                                                        channel: 'SMS',
+                                                                        recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
+                                                                    });
+                                                                    cooldown.start();
+                                                                }, children: cooldown.cooling
+                                                                    ? `Resend in ${cooldown.countdown}s`
+                                                                    : 'Resend' })] }), _jsx("button", { type: "button", className: "absolute top-0 left-6 mx-auto mt-3xl flex h-8 w-8 items-center gap-1 rounded-full bg-[#1f2638] font-semibold text-sm text-text-tertiary-600", onClick: () => {
+                                                            setStep(1);
+                                                            step2Form.reset();
+                                                            cooldown.stop();
+                                                        }, children: _jsx(ArrowLeftIcon, { className: "mx-auto size-5" }) })] })] }))] })] }) })] }) }));
+}

package/dist/components/UpdateMobileNumber/index.d.ts

@@ -0,0 +1 @@
+export * from './UpdateMobileNumber';

package/dist/components/UpdateMobileNumber/index.js

@@ -0,0 +1 @@
+export * from './UpdateMobileNumber.js';

package/dist/icons/ScrollToBottomIcon.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export function ScrollToBottomIcon(props) {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "12", fill: "none", viewBox: "0 0 10 12", ...props, children: _jsx("path", { stroke: "#85888E", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.667", d: "M.833 6.833 5 11l4.167-4.167M.833 1 5 5.167 9.167 1" }) }));
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "12", fill: "none", viewBox: "0 0 10 12", ...props, children: _jsx("path", { stroke: "#fff", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.667", d: "M.833 6.833 5 11l4.167-4.167M.833 1 5 5.167 9.167 1" }) }));
 }

package/dist/icons/ScrollToTopIcon.d.ts

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