@opexa/portal-components 0.1.53 → 0.1.55

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

@@ -1,4 +1,4 @@
-import type { SetOptional } from "type-fest";
-import { type CreateGCashStandardCashInWithdrawalInput } from "../../services/wallet";
-import type { Mutation } from "../../types";
-export declare const useCreateGCashStandardCashInWithdrawalMutation: Mutation<string, SetOptional<CreateGCashStandardCashInWithdrawalInput, "id">>;
+import type { SetOptional } from 'type-fest';
+import { type CreateGCashStandardCashInWithdrawalInput } from '../../services/wallet';
+import type { Mutation } from '../../types';
+export declare const useCreateGCashStandardCashInWithdrawalMutation: Mutation<string, SetOptional<CreateGCashStandardCashInWithdrawalInput, 'id'>>;

package/dist/client/hooks/useCreateGCashStandardCashInWithdrawal.js

@@ -1,10 +1,10 @@
-import { ObjectId } from "@opexa/object-id";
-import { useMutation } from "@tanstack/react-query";
-import invariant from "tiny-invariant";
-import { ObjectType } from "../../services/ObjectType.js";
-import { createGCashStandardCashInWithdrawal, } from "../../services/wallet.js";
-import { getCreateGCashStandardCashInWithdrawalMutationKey } from "../../utils/mutationKeys.js";
-import { getSession } from "../services/getSession.js";
+import { ObjectId } from '@opexa/object-id';
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { ObjectType } from '../../services/ObjectType.js';
+import { createGCashStandardCashInWithdrawal, } from '../../services/wallet.js';
+import { getCreateGCashStandardCashInWithdrawalMutationKey } from '../../utils/mutationKeys.js';
+import { getSession } from '../services/getSession.js';
 export const useCreateGCashStandardCashInWithdrawalMutation = (config) => {
     const mutation = useMutation({
         ...config,
@@ -12,7 +12,7 @@ export const useCreateGCashStandardCashInWithdrawalMutation = (config) => {
         mutationFn: async (input) => {
             const id = input.id ?? ObjectId.generate(ObjectType.Withdrawal).toString();
             const session = await getSession();
-            invariant(session.status === "authenticated");
+            invariant(session.status === 'authenticated');
             await createGCashStandardCashInWithdrawal({ ...input, id }, {
                 headers: {
                     Authorization: `Bearer ${session.token}`,

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

@@ -1,4 +1,4 @@
-import type { SetOptional } from "type-fest";
-import { type CreateGCashWithdrawalInput } from "../../services/wallet";
-import type { Mutation } from "../../types";
-export declare const useCreateGCashWithdrawalMutation: Mutation<string, SetOptional<CreateGCashWithdrawalInput, "id">>;
+import type { SetOptional } from 'type-fest';
+import { type CreateGCashWithdrawalInput } from '../../services/wallet';
+import type { Mutation } from '../../types';
+export declare const useCreateGCashWithdrawalMutation: Mutation<string, SetOptional<CreateGCashWithdrawalInput, 'id'>>;

package/dist/client/hooks/useCreateGCashWithdrawalMutation.js

@@ -1,10 +1,10 @@
-import { ObjectId } from "@opexa/object-id";
-import { useMutation } from "@tanstack/react-query";
-import invariant from "tiny-invariant";
-import { ObjectType } from "../../services/ObjectType.js";
-import { createGCashWithdrawal, } from "../../services/wallet.js";
-import { getCreateGCashWithdrawalMutationKey } from "../../utils/mutationKeys.js";
-import { getSession } from "../services/getSession.js";
+import { ObjectId } from '@opexa/object-id';
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { ObjectType } from '../../services/ObjectType.js';
+import { createGCashWithdrawal, } from '../../services/wallet.js';
+import { getCreateGCashWithdrawalMutationKey } from '../../utils/mutationKeys.js';
+import { getSession } from '../services/getSession.js';
 export const useCreateGCashWithdrawalMutation = (config) => {
     const mutation = useMutation({
         ...config,
@@ -12,7 +12,7 @@ export const useCreateGCashWithdrawalMutation = (config) => {
         mutationFn: async (input) => {
             const id = input.id ?? ObjectId.generate(ObjectType.Withdrawal).toString();
             const session = await getSession();
-            invariant(session.status === "authenticated");
+            invariant(session.status === 'authenticated');
             await createGCashWithdrawal({ ...input, id }, {
                 headers: {
                     Authorization: `Bearer ${session.token}`,

package/dist/client/hooks/useRecaptcha.js

@@ -72,7 +72,9 @@ async function executeGoogleFraudDefense(siteKey, action) {
             }
             window.grecaptcha.enterprise.ready(async () => {
                 try {
-                    const token = await window.grecaptcha.enterprise.execute(siteKey, { action });
+                    const token = await window.grecaptcha.enterprise.execute(siteKey, {
+                        action,
+                    });
                     resolve(token);
                 }
                 catch {

package/dist/client/hooks/useRedeemVoucherMutation.js

@@ -1,6 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
-import { redeemVoucher, } from '../../services/wallet.js';
+import { redeemVoucher } from '../../services/wallet.js';
 import { getRedeemVoucherMutationKey } from '../../utils/mutationKeys.js';
 import { getSession } from '../services/getSession.js';
 export const useRedeemVoucherMutation = (config) => {

package/dist/client/hooks/useRequireFirstDepositQuery.js

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getRequireFirstDeposit } from '../../services/account.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
-import { getRequireFirstDepositQueryKey, getSessionQueryKey } from '../../utils/queryKeys.js';
+import { getRequireFirstDepositQueryKey, getSessionQueryKey, } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useRequireFirstDepositQuery = (config) => {

package/dist/components/Account/Wallet.example.js

@@ -32,5 +32,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - Integration with global store for deposit/withdrawal modals
  */
 export const WalletExample = () => {
-    return (_jsxs("div", { className: "p-4", children: [_jsx("h2", { className: 'mb-4 font-bold text-xl', children: "Wallet Component Example" }), _jsx("p", { className: 'mb-4 text-gray-600', children: "The Wallet component is now available as a standalone component that you can use anywhere in your application." }), _jsxs("div", { className: 'rounded-lg bg-gray-100 p-4', children: [_jsx("h3", { className: 'mb-2 font-semibold', children: "Import:" }), _jsxs("code", { className: 'block rounded bg-white p-2 text-sm', children: ["import ", `{ Wallet }`, " from '@opexa/portal-components/Account/Wallet';"] })] }), _jsxs("div", { className: 'mt-4 rounded-lg bg-gray-100 p-4', children: [_jsx("h3", { className: 'mb-2 font-semibold', children: "Usage:" }), _jsx("code", { className: 'block rounded bg-white p-2 text-sm', children: `<Wallet classNames={{ walletActions: "custom-actions" }} />` })] })] }));
+    return (_jsxs("div", { className: "p-4", children: [_jsx("h2", { className: "mb-4 font-bold text-xl", children: "Wallet Component Example" }), _jsx("p", { className: "mb-4 text-gray-600", children: "The Wallet component is now available as a standalone component that you can use anywhere in your application." }), _jsxs("div", { className: "rounded-lg bg-gray-100 p-4", children: [_jsx("h3", { className: "mb-2 font-semibold", children: "Import:" }), _jsxs("code", { className: "block rounded bg-white p-2 text-sm", children: ["import ", `{ Wallet }`, " from '@opexa/portal-components/Account/Wallet';"] })] }), _jsxs("div", { className: "mt-4 rounded-lg bg-gray-100 p-4", children: [_jsx("h3", { className: "mb-2 font-semibold", children: "Usage:" }), _jsx("code", { className: "block rounded bg-white p-2 text-sm", children: `<Wallet classNames={{ walletActions: "custom-actions" }} />` })] })] }));
 };

package/dist/components/Account/Wallet.js

@@ -26,11 +26,11 @@ export function Wallet({ classNames = {} }) {
     return (_jsxs(_Fragment, { children: [_jsxs("div", { className: twMerge('mt-3 overflow-hidden rounded-xl border border-border-primary', classNames.walletBalanceContainer), children: [_jsxs("div", { className: "bg-bg-tertiary p-xl", children: [_jsx("div", { className: twMerge('text-sm text-text-secondary-700', classNames.totalBalanceLabel), children: "Total Balance" }), _jsx("div", { className: twMerge('font-bold text-3xl', classNames.totalBalanceAmount), children: formatNumber(totalBalance, {
                                     currency: localeInfo?.currency.code,
                                     minDecimalPlaces: 2,
-                                    truncate: false
+                                    truncate: false,
                                 }) }), _jsxs("div", { className: twMerge('mt-1.5 flex gap-7xl', classNames.balanceDetailsContainer), children: [_jsxs("div", { children: [_jsx("p", { className: twMerge('text-2xs text-text-secondary-700', classNames.depositBalanceLabel), children: "Deposit Balance" }), _jsx("p", { className: twMerge('text-medium text-text-primary-brand', classNames.depositBalanceAmount), children: formatNumber(depositBalance, {
                                                     currency: localeInfo?.currency.code,
                                                     minDecimalPlaces: 2,
-                                                    truncate: false
+                                                    truncate: false,
                                                 }) })] }), _jsxs("div", { children: [_jsx("p", { className: twMerge('text-2xs text-text-secondary-700', classNames.bonusBalanceLabel), children: "Bonus Balance" }), _jsx("p", { className: twMerge('text-medium text-text-primary-brand', classNames.bonusBalanceAmount), children: formatNumber(bonusBalance, {
                                                     currency: localeInfo?.currency.code,
                                                     minDecimalPlaces: 2,

package/dist/components/AccountInfo/AccountInfo.js

@@ -13,7 +13,7 @@ import { z } from 'zod';
 import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
 import { useDisclosure } from '../../client/hooks/useDisclosure.js';
 import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
-import { getLocale, extractPhoneCode } from '../../utils/countries/getLocaleInfo.js';
+import { getLocale, extractPhoneCode, } from '../../utils/countries/getLocaleInfo.js';
 import { useFacebookClientQuery } from '../../client/hooks/useFacebookClientQuery.js';
 import { useGoogleClientIdQuery } from '../../client/hooks/useGoogleClientIdQuery.js';
 import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/Failed.js

@@ -7,5 +7,7 @@ import { Portal } from '../../../../ui/Portal/index.js';
 import { useQRPHDepositContext } from './QRPHDepositContext.js';
 export function Failed() {
     const context = useQRPHDepositContext();
-    return (_jsx(AlertDialog.Root, { open: context.status === 'failed', lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)]", children: _jsxs(AlertDialog.Content, { children: [_jsx("button", { type: "button", className: "absolute top-4 right-4 icon:size-6 p-md text-text-quinary disabled:cursor-not-allowed disabled:opacity-50", onClick: context.reset, children: _jsx(XIcon, {}) }), _jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-error-secondary", children: _jsx(AlertCircleIcon, { className: "size-6 text-text-featured-icon-light-error" }) }), _jsx(AlertDialog.Title, { className: "mt-xl", children: context.errorMessage?.name || 'Your deposit failed or was cancelled.' }), _jsx(AlertDialog.Description, { className: "mt-xl px-3", children: context.errorMessage?.message || 'Your deposit was not completed or has been cancelled. You can try again by generating a new QR code.' }), _jsx(Button, { className: "mt-4xl w-full", variant: "outline", onClick: context.regenerateQRCode, children: "Generate New QR Code" })] }) })] }) }));
+    return (_jsx(AlertDialog.Root, { open: context.status === 'failed', lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)]", children: _jsxs(AlertDialog.Content, { children: [_jsx("button", { type: "button", className: "absolute top-4 right-4 icon:size-6 p-md text-text-quinary disabled:cursor-not-allowed disabled:opacity-50", onClick: context.reset, children: _jsx(XIcon, {}) }), _jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-error-secondary", children: _jsx(AlertCircleIcon, { className: "size-6 text-text-featured-icon-light-error" }) }), _jsx(AlertDialog.Title, { className: "mt-xl", children: context.errorMessage?.name ||
+                                    'Your deposit failed or was cancelled.' }), _jsx(AlertDialog.Description, { className: "mt-xl px-3", children: context.errorMessage?.message ||
+                                    'Your deposit was not completed or has been cancelled. You can try again by generating a new QR code.' }), _jsx(Button, { className: "mt-4xl w-full", variant: "outline", onClick: context.regenerateQRCode, children: "Generate New QR Code" })] }) })] }) }));
 }

package/dist/components/DepositWithdrawal/Deposit/Voucher/Voucher.js

@@ -68,7 +68,7 @@ export function Voucher() {
                                         const last = values.at(-1);
                                         if (last)
                                             field.onChange(last);
-                                    }, className: "grid grid-cols-2 gap-x-4 gap-y-3", children: channels.map((channel) => (_jsxs(Checkbox.Root, { value: channel.value, className: "flex cursor-pointer items-center justify-between rounded-xl border border-border-secondary ui-checked:border-border-brand-solid p-lg", children: [_jsx(Image, { src: channel.image, alt: "", width: 100, height: 25, loading: "lazy", className: twMerge('w-auto', 'h-[2.8rem]'), draggable: false }), _jsx(Checkbox.Control, { className: "ml-auto", children: _jsx(Checkbox.Indicator, {}) }), _jsx(Checkbox.HiddenInput, {})] }, channel.value))) })) })] }), _jsxs("section", { className: 'my-5', children: [_jsx(Field.Label, { asChild: true, children: _jsx("div", { children: "Voucher Code" }) }), _jsx(Controller, { control: control, name: "voucherCode", render: ({ field }) => {
+                                    }, className: "grid grid-cols-2 gap-x-4 gap-y-3", children: channels.map((channel) => (_jsxs(Checkbox.Root, { value: channel.value, className: "flex cursor-pointer items-center justify-between rounded-xl border border-border-secondary ui-checked:border-border-brand-solid p-lg", children: [_jsx(Image, { src: channel.image, alt: "", width: 100, height: 25, loading: "lazy", className: twMerge('w-auto', 'h-[2.8rem]'), draggable: false }), _jsx(Checkbox.Control, { className: "ml-auto", children: _jsx(Checkbox.Indicator, {}) }), _jsx(Checkbox.HiddenInput, {})] }, channel.value))) })) })] }), _jsxs("section", { className: "my-5", children: [_jsx(Field.Label, { asChild: true, children: _jsx("div", { children: "Voucher Code" }) }), _jsx(Controller, { control: control, name: "voucherCode", render: ({ field }) => {
                                     return (_jsxs(Field.Root, { invalid: !!errors, children: [_jsx(Field.Input, { ...field, placeholder: "Enter your Voucher code", onChange: (e) => {
                                                     redeemVoucherMutation.reset();
                                                     field.onChange(e.target.value.toUpperCase());
@@ -82,5 +82,5 @@ function SuccessfulRedemptionModal({ open, onClose, }) {
     return (_jsx(Dialog.Root, { unmountOnExit: true, open: open, onOpenChange: (isOpen) => {
             if (!isOpen)
                 onClose();
-        }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)]", children: _jsxs(Dialog.Content, { className: "mx-auto h-full w-full overflow-y-auto px-4 py-3xl lg:h-auto lg:max-h-[80vh] lg:w-[480px] lg:rounded-xl", children: [_jsx(Dialog.Header, { className: "text-center", children: _jsx(Dialog.Title, { className: "flex grow items-center justify-center font-semibold", children: _jsx(CelebrationIcon, { className: "text-6xl" }) }) }), _jsx(Dialog.Body, { className: "mt-4", children: _jsx("p", { className: 'text-center font-bold', children: "Voucher successfully redeemed." }) }), _jsx(Dialog.Footer, { className: "mt-6", children: _jsx(Button, { className: "w-full", onClick: onClose, children: "OK" }) })] }) })] }) }));
+        }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)]", children: _jsxs(Dialog.Content, { className: "mx-auto h-full w-full overflow-y-auto px-4 py-3xl lg:h-auto lg:max-h-[80vh] lg:w-[480px] lg:rounded-xl", children: [_jsx(Dialog.Header, { className: "text-center", children: _jsx(Dialog.Title, { className: "flex grow items-center justify-center font-semibold", children: _jsx(CelebrationIcon, { className: "text-6xl" }) }) }), _jsx(Dialog.Body, { className: "mt-4", children: _jsx("p", { className: "text-center font-bold", children: "Voucher successfully redeemed." }) }), _jsx(Dialog.Footer, { className: "mt-6", children: _jsx(Button, { className: "w-full", onClick: onClose, children: "OK" }) })] }) })] }) }));
 }

package/dist/components/DepositWithdrawal/Deposit/Voucher/definition.js

@@ -1,6 +1,7 @@
 import * as z from 'zod';
 export const definition = z.object({
     voucherChannel: z.string().optional().nullable(),
-    voucherCode: z.string()
+    voucherCode: z
+        .string()
         .regex(/^[A-Z0-9-_]+$/, 'Voucher code can only contain uppercase letters, numbers, hyphens, and underscores'),
 });

package/dist/components/DepositWithdrawal/DepositWithdrawalTrigger.js

@@ -37,6 +37,6 @@ export function DepositWithdrawalTrigger({ asChild, children, colorScheme = 'pri
                         : 'border-border-dark bg-bg-dark text-dark-text'), children: formatNumber(totalBalance, {
                         currency: localeInfo.currency.code,
                         minDecimalPlaces: 2,
-                        truncate: false
+                        truncate: false,
                     }) }), _jsx("div", { className: "flex h-10 items-center gap-1.5 rounded-r-md bg-button-primary-bg px-3.5 font-semibold text-button-primary-fg text-sm", children: label })] })) }));
 }

package/dist/components/DepositWithdrawal/PaymentMethods.js

@@ -132,7 +132,7 @@ const OPTIONS = [
         value: 'VOUCHER',
         label: 'Voucher',
         image: voucherIcon,
-    }
+    },
 ];
 export function PaymentMethods(props) {
     const options = useMemo(() => props.options?.length
@@ -156,6 +156,6 @@ export function PaymentMethods(props) {
                                     ? 'h-[2.5rem]'
                                     : '', (option.value === 'AIO_GRAB_PAY' ||
                                     option.value === 'AURIX_PAY_GRAB_PAY') &&
-                                    'h-[3rem] rounded-[4px]', option.value === 'AIO_PALAWAN_PAY' && 'h-[2rem]' ||
-                                    option.value === "VOUCHER" && 'h-[2rem]'), draggable: false }) }), _jsx(Checkbox.Control, { className: "shrink-0", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.HiddenInput, {})] }, option.value))) })] }));
+                                    'h-[3rem] rounded-[4px]', (option.value === 'AIO_PALAWAN_PAY' && 'h-[2rem]') ||
+                                    (option.value === 'VOUCHER' && 'h-[2rem]')), draggable: false }) }), _jsx(Checkbox.Control, { className: "shrink-0", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.HiddenInput, {})] }, option.value))) })] }));
 }

package/dist/components/DepositWithdrawal/Withdrawal/Withdrawal.js

@@ -50,7 +50,7 @@ const VentajaWithdrawal = lazy(() => import('./VentajaWithdrawal/VentajaWithdraw
 })));
 export function Withdrawal() {
     const { onMaya } = useMayaAuth();
-    const { allowUnverifiedAccounts, enabledWithdrawalProviders } = useDepositWithdrawalPropsContext();
+    const { enabledWithdrawalProviders } = useDepositWithdrawalPropsContext();
     const walletQuery = useWalletQuery();
     const featureFlag = useFeatureFlag();
     const wallet = walletQuery.data;

package/dist/components/Disclaimer/DisclaimerV2.js

@@ -9,7 +9,6 @@ import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
-import { useSignOutMutation } from '../../client/hooks/useSignOutMutation.js';
 import { getSession } from '../../client/services/getSession.js';
 import { TERMS_OF_USE_PENDING_STORAGE_KEY } from '../../constants/index.js';
 import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
@@ -21,7 +20,6 @@ import { Button } from '../../ui/Button/index.js';
 import { Checkbox } from '../../ui/Checkbox/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-import { clearLocalStorageOnLogout } from '../../utils/clear-local-storage-on-logout.js';
 import { setDisclaimerAccepted } from '../../utils/disclaimer-cooldown.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getSessionQueryKey } from '../../utils/queryKeys.js';
@@ -55,12 +53,6 @@ export function DisclaimerV2(props) {
         globalStore.termsOfUse.accepted,
         globalStore.termsOfUse.setAccepted,
     ]);
-    const signOutMutation = useSignOutMutation({
-        async onSuccess() {
-            clearLocalStorageOnLogout();
-            sessionStorage.clear();
-        },
-    });
     const handleExit = async () => {
         if (props.redirectUrlOnNoConsent) {
             if (Capacitor.isNativePlatform()) {

package/dist/components/ForgotPassword/Crazywin/CWForgotPassword.js

@@ -6,6 +6,6 @@ import { Dialog } from '../../../ui/Dialog/index.js';
 import CWForgotPasswordForm from './CWForgotPasswordForm.js';
 import styles from './ForgotPassword.module.css';
 const ForgotPassword = ({ logo }) => {
-    return (_jsx(Dialog.Content, { className: "overflow-y-invisible top-0 left-0 flex h-full w-full items-center bg-transparent", children: _jsxs("div", { className: "flex h-[90dvh] w-full flex-col justify-center scroll-smooth", children: [_jsxs("div", { className: "relative mx-auto w-full max-w-[22.5rem]", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto mt-8 h-auto w-[12.04544rem]", draggable: false }), _jsx(Dialog.CloseTrigger, { className: 'h-fit w-fit rounded-md bg-gradient-to-t from-[#FFE5AF] to-[#EAC467] p-0.5 text-[#6C5200]', children: _jsx(XIcon, {}) })] }), _jsx("h2", { className: "mx-auto mt-10 w-fit bg-[linear-gradient(50deg,#c7802d_-5.1%,#ffe585_44.95%,#c7802d_109.05%)] bg-clip-text font-bold text-2xl text-transparent uppercase", children: "Forgot Password" }), _jsx("div", { className: twMerge('mx-auto mt-7.5 max-w-[20.6875rem] p-7.5', styles.card), children: _jsx(CWForgotPasswordForm, {}) })] }) }));
+    return (_jsx(Dialog.Content, { className: "overflow-y-invisible top-0 left-0 flex h-full w-full items-center bg-transparent", children: _jsxs("div", { className: "flex h-[90dvh] w-full flex-col justify-center scroll-smooth", children: [_jsxs("div", { className: "relative mx-auto w-full max-w-[22.5rem]", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto mt-8 h-auto w-[12.04544rem]", draggable: false }), _jsx(Dialog.CloseTrigger, { className: "h-fit w-fit rounded-md bg-gradient-to-t from-[#FFE5AF] to-[#EAC467] p-0.5 text-[#6C5200]", children: _jsx(XIcon, {}) })] }), _jsx("h2", { className: "mx-auto mt-10 w-fit bg-[linear-gradient(50deg,#c7802d_-5.1%,#ffe585_44.95%,#c7802d_109.05%)] bg-clip-text font-bold text-2xl text-transparent uppercase", children: "Forgot Password" }), _jsx("div", { className: twMerge('mx-auto mt-7.5 max-w-[20.6875rem] p-7.5', styles.card), children: _jsx(CWForgotPasswordForm, {}) })] }) }));
 };
 export default ForgotPassword;

package/dist/components/ForgotPassword/Crazywin/CWForgotPasswordForm.js

@@ -59,15 +59,15 @@ const CWForgotPasswordForm = () => {
             verificationCode: data.verificationCode,
         });
     };
-    return (_jsx("form", { autoComplete: 'off', onSubmit: handleSubmit(onSubmit), children: _jsxs("div", { className: "space-y-4", children: [_jsxs(Field.Root, { invalid: !!errors.mobileNumber, children: [_jsx(Field.Label, { className: "text-xs", children: "Phone Number" }), _jsxs("div", { className: "relative flex h-10 gap-3", children: [_jsxs("div", { className: "flex h-full items-center gap-2 rounded-full bg-black/40 px-3.5 text-xs", children: [_jsx(localeInfo.country.flag, { className: "size-5" }), _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode })] }), _jsx(Field.Input, { className: commonInputClass, placeholder: "Enter Phone Number", ...register('mobileNumber') })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.mobileNumber?.message })] }), _jsx(Field.Root, { invalid: !!errors.password, children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: "text-xs", children: "Password" }), _jsxs("div", { children: [_jsxs(PasswordInput.Control, { className: "relative flex h-10 items-center rounded-full border-0 bg-black/40 text-xs", children: [_jsx(Image, { src: lockIcon, alt: "lock icon", width: 20, height: 20, className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3 h-5 w-5" }), _jsx(PasswordInput.Input, { className: "pl-10", placeholder: "8 - 20 characters", ...register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, { className: "text-white/50" }), asChild: true, children: _jsx(EyeIcon, { className: "text-white/50" }) }) })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.password?.message })] })] }) }), _jsx(Field.Root, { invalid: !!errors.confirmPassword, children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: "text-xs", children: "Confirm Password" }), _jsxs("div", { children: [_jsxs(PasswordInput.Control, { className: "relative flex h-10 items-center rounded-full border-0 bg-black/40 text-xs", children: [_jsx(Image, { src: lockIcon, alt: "lock icon", width: 20, height: 20, className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3 h-5 w-5" }), _jsx(PasswordInput.Input, { className: "pl-10", placeholder: "8 - 20 characters", ...register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, { className: "text-white/50" }), asChild: true, children: _jsx(EyeIcon, { className: "text-white/50" }) }) })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.confirmPassword?.message })] })] }) }), _jsxs(Field.Root, { invalid: !!errors.verificationCode, children: [_jsx(Field.Label, { className: "text-xs", children: "OTP Code" }), _jsxs("div", { className: "relative", children: [_jsx(Field.Input, { className: twMerge(commonInputClass, 'pr-[5.75rem]'), placeholder: "Enter OTP Code", ...register('verificationCode') }), _jsx(Button, { type: "button", className: "-translate-y-1/2 absolute top-1/2 right-1 h-fit w-fit rounded-full bg-[linear-gradient(89deg,#c7802d_-15.91%,#ffe585_28.75%,#ffeca6_49.46%,#c7802d_112.69%)] py-[0.375rem] text-sm shadow-[inset_0px_-1px_2px_1px_#fff7e1]", disabled: !mobileNumberValue || !!errors.mobileNumber || cooldown.cooling, onClick: async () => {
+    return (_jsx("form", { autoComplete: "off", onSubmit: handleSubmit(onSubmit), children: _jsxs("div", { className: "space-y-4", children: [_jsxs(Field.Root, { invalid: !!errors.mobileNumber, children: [_jsx(Field.Label, { className: "text-xs", children: "Phone Number" }), _jsxs("div", { className: "relative flex h-10 gap-3", children: [_jsxs("div", { className: "flex h-full items-center gap-2 rounded-full bg-black/40 px-3.5 text-xs", children: [_jsx(localeInfo.country.flag, { className: "size-5" }), _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode })] }), _jsx(Field.Input, { className: commonInputClass, placeholder: "Enter Phone Number", ...register('mobileNumber') })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.mobileNumber?.message })] }), _jsx(Field.Root, { invalid: !!errors.password, children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: "text-xs", children: "Password" }), _jsxs("div", { children: [_jsxs(PasswordInput.Control, { className: "relative flex h-10 items-center rounded-full border-0 bg-black/40 text-xs", children: [_jsx(Image, { src: lockIcon, alt: "lock icon", width: 20, height: 20, className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3 h-5 w-5" }), _jsx(PasswordInput.Input, { className: "pl-10", placeholder: "8 - 20 characters", ...register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, { className: "text-white/50" }), asChild: true, children: _jsx(EyeIcon, { className: "text-white/50" }) }) })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.password?.message })] })] }) }), _jsx(Field.Root, { invalid: !!errors.confirmPassword, children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: "text-xs", children: "Confirm Password" }), _jsxs("div", { children: [_jsxs(PasswordInput.Control, { className: "relative flex h-10 items-center rounded-full border-0 bg-black/40 text-xs", children: [_jsx(Image, { src: lockIcon, alt: "lock icon", width: 20, height: 20, className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3 h-5 w-5" }), _jsx(PasswordInput.Input, { className: "pl-10", placeholder: "8 - 20 characters", ...register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, { className: "text-white/50" }), asChild: true, children: _jsx(EyeIcon, { className: "text-white/50" }) }) })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.confirmPassword?.message })] })] }) }), _jsxs(Field.Root, { invalid: !!errors.verificationCode, children: [_jsx(Field.Label, { className: "text-xs", children: "OTP Code" }), _jsxs("div", { className: "relative", children: [_jsx(Field.Input, { className: twMerge(commonInputClass, 'pr-[5.75rem]'), placeholder: "Enter OTP Code", ...register('verificationCode') }), _jsx(Button, { type: "button", className: "-translate-y-1/2 absolute top-1/2 right-1 h-fit w-fit rounded-full bg-[linear-gradient(89deg,#c7802d_-15.91%,#ffe585_28.75%,#ffeca6_49.46%,#c7802d_112.69%)] py-[0.375rem] text-sm shadow-[inset_0px_-1px_2px_1px_#fff7e1]", disabled: !mobileNumberValue || !!errors.mobileNumber || cooldown.cooling, onClick: async () => {
                                         if (!cooldown.cooling) {
                                             await sendVerificationCodeMutation.mutateAsync({
                                                 channel: 'SMS',
-                                                recipient: mobileNumberParser.format(getValues('mobileNumber'))
+                                                recipient: mobileNumberParser.format(getValues('mobileNumber')),
                                             });
                                             cooldown.start();
                                             toaster.success({
-                                                description: `OTP sent to ${getValues('mobileNumber')}`
+                                                description: `OTP sent to ${getValues('mobileNumber')}`,
                                             });
                                         }
                                     }, children: cooldown.cooling ? cooldown.countdown : 'Get OTP' })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.verificationCode?.message })] }), _jsx(Button, { type: "submit", className: "mt-7.5 rounded-full bg-[linear-gradient(89deg,#c7802d_-15.91%,#ffe585_28.75%,#ffeca6_49.46%,#c7802d_112.69%)] text-sm shadow-[inset_0px_-1px_2px_1px_#fff7e1]", fullWidth: true, disabled: !isValid || !isDirty, children: "Change Password" })] }) }));

package/dist/components/ForgotPassword/ForgotPassword.lazy.js

@@ -26,8 +26,10 @@ export function ForgotPassword(props) {
         });
     }, [props.layout]);
     const Body = {
-        crazywin: (_jsx(CrazywinForgotPassword, { logo: props.logo })),
-        default: (_jsxs(Dialog.Content, { className: twMerge('mx-auto h-full w-full items-start p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl', props.layout === 'happybingo' ? 'bg-white dark:bg-[#0C111D]' : 'bg-bg-primary-alt', props.className), children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsx(Suspense, { children: _jsx(ForgotPasswordForm, { layout: props.layout }) })] }))
+        crazywin: _jsx(CrazywinForgotPassword, { logo: props.logo }),
+        default: (_jsxs(Dialog.Content, { className: twMerge('mx-auto h-full w-full items-start p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl', props.layout === 'happybingo'
+                ? 'bg-white dark:bg-[#0C111D]'
+                : 'bg-bg-primary-alt', props.className), children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsx(Suspense, { children: _jsx(ForgotPasswordForm, { layout: props.layout }) })] })),
     };
     return (_jsx(Dialog.Root, { open: globalStore.forgotPassword.open, onOpenChange: (details) => {
             globalStore.forgotPassword.setOpen(details.open);

package/dist/components/ForgotPassword/ForgotPasswordForm.js

@@ -49,10 +49,16 @@ export function ForgotPasswordForm({ layout }) {
         const base = z.object({
             mobileNumber: z.string().superRefine((v, ctx) => {
                 if (!mobileNumberParser.validate(v)) {
-                    ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'Invalid mobile number' });
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: 'Invalid mobile number',
+                    });
                 }
             }),
-            newPassword: z.string().min(8, 'Password must be 8 or more characters').max(100),
+            newPassword: z
+                .string()
+                .min(8, 'Password must be 8 or more characters')
+                .max(100),
             confirmPassword: z.string().min(1, 'Confirm your password'),
             verificationCode: includeOtp
                 ? z.string().refine((v) => /^\d{4,6}$/.test(v), 'Invalid OTP')
@@ -103,8 +109,10 @@ export function ForgotPasswordForm({ layout }) {
     });
     const form2Ref = useRef(null);
     const Header = {
-        1: (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center font-semibold text-lg", children: "Forgot Password" }), _jsx("p", { className: twMerge('mt-xs text-center text-sm', layout === 'happybingo' ? 'text-[#475467] dark:text-[#94969C]' : 'text-text-secondary-700'), children: "Your new password will be used to sign in." })] })),
-        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", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] })] }))
+        1: (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center font-semibold text-lg", children: "Forgot Password" }), _jsx("p", { className: twMerge('mt-xs text-center text-sm', layout === 'happybingo'
+                        ? 'text-[#475467] dark:text-[#94969C]'
+                        : 'text-text-secondary-700'), children: "Your new password will be used to sign in." })] })),
+        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", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] })] })),
     };
     if (layout === 'happybingo') {
         return (_jsxs(_Fragment, { children: [Header[step], _jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
@@ -113,9 +121,11 @@ export function ForgotPasswordForm({ layout }) {
                             newPassword: step1Form.getValues('newPassword'),
                             verificationCode: step1Form.getValues('verificationCode'),
                         });
-                    }), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "-translate-y-1/2 absolute top-1/2 left-3.5 flex shrink-0 items-center gap-md", children: [_jsx(localeInfo.country.flag, { className: "size-5" }), _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode })] }), _jsx(Field.Input, { className: 'border-[#D0D5DD] bg-transparent dark:border-[#333741]', style: {
+                    }), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { className: "text-[#344054] dark:text-[#CECFD2]", children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "-translate-y-1/2 absolute top-1/2 left-3.5 flex shrink-0 items-center gap-md", children: [_jsx(localeInfo.country.flag, { className: "size-5" }), _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode })] }), _jsx(Field.Input, { className: "border-[#D0D5DD] bg-transparent dark:border-[#333741]", style: {
                                                 paddingLeft: `calc(2.75rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
-                                            }, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.newPassword, className: "mt-xl", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', children: "New Password" }), _jsxs(PasswordInput.Control, { className: 'border-[#D0D5DD] bg-transparent dark:border-[#333741]', children: [_jsx(PasswordInput.Input, { placeholder: "Enter your new password", ...step1Form.register('newPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.newPassword?.message })] }) }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.confirmPassword, className: "mt-xl bg-transparent", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', children: "Confirm Password" }), _jsxs(PasswordInput.Control, { className: 'border-[#D0D5DD] bg-transparent dark:border-[#333741]', children: [_jsx(PasswordInput.Input, { placeholder: "Confirm new password", ...step1Form.register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.confirmPassword?.message })] }) }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.verificationCode, className: "mt-xl bg-transparent", children: [_jsx(Field.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', children: "OTP Code" }), _jsxs("div", { className: "grid grid-cols-[1fr_104px] gap-2", children: [_jsx(Field.Input, { placeholder: "Enter OTP Code", ...step1Form.register('verificationCode'), className: 'border-[#D0D5DD] bg-transparent dark:border-[#333741]' }), _jsx(Button, { variant: 'outline', className: 'bg-transparent', type: 'button', disabled: !mobileNumberValue || !!step1Form.formState.errors.mobileNumber || cooldown.cooling, onClick: async () => {
+                                            }, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.newPassword, className: "mt-xl", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: "text-[#344054] dark:text-[#CECFD2]", children: "New Password" }), _jsxs(PasswordInput.Control, { className: "border-[#D0D5DD] bg-transparent dark:border-[#333741]", children: [_jsx(PasswordInput.Input, { placeholder: "Enter your new password", ...step1Form.register('newPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.newPassword?.message })] }) }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.confirmPassword, className: "mt-xl bg-transparent", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: "text-[#344054] dark:text-[#CECFD2]", children: "Confirm Password" }), _jsxs(PasswordInput.Control, { className: "border-[#D0D5DD] bg-transparent dark:border-[#333741]", children: [_jsx(PasswordInput.Input, { placeholder: "Confirm new password", ...step1Form.register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.confirmPassword?.message })] }) }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.verificationCode, className: "mt-xl bg-transparent", children: [_jsx(Field.Label, { className: "text-[#344054] dark:text-[#CECFD2]", children: "OTP Code" }), _jsxs("div", { className: "grid grid-cols-[1fr_104px] gap-2", children: [_jsx(Field.Input, { placeholder: "Enter OTP Code", ...step1Form.register('verificationCode'), className: "border-[#D0D5DD] bg-transparent dark:border-[#333741]" }), _jsx(Button, { variant: "outline", className: "bg-transparent", type: "button", disabled: !mobileNumberValue ||
+                                                !!step1Form.formState.errors.mobileNumber ||
+                                                cooldown.cooling, onClick: async () => {
                                                 if (!cooldown.cooling) {
                                                     try {
                                                         await sendVerificationCodeMutation.mutateAsync({
@@ -132,7 +142,9 @@ export function ForgotPasswordForm({ layout }) {
                                                         });
                                                     }
                                                 }
-                                            }, children: cooldown.cooling ? `${cooldown.countdown} sec` : 'Get OTP' })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: step1Form.formState.errors.verificationCode?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting || !step1Form.formState.isValid || !step1Form.formState.isDirty, children: "Set up New Password" })] })] }));
+                                            }, children: cooldown.cooling ? `${cooldown.countdown} sec` : 'Get OTP' })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: step1Form.formState.errors.verificationCode?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting ||
+                                !step1Form.formState.isValid ||
+                                !step1Form.formState.isDirty, children: "Set up New Password" })] })] }));
     }
     return (_jsxs(_Fragment, { children: [step === 1 && (_jsxs(_Fragment, { children: [Header[step], _jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
                             try {

package/dist/components/GameExit/GameExit.lazy.js

@@ -35,7 +35,7 @@ export function GameExit(props) {
     }
     return (_jsx(Dialog.Root, { open: isOpen, onOpenChange: (details) => {
             setIsOpen(details.open);
-        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, 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-center overflow-hidden rounded-2xl p-8 shadow-2xl', 'lg:mx-auto lg:h-auto lg:max-h-[90vh] lg:w-[480px] lg:p-10', 'fade-in-0 zoom-in-95 animate-in duration-300'), children: [props.logo && (_jsx("div", { className: "w-full", children: _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "h-auto w-[7.5rem]", draggable: false }) })), _jsxs("div", { className: "w-full grow", children: [_jsx(Dialog.Title, { className: "mt-3xl text-center font-semibold text-brand-400 text-lg", children: "Game Exit" }), _jsx(Dialog.Description, { className: 'mt-lg mb-lg px-4 text-center leading-2xl', children: props.message ||
+        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, 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-center overflow-hidden rounded-2xl p-8 shadow-2xl', 'lg:mx-auto lg:h-auto lg:max-h-[90vh] lg:w-[480px] lg:p-10', 'fade-in-0 zoom-in-95 animate-in duration-300'), children: [props.logo && (_jsx("div", { className: "w-full", children: _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "h-auto w-[7.5rem]", draggable: false }) })), _jsxs("div", { className: "w-full grow", children: [_jsx(Dialog.Title, { className: "mt-3xl text-center font-semibold text-brand-400 text-lg", children: "Game Exit" }), _jsx(Dialog.Description, { className: "mt-lg mb-lg px-4 text-center leading-2xl", children: props.message ||
                                             'You have successfully quit the game. Thank you for playing!' })] }), _jsx(Dialog.Context, { children: (api) => (_jsx(Button, { type: "button", className: "mt-3 py-2.5", onClick: () => {
                                         handleClose();
                                         api.setOpen(false);

package/dist/components/Games/GamesPagination.js

@@ -51,7 +51,7 @@ export function GamesPagination({ currentPage, totalPages, onPageChange, sibling
     if (currentPage === 0 || (paginationRange && paginationRange.length < 2)) {
         return null;
     }
-    return (_jsx("div", { className: 'mx-10 flex items-center justify-center', children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "w-fit rounded-md border-transparent", onClick: handlePrevious, disabled: currentPage === 1, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-6" }) }), paginationRange?.map((pageNumber, index) => {
+    return (_jsx("div", { className: "mx-10 flex items-center justify-center", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "w-fit rounded-md border-transparent", onClick: handlePrevious, disabled: currentPage === 1, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-6" }) }), paginationRange?.map((pageNumber, index) => {
                     if (pageNumber === DOTS) {
                         return (_jsx("span", { className: "flex h-10 w-10 items-center justify-center text-sm text-text-secondary", children: "..." }, `dots-${index}`));
                     }

package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.js

@@ -30,7 +30,7 @@ import { useJackpotsCarouselItemContext } from './JackpotsCarouselContext.js';
 export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = true, customJackpotChestImage, chestImagesByTier, jackpotProfileShape = 'oval', }) {
     const [ref, inView] = useIntersectionObserver({
         threshold: 0.5,
-        rootMargin: '50px'
+        rootMargin: '50px',
     });
     const jackpot = useJackpotsCarouselItemContext();
     const getTierFromName = useCallback((name) => {
@@ -68,7 +68,12 @@ export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = t
             closed: closeChest,
             style: undefined,
         };
-    }, [chestImagesByTier, customJackpotChestImage, jackpot.name, getTierFromName]);
+    }, [
+        chestImagesByTier,
+        customJackpotChestImage,
+        jackpot.name,
+        getTierFromName,
+    ]);
     const jackpotPayoutsQuery = useJackpotPayoutsQuery({
         first: 30,
         filter: {
@@ -195,7 +200,7 @@ function getPercentage(value, total) {
     return t === 0 ? 0 : (v / t) * 100;
 }
 // Memoized table row component to reduce re-renders (TBT optimization)
-const PayoutRow = memo(({ payout, className, localeInfo }) => (_jsxs("tr", { className: twMerge('whitespace-nowrap bg-bg-primary text-left text-sm text-text-secondary-700', className?.recentPayoutsTableBodyRow), children: [_jsx("td", { className: twMerge('h-12 border-border-secondary border-t-2 px-4', className?.recentPayoutsTableBodyData), children: mask(payout.member.name, {
+const PayoutRow = memo(({ payout, className, localeInfo, }) => (_jsxs("tr", { className: twMerge('whitespace-nowrap bg-bg-primary text-left text-sm text-text-secondary-700', className?.recentPayoutsTableBodyRow), children: [_jsx("td", { className: twMerge('h-12 border-border-secondary border-t-2 px-4', className?.recentPayoutsTableBodyData), children: mask(payout.member.name, {
                 totalCharsCount: 6,
             }) }), _jsx("td", { className: twMerge('h-12 border-border-secondary border-t-2 px-4', className?.recentPayoutsTableBodyData), children: capitalize(payout.game?.provider ?? '-', {
                 delimiter: capitalize.delimiters.UNDERSCORE,

package/dist/components/Jackpots/JackpotsListNext/JackpotMultiStageDesktop.js

@@ -68,7 +68,7 @@ export function JackpotMultiStageDesktop({ animate = true, customJackpotChestIma
     const OverallProgressBar = () => {
         return (_jsxs("div", { className: "mt-3 lg:mt-4", children: [_jsxs("div", { className: "mb-[0.3125rem] flex items-center justify-between font-semibold text-sm text-text-primary-900", children: [_jsx("p", { children: "Overall Progress" }), overallPercentage, "%"] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary lg:h-4", max: 100, value: overallPercentage, children: _jsx(Progress.Track, { className: twMerge('h-full overflow-hidden rounded-full bg-bg-primary', className?.progressBarTrack), children: _jsx(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }) }) }) })] }));
     };
-    const RecentPayoutsTable = () => (_jsx("div", { className: twMerge('max-h-[17rem] overflow-y-scroll rounded-xl', styles.scrollArea), children: _jsx("div", { className: 'rounded-xl border-gray-200', children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsx("tr", { className: twMerge('h-8 whitespace-nowrap bg-bg-secondary text-left font-medium text-text-tertiary-600 text-xs', className?.recentPayoutsTableHeadRow), children: ['Stage', 'Player', 'Turnover Target', 'Prize', 'Timestamp'].map((header) => (_jsx("th", { className: "px-4", children: header }, header))) }) }), _jsx("tbody", { children: jackpot.stages
+    const RecentPayoutsTable = () => (_jsx("div", { className: twMerge('max-h-[17rem] overflow-y-scroll rounded-xl', styles.scrollArea), children: _jsx("div", { className: "rounded-xl border-gray-200", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsx("tr", { className: twMerge('h-8 whitespace-nowrap bg-bg-secondary text-left font-medium text-text-tertiary-600 text-xs', className?.recentPayoutsTableHeadRow), children: ['Stage', 'Player', 'Turnover Target', 'Prize', 'Timestamp'].map((header) => (_jsx("th", { className: "px-4", children: header }, header))) }) }), _jsx("tbody", { children: jackpot.stages
                             ? jackpot.stages.map((j, i) => (_jsxs("tr", { className: twMerge('whitespace-nowrap bg-bg-primary text-left text-sm text-text-secondary-700', className?.recentPayoutsTableBodyRow), children: [_jsx("td", { className: twMerge('h-12 border-border-secondary border-t-2 px-4', className?.recentPayoutsTableBodyData), children: i + 1 }), _jsx("td", { className: twMerge('h-12 border-border-secondary border-t-2 px-4', className?.recentPayoutsTableBodyData), children: j.member?.name
                                             ? maskFirstLast(j.member.name, {
                                                 firstCharsCount: 3,

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

@@ -167,7 +167,8 @@ export function KYCReminder({ enablePendingKycReminder = false, ...props }) {
                                                 router.push('/');
                                             }, children: "Log Out" }) })] })), isPending &&
                                 !isVerificationLocked &&
-                                (enablePendingKycReminder || globalStore.kycReminder.open) && (_jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mx-auto mb-4 w-fit rounded-full bg-bg-primary p-2", children: _jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }) }), _jsx("h2", { className: `mt-4 font-semibold text-lg ${props.titleBgColor}`, children: "VERIFICATION IN PROGRESS" }), _jsx("p", { className: `mt-xs text-sm text-text-tertiary-600 ${props.descriptionBgColor}`, children: "Your account verification is currently under review. Please wait for approval to regain full access to this platform." }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo?.logo ?? pagcorLogo, alt: "PAGCOR logo", height: 88, width: 88, className: `h-[88px] w-auto shrink-0 ${props.pagcorLogo?.styles ?? ''}`, draggable: false, unoptimized: true }), _jsx(Image, { src: props.responsibleGamingLogo?.logo ?? responsibleGamingLogo, alt: "Responsible Gaming logo", height: 50, width: 186, className: `h-[50px] w-auto shrink-0 ${props.responsibleGamingLogo?.styles ?? ''}`, draggable: false, unoptimized: true })] }), _jsx("div", { className: "mt-6 space-y-lg", children: _jsx(Button, { className: "bg-transparent text-text-brand-primary-600", onClick: async () => {
+                                (enablePendingKycReminder || globalStore.kycReminder.open) && (_jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mx-auto mb-4 w-fit rounded-full bg-bg-primary p-2", children: _jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }) }), _jsx("h2", { className: `mt-4 font-semibold text-lg ${props.titleBgColor}`, children: "VERIFICATION IN PROGRESS" }), _jsx("p", { className: `mt-xs text-sm text-text-tertiary-600 ${props.descriptionBgColor}`, children: "Your account verification is currently under review. Please wait for approval to regain full access to this platform." }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo?.logo ?? pagcorLogo, alt: "PAGCOR logo", height: 88, width: 88, className: `h-[88px] w-auto shrink-0 ${props.pagcorLogo?.styles ?? ''}`, draggable: false, unoptimized: true }), _jsx(Image, { src: props.responsibleGamingLogo?.logo ??
+                                                    responsibleGamingLogo, alt: "Responsible Gaming logo", height: 50, width: 186, className: `h-[50px] w-auto shrink-0 ${props.responsibleGamingLogo?.styles ?? ''}`, draggable: false, unoptimized: true })] }), _jsx("div", { className: "mt-6 space-y-lg", children: _jsx(Button, { className: "bg-transparent text-text-brand-primary-600", onClick: async () => {
                                                 if (Capacitor.isNativePlatform()) {
                                                     const session = await getQueryClient().fetchQuery({
                                                         queryKey: getSessionQueryKey(),

package/dist/components/Migrate/MigrateInitializing.js

@@ -10,5 +10,5 @@ export const MIGRATE_LOADER_TITLE = 'Account migration';
 export const SIGN_IN_LOADER_TITLE = 'Signing in';
 export function MigrateInitializing(props) {
     const footerText = props.footerText ?? LOADER_FOOTER;
-    return (_jsx("div", { className: mergeMigrateCardClassName(props.className), children: _jsxs("div", { className: "flex flex-col items-stretch gap-5 px-0.5 py-1 sm:px-1", children: [_jsx("div", { className: "flex justify-center", children: _jsxs("div", { className: "relative h-20 w-20 shrink-0", "aria-hidden": true, children: [_jsx("div", { className: "absolute inset-0 animate-spin rounded-full border-4 border-bg-tertiary border-t-button-tertiary-fg [animation-duration:1s]" }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center text-button-tertiary-fg", children: props.logo ? (_jsx(Image, { src: props.logo, alt: "", width: 20, height: 20, className: "h-12 w-12 object-contain" })) : (_jsx(User01Icon, { className: "h-7 w-7", "aria-hidden": true })) })] }) }), _jsxs("div", { className: "flex w-full min-w-0 flex-col gap-1.5", children: [_jsx("h1", { className: "font-semibold text-text-primary-900 text-lg tracking-tight", children: props.title }), _jsx("p", { className: "min-w-0 max-w-full text-balance text-center text-sm text-text-secondary-700 leading-relaxed", children: LOADER_HEADLINE })] }), _jsxs("div", { className: "w-full min-w-0 space-y-1.5", children: [_jsxs("div", { className: "flex w-full min-w-0 items-center justify-between gap-3 text-text-tertiary-600 text-xs", children: [_jsx("span", { className: "min-w-0 truncate text-left", children: props.phaseLabel }), _jsxs("span", { className: "shrink-0 text-text-tertiary-600/90 tabular-nums", children: [props.pctShown, "%"] })] }), _jsx("div", { className: "h-2 w-full min-w-0 overflow-hidden rounded-full bg-bg-tertiary", children: _jsx("div", { className: "h-full rounded-full bg-button-primary-bg transition-[width] duration-1000 ease-[cubic-bezier(0.33,1,0.68,1)]", style: { width: `${props.barPct}%` } }) })] }), _jsx("p", { className: "min-w-0 max-w-full text-balance text-center text-text-tertiary-600/80 text-xs leading-relaxed", children: footerText })] }) }));
+    return (_jsx("div", { className: mergeMigrateCardClassName(props.className), children: _jsxs("div", { className: "flex flex-col items-stretch gap-5 px-0.5 py-1 sm:px-1", children: [_jsx("div", { className: "flex justify-center", children: _jsxs("div", { className: "relative h-20 w-20 shrink-0", "aria-hidden": true, children: [_jsx("div", { className: "absolute inset-0 animate-spin rounded-full border-4 border-bg-tertiary border-t-button-tertiary-fg [animation-duration:1s]" }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center text-button-tertiary-fg", children: props.logo ? (_jsx(Image, { src: props.logo, alt: "", width: 20, height: 20, className: "h-12 w-12 object-contain" })) : (_jsx(User01Icon, { className: "h-7 w-7", "aria-hidden": true })) })] }) }), _jsxs("div", { className: "flex w-full min-w-0 flex-col gap-1.5", children: [_jsx("h1", { className: "font-semibold text-lg text-text-primary-900 tracking-tight", children: props.title }), _jsx("p", { className: "min-w-0 max-w-full text-balance text-center text-sm text-text-secondary-700 leading-relaxed", children: LOADER_HEADLINE })] }), _jsxs("div", { className: "w-full min-w-0 space-y-1.5", children: [_jsxs("div", { className: "flex w-full min-w-0 items-center justify-between gap-3 text-text-tertiary-600 text-xs", children: [_jsx("span", { className: "min-w-0 truncate text-left", children: props.phaseLabel }), _jsxs("span", { className: "shrink-0 text-text-tertiary-600/90 tabular-nums", children: [props.pctShown, "%"] })] }), _jsx("div", { className: "h-2 w-full min-w-0 overflow-hidden rounded-full bg-bg-tertiary", children: _jsx("div", { className: "h-full rounded-full bg-button-primary-bg transition-[width] duration-1000 ease-[cubic-bezier(0.33,1,0.68,1)]", style: { width: `${props.barPct}%` } }) })] }), _jsx("p", { className: "min-w-0 max-w-full text-balance text-center text-text-tertiary-600/80 text-xs leading-relaxed", children: footerText })] }) }));
 }

package/dist/components/NewsFeed/NewsFeedCarousel.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import useEmblaCarousel, {} from 'embla-carousel-react';
 import Link from 'next/link';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
 import { ArrowRightIcon } from '../../icons/ArrowRightIcon.js';

package/dist/components/Promos/Cashback.d.ts

@@ -1,10 +1,12 @@
 import type { Cashback as TCashback } from '../../types';
+import type { PromoCardClassNames } from './PromosGrid';
 interface CashbackProps {
     data: TCashback;
     viewDetailsUrl: string;
     hasPromotionPeriod?: boolean;
     roundedButtons?: boolean;
     textOrientation?: 'left' | 'center';
+    cardClassNames?: PromoCardClassNames;
 }
-export declare function Cashback({ data, viewDetailsUrl, hasPromotionPeriod, roundedButtons, textOrientation, }: CashbackProps): import("react/jsx-runtime").JSX.Element;
+export declare function Cashback({ data, viewDetailsUrl, hasPromotionPeriod, roundedButtons, textOrientation, cardClassNames, }: CashbackProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Promos/Cashback.js

@@ -6,16 +6,16 @@ import { useShallow } from 'zustand/shallow';
 import { useAvailablePromosQuery } from '../../client/hooks/useAvailablePromosQuery.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { Button } from '../../ui/Button/index.js';
-import { formatPromotionPeriod } from './utils.js';
-export function Cashback({ data, viewDetailsUrl, hasPromotionPeriod, roundedButtons, textOrientation = 'center', }) {
+import { formatPromotionPeriod, mergePromoCardClassName } from './utils.js';
+export function Cashback({ data, viewDetailsUrl, hasPromotionPeriod, roundedButtons, textOrientation = 'center', cardClassNames, }) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
     })));
     const claimablePromos = useAvailablePromosQuery().data ?? [];
     const claimable = claimablePromos.find((availablePromo) => availablePromo.id === data.id);
     const promotionPeriod = formatPromotionPeriod(data.activationStartDateTime, data.activationEndDateTime);
-    return (_jsxs("div", { className: "relative flex h-full flex-col overflow-hidden rounded-2xl border border-border-secondary bg-accent-50 bg-bg-primary-alt", children: [data.banner?.url && (_jsx(Image, { src: data.banner.url, alt: data.name, width: 400, height: 202, loading: "lazy", unoptimized: true, className: "block aspect-[365/180] w-full object-cover" })), hasPromotionPeriod && (_jsxs("div", { className: "bg-black py-1.5 text-center font-bold text-3xs uppercase", children: ["PROMOTION PERIOD: ", promotionPeriod] })), _jsxs("div", { className: "flex flex-grow flex-col px-4 pt-2xl pb-3xl", children: [_jsx("div", { className: twMerge('w-full grow font-semibold text-xl', textOrientation === 'center' ? 'text-center' : 'text-left'), children: data.name }), _jsxs("div", { className: "mt-auto flex flex-col gap-3 pt-4 lg:flex-row", children: [claimable && (_jsx(Button, { size: "sm", onClick: () => {
+    return (_jsxs("div", { className: mergePromoCardClassName('relative flex h-full flex-col overflow-hidden rounded-2xl border border-border-secondary bg-accent-50 bg-bg-primary-alt', cardClassNames?.container), children: [data.banner?.url && (_jsx(Image, { src: data.banner.url, alt: data.name, width: 400, height: 202, loading: "lazy", unoptimized: true, className: mergePromoCardClassName('block aspect-[365/180] w-full object-cover', cardClassNames?.image) })), hasPromotionPeriod && (_jsxs("div", { className: mergePromoCardClassName('bg-black py-1.5 text-center font-bold text-3xs uppercase', cardClassNames?.promotionPeriod), children: ["PROMOTION PERIOD: ", promotionPeriod] })), _jsxs("div", { className: mergePromoCardClassName('flex flex-grow flex-col px-4 pt-2xl pb-3xl', cardClassNames?.body), children: [_jsx("div", { className: mergePromoCardClassName(twMerge('w-full grow font-semibold text-xl', textOrientation === 'center' ? 'text-center' : 'text-left'), cardClassNames?.title), children: data.name }), _jsxs("div", { className: mergePromoCardClassName('mt-auto flex flex-col gap-3 pt-4 lg:flex-row', cardClassNames?.actions), children: [claimable && (_jsx(Button, { size: "sm", className: cardClassNames?.claimButton, onClick: () => {
                                     globalStore.depositWithdrawal.setOpen(true);
                                     globalStore.depositWithdrawal.setPromo(data.id);
-                                }, children: "Get bonus" })), _jsx(Button, { size: "sm", variant: "outline", asChild: true, className: roundedButtons ? 'rounded-full' : '', children: _jsxs(Link, { href: `${viewDetailsUrl}/${data.id}`, children: ["Read more", _jsxs("span", { className: "sr-only", children: [" about ", data.name] })] }) })] })] })] }));
+                                }, children: "Get bonus" })), _jsx(Button, { size: "sm", variant: "outline", asChild: true, className: mergePromoCardClassName(roundedButtons ? 'rounded-full' : '', cardClassNames?.detailsButton), children: _jsxs(Link, { href: `${viewDetailsUrl}/${data.id}`, children: ["Read more", _jsxs("span", { className: "sr-only", children: [" about ", data.name] })] }) })] })] })] }));
 }

package/dist/components/Promos/CustomPromo.d.ts

@@ -1,9 +1,11 @@
 import type { CustomPromo as TCustomPromo } from '../../types';
+import type { PromoCardClassNames } from './PromosGrid';
 interface CustomPromoProps {
     data: TCustomPromo;
     viewDetailsUrl: string;
     roundedButtons?: boolean;
     textOrientation?: 'left' | 'center';
+    cardClassNames?: PromoCardClassNames;
 }
-export declare function CustomPromo({ data, viewDetailsUrl, roundedButtons, textOrientation, }: CustomPromoProps): import("react/jsx-runtime").JSX.Element;
+export declare function CustomPromo({ data, viewDetailsUrl, roundedButtons, textOrientation, cardClassNames, }: CustomPromoProps): import("react/jsx-runtime").JSX.Element;
 export {};