@opexa/portal-components 0.0.69 → 0.0.71

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

@@ -1,3 +1,3 @@
-import { type Game, type GamesInput, type PaginatedQueryResult } from '@opexa/portal-sdk-core';
+import { type Game, type GamesInput__Next, type PaginatedQueryResult } from '@opexa/portal-sdk-core';
 import type { InfiniteQuery } from '../../types';
-export declare const useGamesQuery: InfiniteQuery<PaginatedQueryResult<Game>, GamesInput>;
+export declare const useGamesQuery: InfiniteQuery<PaginatedQueryResult<Game>, GamesInput__Next>;

package/dist/client/hooks/useGamesQuery.js

@@ -1,4 +1,4 @@
-import { getGames, } from '@opexa/portal-sdk-core';
+import { getGames__next, } from '@opexa/portal-sdk-core';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { ENVIRONMENT, PLATFORM_ID, SITE_ID } from '../../constants/index.js';
 import { getGamesQueryKey } from '../../utils/index.js';
@@ -10,7 +10,7 @@ export const useGamesQuery = (input, config) => {
         ...config,
         queryKey: getGamesQueryKey(input),
         queryFn: ({ pageParam, signal }) => {
-            return getGames({
+            return getGames__next({
                 ...input,
                 after: pageParam,
             }, {

package/dist/components/Account/Account.d.ts

@@ -11,6 +11,8 @@ export interface AccountProps {
      * ```
      */
     offsetTop?: string;
+    /** @default true */
+    shouldShowSettings?: boolean;
     /** @default '/rewards' */
     rewardsUrl?: string;
     /** @default '/bet-records' */

package/dist/components/Account/Account.js

@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useAccountQuery, useGlobalStore, useLocaleInfo, useSignOutMutation, useUnreadMessagesCountQuery, useWalletQuery, } from '../../client/hooks/index.js';
-import { AlertCircleIcon, ChevronRightIcon, CoinsStacked02Icon, CoinsSwap02Icon, Gift01Icon, Logout01Icon, Settings02Icon, XIcon, } from '../../icons/index.js';
+import { AlertCircleIcon, Bell01Icon, ChevronRightIcon, CoinsStacked02Icon, CoinsSwap02Icon, Gift01Icon, Logout01Icon, Settings02Icon, XIcon, } from '../../icons/index.js';
 import avatarPlaceholder from '../../images/placeholder-avatar.png';
 import { Badge, Button, Drawer, IconButton, Popover } from '../../ui/index.js';
 import { formatNumber, parseDecimal } from '../../utils/index.js';
@@ -21,6 +21,7 @@ export function Account(props) {
     const betRecordsUrl = props.betRecordsUrl ?? '/bet-records';
     const transactionsUrl = props.transactionsUrl ?? '/transactions';
     const accountSettingsUrl = props.accountSettingsUrl ?? '/account';
+    const shouldShowSettings = props.shouldShowSettings ?? true;
     const [mobileOffsetTop, desktopOffsetTop] = Array.isArray(props.offsetTop)
         ? props.offsetTop
         : [props.offsetTop ?? '0px', props.offsetTop ?? '0px'];
@@ -29,12 +30,12 @@ export function Account(props) {
                 }, lazyMount: true, unmountOnExit: true, children: [_jsx(Drawer.Trigger, { asChild: true, className: "lg:hidden", children: props.children ?? (_jsx(IconButton, { size: "sm", colorScheme: "gray", children: globalStore.account__mobile.open ? (_jsx(XIcon, {})) : (_jsx(Image, { src: avatarPlaceholder, alt: "", width: 100, height: 100, className: "size-10" })) })) }), _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsxs(Drawer.Content, { className: twMerge('relative', 'flex', 'flex-col', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'w-full', 'px-xl', 'py-6', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]'), style: {
                                     ['--offset-top-mobile']: mobileOffsetTop,
                                     ['--offset-top-desktop']: desktopOffsetTop,
-                                }, children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { rewardsUrl: rewardsUrl, betRecordsUrl: betRecordsUrl, transactionsUrl: transactionsUrl, accountSettingsUrl: accountSettingsUrl })] }) }) })] }), _jsxs(Popover.Root, { open: globalStore.account.open, onOpenChange: (details) => {
+                                }, children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { rewardsUrl: rewardsUrl, betRecordsUrl: betRecordsUrl, transactionsUrl: transactionsUrl, accountSettingsUrl: accountSettingsUrl, shouldShowSettings: shouldShowSettings })] }) }) })] }), _jsxs(Popover.Root, { open: globalStore.account.open, onOpenChange: (details) => {
                     globalStore.account.setOpen(details.open);
                 }, lazyMount: true, unmountOnExit: true, positioning: {
                     placement: 'bottom',
                     strategy: 'fixed',
-                }, children: [_jsx(Popover.Trigger, { className: "hidden lg:flex", asChild: true, children: props.children ?? (_jsx(IconButton, { size: "sm", colorScheme: "gray", children: _jsx(Image, { src: avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-10" }) })) }), _jsx(Portal, { children: _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "border-border-primary bg-bg-primary relative z-popover w-[23.438rem] overflow-hidden rounded-xl border p-xl ui-open:animate-fade-in ui-closed:animate-fade-out", children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { rewardsUrl: rewardsUrl, betRecordsUrl: betRecordsUrl, transactionsUrl: transactionsUrl, accountSettingsUrl: accountSettingsUrl })] }) }) })] })] }));
+                }, children: [_jsx(Popover.Trigger, { className: "hidden lg:flex", asChild: true, children: props.children ?? (_jsx(IconButton, { size: "sm", colorScheme: "gray", children: _jsx(Image, { src: avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-10" }) })) }), _jsx(Portal, { children: _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "border-border-primary bg-bg-primary relative z-popover w-[23.438rem] overflow-hidden rounded-xl border p-xl ui-open:animate-fade-in ui-closed:animate-fade-out", children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { rewardsUrl: rewardsUrl, betRecordsUrl: betRecordsUrl, transactionsUrl: transactionsUrl, accountSettingsUrl: accountSettingsUrl, shouldShowSettings: shouldShowSettings })] }) }) })] })] }));
 }
 function Profile() {
     const accountQuery = useAccountQuery();
@@ -54,16 +55,16 @@ function Wallet() {
     const depositBalance = parseDecimal(walletQuery.data?.balance, 0);
     const bonusBalance = parseDecimal(walletQuery.data?.bonus, 0);
     const totalBalance = depositBalance + bonusBalance;
-    return (_jsxs("div", { className: "border-border-primary bg-bg-tertiary mt-3 rounded-xl border p-xl", children: [_jsx("div", { className: "text-text-secondary-700 text-sm", children: "Total Balance" }), _jsx("div", { className: "text-3xl font-bold", children: formatNumber(totalBalance, {
-                    currency: localeInfo?.currency.code,
-                    minDecimalPlaces: 2,
-                }) }), _jsxs("div", { className: "mt-1.5 flex gap-7xl", children: [_jsxs("div", { children: [_jsx("p", { className: "text-text-secondary-700 text-2xs", children: "Deposit Balance" }), _jsx("p", { className: "text-medium text-text-primary-brand", children: formatNumber(depositBalance, {
-                                    currency: localeInfo?.currency.code,
-                                    minDecimalPlaces: 2,
-                                }) })] }), _jsxs("div", { children: [_jsx("p", { className: "text-text-secondary-700 text-2xs", children: "Bonus Balance" }), _jsx("p", { className: "text-medium text-text-primary-brand", children: formatNumber(bonusBalance, {
-                                    currency: localeInfo?.currency.code,
-                                    minDecimalPlaces: 2,
-                                }) })] })] }), _jsxs("div", { className: "mt-3 flex gap-lg", children: [_jsx(Button, { size: "xs", variant: "outline", onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "border-border-primary bg-bg-tertiary mt-3 rounded-xl border p-xl", children: [_jsx("div", { className: "text-text-secondary-700 text-sm", children: "Total Balance" }), _jsx("div", { className: "text-3xl font-bold", children: formatNumber(totalBalance, {
+                            currency: localeInfo?.currency.code,
+                            minDecimalPlaces: 2,
+                        }) }), _jsxs("div", { className: "mt-1.5 flex gap-7xl", children: [_jsxs("div", { children: [_jsx("p", { className: "text-text-secondary-700 text-2xs", children: "Deposit Balance" }), _jsx("p", { className: "text-medium text-text-primary-brand", children: formatNumber(depositBalance, {
+                                            currency: localeInfo?.currency.code,
+                                            minDecimalPlaces: 2,
+                                        }) })] }), _jsxs("div", { children: [_jsx("p", { className: "text-text-secondary-700 text-2xs", children: "Bonus Balance" }), _jsx("p", { className: "text-medium text-text-primary-brand", children: formatNumber(bonusBalance, {
+                                            currency: localeInfo?.currency.code,
+                                            minDecimalPlaces: 2,
+                                        }) })] })] })] }), ' ', _jsxs("div", { className: "mt-3 flex gap-lg", children: [_jsx(Button, { size: "xs", variant: "outline", onClick: () => {
                             globalStore.depositWithdrawal.setOpen(true);
                             globalStore.depositWithdrawal.setTab('WITHDRAWAL');
                             globalStore.profile.setOpen(false);
@@ -87,13 +88,13 @@ function Links(props) {
                                 globalStore.account.setOpen(false);
                                 globalStore.account__mobile.setOpen(false);
                                 globalStore.messages.setOpen(true);
-                            }, children: [_jsx(Logout01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Notifications" }), _jsx("span", { className: recipe.navItemBadge(), "data-type": "warning", children: unreadMessagesCountQuery.data ?? 0 }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }), _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.rewardsUrl, className: recipe.navItemLink(), onClick: () => {
+                            }, children: [_jsx(Bell01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Notifications" }), _jsx("span", { className: recipe.navItemBadge(), "data-type": "warning", children: unreadMessagesCountQuery.data ?? 0 }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }), _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.rewardsUrl, className: recipe.navItemLink(), onClick: () => {
                                 globalStore.account.setOpen(false);
                                 globalStore.account__mobile.setOpen(false);
-                            }, children: [_jsx(Gift01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Rewards" }), _jsx("span", { className: recipe.navItemBadge(), "data-type": "warning", children: "0" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) })] }), _jsx("ul", { children: _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.accountSettingsUrl, className: recipe.navItemLink(), onClick: () => {
+                            }, children: [_jsx(Gift01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Rewards" }), _jsx("span", { className: recipe.navItemBadge(), "data-type": "warning", children: "0" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) })] }), props.shouldShowSettings && (_jsx("ul", { children: _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.accountSettingsUrl, className: recipe.navItemLink(), onClick: () => {
                             globalStore.account.setOpen(false);
                             globalStore.account__mobile.setOpen(false);
-                        }, children: [_jsx(Settings02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Settings" }), _jsx("span", { className: recipe.navItemBadge(), "data-type": "error", children: _jsx(AlertCircleIcon, {}) }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }) }), _jsxs("ul", { children: [_jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.betRecordsUrl, className: recipe.navItemLink(), onClick: () => {
+                        }, children: [_jsx(Settings02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Settings" }), _jsx("span", { className: recipe.navItemBadge(), "data-type": "error", children: _jsx(AlertCircleIcon, {}) }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }) })), _jsxs("ul", { children: [_jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.betRecordsUrl, className: recipe.navItemLink(), onClick: () => {
                                 globalStore.account.setOpen(false);
                                 globalStore.account__mobile.setOpen(false);
                             }, children: [_jsx(CoinsStacked02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Bet Records" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }), _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.transactionsUrl, className: recipe.navItemLink(), onClick: () => {

package/dist/components/BetRecords/BetRecords.js

@@ -7,27 +7,28 @@ import { useReducer, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
 import { useBetRecordsQuery, useInfiniteQueryHelper, useLocaleInfo, } from '../../client/hooks/index.js';
+import { GAME_PROVIDER_DATA, GAME_TYPE_DATA, GAME_TYPES, } from '../../constants/index.js';
 import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, File02Icon, SpinnerIcon, } from '../../icons/index.js';
 import { Badge, DatePicker, IconButton, SegmentGroup, Select, Table, } from '../../ui/index.js';
 import { capitalize, formatNumber } from '../../utils/index.js';
 import { Empty } from '../Empty.js';
 export function BetRecords(props) {
     const [tab, setTab] = useState('all');
+    const gameTypes = props.gameTypes.map((type) => GAME_TYPE_DATA[type]);
+    const gameProviders = props.gameProviders.map((provider) => GAME_PROVIDER_DATA[provider]);
     const [state, setState] = useReducer((prev, next) => ({
         ...prev,
         ...next,
     }), {
         page: 1,
         pageSize: 10,
-        type: props.gameTypes[0],
+        type: gameTypes[0].id,
     });
     const localeInfo = useLocaleInfo();
     const providerCollection = createListCollection({
-        items: props.gameProviders,
-        itemToValue: (item) => item,
-        itemToString: (item) => capitalize(item, {
-            delimiter: capitalize.delimiters.UNDERSCORE,
-        }),
+        items: gameProviders,
+        itemToValue: (item) => item.id,
+        itemToString: (item) => item.name,
     });
     const { page, hasNextPage, hasPrevPage, next, prev, rows, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useBetRecordsQuery, {
         filter: {
@@ -61,13 +62,9 @@ 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) => {
                         firstPage();
                         setState({
-                            type: z
-                                .enum((props.gameTypes ?? []))
-                                .safeParse(details.value).data ?? null,
+                            type: z.enum(GAME_TYPES).safeParse(details.value).data ?? null,
                         });
-                    }, children: [props.gameTypes.map((type) => (_jsxs(SegmentGroup.Item, { value: type, children: [_jsx(SegmentGroup.ItemText, { children: capitalize(type, {
-                                        delimiter: capitalize.delimiters.UNDERSCORE,
-                                    }) }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }, type))), _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: [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();
@@ -116,9 +113,7 @@ export function BetRecords(props) {
                             sameWidth: true,
                         }, children: [_jsxs(Select.Trigger, { className: "w-full lg:w-[14rem]", children: [_jsx(Select.ValueText, { placeholder: "Game Vendor" }), _jsx(Select.Context, { children: (api) => (_jsx(_Fragment, { children: api.value.length ? (_jsx(Select.ClearTrigger, { asChild: true, children: _jsx("span", { onClick: (e) => {
                                                         e.stopPropagation();
-                                                    }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: providerCollection.items.map((provider) => (_jsxs(Select.Item, { item: provider, children: [_jsx(Select.ItemText, { children: capitalize(provider, {
-                                                            delimiter: capitalize.delimiters.UNDERSCORE,
-                                                        }) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, provider))) }) }) }) })] }), _jsxs(Select.Root, { collection: statusCollection, value: state.status ? [state.status] : [], onValueChange: (details) => {
+                                                    }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: providerCollection.items.map((provider) => (_jsxs(Select.Item, { item: provider, children: [_jsx(Select.ItemText, { children: provider.name }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, provider.id))) }) }) }) })] }), _jsxs(Select.Root, { collection: statusCollection, value: state.status ? [state.status] : [], onValueChange: (details) => {
                             const value = z
                                 .enum(BET_RECORD_STATUSES)
                                 .safeParse(details.value.at(0)).data;

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

@@ -1,11 +1,23 @@
+import type { GameProvider } from '@opexa/portal-sdk-core';
 import type { GameProviderData } from '../../types';
 export interface GameProvidersProps {
-    gameProviders: GameProviderData[];
+    gameProviders: GameProvider[];
     heading?: string;
     /**
-     * @default '/games'
+     * @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;

package/dist/components/GameProviders/GameProviders.js

@@ -5,8 +5,10 @@ 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 GameProviders(props) {
     const [emblaRef, emblaApi] = useEmblaCarousel({
         align: 'start',
@@ -28,6 +30,14 @@ export function GameProviders(props) {
         onSelect(emblaApi);
         emblaApi.on('reInit', onSelect).on('select', onSelect);
     }, [emblaApi, onSelect]);
-    const viewAllUrl = props.viewAllUrl ?? '/games/providers';
-    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: props.gameProviders.map((provider) => (_jsx(Link, { href: `${viewAllUrl}/${provider.slug}`, className: twMerge('bg-gray-800 flex w-full items-center rounded-md px-md py-sm lg:h-[5.75rem]', props.gameProviderContainerClass), children: _jsx(Image, { src: provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full', props.gameProviderImageClass) }) }, provider.id))) }) })] }));
+    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))) }) })] }));
 }

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

@@ -1,9 +1 @@
-import type { Jackpot } from '@opexa/portal-sdk-core';
-import type { GameProviderData } from '../../types';
-export interface JackpotItemProps {
-    jackpot: Jackpot;
-    /** @default "/jackpots" */
-    viewAllUrl?: string;
-    gameProviders: GameProviderData[];
-}
-export declare function JackpotItemDesktop({ jackpot, gameProviders, }: JackpotItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function JackpotItemDesktop(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Jackpots/JackpotItemDesktop.js

@@ -13,9 +13,11 @@ import { formatNumber, getPercentage, mask } from '../../utils/index.js';
 import styles from '../JackpotCounter/JackpotCounterItem.module.css';
 import { JackpotGameProviders } from './JackpotGameProviders.js';
 import { JackpotRules } from './JackpotRules.js';
+import { useJackpotContext } from './JackpotsContext.js';
 import { useJackpotItemData } from './useJackpotItemData.js';
-export function JackpotItemDesktop({ jackpot, gameProviders, }) {
-    const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, getAccumulatingJackpotDescription, starTierStyles, } = useJackpotItemData({ jackpot, gameProviders });
+export function JackpotItemDesktop() {
+    const jackpot = useJackpotContext();
+    const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, getAccumulatingJackpotDescription, starTierStyles, } = useJackpotItemData();
     return (_jsxs("div", { className: twMerge('bg-bg-tertiary border-border-primary rounded-2xl border'), children: [_jsxs("div", { className: twMerge('relative flex shrink-0 p-3 text-center lg:gap-4 lg:p-5'), children: [_jsxs("div", { className: "z-1 relative flex flex-1 flex-col", children: [_jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsxs("div", { className: "flex w-full flex-col", children: [_jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { children: [isPayingOut ? (_jsxs("div", { className: "border-utility-success-200 bg-utility-success-50 text-utility-success-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", children: [_jsx("span", { className: "full bg-utility-success-500 size-1.5 animate-pulse rounded" }), "Paying Out"] })) : (_jsxs("div", { className: "border-utility-blue-200 bg-utility-blue-50 text-utility-blue-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", children: [_jsx(ArrowNarrowUpRightIcon, { className: "text-utility-blue-500 size-3.5" }), "Accumulating"] })), _jsx("div", { className: "text-text-primary-900 mt-1 text-left text-lg font-medium lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: "bg-bg-primary text-brand-400 mt-1.5 w-fit rounded-md px-2 py-1 text-2xl font-bold lg:mt-2 lg:text-4xl", children: formatNumber(jackpotAmount, {
                                                                     currency: localeInfo.currency.code,
                                                                     minDecimalPlaces: 2,
@@ -35,7 +37,7 @@ export function JackpotItemDesktop({ jackpot, gameProviders, }) {
                                                 currency: localeInfo.currency.code,
                                                 compact: true,
                                             })} Play now for your chance to win big! 🔥`
-                                            : getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0) })] })] }), _jsxs("div", { className: "z-1 hidden flex-1 space-y-4 lg:block", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Image, { width: 24, height: 24, src: leaderboard, quality: 100, alt: "leaderboardIcon", className: "size-full h-auto w-6" }), _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: jackpotPayouts.length ? 'Leaderboard' : 'Starting soon!' })] }), _jsx(JackpotRules, { jackpotRules: jackpot.description })] }), _jsx("div", { className: twMerge('max-h-[272px] overflow-y-scroll', styles['scrollArea']), children: _jsx("div", { className: "border-gray-200 overflow-hidden rounded-xl", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium", children: [_jsx("th", { className: "w-[52px]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: jackpotPayouts.length ? (_jsx(_Fragment, { children: jackpotPayouts.map((jackpotPayout, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: i + 1 < 6 ? (_jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', starTierStyles[i].starColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: mask(jackpotPayout.member.name) }), _jsxs("td", { className: "border-border-secondary h-12 border-t-2", children: [jackpotPayout.multiplier, "x"] }), _jsx("td", { className: "border-border-secondary text-brand-400 h-12 border-t-2", children: formatNumber(jackpotPayout.amount, {
+                                            : getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0) })] })] }), _jsxs("div", { className: "z-1 hidden flex-1 space-y-4 lg:block", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Image, { width: 24, height: 24, src: leaderboard, quality: 100, alt: "leaderboardIcon", className: "size-full h-auto w-6" }), _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: jackpotPayouts.length ? 'Leaderboard' : 'Starting soon!' })] }), _jsx(JackpotRules, {})] }), _jsx("div", { className: twMerge('max-h-[272px] overflow-y-scroll', styles['scrollArea']), children: _jsx("div", { className: "border-gray-200 overflow-hidden rounded-xl", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium", children: [_jsx("th", { className: "w-[52px]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: jackpotPayouts.length ? (_jsx(_Fragment, { children: jackpotPayouts.map((jackpotPayout, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: i + 1 < 6 ? (_jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', starTierStyles[i].starColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: mask(jackpotPayout.member.name) }), _jsxs("td", { className: "border-border-secondary h-12 border-t-2", children: [jackpotPayout.multiplier, "x"] }), _jsx("td", { className: "border-border-secondary text-brand-400 h-12 border-t-2", children: formatNumber(jackpotPayout.amount, {
                                                                     currency: localeInfo.currency.code,
                                                                     minDecimalPlaces: 2,
                                                                     maxDecimalPlaces: 2,

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

@@ -1,9 +1 @@
-import type { Jackpot } from '@opexa/portal-sdk-core';
-import type { GameProviderData } from '../../types';
-export interface JackpotItemMobileProps {
-    jackpot: Jackpot;
-    /** @default "/jackpots" */
-    viewAllUrl?: string;
-    gameProviders: GameProviderData[];
-}
-export declare function JackpotItemMobile({ jackpot, gameProviders, }: JackpotItemMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare function JackpotItemMobile(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Jackpots/JackpotItemMobile.js

@@ -13,9 +13,11 @@ import { formatNumber, getPercentage, mask } from '../../utils/index.js';
 import styles from '../JackpotCounter/JackpotCounterItem.module.css';
 import { JackpotGameProviders } from './JackpotGameProviders.js';
 import { JackpotRules } from './JackpotRules.js';
+import { useJackpotContext } from './JackpotsContext.js';
 import { useJackpotItemData } from './useJackpotItemData.js';
-export function JackpotItemMobile({ jackpot, gameProviders, }) {
-    const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, getAccumulatingJackpotDescription, starTierStyles, } = useJackpotItemData({ jackpot, gameProviders });
+export function JackpotItemMobile() {
+    const jackpot = useJackpotContext();
+    const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, getAccumulatingJackpotDescription, starTierStyles, } = useJackpotItemData();
     const [isDetailsVisible, setIsDetailsVisible] = useState(false);
     return (_jsxs("div", { className: "bg-bg-primary border-border-primary rounded-2xl border", children: [_jsxs("div", { className: twMerge('bg-bg-tertiary relative flex shrink-0 rounded-2xl p-3 text-center lg:gap-4 lg:p-5'), children: [_jsxs("div", { className: "z-1 relative flex flex-1 flex-col", children: [_jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsx("div", { className: "flex w-full flex-col", children: _jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { children: [isPayingOut ? (_jsxs("div", { className: "border-utility-success-200 bg-utility-success-50 text-utility-success-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", children: [_jsx("span", { className: "full bg-utility-success-500 size-1.5 animate-pulse rounded" }), "Paying Out"] })) : (_jsxs("div", { className: "border-utility-blue-200 bg-utility-blue-50 text-utility-blue-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", children: [_jsx(ArrowNarrowUpRightIcon, { className: "text-utility-blue-500 size-3.5" }), "Accumulating"] })), _jsx("div", { className: "text-text-primary-900 mt-1 text-left text-lg font-medium lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: "bg-bg-primary text-brand-400 mt-1.5 w-fit rounded-md px-2 py-1 text-2xl font-bold lg:mt-2 lg:text-4xl", children: formatNumber(jackpotAmount, {
                                                                 currency: localeInfo.currency.code,
@@ -36,7 +38,7 @@ export function JackpotItemMobile({ jackpot, gameProviders, }) {
                                                         currency: localeInfo.currency.code,
                                                         minDecimalPlaces: 2,
                                                         maxDecimalPlaces: 2,
-                                                    }) })] })] }) })) : (_jsxs("div", { className: "bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4", children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "closeChest", className: "size-full h-auto w-[66px] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: "No winners yet" }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the tournament!" })] })] })), _jsx(Button, { variant: "outline", className: twMerge('mt-5.5 px-3.5 py-2.5 text-sm', isDetailsVisible ? 'hidden' : 'flex'), onClick: () => setIsDetailsVisible(!isDetailsVisible), children: _jsxs("div", { className: "flex gap-1.5", children: ["See Details", _jsx(ArrowNarrowDownIcon, { className: "size-5" })] }) })] }), isPayingOut && (_jsx("div", { className: twMerge(styles['light-rays'], 'absolute right-0 top-0 rounded-2xl [--light-rays-top:15%] lg:[--light-rays-top:150px]') }))] }), isDetailsVisible && (_jsxs("div", { children: [_jsxs("div", { className: "z-1 flex-1", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("div", { className: "flex gap-2", children: _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: jackpotPayouts.length ? 'Leaderboard' : 'Starting soon!' }) }), _jsx(JackpotRules, { jackpotRules: jackpot.description })] }), _jsx("div", { children: _jsx("div", { className: "border-gray-200 overflow-hidden", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-center text-xs font-medium", children: [_jsx("th", { className: "w-[52px]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: jackpotPayouts.length ? (_jsx(_Fragment, { children: jackpotPayouts.map((jackpotPayout, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-center text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: i + 1 < 6 ? (_jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', starTierStyles[i].starColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: mask(jackpotPayout.member.name) }), _jsxs("td", { className: "border-border-secondary h-12 border-t-2", children: [jackpotPayout.multiplier, "x"] }), _jsx("td", { className: "border-border-secondary text-brand-400 h-12 border-t-2", children: formatNumber(jackpotPayout.amount, {
+                                                    }) })] })] }) })) : (_jsxs("div", { className: "bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4", children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "closeChest", className: "size-full h-auto w-[66px] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: "No winners yet" }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the tournament!" })] })] })), _jsx(Button, { variant: "outline", className: twMerge('mt-5.5 px-3.5 py-2.5 text-sm', isDetailsVisible ? 'hidden' : 'flex'), onClick: () => setIsDetailsVisible(!isDetailsVisible), children: _jsxs("div", { className: "flex gap-1.5", children: ["See Details", _jsx(ArrowNarrowDownIcon, { className: "size-5" })] }) })] }), isPayingOut && (_jsx("div", { className: twMerge(styles['light-rays'], 'absolute right-0 top-0 rounded-2xl [--light-rays-top:15%] lg:[--light-rays-top:150px]') }))] }), isDetailsVisible && (_jsxs("div", { children: [_jsxs("div", { className: "z-1 flex-1", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("div", { className: "flex gap-2", children: _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: jackpotPayouts.length ? 'Leaderboard' : 'Starting soon!' }) }), _jsx(JackpotRules, {})] }), _jsx("div", { children: _jsx("div", { className: "border-gray-200 overflow-hidden", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-center text-xs font-medium", children: [_jsx("th", { className: "w-[52px]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: jackpotPayouts.length ? (_jsx(_Fragment, { children: jackpotPayouts.map((jackpotPayout, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-center text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: i + 1 < 6 ? (_jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', starTierStyles[i].starColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: mask(jackpotPayout.member.name) }), _jsxs("td", { className: "border-border-secondary h-12 border-t-2", children: [jackpotPayout.multiplier, "x"] }), _jsx("td", { className: "border-border-secondary text-brand-400 h-12 border-t-2", children: formatNumber(jackpotPayout.amount, {
                                                                     currency: localeInfo.currency.code,
                                                                     minDecimalPlaces: 2,
                                                                     maxDecimalPlaces: 2,

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

@@ -1,6 +1,5 @@
 import type { ReactNode } from 'react';
 export interface JackpotRulesProps {
     children?: ReactNode;
-    jackpotRules: string;
 }
 export declare function JackpotRules(props: JackpotRulesProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Jackpots/JackpotRules.js

@@ -4,6 +4,8 @@ import { Portal } from '@ark-ui/react';
 import { XIcon } from '../../icons/index.js';
 import { Flag06Icon } from '../../icons/Flag06Icon.js';
 import { Dialog } from '../../ui/index.js';
+import { useJackpotContext } from './JackpotsContext.js';
 export function JackpotRules(props) {
-    return (_jsxs(Dialog.Root, { lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsx(Dialog.Trigger, { asChild: true, children: props.children ?? (_jsx("button", { type: "button", className: "text-button-tertiary-fg flex text-sm font-semibold", children: "Jackpot Rules" })) }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto h-full w-full items-start lg:h-auto lg:w-[640px] lg:rounded-xl", children: [_jsxs("div", { className: "p-3xl", children: [_jsxs("div", { className: "mb-3 flex justify-between", children: [_jsx("div", { className: "bg-bg-tertiary border-border-primary flex h-12 w-12 items-center justify-center rounded-lg border", children: _jsx(Flag06Icon, { className: "text-text-tertiary-600 size-full p-3" }) }), _jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) })] }), _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: "Jackpot Rules" }), _jsx("div", { className: "text-text-tertiary-600 mt-1 text-sm", children: "Terms and Conditions" })] }), _jsx("div", { className: "border-gray-800 border-t-1 pb-3", children: _jsx("div", { dangerouslySetInnerHTML: { __html: props.jackpotRules }, className: "px-3xl py-3" }) })] }) })] })] }));
+    const jackpot = useJackpotContext();
+    return (_jsxs(Dialog.Root, { lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsx(Dialog.Trigger, { asChild: true, children: props.children ?? (_jsx("button", { type: "button", className: "text-button-tertiary-fg flex text-sm font-semibold", children: "Jackpot Rules" })) }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto h-full w-full items-start lg:h-auto lg:w-[640px] lg:rounded-xl", children: [_jsxs("div", { className: "p-3xl", children: [_jsxs("div", { className: "mb-3 flex justify-between", children: [_jsx("div", { className: "bg-bg-tertiary border-border-primary flex h-12 w-12 items-center justify-center rounded-lg border", children: _jsx(Flag06Icon, { className: "text-text-tertiary-600 size-full p-3" }) }), _jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) })] }), _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: "Jackpot Rules" }), _jsx("div", { className: "text-text-tertiary-600 mt-1 text-sm", children: "Terms and Conditions" })] }), _jsx("div", { className: "border-gray-800 border-t-1 pb-3", children: _jsx("div", { dangerouslySetInnerHTML: { __html: jackpot.description }, className: "px-3xl py-3" }) })] }) })] })] }));
 }

package/dist/components/Jackpots/Jackpots.client.js

@@ -5,6 +5,7 @@ import { useJackpotsQuery } from '../../client/hooks/index.js';
 import closeChest from '../../images/close-chest.png';
 import { JackpotItemDesktop } from './JackpotItemDesktop.js';
 import { JackpotItemMobile } from './JackpotItemMobile.js';
+import { JackpotContext, JackpotsPropsContext } from './JackpotsContext.js';
 export function Jackpots__client(props) {
     const jackpotsQuery = useJackpotsQuery({
         first: 100,
@@ -24,5 +25,5 @@ export function Jackpots__client(props) {
     const jackpots = jackpotsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
     if (jackpots.length <= 0)
         return null;
-    return (_jsxs("div", { className: props.className, children: [_jsx("div", { className: "mb-3 text-lg font-semibold lg:mb-4.5", children: props.heading ?? 'Jackpots' }), jackpots.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden flex-col gap-6 lg:flex", children: jackpots.map((jackpot) => (_jsx(JackpotItemDesktop, { gameProviders: props.gameProviders, jackpot: jackpot, viewAllUrl: props.viewAllUrl }, jackpot.id))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: jackpots.map((jackpot) => (_jsx(JackpotItemMobile, { gameProviders: props.gameProviders, jackpot: jackpot, viewAllUrl: props.viewAllUrl }, jackpot.id))) })] })) : (_jsxs("div", { className: "mt-11 flex flex-col items-center justify-center", children: [_jsx(Image, { width: 100, height: 100, src: closeChest, alt: "closeChest", quality: 100, className: "h-29.5 w-29.5 lg:h-25 lg:w-25 size-full mix-blend-luminosity" }), _jsx("div", { className: "text-text-primary-900 mt-4 text-base font-semibold", children: props.heading ?? 'Jackpots' }), _jsxs("div", { className: "text-text-tertiary-600 mt-1 text-center text-sm", children: ["No ", props.heading?.toLocaleLowerCase() ?? 'jackpots', " are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }))] }));
+    return (_jsx(JackpotsPropsContext, { value: props, children: _jsxs("div", { className: props.className, children: [_jsx("div", { className: "mb-3 text-lg font-semibold lg:mb-4.5", children: props.heading ?? 'Jackpots' }), jackpots.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden flex-col gap-6 lg:flex", children: jackpots.map((jackpot) => (_jsx(JackpotContext, { value: jackpot, children: _jsx(JackpotItemDesktop, {}) }, jackpot.id))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: jackpots.map((jackpot) => (_jsx(JackpotContext, { value: jackpot, children: _jsx(JackpotItemMobile, {}) }, jackpot.id))) })] })) : (_jsxs("div", { className: "mt-11 flex flex-col items-center justify-center", children: [_jsx(Image, { width: 100, height: 100, src: closeChest, alt: "closeChest", quality: 100, className: "h-29.5 w-29.5 lg:h-25 lg:w-25 size-full mix-blend-luminosity" }), _jsx("div", { className: "text-text-primary-900 mt-4 text-base font-semibold", children: props.heading ?? 'Jackpots' }), _jsxs("div", { className: "text-text-tertiary-600 mt-1 text-center text-sm", children: ["No ", props.heading?.toLocaleLowerCase() ?? 'jackpots', " are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }))] }) }));
 }

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

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

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

@@ -0,0 +1,4 @@
+import type { Jackpot } from '@opexa/portal-sdk-core';
+import type { JackpotsProps } from './Jackpots';
+export declare const JackpotsPropsContext: import("react").Context<JackpotsProps>, useJackpotsPropsContext: () => JackpotsProps;
+export declare const JackpotContext: import("react").Context<Jackpot>, useJackpotContext: () => Jackpot;

package/dist/components/Jackpots/JackpotsContext.js

@@ -0,0 +1,3 @@
+import { createContext } from '../../client/utils/index.js';
+export const [JackpotsPropsContext, useJackpotsPropsContext] = createContext();
+export const [JackpotContext, useJackpotContext] = createContext();

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

@@ -1,13 +1,7 @@
-import type { Jackpot } from '@opexa/portal-sdk-core';
-import type { GameProviderData } from '../../types';
-export interface JackpotItemProps {
-    jackpot: Jackpot;
-    gameProviders: GameProviderData[];
-}
-export declare function useJackpotItemData({ jackpot, gameProviders, }: JackpotItemProps): {
+export declare function useJackpotItemData(): {
     jackpotPayouts: import("@opexa/portal-sdk-core").JackpotPayout[];
     topJackpotPayout: import("@opexa/portal-sdk-core").JackpotPayout;
-    filteredGameProviders: GameProviderData[];
+    filteredGameProviders: import("../../types").GameProviderData[];
     localeInfo: import("../../utils").LocaleInfo;
     isPayingOut: boolean;
     jackpotAmount: string;

package/dist/components/Jackpots/useJackpotItemData.js

@@ -1,11 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+// useJackpotItemData.ts
 import { useCallback, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useLocaleInfo } from '../../client/hooks/index.js';
 import { useJackpotPayoutsQuery } from '../../client/hooks/useJackpotPayoutsQuery.js';
+import { GAME_PROVIDER_DATA } from '../../constants/index.js';
 import { ChevronLeftIcon, ChevronRightIcon } from '../../icons/index.js';
 import styles from '../JackpotCounter/JackpotCounterItem.module.css';
-export function useJackpotItemData({ jackpot, gameProviders, }) {
+import { useJackpotContext, useJackpotsPropsContext } from './JackpotsContext.js';
+export function useJackpotItemData() {
+    const jackpotsProps = useJackpotsPropsContext();
+    const jackpot = useJackpotContext();
+    const gameProviders = jackpotsProps.gameProviders.map((provider) => GAME_PROVIDER_DATA[provider]);
     const jackpotPayoutsQuery = useJackpotPayoutsQuery({
         first: 30,
         filter: {

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

@@ -1,6 +1,21 @@
+import type { GameProvider, GameType } from '@opexa/portal-sdk-core';
 import { type ImageProps } from 'next/image';
+import type { GameProviderData } 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);
 }
 export declare function Search(props: SearchProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Search/Search.js

@@ -2,12 +2,14 @@
 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, useGlobalStore } from '../../client/hooks/index.js';
+import { GAME_PROVIDER_DATA } from '../../constants/index.js';
 import { SearchLgIcon, XIcon } from '../../icons/index.js';
-import providerHacksaw from '../../images/hacksaw-gaming.png';
 import { Button, Dialog, Field, IconButton, Presence } from '../../ui/index.js';
+import { callIfFn } from '../../utils/index.js';
 import { GameLaunchTrigger } from '../GameLaunch/index.js';
 export function Search(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
@@ -18,20 +20,45 @@ export function Search(props) {
     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() ?? [];
-    return (_jsx(Dialog.Root, { open: globalStore.search.open, onOpenChange: (details) => globalStore.search.setOpen(details.open), 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) => {
+    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: [games.length <= 0 && _jsx(Alert, { message: "No results found" }), games.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "text-lg font-semibold", children: "Providers" }), _jsx("div", { className: "mb-3xl mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: _jsx("div", { className: "bg-gray-800 flex h-14 w-full items-center rounded-md", children: _jsx(Image, { src: providerHacksaw, alt: "", width: 100, height: 50, className: "mx-auto h-auto w-full" }) }) }), _jsx("h2", { className: "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" }) })] }))] })) })] }) })] }) }));
+                                                }, 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: () => {
+                                                                    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 })] }));

package/dist/components/TopWins/TopWins.client.js

@@ -17,7 +17,7 @@ export function TopWins__client(props) {
     return (_jsxs("div", { className: props.className, children: [_jsx("div", { className: "mb-3 text-lg font-semibold md:mb-4", children: props.heading ?? 'Recent Big Wins' }), _jsx("div", { ref: emblaRef, className: "relative lg:overflow-hidden", children: _jsx("div", { className: "flex gap-sm lg:gap-md", children: topWins.map((topWin) => (_jsxs("div", { className: "bg-bg-tertiary border-border-primary flex w-[calc((100%-(0.375rem*2))/3)] shrink-0 flex-col space-y-2 rounded-sm border p-2 text-center lg:w-[calc((100%-(0.5rem*5))/6)] xl:w-[calc((100%-(0.5rem*9))/10)]", children: [_jsx("div", { className: "mx-auto aspect-square w-full", children: topWin.game && (_jsx(Image, { width: 100, height: 100, src: getGameImageUrl(topWin.game), alt: "", className: "size-full rounded-sm object-cover" })) }), _jsxs("div", { className: "space-y-0.5", children: [_jsx("div", { className: "text-text-secondary-700 text-xs", children: topWin.member.name }), _jsx("div", { className: "text-text-primary-brand text-sm font-semibold", children: formatNumber(topWin.payout, {
                                             currency: localeInfo.currency.code,
                                             minDecimalPlaces: 2,
-                                        }) }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: formatNumber(topWin.multiplier, {
-                                            minDecimalPlaces: 2,
-                                        }) })] })] }, topWin.id))) }) })] }));
+                                        }) }), _jsxs("div", { className: "text-text-secondary-700 text-xs", children: [formatNumber(topWin.multiplier, {
+                                                minDecimalPlaces: 2,
+                                            }), "x"] })] })] }, topWin.id))) }) })] }));
 }

package/dist/components/Tournaments/TournamentDesktop.d.ts

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