@opexa/portal-components 0.0.78 → 0.0.80

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

@@ -10,6 +10,7 @@ export * from './useCashbackBonusQuery';
 export * from './useCashbackQuery';
 export * from './useCashbacksQuery';
 export * from './useCheckInDailyCheckInQuestMutation';
+export * from './useChunk';
 export * from './useClaimCashbackBonusMutation';
 export * from './useClaimSpotBonusMutation';
 export * from './useControllableState';

package/dist/client/hooks/index.js

@@ -10,6 +10,7 @@ export * from './useCashbackBonusQuery.js';
 export * from './useCashbackQuery.js';
 export * from './useCashbacksQuery.js';
 export * from './useCheckInDailyCheckInQuestMutation.js';
+export * from './useChunk.js';
 export * from './useClaimCashbackBonusMutation.js';
 export * from './useClaimSpotBonusMutation.js';
 export * from './useControllableState.js';

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

@@ -0,0 +1,8 @@
+export declare function useChunk<T>(items: T[], size: number): {
+    totalItems: number;
+    currentItems: T[];
+    loadedItems: T[];
+    totalLoadedItems: number;
+    hasNext: boolean;
+    next: () => void;
+};

package/dist/client/hooks/useChunk.js

@@ -0,0 +1,26 @@
+import { chunk } from 'lodash-es';
+import { useState } from 'react';
+export function useChunk(items, size) {
+    const chunks = chunk(items, size);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const currentItems = chunks.at(currentIndex) ?? [];
+    const loadedItems = (() => {
+        return chunks.filter((_, index) => index <= currentIndex).flat();
+    })();
+    const next = () => {
+        if (currentIndex >= chunks.length - 1)
+            return;
+        setCurrentIndex((prevIndex) => prevIndex + 1);
+    };
+    const totalItems = items.length;
+    const totalLoadedItems = loadedItems.length;
+    const hasNext = currentIndex < chunks.length - 1;
+    return {
+        totalItems,
+        currentItems,
+        loadedItems,
+        totalLoadedItems,
+        hasNext,
+        next,
+    };
+}

package/dist/components/BetRecords/BetRecords.js

@@ -22,7 +22,7 @@ export function BetRecords(props) {
     }), {
         page: 1,
         pageSize: 10,
-        type: gameTypes[0].id,
+        type: null,
     });
     const localeInfo = useLocaleInfo();
     const providerCollection = createListCollection({
@@ -59,12 +59,12 @@ export function BetRecords(props) {
             }),
         },
     });
-    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-sm font-semibold leading-tight lg:text-lg", children: "Bet Records" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm leading-tight", children: "Review your betting history" }), _jsx("div", { className: "mt-lg lg:mt-2xl", children: _jsxs(SegmentGroup.Root, { value: state.type, onValueChange: (details) => {
+    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-sm font-semibold leading-tight lg:text-lg", children: "Bet Records" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm leading-tight", children: "Review your betting history" }), _jsx("div", { className: "mt-lg lg:mt-2xl", children: _jsxs(SegmentGroup.Root, { value: state.type ?? 'all', onValueChange: (details) => {
                         firstPage();
                         setState({
                             type: z.enum(GAME_TYPES).safeParse(details.value).data ?? null,
                         });
-                    }, children: [gameTypes.map((type) => (_jsxs(SegmentGroup.Item, { value: type.id, children: [_jsx(SegmentGroup.ItemText, { children: type.name }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }, type.id))), _jsx(SegmentGroup.Indicator, {})] }) }), _jsx("div", { className: "border-border-secondary mt-2xl hidden border-t lg:block" }), _jsx("h3", { className: "text-text-secondary-700 mt-3xl text-sm font-semibold", children: "Table" }), _jsxs("div", { className: "mt-xl flex flex-col gap-lg lg:flex-row lg:items-center", children: [_jsxs(DatePicker.Root, { lazyMount: true, unmountOnExit: true, value: [state.timestamp?.start, state.timestamp?.end]
+                    }, children: [_jsxs(SegmentGroup.Item, { value: "all", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), gameTypes.map((type) => (_jsxs(SegmentGroup.Item, { value: type.id, children: [_jsx(SegmentGroup.ItemText, { children: type.name }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }, type.id))), _jsx(SegmentGroup.Indicator, {})] }) }), _jsx("div", { className: "border-border-secondary mt-2xl hidden border-t lg:block" }), _jsx("h3", { className: "text-text-secondary-700 mt-3xl text-sm font-semibold", children: "Table" }), _jsxs("div", { className: "mt-xl flex flex-col gap-lg lg:flex-row lg:items-center", children: [_jsxs(DatePicker.Root, { lazyMount: true, unmountOnExit: true, value: [state.timestamp?.start, state.timestamp?.end]
                             .filter(Boolean)
                             .map((d) => parseDate(d)), onValueChange: (details) => {
                             firstPage();

package/dist/components/Cashback/Cashback.client.js

@@ -27,5 +27,5 @@ export function Cashback__client(props) {
                         in: tz(localeInfo.timezone),
                     })] }), _jsx(Prose, { className: "mt-2xl lg:mt-6", dangerouslySetInnerHTML: {
                     __html: cashback.description,
-                } }), _jsxs(Prose, { className: "bg-bg-secondary mt-xl rounded-2xl p-2xl lg:mt-16 lg:p-4xl", children: [_jsx("h2", { children: "Conclusion" }), _jsx("p", { children: "Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est ultricies ultricies. Duis est sit sed leo nisl, blandit elit sagittis. Quisque tristique consequat quam sed. Nisl at scelerisque amet nulla purus habitasse." }), _jsx("p", { children: "Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas condimentum mi massa. In tincidunt pharetra consectetur sed duis facilisis metus. Etiam egestas in nec sed et. Quis lobortis at sit dictum eget nibh tortor commodo cursus." }), _jsx("p", { children: "Odio felis sagittis, morbi feugiat tortor vitae feugiat fusce aliquet. Nam elementum urna nisi aliquet erat dolor enim. Ornare id morbi eget ipsum. Aliquam senectus neque ut id eget consectetur dictum. Donec posuere pharetra odio consequat scelerisque et, nunc tortor." })] })] }));
+                } })] }));
 }

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

@@ -1,5 +1,5 @@
 export declare const OnlineBankDepositContext: import("react").Context<{
-    view: "vca" | "form";
+    view: "form" | "vca";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
@@ -9,7 +9,7 @@ export declare const OnlineBankDepositContext: import("react").Context<{
         promo?: string | null;
     }) => void;
 }>, useOnlineBankDepositContext: () => {
-    view: "vca" | "form";
+    view: "form" | "vca";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

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

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

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

@@ -1,5 +1,5 @@
 export declare const QRPHDepositContext: import("react").Context<{
-    view: "qrCode" | "form";
+    view: "form" | "qrCode";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
@@ -9,7 +9,7 @@ export declare const QRPHDepositContext: import("react").Context<{
         promo?: string | null;
     }) => void;
 }>, useQRPHDepositContext: () => {
-    view: "qrCode" | "form";
+    view: "form" | "qrCode";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

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

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

package/dist/components/GameProviders/GameProviders.d.ts

@@ -1,25 +1,4 @@
-import type { GameProvider } from '@opexa/portal-sdk-core';
-import type { GameProviderData } from '../../types';
-export interface GameProvidersProps {
-    gameProviders: GameProvider[];
-    heading?: string;
-    /**
-     * @default '/providers'
-     */
-    viewAllUrl?: string;
-    /**
-     * @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);
-    className?: string;
-    gameProviderContainerClass?: string;
-    gameProviderImageClass?: string;
-}
+import { type GameProvidersCarouselProps } from './GameProvidersCarousel';
+import { type GameProvidersListProps } from './GameProvidersList';
+export type GameProvidersProps = GameProvidersCarouselProps | GameProvidersListProps;
 export declare function GameProviders(props: GameProvidersProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/GameProviders/GameProviders.js

@@ -1,43 +1,11 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import useEmblaCarousel from 'embla-carousel-react';
-import Image from 'next/image';
-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 { jsx as _jsx } from "react/jsx-runtime";
+import { GameProvidersCarousel, } from './GameProvidersCarousel.js';
+import { GameProvidersList, } from './GameProvidersList.js';
 export function GameProviders(props) {
-    const [emblaRef, emblaApi] = useEmblaCarousel({
-        align: 'start',
-        slidesToScroll: 1,
-    });
-    const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
-    const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
-    const onPrevButtonClick = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
-    const onNextButtonClick = useCallback(async () => {
-        emblaApi?.scrollNext();
-    }, [emblaApi]);
-    const onSelect = useCallback((emblaApi) => {
-        setPrevBtnDisabled(!emblaApi?.canScrollPrev());
-        setNextBtnDisabled(!emblaApi?.canScrollNext());
-    }, []);
-    useEffect(() => {
-        if (!emblaApi)
-            return;
-        onSelect(emblaApi);
-        emblaApi.on('reInit', onSelect).on('select', onSelect);
-    }, [emblaApi, onSelect]);
-    const viewAllUrl = props.viewAllUrl ?? '/providers';
-    const viewGamesUrl = (data) => {
-        return props.viewGamesUrl
-            ? callIfFn(props.viewGamesUrl, data)
-                .replace(':id', data.id)
-                .replace(':slug', data.slug)
-            : `/providers/${data.slug}`;
-    };
-    const gameProviders = props.gameProviders.map((provider) => GAME_PROVIDER_DATA[provider]);
-    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Providers' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: viewAllUrl, className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] })] })] }), _jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsx("div", { className: "grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col grid-rows-1 gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md", children: gameProviders.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), className: twMerge('bg-gray-800 flex h-full w-full items-center overflow-hidden rounded-md lg:h-[5.75rem]', props.gameProviderContainerClass), "aria-label": `View ${provider.name} games`, children: _jsx(Image, { src: provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full', props.gameProviderImageClass) }) }, provider.id))) }) })] }));
+    if (props.layout === 'list') {
+        return _jsx(GameProvidersList, { ...props });
+    }
+    else {
+        return _jsx(GameProvidersCarousel, { ...props });
+    }
 }

package/dist/components/GameProviders/GameProvidersCarousel.d.ts

@@ -0,0 +1,31 @@
+import type { GameProvider } from '@opexa/portal-sdk-core';
+import { type ImageProps } from 'next/image';
+import type { GameProviderData } from '../../types';
+export interface ClassNameEntries {
+    root?: string;
+    thumbnailRoot?: string;
+    thumbnailImage?: string;
+}
+export interface GameProvidersCarouselProps {
+    layout: 'carousel';
+    gameProviders: GameProvider[];
+    heading?: string;
+    /**
+     * @default '/providers'
+     */
+    viewAllUrl?: string;
+    /**
+     * @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']>>;
+    className?: string | ClassNameEntries;
+}
+export declare function GameProvidersCarousel(props: GameProvidersCarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/GameProviders/GameProvidersCarousel.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useEmblaCarousel from 'embla-carousel-react';
+import { isString } from 'lodash-es';
+import Image, {} from 'next/image';
+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';
+export function GameProvidersCarousel(props) {
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 1,
+    });
+    const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+    const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+    const onPrevButtonClick = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
+    const onNextButtonClick = useCallback(async () => {
+        emblaApi?.scrollNext();
+    }, [emblaApi]);
+    const onSelect = useCallback((emblaApi) => {
+        setPrevBtnDisabled(!emblaApi?.canScrollPrev());
+        setNextBtnDisabled(!emblaApi?.canScrollNext());
+    }, []);
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        onSelect(emblaApi);
+        emblaApi.on('reInit', onSelect).on('select', onSelect);
+    }, [emblaApi, onSelect]);
+    const viewAllUrl = props.viewAllUrl ?? '/providers';
+    const viewGamesUrl = (data) => {
+        return props.viewGamesUrl
+            ? callIfFn(props.viewGamesUrl, data)
+                .replace(':id', data.id)
+                .replace(':slug', data.slug)
+            : `/providers/${data.slug}`;
+    };
+    const gameProviders = props.gameProviders.map((provider) => GAME_PROVIDER_DATA[provider]);
+    const classNames = isString(props.className)
+        ? { root: props.className }
+        : (props.className ?? {});
+    return (_jsxs("div", { className: classNames.root, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Providers' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: viewAllUrl, className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] })] })] }), _jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsx("div", { className: "grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col grid-rows-1 gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md", children: gameProviders.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), className: twMerge('bg-gray-800 flex h-full w-full items-center overflow-hidden rounded-md lg:h-[5.75rem]', classNames.thumbnailRoot), "aria-label": `View ${provider.name} games`, children: _jsx(Image, { src: props.gameProviderImages?.[provider.id] ?? provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full', classNames.thumbnailImage) }) }, provider.id))) }) })] }));
+}

package/dist/components/GameProviders/GameProvidersList.d.ts

@@ -0,0 +1,27 @@
+import type { GameProvider } from '@opexa/portal-sdk-core';
+import { type ImageProps } from 'next/image';
+import type { GameProviderData } from '../../types';
+export interface ClassNameEntries {
+    root?: string;
+    thumbnailRoot?: string;
+    thumbnailImage?: string;
+}
+export interface GameProvidersListProps {
+    layout: 'list';
+    gameProviders: GameProvider[];
+    heading?: string;
+    /**
+     * @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']>>;
+    className?: string | ClassNameEntries;
+}
+export declare function GameProvidersList(props: GameProvidersListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/GameProviders/GameProvidersList.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { GAME_PROVIDER_DATA } from '../../constants/index.js';
+import { Button, Progress } from '../../ui/index.js';
+import { callIfFn } from '../../utils/index.js';
+export function GameProvidersList(props) {
+    const viewGamesUrl = (data) => {
+        return props.viewGamesUrl
+            ? callIfFn(props.viewGamesUrl, data)
+                .replace(':id', data.id)
+                .replace(':slug', data.slug)
+            : `/providers/${data.slug}`;
+    };
+    const gameProviders = props.gameProviders.map((provider) => GAME_PROVIDER_DATA[provider]);
+    const classNames = isString(props.className)
+        ? { root: props.className }
+        : (props.className ?? {});
+    const chunked = useChunk(gameProviders, 18);
+    return (_jsxs("div", { className: classNames.root, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Providers' }), _jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: chunked.loadedItems.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), className: twMerge('bg-gray-800 flex h-full w-full items-center overflow-hidden rounded-md lg:h-[5.75rem]', classNames.thumbnailRoot), "aria-label": `View ${provider.name} games`, children: _jsx(Image, { src: props.gameProviderImages?.[provider.id] ?? provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full', classNames.thumbnailImage) }) }, provider.id))) }), _jsxs("div", { className: "mt-2xl flex flex-col items-center lg:mt-3xl", children: [_jsx(Progress.Root, { min: 0, max: chunked.totalItems, value: chunked.totalLoadedItems, onValueChange: noop, className: "w-[12.5rem]", children: _jsx(Progress.Track, { className: "bg-bg-tertiary", children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "text-button-tertiary-fg mt-md text-sm", children: `Displaying ${chunked.totalLoadedItems} of ${chunked.totalItems}` }), chunked.hasNext && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: chunked.next, className: "mt-lg", children: "Load More" }))] })] }));
+}

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

@@ -1,5 +1,10 @@
+interface ClassNameEntries {
+    root?: string;
+    title?: string;
+}
 export interface GameProps {
     badge?: 'top' | 'new' | 'popular';
-    gameNameClass?: string;
+    className?: string | ClassNameEntries;
 }
 export declare function Game(props: GameProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Games/Game.js

@@ -1,4 +1,5 @@
 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';
@@ -7,7 +8,7 @@ import { GameLaunchTrigger } from '../GameLaunch/index.js';
 import { BadgeNew } from './BadgeNew.js';
 import { BadgePopular } from './BadgePopular.js';
 import { BadgeTop } from './BadgeTop.js';
-import { useGameContext } from './GameContext.js';
+import { useGameContext } from './GamesContext.js';
 export function Game(props) {
     const game = useGameContext();
     const sessionQuery = useSessionQuery();
@@ -17,7 +18,10 @@ export function Game(props) {
     const markGameAsFavoriteMutation = useMarkGameAsFavoriteMutation();
     const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation();
     const markedAsFavorite = favoriteGames.some((favoriteGame) => favoriteGame.id === game.id);
-    return (_jsxs(GameLaunchTrigger, { game: game, className: "animate-scale-in relative block w-full shadow-sm", 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) => {
+    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) => {
                     e.preventDefault();
                     e.stopPropagation();
                     if (markGameAsFavoriteMutation.isPending)
@@ -33,5 +37,5 @@ export function Game(props) {
                 }, "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', props.gameNameClass), children: game.name })] }));
+                        : '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 })] }));
 }

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

@@ -1,8 +1,4 @@
 import { type GamesCarouselProps } from './GamesCarousel';
 import { type GamesListProps } from './GamesList';
-export type GamesProps = ({
-    layout: 'list';
-} & GamesListProps) | ({
-    layout?: 'carousel';
-} & GamesCarouselProps);
+export type GamesProps = GamesListProps | GamesCarouselProps;
 export declare function Games(props: GamesProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import useEmblaCarousel, {} from 'embla-carousel-react';
+import { isString } from 'lodash-es';
 import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -9,7 +10,7 @@ import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon, GamingPad01Icon, Spinn
 import { Button } from '../../ui/index.js';
 import { Empty } from '../Empty.js';
 import { Game } from './Game.js';
-import { GameContext } from './GameContext.js';
+import { GameContext } from './GamesContext.js';
 export function GamesCarousel__client(props) {
     const numOfRows = props.numOfRows ?? 1;
     const gamesQuery = useGamesQuery({
@@ -51,11 +52,17 @@ export function GamesCarousel__client(props) {
         onSelect(emblaApi);
         emblaApi.on('reInit', onSelect).on('select', onSelect);
     }, [emblaApi, onSelect]);
-    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Games' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/games', className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled && !gamesQuery.hasNextPage
+    const classNames = isString(props.className)
+        ? { root: props.className }
+        : (props.className ?? {});
+    return (_jsxs("div", { className: classNames.root, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Games' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/games', className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled && !gamesQuery.hasNextPage
                                             ? true
                                             : gamesQuery.isFetchingNextPage, "aria-label": "Next", children: gamesQuery.isFetchingNextPage ? (_jsx(SpinnerIcon, { className: "size-5" })) : (_jsx(ArrowRightIcon, { className: "size-5" })) })] })] })] }), games.length <= 0 && (_jsx(Empty, { icon: GamingPad01Icon, title: "No games", message: "No game is currently available. Please check back later", className: "mt-lg" })), games.length >= 1 && (_jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsx("div", { className: twMerge('grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md', numOfRows === 3
                         ? 'grid-rows-3'
                         : numOfRows === 2
                             ? 'grid-rows-2'
-                            : 'grid-rows-1'), children: games.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { badge: props.badge, gameNameClass: props.gameNameClass }) }, game.id))) }) }))] }));
+                            : 'grid-rows-1'), children: games.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { badge: props.badge, className: {
+                                root: classNames.thumbnailRoot,
+                                title: classNames.thumbnailTitle,
+                            } }) }, game.id))) }) }))] }));
 }

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

@@ -1,5 +1,11 @@
 import type { GamesInput__Next } from '@opexa/portal-sdk-core';
+export interface ClassNameEntries {
+    root?: string;
+    thumbnailRoot?: string;
+    thumbnailTitle?: string;
+}
 export interface GamesCarouselProps {
+    layout: 'carousel';
     /** @default "Games" */
     heading?: string;
     /**
@@ -13,7 +19,6 @@ export interface GamesCarouselProps {
     filter?: GamesInput__Next['filter'];
     search?: string;
     sort?: GamesInput__Next['sort'];
-    className?: string;
-    gameNameClass?: string;
+    className?: string | ClassNameEntries;
 }
 export declare function GamesCarousel(props: GamesCarouselProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,4 @@
+import type { Game } from '@opexa/portal-sdk-core';
+import type { GamesProps } from './Games';
+export declare const GamesPropsContext: import("react").Context<GamesProps>, useGamesPropsContext: () => GamesProps;
+export declare const GameContext: import("react").Context<Game>, useGameContext: () => Game;

package/dist/components/Games/GamesContext.js

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

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

@@ -1,12 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { noop } from 'lodash-es';
+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 { Empty } from '../Empty.js';
 import { Game } from './Game.js';
-import { GameContext } from './GameContext.js';
+import { GameContext } from './GamesContext.js';
 export function GamesList__client(props) {
     const { loading, availableRows, totalRows, totalAvailableRows, hasNextPage, next, } = useInfiniteQueryHelper(useGamesQuery, {
         first: props.first ?? 24,
@@ -14,7 +14,13 @@ export function GamesList__client(props) {
         search: props.search,
         sort: props.sort,
     });
-    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Games' }), totalRows <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : GamingPad01Icon, title: loading ? 'Just a moment' : 'No games', message: loading
+    const classNames = isString(props.className)
+        ? { root: props.className }
+        : (props.className ?? {});
+    return (_jsxs("div", { className: classNames.root, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Games' }), totalRows <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : GamingPad01Icon, title: loading ? 'Just a moment' : 'No games', message: loading
                     ? 'Fetching latest games...'
-                    : 'No game is currently available. Please check back later', className: "mt-lg" })), totalRows >= 1 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: availableRows.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { badge: props.badge, gameNameClass: props.gameNameClass }) }, game.id))) }), _jsxs("div", { className: "mt-3xl flex flex-col items-center", children: [_jsx(Progress.Root, { min: 0, max: totalRows, value: totalAvailableRows, onValueChange: noop, className: "w-[12.5rem]", children: _jsx(Progress.Track, { className: "bg-bg-tertiary", children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "text-button-tertiary-fg mt-md text-sm", children: `Displaying ${totalAvailableRows} of ${totalRows}` }), hasNextPage && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: next, className: "mt-lg", children: "Load More" }))] })] }))] }));
+                    : 'No game is currently available. Please check back later', className: "mt-lg" })), totalRows >= 1 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: availableRows.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { badge: props.badge, className: {
+                                    root: classNames.thumbnailRoot,
+                                    title: classNames.thumbnailTitle,
+                                } }) }, game.id))) }), _jsxs("div", { className: "mt-2xl flex flex-col items-center lg:mt-3xl", children: [_jsx(Progress.Root, { min: 0, max: totalRows, value: totalAvailableRows, onValueChange: noop, className: "w-[12.5rem]", children: _jsx(Progress.Track, { className: "bg-bg-tertiary", children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "text-button-tertiary-fg mt-md text-sm", children: `Displaying ${totalAvailableRows} of ${totalRows}` }), hasNextPage && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: next, className: "mt-lg", children: "Load More" }))] })] }))] }));
 }

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

@@ -1,5 +1,11 @@
 import type { GamesInput__Next } from '@opexa/portal-sdk-core';
+export interface ClassNameEntries {
+    root?: string;
+    thumbnailRoot?: string;
+    thumbnailTitle?: string;
+}
 export interface GamesListProps {
+    layout: 'list';
     badge?: 'top' | 'new' | 'popular';
     /** @default 24 */
     first?: number;
@@ -8,7 +14,6 @@ export interface GamesListProps {
     search?: string;
     /** @default "Games"*/
     heading?: string;
-    className?: string;
-    gameNameClass?: string;
+    className?: string | ClassNameEntries;
 }
 export declare function GamesList(props: GamesListProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/Jackpots/JackpotGameProviders.js

@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 import { ArrowLeftIcon, ArrowRightIcon } from '../../icons/index.js';
 import { Button } from '../../ui/index.js';
+import { useJackpotsPropsContext } from './JackpotsContext.js';
 export function JackpotGameProviders({ gameProviders, }) {
     const [emblaRef, emblaApi] = useEmblaCarousel({
         align: 'start',
@@ -34,5 +35,7 @@ export function JackpotGameProviders({ gameProviders, }) {
         emblaApi.on('select', onSelect);
         emblaApi.on('reInit', onSelect);
     }, [emblaApi, onSelect]);
-    return (_jsxs("div", { className: "p-4 pb-8", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: "Jackpot Game Providers" }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: "rounded-l-none", "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] }), _jsx("div", { className: "relative mt-3 overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-3.5", children: gameProviders.map((provider, i) => (_jsx(Link, { href: `/${provider.slug}`, className: "bg-gray-800 lg:bg-bg-primary-900 min-w-27.5 rounded-md", children: _jsx(Image, { src: provider.logo, alt: "provider", className: "size-full" }) }, i))) }) })] }));
+    const jackpotsProps = useJackpotsPropsContext();
+    return (_jsxs("div", { className: "p-4 pb-8", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: "Jackpot Game Providers" }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: "rounded-l-none", "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] }), _jsx("div", { className: "relative mt-3 overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-3.5", children: gameProviders.map((provider, i) => (_jsx(Link, { href: `/${provider.slug}`, className: "bg-gray-800 lg:bg-bg-primary-900 min-w-27.5 rounded-md", children: _jsx(Image, { src: jackpotsProps.gameProviderImages?.[provider.id] ??
+                                provider.logo, alt: "provider", className: "size-full" }) }, i))) }) })] }));
 }

package/dist/components/Jackpots/Jackpots.d.ts

@@ -1,8 +1,10 @@
 import type { GameProvider } from '@opexa/portal-sdk-core';
+import type { ImageProps } from 'next/image';
 export interface JackpotsProps {
     /** @default "Jackpots" */
     heading?: string;
     className?: string;
     gameProviders: GameProvider[];
+    gameProviderImages?: Partial<Record<GameProvider, ImageProps['src']>>;
 }
 export declare function Jackpots(props: JackpotsProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -27,5 +27,5 @@ export function Promo__client(props) {
                         in: tz(localeInfo.timezone),
                     })] }), _jsx(Prose, { className: "mt-2xl lg:mt-6", dangerouslySetInnerHTML: {
                     __html: promo.description,
-                } }), _jsxs(Prose, { className: "bg-bg-secondary mt-xl rounded-2xl p-2xl lg:mt-16 lg:p-4xl", children: [_jsx("h2", { children: "Conclusion" }), _jsx("p", { children: "Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est ultricies ultricies. Duis est sit sed leo nisl, blandit elit sagittis. Quisque tristique consequat quam sed. Nisl at scelerisque amet nulla purus habitasse." }), _jsx("p", { children: "Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas condimentum mi massa. In tincidunt pharetra consectetur sed duis facilisis metus. Etiam egestas in nec sed et. Quis lobortis at sit dictum eget nibh tortor commodo cursus." }), _jsx("p", { children: "Odio felis sagittis, morbi feugiat tortor vitae feugiat fusce aliquet. Nam elementum urna nisi aliquet erat dolor enim. Ornare id morbi eget ipsum. Aliquam senectus neque ut id eget consectetur dictum. Donec posuere pharetra odio consequat scelerisque et, nunc tortor." })] })] }));
+                } })] }));
 }

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

@@ -1,15 +1,4 @@
-export interface PromosProps {
-    /** @default "Promotions" */
-    heading?: string;
-    /** @default "/promos" */
-    viewAllUrl?: string;
-    /** @default "/promos" */
-    viewPromoDetailsUrl?: string;
-    /** @default "/promos/cashback" */
-    viewCashbackDetailsUrl?: string;
-    /** @default 1 */
-    className?: string;
-    /** @default 'carousel' */
-    layout?: 'carousel' | 'grid';
-}
+import { type PromosCarouselProps } from './PromosCarousel';
+import { type PromosGridProps } from './PromosGrid';
+export type PromosProps = PromosCarouselProps | PromosGridProps;
 export declare function Promos(props: PromosProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -1,2 +1,13 @@
-import type { PromosProps } from './Promos';
-export declare function PromosCarousel(props: PromosProps): import("react/jsx-runtime").JSX.Element;
+export interface PromosCarouselProps {
+    layout: 'carousel';
+    /** @default "Promotions" */
+    heading?: string;
+    /** @default "/promos" */
+    viewAllUrl?: string;
+    /** @default "/promos" */
+    viewPromoDetailsUrl?: string;
+    /** @default "/promos/cashback" */
+    viewCashbackDetailsUrl?: string;
+    className?: string;
+}
+export declare function PromosCarousel(props: PromosCarouselProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,11 @@
-import type { PromosProps } from './Promos';
-export declare function PromosGrid(props: PromosProps): import("react/jsx-runtime").JSX.Element;
+export interface PromosGridProps {
+    layout: 'grid';
+    /** @default "Promotions" */
+    heading?: string;
+    /** @default "/promos" */
+    viewPromoDetailsUrl?: string;
+    /** @default "/promos/cashback" */
+    viewCashbackDetailsUrl?: string;
+    className?: string;
+}
+export declare function PromosGrid(props: PromosGridProps): import("react/jsx-runtime").JSX.Element;

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

@@ -16,6 +16,7 @@ interface SearchProps {
      * ```
      */
     viewGamesUrl?: string | ((gameProvider: GameProviderData) => string);
+    gameProviderImages?: Partial<Record<GameProvider, ImageProps['src']>>;
 }
 export declare function Search(props: SearchProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Search/Search.js

@@ -56,7 +56,8 @@ export function Search(props) {
                                             }, 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", children: _jsx(Image, { src: 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: () => {
+                                                }, 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", 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" }) })] }))] })) })] }) })] }) }));
 }

package/dist/components/TransactionRecords/TransactionRecords.js

@@ -4,5 +4,5 @@ import { DepositRecordsTable } from './DepositRecordsTable.js';
 import { TransactionRecordsTable } from './TransactionRecordsTable.js';
 import { WithdrawalRecordsTable } from './WithdrawalRecordsTable.js';
 export function TransactionRecords(props) {
-    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-sm font-semibold leading-tight lg:text-lg", children: "Transactions" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm leading-tight", children: "View your transaction records" }), _jsxs(Tabs.Root, { className: "mt-lg lg:mt-2xl", defaultValue: "transactions", lazyMount: true, unmountOnExit: true, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "transactions", children: "Transactions" }), _jsx(Tabs.Trigger, { value: "deposits", children: "Deposits" }), _jsx(Tabs.Trigger, { value: "withdrawals", children: "Withdrawals" }), _jsx(Tabs.Indicator, {})] }), _jsx("div", { className: "border-border-secondary mt-2xl hidden border-t lg:block" }), _jsx("h3", { className: "text-text-secondary-700 mt-3xl text-sm font-semibold", children: "Table" }), _jsx(Tabs.Content, { value: "transactions", className: "mt-xl", children: _jsx(TransactionRecordsTable, {}) }), _jsx(Tabs.Content, { value: "deposits", className: "mt-xl", children: _jsx(DepositRecordsTable, {}) }), _jsx(Tabs.Content, { value: "withdrawals", className: "mt-xl", children: _jsx(WithdrawalRecordsTable, {}) })] })] }));
+    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-sm font-semibold leading-tight lg:text-lg", children: "Transactions" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm leading-tight", children: "View your transaction records" }), _jsxs(Tabs.Root, { className: "mt-lg lg:mt-2xl", defaultValue: "transactions", lazyMount: true, unmountOnExit: true, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "transactions", children: "All Transactions" }), _jsx(Tabs.Trigger, { value: "deposits", children: "Deposits" }), _jsx(Tabs.Trigger, { value: "withdrawals", children: "Withdrawals" }), _jsx(Tabs.Indicator, {})] }), _jsx("div", { className: "border-border-secondary mt-2xl hidden border-t lg:block" }), _jsx("h3", { className: "text-text-secondary-700 mt-3xl text-sm font-semibold", children: "Table" }), _jsx(Tabs.Content, { value: "transactions", className: "mt-xl", children: _jsx(TransactionRecordsTable, {}) }), _jsx(Tabs.Content, { value: "deposits", className: "mt-xl", children: _jsx(DepositRecordsTable, {}) }), _jsx(Tabs.Content, { value: "withdrawals", className: "mt-xl", children: _jsx(WithdrawalRecordsTable, {}) })] })] }));
 }

package/dist/constants/gameProviders.js

@@ -101,7 +101,7 @@ export const GAME_PROVIDER_DATA = {
         id: 'ETENGJUE',
         name: 'Etengjue',
         slug: 'etengjue',
-        logo: '' /* FIXME */,
+        logo: '',
     },
     EVOLUTION: {
         id: 'EVOLUTION',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "exports": {
     ".": {
       "types": "./dist/components/index.d.ts",