@opexa/portal-components 0.0.934 → 0.0.936

package/dist/client/hooks/useSessionHealthQuery.js

@@ -33,5 +33,21 @@ export const useSessionHealthQuery = (config) => {
             });
             return ok;
         },
+        refetchInterval: (query) => {
+            console.log('query', query);
+            if (query.state.error?.message === 'MEMBER_ACCOUNT_DISABLED' &&
+                query.state.errorUpdateCount < 10) {
+                return 5000;
+            }
+            return false;
+        },
+        retry: (failureCount, error) => {
+            console.log('failureCount', failureCount);
+            console.log('error', error);
+            if (error?.message === 'MEMBER_ACCOUNT_DISABLED' && failureCount < 10) {
+                return true;
+            }
+            return false;
+        },
     });
 };

package/dist/components/DepositWithdrawal/Deposit/AurixPayPayMayaDeposit/AurixPayGrabPayDeposit.js

@@ -97,7 +97,7 @@ export function AurixPayGrabPayDeposit() {
     const depositsCount = depositsCountQuery.data ?? 0;
     const paymentSettingsQuery = usePaymentSettingsQuery();
     const paymentSettings = paymentSettingsQuery.data;
-    const gatewaySettings = paymentSettings?.aurixPayGrabPayDepositGatewaySettings;
+    const gatewaySettings = paymentSettings?.aioGCashDepositGatewaySettings;
     const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
     const minimumAmount = depositsCount <= 0
         ? parseDecimal(paymentSettingsQuery.data?.minimumFirstDepositAmount, 0)
@@ -200,26 +200,7 @@ export function AurixPayGrabPayDeposit() {
                     accountNumber: data.accountNumber,
                 });
             }
-        }), noValidate: true, children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.accountNumber, children: [_jsx(Field.Label, { children: "Account number" }), _jsx(Field.Input, { ...form.register('accountNumber', {
-                            onChange: (e) => {
-                                // Allow only digits and leading +
-                                let value = e.target.value;
-                                // Remove all non-digit except leading +
-                                value = value.replace(/(?!^)\D/g, '');
-                                if (value.startsWith('+')) {
-                                    // keep leading +
-                                    value = '+' + value.slice(1).replace(/\D/g, '');
-                                }
-                                else {
-                                    // remove all non-digits
-                                    value = value.replace(/\D/g, '');
-                                }
-                                e.target.value = value;
-                                form.setValue('accountNumber', value, {
-                                    shouldValidate: true,
-                                });
-                            },
-                        }), inputMode: "tel", pattern: "^\\+?[0-9]*$", autoComplete: "tel" }), _jsx(Field.ErrorText, { children: form.formState.errors.accountNumber?.message })] }), _jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-lg", children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
+        }), noValidate: true, children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.accountNumber, children: [_jsx(Field.Label, { children: "Account number" }), _jsx(Field.Input, { ...form.register('accountNumber') }), _jsx(Field.ErrorText, { children: form.formState.errors.accountNumber?.message })] }), _jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-lg", children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
                                 o.field.onChange(details.value);
                             }, allowMouseWheel: true, children: [_jsx(NumberInput.Label, { children: "Enter amount you want to deposit" }), _jsxs(NumberInput.Control, { children: [_jsx(NumberInput.Input, {}), _jsx(NumberInput.IncrementTrigger, { children: _jsx(ChevronUpIcon, {}) }), _jsx(NumberInput.DecrementTrigger, { children: _jsx(ChevronDownIcon, {}) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] })) }), _jsx(AmountChoices, { value: parseDecimal(form.watch('amount'), 0), onChange: (value) => {
                     form.setValue('amount', value.toString(), {

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

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

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

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

package/dist/components/Disclaimer/DisclaimerV3.js

@@ -10,7 +10,7 @@ import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
 import { CheckIcon } from '../../icons/CheckIcon.js';
 import pagcorLogo from '../../images/pagcor2.png';
-import responsibleGamingLogo from '../../images/responsible-gaming.png';
+import responsibleGamingLogo from '../../images/responsible-gaming-new.png';
 import { Button } from '../../ui/Button/index.js';
 import { Checkbox } from '../../ui/Checkbox/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
@@ -27,12 +27,12 @@ export function DisclaimerV3(props) {
     })));
     const checked = globalStore.termsOfUse.accepted && globalStore.responsibleGaming.accepted;
     const [showWarning, setShowWarning] = useState(false);
-    return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { "aria-label": `${props.siteName} Player Disclaimer`, "aria-labelledby": "disclaimer-title", "aria-describedby": "disclaimer-description", className: "flex h-full scrollbar:h-2 scrollbar:w-2 w-full flex-col items-start gap-y-4 overflow-y-auto scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent p-3xl lg:mx-auto lg:h-auto lg:max-h-[90vh] lg:w-[400px] lg:rounded-xl", children: [_jsx("div", { className: "mx-auto h-auto max-w-[120px]", children: _jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, width: 200, height: 100, className: "h-full w-full object-cover", draggable: false, unoptimized: true }) }), _jsx("div", { className: "w-full text-center font-semibold text-3xl", id: "disclaimer-title", children: "Notice" }), _jsx("div", { className: "text-sm", id: "disclaimer-description", children: "By entering this website, you acknowledge and confirm:" }), _jsx("div", { className: "w-full grow", children: _jsxs(Dialog.Description, { className: "space-y-4 text-sm", children: [_jsxs("ul", { className: "space-y-1.5 text-left", "aria-label": "Restricted persons list", children: [_jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are 21 years old and above."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are not a government official, or employee connected directly with the operation of the Government or any of its agencies, member of the Armed Forces of the Philippines including the Army, Navy, Air Force, or the Philippine Nationa Police."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are not included in the PAGCOR's National Database Restricted Persons (NDRP)."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "Funds or credits in the account of player who is found ineligible to play shall mean forfeiture of said funds/credits in favor of the Government."] }), _jsxs(Checkbox.Root, { checked: checked, onCheckedChange: (e) => {
+    return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { "aria-label": `${props.siteName} Player Disclaimer`, "aria-labelledby": "disclaimer-title", "aria-describedby": "disclaimer-description", className: twMerge('flex h-full scrollbar:h-2 scrollbar:w-2 w-full flex-col items-start overflow-y-auto scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent p-3xl lg:mx-auto lg:h-auto lg:max-h-[85vh] lg:w-[500px] lg:rounded-xl'), children: [_jsx("div", { className: "mx-auto h-auto max-w-[120px]", children: _jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, width: 200, height: 100, className: "h-full w-full object-cover", draggable: false, unoptimized: true }) }), _jsxs("div", { className: "my-4 grid w-full grid-cols-2 items-center justify-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo ?? pagcorLogo, alt: "PAGCOR logo", height: 50, width: 186, className: "mx-auto h-[43px] w-auto shrink-0 object-contain", draggable: false, unoptimized: true }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "Responsible Gaming logo", height: 50, width: 186, className: "mx-auto h-[50px] w-auto shrink-0", draggable: false, unoptimized: true })] }), _jsx("div", { className: "w-full text-center font-semibold text-2xl uppercase", id: "disclaimer-title", children: "Notice" }), _jsx("div", { className: "mb-1 text-sm text-text-secondary-700", id: "disclaimer-description", children: "By entering this website, you acknowledge and confirm:" }), _jsx("div", { className: "w-full grow", children: _jsxs(Dialog.Description, { className: "space-y-4 text-sm", children: [_jsxs("ul", { className: "space-y-1.5 text-left", "aria-label": "Restricted persons list", children: [_jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are 21 years old and above."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are not a government official, or employee connected directly with the operation of the Government or any of its agencies, member of the Armed Forces of the Philippines including the Army, Navy, Air Force, or the Philippine Nationa Police."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are not included in the PAGCOR's National Database Restricted Persons (NDRP)."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "Funds or credits in the account of player who is found ineligible to play shall mean forfeiture of said funds/credits in favor of the Government."] }), _jsxs(Checkbox.Root, { checked: checked, onCheckedChange: (e) => {
                                                         if (e.checked === 'indeterminate')
                                                             return;
                                                         globalStore.termsOfUse.setAccepted(e.checked);
                                                         globalStore.responsibleGaming.setAccepted(e.checked);
-                                                    }, className: "pt-2.5 pb-2", children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["You agree and read the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
+                                                    }, className: "pt-2.5 pb-2 text-sm", children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["You agree and read the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
                                                                         globalStore.termsOfUse.setOpen(true);
                                                                         globalStore.termsOfUse.setNext('DISCLAIMER');
                                                                         disclaimer.close();
@@ -40,7 +40,7 @@ export function DisclaimerV3(props) {
                                                                         globalStore.responsibleGaming.setOpen(true);
                                                                         globalStore.responsibleGaming.setNext('DISCLAIMER');
                                                                         disclaimer.close();
-                                                                    }, children: "Responsible Gaming" }), ' ', "guidelines."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsxs("li", { className: "mt-5", children: ["Self Exclusion Site:\u00A0", _jsx("a", { href: "https://osea.pagcor.ph", target: "_blank", className: "text-brand-400 underline underline-offset-2", rel: "noopener", children: "https://osea.pagcor.ph/" })] }), _jsxs("li", { className: "mt-5", children: ["To know more about PAGCOR\u2019s ResponsibleGaming Program:\u00A0", _jsxs("a", { href: "https://www.pagcor.ph/regulatory/responsible-gaming.php", target: "_blank", className: "text-brand-400 underline underline-offset-2", rel: "noopener", children: ["https://www.pagcor.ph", _jsx("br", {}), "/regulatory/responsible-gaming.php"] })] })] }), _jsx("div", { className: twMerge('mx-auto mt-2 flex max-w-full items-center gap-2 break-words rounded-md text-text-error-primary text-xs', showWarning ? 'h-[28px] opacity-100' : 'opacity-0'), role: "alert", "aria-live": "assertive", children: showWarning && (_jsxs(_Fragment, { children: [_jsx(AlertCircleIcon, { className: "size-5 text-text-error-primary" }), "Please agree to ", props.siteName, "'s Terms of Use and Responsible Gaming to proceed."] })) })] }) }), _jsxs("div", { className: "grid w-full grid-cols-2 items-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo ?? pagcorLogo, alt: "PAGCOR logo", height: 50, width: 186, className: "h-[43px] w-auto shrink-0 object-contain", draggable: false, unoptimized: true }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "Responsible Gaming logo", height: 50, width: 186, className: "h-[50px] w-auto shrink-0", draggable: false, unoptimized: true })] }), _jsxs("div", { className: "row mt-4 flex w-full flex-col gap-3", children: [_jsx(Button, { type: "button", onClick: () => {
+                                                                    }, children: "Responsible Gaming" }), ' ', "guidelines."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsxs("li", { className: "mt-5", children: ["Self Exclusion Site:\u00A0", _jsx("a", { href: "https://osea.pagcor.ph", target: "_blank", className: "text-brand-400 underline underline-offset-2", rel: "noopener", children: "https://osea.pagcor.ph/" })] }), _jsxs("li", { className: "mt-5", children: ["To know more about PAGCOR's Responsible Gaming Program:\u00A0", _jsx("a", { href: "https://www.pagcor.ph/regulatory/responsible-gaming.php", target: "_blank", className: "text-brand-400 underline underline-offset-2", rel: "noopener", children: "https://www.pagcor.ph/regulatory/responsible-gaming.php" })] })] }), _jsx("div", { className: twMerge('mx-auto mt-2 flex max-w-full items-center gap-2 break-words rounded-md text-text-error-primary text-xs', showWarning ? 'h-[28px] opacity-100' : 'opacity-0'), role: "alert", "aria-live": "assertive", children: showWarning && (_jsxs(_Fragment, { children: [_jsx(AlertCircleIcon, { className: "size-5 text-text-error-primary" }), "Please agree to ", props.siteName, "'s Terms of Use and Responsible Gaming to proceed."] })) })] }) }), _jsxs("div", { className: "row mt-4 flex w-full flex-col gap-3", children: [_jsx(Button, { type: "button", onClick: () => {
                                             if (!checked) {
                                                 setShowWarning(true);
                                                 setTimeout(() => setShowWarning(false), 4000);
@@ -64,4 +64,4 @@ export function DisclaimerV3(props) {
                                             }
                                         }, variant: "outline", children: "Exit" })] })] }) })] }) }));
 }
-const Circle = () => (_jsx("div", { children: _jsx("div", { className: "flex h-4.5 w-4.5 items-center justify-center rounded-full border border-brand-400", children: _jsx("div", { className: "h-3 w-3 rounded-full bg-brand-400" }) }) }));
+const Circle = () => (_jsx("div", { children: _jsx("div", { className: "flex h-4.5 w-4.5 items-center justify-center rounded-full border-[5px] border-brand-400", children: _jsx("div", { className: "h-2 w-2 rounded-full bg-bg-disabled" }) }) }));

package/dist/components/ForgotPassword/Crazywin/ForgotPassword.module.css

@@ -1,43 +1,43 @@
-  .card {
-    --gradient-bg: radial-gradient(103.87% 100% at 50.15% 0%, #072b37 20.3%, #051125 100%);
-
-    --gradient-border-top: radial-gradient(
-      139.23% 113.41% at 50.14% 0%,
-      #8affdc 0.49%,
-      rgba(138, 255, 220, 0) 33.03%
-    );
-
-    --gradient-border-bottom: radial-gradient(
-      42.09% 54.21% at 50.14% 100%,
-      #8affdc 5.74%,
-      rgba(138, 255, 220, 0) 93.84%
-    );
-
-    position: relative;
-    background: var(--gradient-bg);
-    box-shadow: 0px 4px 14px 6px rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(25px);
-    border-radius: 1.25em;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-  }
-
-  .card::after,
-  .card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    border: 0.5px solid transparent;
-    border-image-slice: 1;
-  }
-
-  .card::before {
-    border-image-source: var(--gradient-border-bottom);
-  }
-
-  .card::after {
-    border-image-source: var(--gradient-border-top);
+  .card {
+    --gradient-bg: radial-gradient(103.87% 100% at 50.15% 0%, #072b37 20.3%, #051125 100%);
+
+    --gradient-border-top: radial-gradient(
+      139.23% 113.41% at 50.14% 0%,
+      #8affdc 0.49%,
+      rgba(138, 255, 220, 0) 33.03%
+    );
+
+    --gradient-border-bottom: radial-gradient(
+      42.09% 54.21% at 50.14% 100%,
+      #8affdc 5.74%,
+      rgba(138, 255, 220, 0) 93.84%
+    );
+
+    position: relative;
+    background: var(--gradient-bg);
+    box-shadow: 0px 4px 14px 6px rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(25px);
+    border-radius: 1.25em;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .card::after,
+  .card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    border: 0.5px solid transparent;
+    border-image-slice: 1;
+  }
+
+  .card::before {
+    border-image-source: var(--gradient-border-bottom);
+  }
+
+  .card::after {
+    border-image-source: var(--gradient-border-top);
   }

package/dist/components/Games/Game.js

@@ -59,7 +59,7 @@ export function Game(props) {
         : featureFlag.enabled
             ? account?.status !== 'VERIFICATION_LOCKED'
             : true;
-    return (_jsxs(GameLaunchTrigger, { bypassKycCheck: props.bypassKycCheck, game: game, className: twMerge('group md:hover:-translate-y-1 relative block w-full shadow-sm transition-transform duration-200', classNames.root), "aria-label": `Play ${game.name} game`, children: [props.badge === 'new' && (_jsx(BadgeNew, { className: "absolute top-0 left-0 size-[3.75rem]" })), props.badge === 'top' && (_jsx(BadgeTop, { className: "absolute top-0 left-0 size-[3.75rem]" })), props.badge === 'popular' && (_jsx(BadgePopular, { className: "absolute top-0 left-0 size-[3.75rem]" })), markUnmarkGameAsFavoriteEnabled && (_jsx("div", { role: "button", tabIndex: 0, onClick: (e) => {
+    return (_jsxs(GameLaunchTrigger, { bypassKycCheck: props.bypassKycCheck, game: game, className: twMerge('group md:hover:-translate-y-1 relative flex h-full w-full flex-col shadow-sm transition-transform duration-200', classNames.root), "aria-label": `Play ${game.name} game`, children: [props.badge === 'new' && (_jsx(BadgeNew, { className: "absolute top-0 left-0 size-[3.75rem]" })), props.badge === 'top' && (_jsx(BadgeTop, { className: "absolute top-0 left-0 size-[3.75rem]" })), props.badge === 'popular' && (_jsx(BadgePopular, { className: "absolute top-0 left-0 size-[3.75rem]" })), markUnmarkGameAsFavoriteEnabled && (_jsx("div", { role: "button", tabIndex: 0, onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     if (markGameAsFavoriteMutation.isPending)
@@ -77,7 +77,7 @@ export function Game(props) {
                     : 'Mark as favorite game', "aria-disabled": markGameAsFavoriteMutation.isPending ||
                     unmarkGameAsFavoriteMutation.isPending, className: "absolute top-2 right-2 flex size-9 items-center justify-center rounded-xs bg-black/65 opacity-100 blur-[0.5px] transition-opacity duration-200 md:opacity-0 md:group-hover:opacity-100", children: _jsx(Star01Icon, { className: twMerge('size-5 text-white transition-colors duration-200 hover:text-yellow-400', markedAsFavorite
                         ? 'fill-yellow-400 text-yellow-400'
-                        : 'text-white') }) })), _jsx(GameImage, { priority: props.priority }), _jsx("span", { className: twMerge('block w-full truncate rounded-b-md bg-bg-tertiary px-2 py-3.5 text-center font-semibold text-text-primary-brand text-xs', classNames.title), children: game.name })] }));
+                        : 'text-white') }) })), _jsx(GameImage, { priority: props.priority }), _jsx("span", { className: twMerge('flex w-full flex-1 items-center justify-center break-words rounded-b-md bg-bg-tertiary px-2 py-3.5 text-center font-semibold text-text-primary-brand text-xs', classNames.title), children: game.name })] }));
 }
 function GameImage({ priority }) {
     const game = useGameContext();

package/dist/components/GamesSearch/GamesSearch.js

@@ -60,12 +60,11 @@ export function GamesSearch(props) {
                                     }, children: "Clear" }));
                             } })] }), _jsx(Portal, { children: _jsx(Combobox.Context, { children: (api) => (_jsxs(_Fragment, { children: [_jsx(Presence, { present: api.open, children: _jsx("div", { className: "fixed inset-0 z-40 bg-black/50 backdrop-blur-sm", onClick: () => api.setOpen(false) }) }), _jsx(Combobox.Positioner, { children: searchInput.trim().length > 0 && (_jsx(Combobox.Content, { className: "z-50 max-h-[33.25rem] overflow-y-auto p-0", children: showMinLengthWarning ? (_jsx(Alert, { message: "Search requires at least 3 characters." })) : (_jsxs(_Fragment, { children: [games.length <= 0 && (_jsx(Alert, { message: "No results found" })), games.length > 0 && (_jsxs("div", { className: "p-xl", children: [_jsx(Combobox.Context, { children: (api) => (_jsx("div", { className: twMerge('grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5', classNames.gameSearchResult), children: games.map((game) => (_jsxs(GameLaunchTrigger, { bypassKycCheck: isBypass, game: game, onClick: () => {
                                                                         api.setOpen(false);
-                                                                    }, className: twMerge('block w-full shadow-sm', classNames.thumbnailRoot), children: [_jsx(Image, { src: getGameImageUrl({
+                                                                    }, className: twMerge('md:hover:-translate-y-1 relative flex h-full w-full flex-col shadow-sm transition-transform duration-200', classNames.thumbnailRoot), children: [_jsx(Image, { src: getGameImageUrl({
                                                                                 reference: game.reference,
                                                                                 provider: game.provider,
                                                                                 image: game.image,
-                                                                            }), alt: "", width: 200, height: 200, loading: "lazy", unoptimized: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('block w-full rounded-b-md bg-bg-tertiary px-2 py-2.5 text-center font-semibold text-text-primary-brand text-xs', props.variant !== '88play' &&
-                                                                                'truncate', classNames.thumbnailTitle), children: fixMojibake(game.name) })] }, game.id))) })) }), _jsx(Presence, { present: gamesQuery.hasNextPage, children: _jsx(Button, { variant: "outline", className: twMerge('mx-auto mt-4xl w-fit', classNames.loadMoreButton), onClick: () => gamesQuery.fetchNextPage(), children: "Load More" }) })] }))] })) })) })] })) }) })] }) }));
+                                                                            }), alt: "", width: 200, height: 200, loading: "lazy", unoptimized: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('flex w-full flex-1 items-center justify-center break-words rounded-b-md bg-bg-tertiary px-2 py-2.5 text-center font-semibold text-text-primary-brand text-xs', classNames.thumbnailTitle), children: fixMojibake(game.name) })] }, game.id))) })) }), _jsx(Presence, { present: gamesQuery.hasNextPage, children: _jsx(Button, { variant: "outline", className: twMerge('mx-auto mt-4xl w-fit', classNames.loadMoreButton), onClick: () => gamesQuery.fetchNextPage(), children: "Load More" }) })] }))] })) })) })] })) }) })] }) }));
 }
 function Alert({ message }) {
     return (_jsxs("div", { className: "py-lg", role: "alert", "aria-live": "polite", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-lg border border-border-primary bg-bg-secondary shadow-xs", children: _jsx(SearchLgIcon, { className: "size-6 text-text-secondary-700" }) }), _jsx("p", { className: "mt-4 text-center text-text-secondary-700", children: message })] }));