@opexa/portal-components 0.0.98 → 0.0.100

package/dist/components/Messages/utils.d.ts

@@ -1,3 +1,3 @@
-import { BellRingIcon } from '../../icons';
+import { BellRingIcon } from '../../icons/BellRingIcon';
 import type { MessageIcon } from '../../types';
 export declare function getMessageIcon(logo: MessageIcon): typeof BellRingIcon;

package/dist/components/Messages/utils.js

@@ -1,4 +1,4 @@
-import { BellRingIcon } from '../../icons/index.js';
+import { BellRingIcon } from '../../icons/BellRingIcon.js';
 // TODO: request icon assets for each type of MessageIcon
 const IMAGES = {
     BELL: BellRingIcon,

package/dist/components/PortalProvider/PortalProvider.js

@@ -1,18 +1,21 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google';
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
-import { prefetchAccountQuery, prefetchSessionQuery, prefetchWalletQuery, } from '../../server/utils/index.js';
+import { prefetchAccountQuery } from '../../server/utils/prefetchAccountQuery.js';
+import { prefetchPlatformQuery } from '../../server/utils/prefetchPlatformQuery.js';
+import { prefetchSessionQuery } from '../../server/utils/prefetchSessionQuery.js';
+import { prefetchWalletQuery } from '../../server/utils/prefetchWalletQuery.js';
 import { FacebookPixel, GoogleRecaptcha } from '../../third-parties/index.js';
-import { getQueryClient } from '../../utils/index.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
 import { Providers } from './Providers.js';
 import { Snackbar } from './Snackbar.js';
-import { WebVitals } from './WebVitals.js';
 export async function PortalProvider({ children, facebookPixelId, googleAnalyticsId, googleTagManagerId, googleRecaptchaSiteKey, }) {
     const queryClient = getQueryClient();
-    await Promise.all([
+    await Promise.allSettled([
+        prefetchPlatformQuery(),
         prefetchSessionQuery(),
         prefetchAccountQuery(),
         prefetchWalletQuery(),
     ]);
-    return (_jsxs(_Fragment, { children: [_jsx(Providers, { children: _jsx(HydrationBoundary, { state: dehydrate(queryClient), children: children }) }), _jsx(Snackbar, {}), _jsx(WebVitals, {}), facebookPixelId && _jsx(FacebookPixel, { fbId: facebookPixelId }), googleAnalyticsId && _jsx(GoogleAnalytics, { gaId: googleAnalyticsId }), googleTagManagerId && _jsx(GoogleTagManager, { gtmId: googleTagManagerId }), googleRecaptchaSiteKey && (_jsx(GoogleRecaptcha, { siteKey: googleRecaptchaSiteKey }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Providers, { children: _jsx(HydrationBoundary, { state: dehydrate(queryClient), children: children }) }), _jsx(Snackbar, {}), facebookPixelId && _jsx(FacebookPixel, { fbId: facebookPixelId }), googleAnalyticsId && _jsx(GoogleAnalytics, { gaId: googleAnalyticsId }), googleTagManagerId && _jsx(GoogleTagManager, { gtmId: googleTagManagerId }), googleRecaptchaSiteKey && (_jsx(GoogleRecaptcha, { siteKey: googleRecaptchaSiteKey }))] }));
 }

package/dist/components/PortalProvider/Providers.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { QueryClientProvider } from '@tanstack/react-query';
-import { getQueryClient } from '../../utils/index.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
 export function Providers({ children }) {
     const queryClient = getQueryClient();
     return (_jsx(QueryClientProvider, { client: queryClient, children: children }));

package/dist/components/PortalProvider/Snackbar.js

@@ -1,9 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Toast, Toaster } from '@ark-ui/react';
+import { Toast, Toaster } from '@ark-ui/react/toast';
 import { twMerge } from 'tailwind-merge';
-import { toaster } from '../../client/utils/index.js';
-import { AlertCircleIcon, XIcon } from '../../icons/index.js';
+import { toaster } from '../../client/utils/toaster.js';
+import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
 export function Snackbar() {
     return (_jsx(Toaster, { toaster: toaster, children: (toast) => (_jsxs(Toast.Root, { className: twMerge('group', 'p-xl', 'border', 'border-border-primary', 'bg-bg-primary-alt', 'flex', 'items-start', 'gap-lg', 'w-[21.438rem]', 'lg:w-[1200px]', 'max-w-full', 'rounded-xl', 'shadow-xs', 'h-[var(--height)]', 'z-[var(--z-index)]', 'scale-[var(--scale)]', 'opacity-[var(--opacity)]', '[translate:var(--x)_var(--y)_0]', 'transition-all', 'duration-300'), children: [_jsxs("div", { className: "flex grow flex-col gap-xl lg:flex-row lg:gap-lg", children: [_jsx("div", { className: twMerge('flex', 'items-center', 'justify-center', 'size-9.5', 'border-2', 'rounded-full', toast.type === 'success' && 'border-text-success-primary/15', toast.type === 'warning' && 'border-text-warning-primary/15', toast.type === 'error' && 'border-text-error-primary/15'), children: _jsx("div", { className: twMerge('flex', 'items-center', 'justify-center', 'size-7', 'border-2', 'rounded-full', toast.type === 'success' && 'border-text-success-primary/35', toast.type === 'warning' && 'border-text-warning-primary/35', toast.type === 'error' && 'border-text-error-primary/35'), children: _jsx(AlertCircleIcon, { className: twMerge('size-5', toast.type === 'success' && 'text-text-success-primary', toast.type === 'warning' && 'text-text-warning-primary', toast.type === 'error' && 'text-text-error-primary') }) }) }), _jsxs("div", { className: "grow text-sm leading-none", children: [_jsx(Toast.Title, { className: "text-text-secondary-700 font-semibold", children: toast.title
                                         ? toast.title

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

@@ -1,2 +1,7 @@
-import type { PromoProps } from './Promo';
+export interface PromoProps {
+    id: string;
+    /** @default '/promos' */
+    viewAllPromosUrl?: string;
+    className?: string;
+}
 export declare function Promo__client(props: PromoProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Promo/Promo.client.js

@@ -5,9 +5,13 @@ import { format } from 'date-fns';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useShallow } from 'zustand/shallow';
-import { useAvailablePromosQuery, useGlobalStore, useLocaleInfo, usePromoQuery, } from '../../client/hooks/index.js';
-import { ChevronLeftIcon } from '../../icons/index.js';
-import { Button, Prose } from '../../ui/index.js';
+import { useAvailablePromosQuery } from '../../client/hooks/useAvailablePromosQuery.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { usePromoQuery } from '../../client/hooks/usePromoQuery.js';
+import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Prose } from '../../ui/Prose.js';
 export function Promo__client(props) {
     const localeInfo = useLocaleInfo();
     const availablePromosQuery = useAvailablePromosQuery();

package/dist/components/Promo/Promo.d.ts

@@ -1,7 +1,3 @@
-export interface PromoProps {
-    id: string;
-    /** @default '/promos' */
-    viewAllPromosUrl?: string;
-    className?: string;
-}
+import { type PromoProps } from './Promo.client';
 export declare function Promo(props: PromoProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export type { PromoProps };

package/dist/components/Promo/Promo.js

@@ -1,12 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { notFound } from 'next/navigation';
-import { prefetchPromoQuery } from '../../server/utils/index.js';
-import { getPromoQueryKey, getQueryClient } from '../../utils/index.js';
+import { prefetchPromoQuery } from '../../server/utils/prefetchPromoQuery.js';
+import { getPromo } from '../../services/wallet.js';
 import { Promo__client } from './Promo.client.js';
 export async function Promo(props) {
-    await prefetchPromoQuery(props.id);
-    const promo = getQueryClient().getQueryData(getPromoQueryKey(props.id));
-    if (!promo)
+    const [result] = await Promise.allSettled([
+        getPromo(props.id),
+        prefetchPromoQuery(props.id),
+    ]);
+    if (result.status === 'fulfilled' && result.value) {
+        return _jsx(Promo__client, { ...props });
+    }
+    else {
         return notFound();
-    return _jsx(Promo__client, { ...props });
+    }
 }

package/dist/components/Promos/Cashback.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
 import Link from 'next/link';
 import { useShallow } from 'zustand/shallow';
-import { useAvailablePromosQuery, useGlobalStore } from '../../client/hooks/index.js';
-import { Button } from '../../ui/index.js';
+import { useAvailablePromosQuery } from '../../client/hooks/useAvailablePromosQuery.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { Button } from '../../ui/Button/index.js';
 export function Cashback({ data, viewDetailsUrl = '/promos/cashback', }) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,

package/dist/components/Promos/Promo.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
 import Link from 'next/link';
 import { useShallow } from 'zustand/shallow';
-import { useAvailablePromosQuery, useGlobalStore } from '../../client/hooks/index.js';
-import { Button } from '../../ui/index.js';
+import { useAvailablePromosQuery } from '../../client/hooks/useAvailablePromosQuery.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { Button } from '../../ui/Button/index.js';
 export function Promo({ data, viewDetailsUrl = '/promos' }) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,

package/dist/components/Promos/Promos.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { prefetchCashbacksQuery, prefetchPromosQuery, } from '../../server/utils/index.js';
+import { prefetchCashbacksQuery } from '../../server/utils/prefetchCashbacksQuery.js';
+import { prefetchPromosQuery } from '../../server/utils/prefetchPromosQuery.js';
 import { PromosCarousel } from './PromosCarousel.js';
 import { PromosGrid } from './PromosGrid.js';
 export async function Promos(props) {
-    await Promise.all([prefetchPromosQuery(), prefetchCashbacksQuery()]);
+    await Promise.allSettled([prefetchPromosQuery(), prefetchCashbacksQuery()]);
     if (props.layout === 'grid') {
         return _jsx(PromosGrid, { ...props });
     }

package/dist/components/Promos/PromosCarousel.js

@@ -4,9 +4,13 @@ import useEmblaCarousel, {} from 'embla-carousel-react';
 import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { useCashbacksQuery, usePromosQuery } from '../../client/hooks/index.js';
-import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon, Gift01Icon, } from '../../icons/index.js';
-import { Button } from '../../ui/index.js';
+import { useCashbacksQuery } from '../../client/hooks/useCashbacksQuery.js';
+import { usePromosQuery } from '../../client/hooks/usePromosQuery.js';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import { ArrowRightIcon } from '../../icons/ArrowRightIcon.js';
+import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
+import { Gift01Icon } from '../../icons/Gift01Icon.js';
+import { Button } from '../../ui/Button/index.js';
 import { Empty } from '../Empty.js';
 import { Cashback } from './Cashback.js';
 import { Promo } from './Promo.js';

package/dist/components/Promos/PromosGrid.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCashbacksQuery, usePromosQuery } from '../../client/hooks/index.js';
+import { useCashbacksQuery } from '../../client/hooks/useCashbacksQuery.js';
+import { usePromosQuery } from '../../client/hooks/usePromosQuery.js';
 import { Cashback } from './Cashback.js';
 import { Promo } from './Promo.js';
 export function PromosGrid(props) {

package/dist/components/Protected/Protected.d.ts

@@ -1,6 +1,5 @@
-interface ProtectedProps {
+export interface ProtectedProps {
     children: React.ReactNode;
     fallback?: React.ReactNode;
 }
 export declare function Protected(props: ProtectedProps): import("react").ReactNode;
-export {};

package/dist/components/Protected/Protected.js

@@ -1,5 +1,5 @@
 'use client';
-import { useSessionQuery } from '../../client/hooks/index.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 export function Protected(props) {
     const query = useSessionQuery();
     return query.data?.status === 'authenticated'

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.js

@@ -3,11 +3,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { addDays, isEqual, startOfDay } from 'date-fns';
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { useCheckInDailyCheckInQuestMutation } from '../../../client/hooks/index.js';
-import { toaster } from '../../../client/utils/index.js';
-import { CalendarIcon, CheckIcon, ClockStopWatchIcon, InfoCircleIcon, } from '../../../icons/index.js';
-import { Badge, Button } from '../../../ui/index.js';
-import { getAvailableQuestsQueryKey, getQueryClient } from '../../../utils/index.js';
+import { useCheckInDailyCheckInQuestMutation } from '../../../client/hooks/useCheckInDailyCheckInQuestMutation.js';
+import { toaster } from '../../../client/utils/toaster.js';
+import { CalendarIcon } from '../../../icons/CalendarIcon.js';
+import { CheckIcon } from '../../../icons/CheckIcon.js';
+import { ClockStopWatchIcon } from '../../../icons/ClockStopWatchIcon.js';
+import { InfoCircleIcon } from '../../../icons/InfoCircleIcon.js';
+import { Badge } from '../../../ui/Badge/index.js';
+import { Button } from '../../../ui/Button/index.js';
+import { getQueryClient } from '../../../utils/getQueryClient.js';
+import { getAvailableQuestsQueryKey } from '../../../utils/queryKeys.js';
 import CountdownTimer from '../CountdownTimer.js';
 import { DailyCheckInQuestModal } from './DailyCheckInQuestModal.js';
 export function DailyCheckInQuest({ quest }) {

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.js

@@ -1,8 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Portal } from '@ark-ui/react';
-import { XIcon } from '../../../icons/index.js';
-import { Button, Dialog } from '../../../ui/index.js';
+import { XIcon } from '../../../icons/XIcon.js';
+import { Button } from '../../../ui/Button/index.js';
+import { Dialog } from '../../../ui/Dialog/index.js';
 export function DailyCheckInQuestModal(props) {
     return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto max-w-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-lg font-semibold", children: "Daily Check-In Rules" }), _jsxs("ul", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Earn rewards just for checking in each day!" }), _jsx("li", { children: "Stay consistent to unlock special rewards on the 3rd, 5th, and 7th day." }), _jsx("li", { children: "Missing a day will reset your streak, starting again from Day 1." }), _jsx("li", { children: "Each check-in unlocks the next one on the following day." }), _jsx("li", { children: "Successfully check in for 7 consecutive days to complete the quest and reset the cycle." })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => props.modalState.setIsOpen(false), children: "Ok" }) })] }) })] }) }));
 }

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

@@ -1,2 +1,6 @@
-import type { QuestsProps } from './Quests';
+export interface QuestsProps {
+    /** @default "Quests" */
+    heading?: string;
+    className?: string;
+}
 export declare function Quests__client(props: QuestsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/Quests.client.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
-import { useAvailableQuestsQuery } from '../../client/hooks/index.js';
-import { SpinnerIcon } from '../../icons/index.js';
+import { useAvailableQuestsQuery } from '../../client/hooks/useAvailableQuestsQuery.js';
+import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
 import closeChest from '../../images/close-chest.png';
 import { DailyCheckInQuest } from './DailyCheckInQuest/DailyCheckInQuest.js';
 import { OnboardingQuest } from './OnboardingQuest/OnboardingQuest.js';

package/dist/components/Quests/Quests.d.ts

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

package/dist/components/Quests/Quests.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { prefetchAvailableQuestsQuery } from '../../server/utils/index.js';
+import { prefetchAvailableQuestsQuery } from '../../server/utils/prefetchAvailableQuestsQuery.js';
 import { Quests__client } from './Quests.client.js';
 export async function Quests(props) {
     await prefetchAvailableQuestsQuery();

package/dist/components/Quests/WageringQuest/WageringQuest.js

@@ -2,8 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { ClockStopWatchIcon, InfoCircleIcon } from '../../../icons/index.js';
-import { Badge } from '../../../ui/index.js';
+import { ClockStopWatchIcon } from '../../../icons/ClockStopWatchIcon.js';
+import { InfoCircleIcon } from '../../../icons/InfoCircleIcon.js';
+import { Badge } from '../../../ui/Badge/index.js';
 import CountdownTimer from '../CountdownTimer.js';
 import { WageringQuestModal } from './WageringQuestModal.js';
 export function WageringQuest({ quest }) {

package/dist/components/Quests/WageringQuest/WageringQuestModal.js

@@ -1,8 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Portal } from '@ark-ui/react';
-import { XIcon } from '../../../icons/index.js';
-import { Button, Dialog } from '../../../ui/index.js';
+import { XIcon } from '../../../icons/XIcon.js';
+import { Button } from '../../../ui/Button/index.js';
+import { Dialog } from '../../../ui/Dialog/index.js';
 export function WageringQuestModal(props) {
     return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto max-w-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-lg font-semibold", children: props.questName }), _jsxs("ul", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Earn extra rewards just by playing Slots, every bet counts, win or lose!" }), _jsx("li", { children: "Reach the wagering requirement in bets to complete the quest and claim your reward." })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => props.modalState.setIsOpen(false), children: "Ok" }) })] }) })] }) }));
 }

package/dist/components/Search/Search.d.ts

@@ -1,21 +1,3 @@
-import { type ImageProps } from 'next/image';
-import type { GameProvider, GameProviderData, GameType } from '../../types';
-interface SearchProps {
-    logo: ImageProps['src'];
-    gameTypes: GameType[];
-    gameProviders: GameProvider[];
-    /**
-     * @default '/providers/<slug>'
-     * @example
-     * ```ts
-     * '/bingo/:slug' // '/bingo/jili'
-     * '/bingo/:id'   // '/bingo/JILI'
-     * // or using a function
-     * ({slug}) => `/bingo/${slug}`
-     * ```
-     */
-    viewGamesUrl?: string | ((gameProvider: GameProviderData) => string);
-    gameProviderImages?: Partial<Record<GameProvider, ImageProps['src']>>;
-}
-export declare function Search(props: SearchProps): import("react/jsx-runtime").JSX.Element;
-export {};
+import type { SearchProps } from './Search.lazy';
+export declare function Search(props: SearchProps): import("react/jsx-runtime").JSX.Element | undefined;
+export type { SearchProps };

package/dist/components/Search/Search.js

@@ -1,68 +1,14 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Portal } from '@ark-ui/react';
-import Image, {} from 'next/image';
-import Link from 'next/link';
-import { useRef, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
 import { useShallow } from 'zustand/shallow';
-import { useGamesQuery, useGlobalStore } from '../../client/hooks/index.js';
-import { GAME_PROVIDER_DATA } from '../../constants/index.js';
-import { SearchLgIcon, XIcon } from '../../icons/index.js';
-import { Button, Dialog, Field, IconButton, Presence } from '../../ui/index.js';
-import { callIfFn } from '../../utils/index.js';
-import { GameLaunchTrigger } from '../GameLaunch/index.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+const Component = dynamic(() => import('./Search.lazy.js').then((m) => m.Search), {
+    ssr: false,
+    loading: () => null,
+});
 export function Search(props) {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        search: ctx.search,
-    })));
-    const inputRef = useRef(null);
-    const [search, setSearch] = useState('');
-    const gamesQuery = useGamesQuery({
-        first: 18,
-        search,
-        filter: {
-            type: {
-                in: props.gameTypes,
-            },
-            provider: {
-                in: props.gameProviders,
-            },
-        },
-    }, {
-        enabled: search.length >= 3,
-    });
-    const games = gamesQuery.data?.pages
-        .map((page) => page.edges.map((edge) => edge.node))
-        .flat() ?? [];
-    const gameProviders = props.gameProviders
-        .map((provider) => GAME_PROVIDER_DATA[provider])
-        .filter((provider) => provider.name
-        .toLowerCase()
-        .replace(/\s+/g, '')
-        .includes(search.toLowerCase().replace(/\s+/g, '')));
-    const empty = games.length <= 0 && gameProviders.length <= 0;
-    const viewGamesUrl = (data) => {
-        return props.viewGamesUrl
-            ? callIfFn(props.viewGamesUrl, data)
-                .replace(':id', data.id)
-                .replace(':slug', data.slug)
-            : `/providers/${data.slug}`;
-    };
-    return (_jsx(Dialog.Root, { open: globalStore.search.open, onOpenChange: (details) => {
-            globalStore.search.setOpen(details.open);
-            setSearch('');
-        }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary lg:min-h-auto mx-auto min-h-full w-full pt-xl lg:mt-[132px] lg:max-w-[1136px] lg:bg-unset lg:pt-0", children: [_jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "flex items-center justify-between px-4 lg:hidden", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 40, className: "h-8 w-auto" }), _jsx(IconButton, { size: "sm", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, { className: "text-text-quinary size-6" }) })] })) }), _jsx("div", { className: "flex justify-end", children: _jsx(Dialog.Context, { children: (api) => (_jsx("button", { type: "button", onClick: () => api.setOpen(false), className: "hidden size-9 items-center justify-center rounded-md bg-white/20 lg:flex", children: _jsx(XIcon, { className: "size-5 text-white" }) })) }) }), _jsx("div", { className: "mt-2xl px-4 lg:mt-xl lg:px-0", children: _jsxs("div", { className: "relative", children: [_jsx(SearchLgIcon, { className: "text-text-quinary pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2" }), _jsx(Field.Input, { ref: inputRef, type: "search", value: search, onChange: (e) => {
-                                                setSearch(e.target.value);
-                                            }, className: "pl-10 pr-16", placeholder: "Search", autoComplete: "off" }), _jsx(Presence, { present: search.length > 0, asChild: true, lazyMount: true, children: _jsx("button", { type: "button", className: "text-text-secondary-700 absolute right-3.5 top-1/2 -translate-y-1/2 font-semibold", onClick: () => {
-                                                    setSearch('');
-                                                    inputRef.current?.focus();
-                                                }, children: "Clear" }) })] }) }), _jsx("div", { className: "lg:bg-bg-primary lg:border-border-primary mt-2xl p-xl pb-3xl lg:mt-2 lg:rounded-xl lg:border", children: search.length <= 0 ? (_jsx(Alert, { message: "Search for your favorite game or provider." })) : search.length >= 1 && search.length <= 2 ? (_jsx(Alert, { message: "Search requires at least 3 characters." })) : (_jsxs(_Fragment, { children: [empty && _jsx(Alert, { message: "No results found" }), !empty && (_jsxs(_Fragment, { children: [gameProviders.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "text-lg font-semibold", children: "Providers" }), _jsx("div", { className: "mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: gameProviders.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), "aria-label": `View ${provider.name} games`, className: "bg-gray-800 flex h-14 w-full items-center rounded-md", onClick: () => {
-                                                                    globalStore.search.setOpen(false);
-                                                                }, children: _jsx(Image, { src: props.gameProviderImages?.[provider.id] ??
-                                                                        provider.logo, alt: "", width: 100, height: 50, className: "mx-auto h-auto w-full" }) }, provider.id))) })] })), games.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-3xl text-lg font-semibold", children: "Games" }), _jsx("div", { className: "mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: games.map((game) => (_jsxs(GameLaunchTrigger, { game: game, className: "block w-full shadow-sm", onClick: () => {
-                                                                    globalStore.search.setOpen(false);
-                                                                }, children: [_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: "bg-bg-tertiary text-text-primary-brand block w-full truncate rounded-b-md px-2 py-2.5 text-center text-xs font-semibold", children: game.name })] }, game.id))) })] })), _jsx(Presence, { present: gamesQuery.hasNextPage, children: _jsx(Button, { variant: "outline", className: "mx-auto mt-12 w-fit", onClick: () => gamesQuery.fetchNextPage(), children: "Load More" }) })] }))] })) })] }) })] }) }));
-}
-function Alert({ message }) {
-    return (_jsxs("div", { className: "py-lg", role: "alert", "aria-live": "polite", children: [_jsx("div", { className: "bg-bg-secondary shadow-xs border-border-primary mx-auto flex size-12 items-center justify-center rounded-lg border", children: _jsx(SearchLgIcon, { className: "text-text-secondary-700 size-6" }) }), _jsx("p", { className: "text-text-secondary-700 mt-4 text-center", children: message })] }));
+    const touched = useGlobalStore(useShallow((ctx) => ctx.search['~touched']));
+    if (touched)
+        return _jsx(Component, { ...props });
 }

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

@@ -0,0 +1,20 @@
+import { type ImageProps } from 'next/image';
+import type { GameProvider, GameProviderData, GameType } from '../../types';
+export interface SearchProps {
+    logo: ImageProps['src'];
+    gameTypes: GameType[];
+    gameProviders: GameProvider[];
+    /**
+     * @default '/providers/<slug>'
+     * @example
+     * ```ts
+     * '/bingo/:slug' // '/bingo/jili'
+     * '/bingo/:id'   // '/bingo/JILI'
+     * // or using a function
+     * ({slug}) => `/bingo/${slug}`
+     * ```
+     */
+    viewGamesUrl?: string | ((gameProvider: GameProviderData) => string);
+    gameProviderImages?: Partial<Record<GameProvider, ImageProps['src']>>;
+}
+export declare function Search(props: SearchProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Search/Search.lazy.js

@@ -0,0 +1,78 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
+import Image, {} from 'next/image';
+import Link from 'next/link';
+import { useRef, useState } from 'react';
+import { useShallow } from 'zustand/shallow';
+import { useGamesQuery } from '../../client/hooks/useGamesQuery.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { GAME_PROVIDER_DATA } from '../../constants/index.js';
+import { SearchLgIcon } from '../../icons/SearchLgIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Field } from '../../ui/Field/index.js';
+import { IconButton } from '../../ui/IconButton/index.js';
+import { Presence } from '../../ui/Presence.js';
+import { callIfFn } from '../../utils/callIfFn.js';
+import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
+import { GameLaunchTrigger } from '../GameLaunch/index.js';
+export function Search(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        search: ctx.search,
+    })));
+    const inputRef = useRef(null);
+    const [search, setSearch] = useState('');
+    const gamesQuery = useGamesQuery({
+        first: 18,
+        search,
+        filter: {
+            type: {
+                in: props.gameTypes,
+            },
+            provider: {
+                in: props.gameProviders,
+            },
+        },
+    }, {
+        enabled: search.length >= 3,
+    });
+    const games = gamesQuery.data?.pages
+        .map((page) => page.edges.map((edge) => edge.node))
+        .flat() ?? [];
+    const gameProviders = props.gameProviders
+        .map((provider) => GAME_PROVIDER_DATA[provider])
+        .filter((provider) => provider.name
+        .toLowerCase()
+        .replace(/\s+/g, '')
+        .includes(search.toLowerCase().replace(/\s+/g, '')));
+    const empty = games.length <= 0 && gameProviders.length <= 0;
+    const viewGamesUrl = (data) => {
+        return props.viewGamesUrl
+            ? callIfFn(props.viewGamesUrl, data)
+                .replace(':id', data.id)
+                .replace(':slug', data.slug)
+            : `/providers/${data.slug}`;
+    };
+    return (_jsx(Dialog.Root, { open: globalStore.search.open, onOpenChange: (details) => {
+            globalStore.search.setOpen(details.open);
+            setSearch('');
+        }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary lg:min-h-auto mx-auto min-h-full w-full pt-xl lg:mt-[132px] lg:max-w-[1136px] lg:bg-unset lg:pt-0", children: [_jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "flex items-center justify-between px-4 lg:hidden", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 40, className: "h-8 w-auto" }), _jsx(IconButton, { size: "sm", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, { className: "text-text-quinary size-6" }) })] })) }), _jsx("div", { className: "flex justify-end", children: _jsx(Dialog.Context, { children: (api) => (_jsx("button", { type: "button", onClick: () => api.setOpen(false), className: "hidden size-9 items-center justify-center rounded-md bg-white/20 lg:flex", children: _jsx(XIcon, { className: "size-5 text-white" }) })) }) }), _jsx("div", { className: "mt-2xl px-4 lg:mt-xl lg:px-0", children: _jsxs("div", { className: "relative", children: [_jsx(SearchLgIcon, { className: "text-text-quinary pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2" }), _jsx(Field.Input, { ref: inputRef, type: "search", value: search, onChange: (e) => {
+                                                setSearch(e.target.value);
+                                            }, className: "pl-10 pr-16", placeholder: "Search", autoComplete: "off" }), _jsx(Presence, { present: search.length > 0, asChild: true, lazyMount: true, children: _jsx("button", { type: "button", className: "text-text-secondary-700 absolute right-3.5 top-1/2 -translate-y-1/2 font-semibold", onClick: () => {
+                                                    setSearch('');
+                                                    inputRef.current?.focus();
+                                                }, children: "Clear" }) })] }) }), _jsx("div", { className: "lg:bg-bg-primary lg:border-border-primary mt-2xl p-xl pb-3xl lg:mt-2 lg:rounded-xl lg:border", children: search.length <= 0 ? (_jsx(Alert, { message: "Search for your favorite game or provider." })) : search.length >= 1 && search.length <= 2 ? (_jsx(Alert, { message: "Search requires at least 3 characters." })) : (_jsxs(_Fragment, { children: [empty && _jsx(Alert, { message: "No results found" }), !empty && (_jsxs(_Fragment, { children: [gameProviders.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "text-lg font-semibold", children: "Providers" }), _jsx("div", { className: "mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: gameProviders.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), "aria-label": `View ${provider.name} games`, className: "bg-gray-800 flex h-14 w-full items-center rounded-md", onClick: () => {
+                                                                    globalStore.search.setOpen(false);
+                                                                }, children: _jsx(Image, { src: props.gameProviderImages?.[provider.id] ??
+                                                                        provider.logo, alt: "", width: 100, height: 50, className: "mx-auto h-auto w-full" }) }, provider.id))) })] })), games.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-3xl text-lg font-semibold", children: "Games" }), _jsx("div", { className: "mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: games.map((game) => (_jsxs(GameLaunchTrigger, { game: game, className: "block w-full shadow-sm", onClick: () => {
+                                                                    globalStore.search.setOpen(false);
+                                                                }, children: [_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: "bg-bg-tertiary text-text-primary-brand block w-full truncate rounded-b-md px-2 py-2.5 text-center text-xs font-semibold", children: game.name })] }, game.id))) })] })), _jsx(Presence, { present: gamesQuery.hasNextPage, children: _jsx(Button, { variant: "outline", className: "mx-auto mt-12 w-fit", onClick: () => gamesQuery.fetchNextPage(), children: "Load More" }) })] }))] })) })] }) })] }) }));
+}
+function Alert({ message }) {
+    return (_jsxs("div", { className: "py-lg", role: "alert", "aria-live": "polite", children: [_jsx("div", { className: "bg-bg-secondary shadow-xs border-border-primary mx-auto flex size-12 items-center justify-center rounded-lg border", children: _jsx(SearchLgIcon, { className: "text-text-secondary-700 size-6" }) }), _jsx("p", { className: "text-text-secondary-700 mt-4 text-center", children: message })] }));
+}

package/dist/components/Search/SearchTrigger.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks/index.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 export function SearchTrigger(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         search: ctx.search,

package/dist/components/SignIn/MobileNumberSignIn.js

@@ -5,15 +5,26 @@ import { useRef } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
-import { useCooldown, useGlobalStore, useLocaleInfo, useMobileNumberParser, useSendVerificationCodeMutation, useSignInMutation, } from '../../client/hooks/index.js';
-import { toaster } from '../../client/utils/index.js';
-import { ArrowLeftIcon, CheckIcon, FacebookIcon, GoogleIcon, } from '../../icons/index.js';
-import { Button, Checkbox, Field, PinInput } from '../../ui/index.js';
+import { useCooldown } from '../../client/hooks/useCooldown.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useMobileNumberParser } from '../../client/hooks/useMobileNumberParser.js';
+import { useSendVerificationCodeMutation } from '../../client/hooks/useSendVerificationCodeMutation.js';
+import { useSignInMutation } from '../../client/hooks/useSignInMutation.js';
+import { toaster } from '../../client/utils/toaster.js';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import { FacebookIcon } from '../../icons/FacebookIcon.js';
+import { GoogleIcon } from '../../icons/GoogleIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Checkbox } from '../../ui/Checkbox/index.js';
+import { Field } from '../../ui/Field/index.js';
+import { PinInput } from '../../ui/PinInput/index.js';
 import { useSignInContext } from './SignInContext.js';
 export function MobileNumberSignIn() {
     const context = useSignInContext();
     const dialog = useDialogContext();
-    const signUpStore = useGlobalStore(useShallow((popups) => popups.signUp));
+    const signUpStore = useGlobalStore(useShallow((ctx) => ctx.signUp));
     const signInMutation = useSignInMutation();
     const sendVerificationCodeMutation = useSendVerificationCodeMutation();
     const localeInfo = useLocaleInfo();