@opexa/portal-components 0.0.99 → 0.0.100

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

@@ -4,10 +4,23 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { useCreateMayaWithdrawalMutation, useLocaleInfo, useMobileNumberParser, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
-import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, XIcon, } from '../../../../icons/index.js';
-import { AlertDialog, Button, Field, NumberInput, PasswordInput, } from '../../../../ui/index.js';
-import { parseDecimal } from '../../../../utils/index.js';
+import { useCreateMayaWithdrawalMutation } from '../../../../client/hooks/useCreateMayaWithdrawalMutation.js';
+import { useLocaleInfo } from '../../../../client/hooks/useLocaleInfo.js';
+import { useMobileNumberParser } from '../../../../client/hooks/useMobileNumberParser.js';
+import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
+import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
+import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
+import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
+import { EyeIcon } from '../../../../icons/EyeIcon.js';
+import { EyeOffIcon } from '../../../../icons/EyeOffIcon.js';
+import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
+import { XIcon } from '../../../../icons/XIcon.js';
+import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
+import { Button } from '../../../../ui/Button/index.js';
+import { Field } from '../../../../ui/Field/index.js';
+import { NumberInput } from '../../../../ui/NumberInput/index.js';
+import { PasswordInput } from '../../../../ui/PasswordInput/index.js';
+import { parseDecimal } from '../../../../utils/parseDecimal.js';
 import { AmountChoices } from '../../AmountChoices.js';
 export function MayaWithdrawal() {
     const [status, setStatus] = useState('waiting');

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

@@ -1,10 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { useShallow } from 'zustand/shallow';
-import { useAccountQuery, useGlobalStore, useIsMayaSessionValidQuery, useOnMMA, usePaymentSettingsQuery, useWalletQuery, } from '../../../client/hooks/index.js';
-import { AlertCircleIcon, SpinnerIcon } from '../../../icons/index.js';
-import { Button } from '../../../ui/index.js';
-import { onMobileDevice, parseDecimal } from '../../../utils/index.js';
+import { useAccountQuery } from '../../../client/hooks/useAccountQuery.js';
+import { useGlobalStore } from '../../../client/hooks/useGlobalStore.js';
+import { useIsMayaSessionValidQuery } from '../../../client/hooks/useIsMayaSessionValidQuery.js';
+import { useOnMMA } from '../../../client/hooks/useOnMMA.js';
+import { usePaymentSettingsQuery } from '../../../client/hooks/usePaymentSettingsQuery.js';
+import { useWalletQuery } from '../../../client/hooks/useWalletQuery.js';
+import { AlertCircleIcon } from '../../../icons/AlertCircleIcon.js';
+import { SpinnerIcon } from '../../../icons/SpinnerIcon.js';
+import { Button } from '../../../ui/Button/index.js';
+import { onMobileDevice } from '../../../utils/onMobileDevice.js';
+import { parseDecimal } from '../../../utils/parseDecimal.js';
 import { PaymentMethods } from '../PaymentMethods.js';
 import { GCashWithdrawal } from './GCashWithdrawal/GCashWithdrawal.js';
 import { InstapayWithdrawal } from './InstapayWithdrawal/InstapayWithdrawal.js';

package/dist/components/Disclaimer/DisclaimerV1.js

@@ -5,7 +5,8 @@ import Image from 'next/image';
 import { useRef } from 'react';
 import pagcorLogo from '../../images/pagcor.png';
 import responsibleGamingLogo from '../../images/responsible-gaming.png';
-import { Button, Dialog } from '../../ui/index.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
 import { useDisclaimer } from './useDisclaimer.js';
 export function DisclaimerV1(props) {
     const disclaimer = useDisclaimer();

package/dist/components/Disclaimer/DisclaimerV2.js

@@ -5,7 +5,8 @@ import Image from 'next/image';
 import { useRef, useState } from 'react';
 import pagcorLogo from '../../images/pagcor.png';
 import responsibleGamingLogo from '../../images/responsible-gaming.png';
-import { Button, Dialog } from '../../ui/index.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
 import { ResponsibleGaming } from './ResponsibleGaming.js';
 import { TermsOfUse } from './TermsOfUse.js';
 import { useDisclaimer } from './useDisclaimer.js';

package/dist/components/Disclaimer/ResponsibleGaming.js

@@ -4,7 +4,8 @@ import { Portal } from '@ark-ui/react';
 import Image, {} from 'next/image';
 import pagcorLogo from '../../images/pagcor.png';
 import responsibleGamingLogo from '../../images/responsible-gaming.png';
-import { Button, Dialog } from '../../ui/index.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
 export function ResponsibleGaming({ logo, open, responsibleGamingContent, onCloseAction, }) {
     return (_jsx(Dialog.Root, { open: open, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsx(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: "Responsible Gaming" }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: responsibleGamingContent }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx(Button, { type: "button", className: "mt-3", onClick: () => {
                                     onCloseAction();

package/dist/components/Disclaimer/TermsOfUse.js

@@ -3,10 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Portal } from '@ark-ui/react';
 import Image, {} from 'next/image';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks/index.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import pagcorLogo from '../../images/pagcor.png';
 import responsibleGamingLogo from '../../images/responsible-gaming.png';
-import { Button, Dialog } from '../../ui/index.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
 export function TermsOfUse({ logo, open, onCloseAction, siteName, termsOfUseContent, }) {
     const disclaimerStore = useGlobalStore(useShallow((state) => state.disclaimer));
     return (_jsx(Dialog.Root, { open: open, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsxs(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: [siteName, " Terms of Use"] }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: termsOfUseContent }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx(Button, { type: "button", className: "mt-3", onClick: () => {

package/dist/components/Empty.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps, ComponentType } from 'react';
-interface EmptyProps {
+export interface EmptyProps {
     icon: ComponentType<ComponentProps<'svg'>>;
     title: string;
     message: string;
@@ -7,4 +7,3 @@ interface EmptyProps {
     className?: string;
 }
 export declare function Empty(props: EmptyProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/FavoriteGames/FavoriteGames.client.d.ts

@@ -1,2 +1,6 @@
-import type { FavoriteGamesProps } from './FavoriteGames';
+export interface FavoriteGamesProps {
+    className?: string;
+    /** @default 'Favorite Games' */
+    heading?: string;
+}
 export declare function FavoriteGames__client(props: FavoriteGamesProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/FavoriteGames/FavoriteGames.client.js

@@ -2,10 +2,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
 import { twMerge } from 'tailwind-merge';
-import { useFavoriteGamesQuery, useSessionQuery, useUnmarkGameAsFavoriteMutation, } from '../../client/hooks/index.js';
-import { ArrowLeftIcon, ArrowRightIcon, Star01Icon } from '../../icons/index.js';
-import { Button } from '../../ui/index.js';
-import { getGameImageUrl } from '../../utils/index.js';
+import { useFavoriteGamesQuery } from '../../client/hooks/useFavoriteGamesQuery.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
+import { useUnmarkGameAsFavoriteMutation } from '../../client/hooks/useUnmarkGameAsFavoriteMutation.js';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import { ArrowRightIcon } from '../../icons/ArrowRightIcon.js';
+import { Star01Icon } from '../../icons/Star01Icon.js';
+import { Button } from '../../ui/Button/index.js';
+import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
 import { GameLaunchTrigger } from '../GameLaunch/index.js';
 export function FavoriteGames__client(props) {
     const gamesQuery = useFavoriteGamesQuery();

package/dist/components/FavoriteGames/FavoriteGames.d.ts

@@ -1,6 +1,3 @@
-export interface FavoriteGamesProps {
-    className?: string;
-    /** @default 'Favorite Games' */
-    heading?: string;
-}
+import { type FavoriteGamesProps } from './FavoriteGames.client';
 export declare function FavoriteGames(props: FavoriteGamesProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export type { FavoriteGamesProps };

package/dist/components/FavoriteGames/FavoriteGames.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { prefetchFavoriteGamesQuery } from '../../server/utils/index.js';
-import { FavoriteGames__client } from './FavoriteGames.client.js';
+import { prefetchFavoriteGamesQuery } from '../../server/utils/prefetchFavoriteGamesQuery.js';
+import { FavoriteGames__client, } from './FavoriteGames.client.js';
 export async function FavoriteGames(props) {
     await prefetchFavoriteGamesQuery();
     return _jsx(FavoriteGames__client, { ...props });

package/dist/components/GameLaunch/GameLaunch.d.ts

@@ -1 +1 @@
-export declare function GameLaunch(): import("react/jsx-runtime").JSX.Element;
+export declare function GameLaunch(): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/components/GameLaunch/GameLaunch.js

@@ -1,75 +1,14 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Dialog, Portal } from '@ark-ui/react';
-import { twMerge } from 'tailwind-merge';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
 import { useShallow } from 'zustand/shallow';
-import { useDisclosure, useEndGameSessionMutation, useFavoriteGamesQuery, useGlobalStore, useMarkGameAsFavoriteMutation, useUnmarkGameAsFavoriteMutation, } from '../../client/hooks/index.js';
-import { AlertCircleIcon, ChevronDownIcon, ChevronLeftIcon, CoinsHandIcon, Expand03Icon, SpinnerIcon, Star01Icon, XIcon, } from '../../icons/index.js';
-import { AlertDialog, Button, IconButton, Presence } from '../../ui/index.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+const Component = dynamic(() => import('./GameLaunch.lazy.js').then((m) => m.GameLaunch), {
+    ssr: false,
+    loading: () => null,
+});
 export function GameLaunch() {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        gameLaunch: ctx.gameLaunch,
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
-    const maximizeDisclosure = useDisclosure({ defaultOpen: true });
-    const cancelDisclosure = useDisclosure();
-    async function endGameSession() {
-        if (globalStore.gameLaunch.details.status === 'PLAYING') {
-            await endGameSessionMutation.mutateAsync({
-                game: globalStore.gameLaunch.details.game,
-                session: globalStore.gameLaunch.details.session,
-            });
-        }
-        maximizeDisclosure.setOpen(true);
-        globalStore.gameLaunch.setDetails({
-            status: 'WAITING',
-            session: null,
-            game: null,
-        });
-    }
-    const favoriteGamesQuery = useFavoriteGamesQuery();
-    const favoriteGames = favoriteGamesQuery.data ?? [];
-    const endGameSessionMutation = useEndGameSessionMutation();
-    const markGameAsFavoriteMutation = useMarkGameAsFavoriteMutation();
-    const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation();
-    const markedAsFavorite = favoriteGames.some((favoriteGame) => {
-        return !globalStore.gameLaunch.details.game
-            ? false
-            : 'reference' in globalStore.gameLaunch.details.game
-                ? favoriteGame.id === globalStore.gameLaunch.details.game.reference
-                : favoriteGame.id === globalStore.gameLaunch.details.game.id;
-    });
-    return (_jsxs(_Fragment, { children: [_jsx(Dialog.Root, { open: globalStore.gameLaunch.details.status !== 'WAITING' &&
-                    !cancelDisclosure.open, lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsx(Portal, { children: _jsx(Dialog.Positioner, { className: "z-dialog fixed inset-0", children: _jsxs(Dialog.Content, { className: "ui-open:animate-dialog-in ui-closed:animate-dialog-out bg-bg-primary-alt relative size-full", children: [_jsx(Presence, { asChild: true, lazyMount: true, unmountOnExit: true, present: !maximizeDisclosure.open, children: _jsxs("section", { className: "ui-open:animate-slide-in-down ui-closed:animate-slide-out-down bg-bg-primary-alt z-1 absolute left-0 top-0 flex h-[3.25rem] w-full items-center gap-2 px-4 py-2", children: [_jsx(IconButton, { size: "xs", variant: "outline", onClick: () => {
-                                                    if (globalStore.gameLaunch.details.status !== 'PLAYING') {
-                                                        endGameSession();
-                                                        return;
-                                                    }
-                                                    cancelDisclosure.setOpen(true);
-                                                }, disabled: globalStore.gameLaunch.details.status === 'LOADING', children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsx("div", { className: "grow" }), _jsx(IconButton, { size: "xs", variant: "outline", disabled: unmarkGameAsFavoriteMutation.isPending ||
-                                                    markGameAsFavoriteMutation.isPending, onClick: () => {
-                                                    if (!globalStore.gameLaunch.details.game)
-                                                        return;
-                                                    if (markedAsFavorite) {
-                                                        unmarkGameAsFavoriteMutation.mutate('reference' in globalStore.gameLaunch.details.game
-                                                            ? globalStore.gameLaunch.details.game.reference
-                                                            : globalStore.gameLaunch.details.game.id);
-                                                    }
-                                                    else {
-                                                        markGameAsFavoriteMutation.mutate('reference' in globalStore.gameLaunch.details.game
-                                                            ? globalStore.gameLaunch.details.game.reference
-                                                            : globalStore.gameLaunch.details.game.id);
-                                                    }
-                                                }, children: _jsx(Star01Icon, { className: twMerge('size-5', markedAsFavorite
-                                                        ? 'text-yellow-400 fill-yellow-400'
-                                                        : 'text-inherit') }) }), _jsx(IconButton, { size: "xs", variant: "outline", onClick: () => maximizeDisclosure.setOpen(true), children: _jsx(Expand03Icon, { className: "size-5" }) }), _jsx(IconButton, { size: "xs", fullWidth: false, onClick: () => {
-                                                    globalStore.depositWithdrawal.setOpen(true);
-                                                }, children: _jsx(CoinsHandIcon, { className: "size-5" }) })] }) }), _jsx(Presence, { asChild: true, lazyMount: true, unmountOnExit: true, present: maximizeDisclosure.open, children: _jsx("button", { type: "button", onClick: () => maximizeDisclosure.setOpen(false), className: "shadow-xs ui-open:animate-slide-in-down ui-closed:animate-slide-out-down z-1 absolute left-1/2 top-0 flex h-7.5 w-[4.5rem] -translate-x-1/2 items-center justify-center rounded-b-md bg-white/30 backdrop-blur-sm", children: _jsx(ChevronDownIcon, {}) }) }), _jsxs("section", { className: "size-full", children: [globalStore.gameLaunch.details.status === 'LOADING' && (_jsx("div", { className: "flex size-full items-center justify-center", children: _jsx(SpinnerIcon, { className: "size-8" }) })), globalStore.gameLaunch.details.status === 'FAILED' && (_jsx("div", {})), globalStore.gameLaunch.details.status === 'PLAYING' && (_jsx("iframe", { src: globalStore.gameLaunch.details.session.launchUrl ?? '', className: "size-full" }))] })] }) }) }) }), _jsx(AlertDialog.Root, { role: "alertdialog", open: cancelDisclosure.open, onOpenChange: (details) => {
-                    cancelDisclosure.setOpen(details.open);
-                }, lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, {}), _jsx(AlertDialog.Positioner, { children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(AlertDialog.Header, { children: _jsx("div", { className: "bg-bg-error-secondary text-text-featured-icon-light-error flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, { className: "size-6" }) }) }), _jsxs(AlertDialog.Body, { children: [_jsx(AlertDialog.Title, { children: "Quit Game" }), _jsx(AlertDialog.Description, { children: "Are you sure you want to quit?" })] }), _jsx(AlertDialog.Context, { children: (api) => (_jsxs(AlertDialog.Footer, { children: [_jsx(Button, { variant: "outline", colorScheme: "gray", disabled: endGameSessionMutation.isPending, onClick: () => {
-                                                        api.setOpen(false);
-                                                    }, children: "Cancel" }), _jsx(Button, { colorScheme: "danger", disabled: endGameSessionMutation.isPending, onClick: async () => {
-                                                        await endGameSession();
-                                                        api.setOpen(false);
-                                                    }, children: "Proceed" })] })) })] }) })] }) })] }));
+    const touched = useGlobalStore(useShallow((ctx) => ctx.gameLaunch['~touched']));
+    if (touched)
+        return _jsx(Component, {});
 }

package/dist/components/GameLaunch/GameLaunch.lazy.d.ts

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

package/dist/components/GameLaunch/GameLaunch.lazy.js

@@ -0,0 +1,90 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Dialog, Portal } from '@ark-ui/react';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useEndGameSessionMutation } from '../../client/hooks/useEndGameSessionMutation.js';
+import { useFavoriteGamesQuery } from '../../client/hooks/useFavoriteGamesQuery.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useMarkGameAsFavoriteMutation } from '../../client/hooks/useMarkGameAsFavoriteMutation.js';
+import { useUnmarkGameAsFavoriteMutation } from '../../client/hooks/useUnmarkGameAsFavoriteMutation.js';
+import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
+import { ChevronDownIcon } from '../../icons/ChevronDownIcon.js';
+import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
+import { CoinsHandIcon } from '../../icons/CoinsHandIcon.js';
+import { Expand03Icon } from '../../icons/Expand03Icon.js';
+import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
+import { Star01Icon } from '../../icons/Star01Icon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { AlertDialog } from '../../ui/AlertDialog/index.js';
+import { Button } from '../../ui/Button/index.js';
+import { IconButton } from '../../ui/IconButton/index.js';
+import { Presence } from '../../ui/Presence.js';
+export function GameLaunch() {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        gameLaunch: ctx.gameLaunch,
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const maximizeDisclosure = useDisclosure({ defaultOpen: true });
+    const cancelDisclosure = useDisclosure();
+    async function endGameSession() {
+        if (globalStore.gameLaunch.details.status === 'PLAYING') {
+            await endGameSessionMutation.mutateAsync({
+                game: globalStore.gameLaunch.details.game,
+                session: globalStore.gameLaunch.details.session,
+            });
+        }
+        maximizeDisclosure.setOpen(true);
+        globalStore.gameLaunch.setDetails({
+            status: 'WAITING',
+            session: null,
+            game: null,
+        });
+    }
+    const favoriteGamesQuery = useFavoriteGamesQuery();
+    const favoriteGames = favoriteGamesQuery.data ?? [];
+    const endGameSessionMutation = useEndGameSessionMutation();
+    const markGameAsFavoriteMutation = useMarkGameAsFavoriteMutation();
+    const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation();
+    const markedAsFavorite = favoriteGames.some((favoriteGame) => {
+        return !globalStore.gameLaunch.details.game
+            ? false
+            : 'reference' in globalStore.gameLaunch.details.game
+                ? favoriteGame.id === globalStore.gameLaunch.details.game.reference
+                : favoriteGame.id === globalStore.gameLaunch.details.game.id;
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(Dialog.Root, { open: globalStore.gameLaunch.details.status !== 'WAITING' &&
+                    !cancelDisclosure.open, lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsx(Portal, { children: _jsx(Dialog.Positioner, { className: "z-dialog fixed inset-0", children: _jsxs(Dialog.Content, { className: "ui-open:animate-dialog-in ui-closed:animate-dialog-out bg-bg-primary-alt relative size-full", children: [_jsx(Presence, { asChild: true, lazyMount: true, unmountOnExit: true, present: !maximizeDisclosure.open, children: _jsxs("section", { className: "ui-open:animate-slide-in-down ui-closed:animate-slide-out-down bg-bg-primary-alt z-1 absolute left-0 top-0 flex h-[3.25rem] w-full items-center gap-2 px-4 py-2", children: [_jsx(IconButton, { size: "xs", variant: "outline", onClick: () => {
+                                                    if (globalStore.gameLaunch.details.status !== 'PLAYING') {
+                                                        endGameSession();
+                                                        return;
+                                                    }
+                                                    cancelDisclosure.setOpen(true);
+                                                }, disabled: globalStore.gameLaunch.details.status === 'LOADING', children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsx("div", { className: "grow" }), _jsx(IconButton, { size: "xs", variant: "outline", disabled: unmarkGameAsFavoriteMutation.isPending ||
+                                                    markGameAsFavoriteMutation.isPending, onClick: () => {
+                                                    if (!globalStore.gameLaunch.details.game)
+                                                        return;
+                                                    if (markedAsFavorite) {
+                                                        unmarkGameAsFavoriteMutation.mutate('reference' in globalStore.gameLaunch.details.game
+                                                            ? globalStore.gameLaunch.details.game.reference
+                                                            : globalStore.gameLaunch.details.game.id);
+                                                    }
+                                                    else {
+                                                        markGameAsFavoriteMutation.mutate('reference' in globalStore.gameLaunch.details.game
+                                                            ? globalStore.gameLaunch.details.game.reference
+                                                            : globalStore.gameLaunch.details.game.id);
+                                                    }
+                                                }, children: _jsx(Star01Icon, { className: twMerge('size-5', markedAsFavorite
+                                                        ? 'text-yellow-400 fill-yellow-400'
+                                                        : 'text-inherit') }) }), _jsx(IconButton, { size: "xs", variant: "outline", onClick: () => maximizeDisclosure.setOpen(true), children: _jsx(Expand03Icon, { className: "size-5" }) }), _jsx(IconButton, { size: "xs", fullWidth: false, onClick: () => {
+                                                    globalStore.depositWithdrawal.setOpen(true);
+                                                }, children: _jsx(CoinsHandIcon, { className: "size-5" }) })] }) }), _jsx(Presence, { asChild: true, lazyMount: true, unmountOnExit: true, present: maximizeDisclosure.open, children: _jsx("button", { type: "button", onClick: () => maximizeDisclosure.setOpen(false), className: "shadow-xs ui-open:animate-slide-in-down ui-closed:animate-slide-out-down z-1 absolute left-1/2 top-0 flex h-7.5 w-[4.5rem] -translate-x-1/2 items-center justify-center rounded-b-md bg-white/30 backdrop-blur-sm", children: _jsx(ChevronDownIcon, {}) }) }), _jsxs("section", { className: "size-full", children: [globalStore.gameLaunch.details.status === 'LOADING' && (_jsx("div", { className: "flex size-full items-center justify-center", children: _jsx(SpinnerIcon, { className: "size-8" }) })), globalStore.gameLaunch.details.status === 'FAILED' && (_jsx("div", {})), globalStore.gameLaunch.details.status === 'PLAYING' && (_jsx("iframe", { src: globalStore.gameLaunch.details.session.launchUrl ?? '', className: "size-full" }))] })] }) }) }) }), _jsx(AlertDialog.Root, { role: "alertdialog", open: cancelDisclosure.open, onOpenChange: (details) => {
+                    cancelDisclosure.setOpen(details.open);
+                }, lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, {}), _jsx(AlertDialog.Positioner, { children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(AlertDialog.Header, { children: _jsx("div", { className: "bg-bg-error-secondary text-text-featured-icon-light-error flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, { className: "size-6" }) }) }), _jsxs(AlertDialog.Body, { children: [_jsx(AlertDialog.Title, { children: "Quit Game" }), _jsx(AlertDialog.Description, { children: "Are you sure you want to quit?" })] }), _jsx(AlertDialog.Context, { children: (api) => (_jsxs(AlertDialog.Footer, { children: [_jsx(Button, { variant: "outline", colorScheme: "gray", disabled: endGameSessionMutation.isPending, onClick: () => {
+                                                        api.setOpen(false);
+                                                    }, children: "Cancel" }), _jsx(Button, { colorScheme: "danger", disabled: endGameSessionMutation.isPending, onClick: async () => {
+                                                        await endGameSession();
+                                                        api.setOpen(false);
+                                                    }, children: "Proceed" })] })) })] }) })] }) })] }));
+}

package/dist/components/GameLaunch/GameLaunchTrigger.js

@@ -2,8 +2,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react';
 import { useShallow } from 'zustand/shallow';
-import { useCreateGameSessionMutation, useGlobalStore, useSessionQuery, } from '../../client/hooks/index.js';
-import { toaster } from '../../client/utils/index.js';
+import { useCreateGameSessionMutation } from '../../client/hooks/useCreateGameSessionMutation.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
+import { toaster } from '../../client/utils/toaster.js';
 export function GameLaunchTrigger(props) {
     const sessionQuery = useSessionQuery();
     const createGameSessionMutation = useCreateGameSessionMutation();

package/dist/components/GameProviders/GameProvidersCarousel.js

@@ -7,9 +7,11 @@ import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { GAME_PROVIDER_DATA } from '../../constants/index.js';
-import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon } from '../../icons/index.js';
-import { Button } from '../../ui/index.js';
-import { callIfFn } from '../../utils/index.js';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import { ArrowRightIcon } from '../../icons/ArrowRightIcon.js';
+import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { callIfFn } from '../../utils/callIfFn.js';
 export function GameProvidersCarousel(props) {
     const [emblaRef, emblaApi] = useEmblaCarousel({
         align: 'start',

package/dist/components/GameProviders/GameProvidersList.js

@@ -4,10 +4,11 @@ import { isString, noop } from 'lodash-es';
 import Image, {} from 'next/image';
 import Link from 'next/link';
 import { twMerge } from 'tailwind-merge';
-import { useChunk } from '../../client/hooks/index.js';
+import { useChunk } from '../../client/hooks/useChunk.js';
 import { GAME_PROVIDER_DATA } from '../../constants/index.js';
-import { Button, Progress } from '../../ui/index.js';
-import { callIfFn } from '../../utils/index.js';
+import { Button } from '../../ui/Button/index.js';
+import { Progress } from '../../ui/Progress/index.js';
+import { callIfFn } from '../../utils/callIfFn.js';
 export function GameProvidersList(props) {
     const viewGamesUrl = (data) => {
         return props.viewGamesUrl

package/dist/components/Games/Game.js

@@ -2,8 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isString } from 'lodash-es';
 import Image from 'next/image';
 import { twMerge } from 'tailwind-merge';
-import { useFavoriteGamesQuery, useMarkGameAsFavoriteMutation, useSessionQuery, useUnmarkGameAsFavoriteMutation, } from '../../client/hooks/index.js';
-import { Star01Icon } from '../../icons/index.js';
+import { useFavoriteGamesQuery } from '../../client/hooks/useFavoriteGamesQuery.js';
+import { useMarkGameAsFavoriteMutation } from '../../client/hooks/useMarkGameAsFavoriteMutation.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
+import { useUnmarkGameAsFavoriteMutation } from '../../client/hooks/useUnmarkGameAsFavoriteMutation.js';
+import { Star01Icon } from '../../icons/Star01Icon.js';
+import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
 import { GameLaunchTrigger } from '../GameLaunch/index.js';
 import { BadgeNew } from './BadgeNew.js';
 import { BadgePopular } from './BadgePopular.js';
@@ -21,7 +25,7 @@ export function Game(props) {
     const classNames = isString(props.className)
         ? { root: props.className }
         : (props.className ?? {});
-    return (_jsxs(GameLaunchTrigger, { game: game, className: twMerge('animate-scale-in relative block w-full shadow-sm', classNames.root), children: [props.badge === 'new' && (_jsx(BadgeNew, { className: "absolute left-0 top-0 size-[3.75rem]" })), props.badge === 'top' && (_jsx(BadgeTop, { className: "absolute left-0 top-0 size-[3.75rem]" })), props.badge === 'popular' && (_jsx(BadgePopular, { className: "absolute left-0 top-0 size-[3.75rem]" })), session?.status === 'authenticated' && (_jsx("div", { role: "button", onClick: (e) => {
+    return (_jsxs(GameLaunchTrigger, { game: game, className: twMerge('animate-scale-in relative block w-full shadow-sm', classNames.root), "aria-label": `Play ${game.name} game`, children: [props.badge === 'new' && (_jsx(BadgeNew, { className: "absolute left-0 top-0 size-[3.75rem]" })), props.badge === 'top' && (_jsx(BadgeTop, { className: "absolute left-0 top-0 size-[3.75rem]" })), props.badge === 'popular' && (_jsx(BadgePopular, { className: "absolute left-0 top-0 size-[3.75rem]" })), session?.status === 'authenticated' && (_jsx("div", { role: "button", onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     if (markGameAsFavoriteMutation.isPending)
@@ -34,8 +38,13 @@ export function Game(props) {
                     else {
                         markGameAsFavoriteMutation.mutate(game.reference);
                     }
-                }, "aria-disabled": markGameAsFavoriteMutation.isPending ||
+                }, "aria-label": markedAsFavorite
+                    ? 'Unmark as favorite game'
+                    : 'Mark as favorite game', "aria-disabled": markGameAsFavoriteMutation.isPending ||
                     unmarkGameAsFavoriteMutation.isPending, className: "rounded-xs absolute right-2 top-2 flex size-9 items-center justify-center bg-black/65 blur-[0.5px]", children: _jsx(Star01Icon, { className: twMerge('size-5', markedAsFavorite
                         ? 'fill-yellow-400 text-yellow-400'
-                        : 'text-white') }) })), _jsx(Image, { src: game.image, alt: "", width: 200, height: 200, priority: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('bg-bg-tertiary text-text-primary-brand block w-full truncate rounded-b-md px-2 py-3.5 text-center text-xs font-semibold', classNames.title), children: game.name })] }));
+                        : 'text-white') }) })), _jsx(Image, { src: getGameImageUrl({
+                    reference: game.reference,
+                    provider: game.provider,
+                }), alt: "", width: 200, height: 200, priority: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('bg-bg-tertiary text-text-primary-brand block w-full truncate rounded-b-md px-2 py-3.5 text-center text-xs font-semibold', classNames.title), children: game.name })] }));
 }

package/dist/components/Games/GamesCarousel.client.d.ts

@@ -1,2 +1,25 @@
-import type { GamesCarouselProps } from './GamesCarousel';
+import type { GamesInput__Next } from '../../services/cmsPortal';
+interface ClassNameEntries {
+    root?: string;
+    thumbnailRoot?: string;
+    thumbnailTitle?: string;
+}
+export interface GamesCarouselProps {
+    layout: 'carousel';
+    /** @default "Games" */
+    heading?: string;
+    /**
+     * @description URL for viewing all games
+     * @default "/games"
+     */
+    viewAllUrl?: string;
+    /** @default 1 */
+    numOfRows?: 1 | 2 | 3;
+    badge?: 'top' | 'new' | 'popular';
+    filter?: GamesInput__Next['filter'];
+    search?: string;
+    sort?: GamesInput__Next['sort'];
+    className?: string | ClassNameEntries;
+}
 export declare function GamesCarousel__client(props: GamesCarouselProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Games/GamesCarousel.client.js

@@ -5,9 +5,13 @@ import { isString } from 'lodash-es';
 import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { useGamesQuery } from '../../client/hooks/index.js';
-import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon, GamingPad01Icon, SpinnerIcon, } from '../../icons/index.js';
-import { Button } from '../../ui/index.js';
+import { useGamesQuery } from '../../client/hooks/useGamesQuery.js';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import { ArrowRightIcon } from '../../icons/ArrowRightIcon.js';
+import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
+import { GamingPad01Icon } from '../../icons/GamingPad01Icon.js';
+import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
+import { Button } from '../../ui/Button/index.js';
 import { Empty } from '../Empty.js';
 import { Game } from './Game.js';
 import { GameContext } from './GamesContext.js';

package/dist/components/Games/GamesCarousel.d.ts

@@ -1,24 +1,3 @@
-import type { GamesInput__Next } from '../../services';
-export interface ClassNameEntries {
-    root?: string;
-    thumbnailRoot?: string;
-    thumbnailTitle?: string;
-}
-export interface GamesCarouselProps {
-    layout: 'carousel';
-    /** @default "Games" */
-    heading?: string;
-    /**
-     * @description URL for viewing all games
-     * @default "/games"
-     */
-    viewAllUrl?: string;
-    /** @default 1 */
-    numOfRows?: 1 | 2 | 3;
-    badge?: 'top' | 'new' | 'popular';
-    filter?: GamesInput__Next['filter'];
-    search?: string;
-    sort?: GamesInput__Next['sort'];
-    className?: string | ClassNameEntries;
-}
+import { type GamesCarouselProps } from './GamesCarousel.client';
 export declare function GamesCarousel(props: GamesCarouselProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export type { GamesCarouselProps };

package/dist/components/Games/GamesCarousel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { prefetchGamesQuery } from '../../server/utils/index.js';
-import { GamesCarousel__client } from './GamesCarousel.client.js';
+import { prefetchGamesQuery } from '../../server/utils/prefetchGamesQuery.js';
+import { GamesCarousel__client, } from './GamesCarousel.client.js';
 export async function GamesCarousel(props) {
     const numOfRows = props.numOfRows ?? 1;
     await prefetchGamesQuery({

package/dist/components/Games/GamesContext.js

@@ -1,3 +1,3 @@
-import { createContext } from '../../client/utils/index.js';
+import { createContext } from '../../client/utils/createContext.js';
 export const [GamesPropsContext, useGamesPropsContext] = createContext();
 export const [GameContext, useGameContext] = createContext();

package/dist/components/Games/GamesList.client.d.ts

@@ -1,2 +1,20 @@
-import type { GamesListProps } from './GamesList';
+import type { GamesInput__Next } from '../../services/cmsPortal';
+interface ClassNameEntries {
+    root?: string;
+    thumbnailRoot?: string;
+    thumbnailTitle?: string;
+}
+export interface GamesListProps {
+    layout: 'list';
+    badge?: 'top' | 'new' | 'popular';
+    /** @default 24 */
+    first?: number;
+    filter?: GamesInput__Next['filter'];
+    sort?: GamesInput__Next['sort'];
+    search?: string;
+    /** @default "Games"*/
+    heading?: string;
+    className?: string | ClassNameEntries;
+}
 export declare function GamesList__client(props: GamesListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Games/GamesList.client.js

@@ -1,9 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { isString, noop } from 'lodash-es';
-import { useGamesQuery, useInfiniteQueryHelper } from '../../client/hooks/index.js';
-import { GamingPad01Icon, SpinnerIcon } from '../../icons/index.js';
-import { Button, Progress } from '../../ui/index.js';
+import { useGamesQuery } from '../../client/hooks/useGamesQuery.js';
+import { useInfiniteQueryHelper } from '../../client/hooks/useInfiniteQueryHelper.js';
+import { GamingPad01Icon } from '../../icons/GamingPad01Icon.js';
+import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Progress } from '../../ui/Progress/index.js';
 import { Empty } from '../Empty.js';
 import { Game } from './Game.js';
 import { GameContext } from './GamesContext.js';

package/dist/components/Games/GamesList.d.ts

@@ -1,19 +1,3 @@
-import type { GamesInput__Next } from '../../services';
-export interface ClassNameEntries {
-    root?: string;
-    thumbnailRoot?: string;
-    thumbnailTitle?: string;
-}
-export interface GamesListProps {
-    layout: 'list';
-    badge?: 'top' | 'new' | 'popular';
-    /** @default 24 */
-    first?: number;
-    filter?: GamesInput__Next['filter'];
-    sort?: GamesInput__Next['sort'];
-    search?: string;
-    /** @default "Games"*/
-    heading?: string;
-    className?: string | ClassNameEntries;
-}
+import { type GamesListProps } from './GamesList.client';
 export declare function GamesList(props: GamesListProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export type { GamesListProps };