@opexa/portal-components 0.0.93 → 0.0.95

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

@@ -4,8 +4,10 @@ export * from './useAvailablePromosQuery';
 export * from './useAvailableQuestsCountQuery';
 export * from './useAvailableQuestsQuery';
 export * from './useBetRecordsQuery';
+export * from './useBonusesCountQuery';
 export * from './useBonusesQuery';
 export * from './useBonusQuery';
+export * from './useCashbackBonusesCountQuery';
 export * from './useCashbackBonusesQuery';
 export * from './useCashbackBonusQuery';
 export * from './useCashbackQuery';

package/dist/client/hooks/index.js

@@ -4,8 +4,10 @@ export * from './useAvailablePromosQuery.js';
 export * from './useAvailableQuestsCountQuery.js';
 export * from './useAvailableQuestsQuery.js';
 export * from './useBetRecordsQuery.js';
+export * from './useBonusesCountQuery.js';
 export * from './useBonusesQuery.js';
 export * from './useBonusQuery.js';
+export * from './useCashbackBonusesCountQuery.js';
 export * from './useCashbackBonusesQuery.js';
 export * from './useCashbackBonusQuery.js';
 export * from './useCashbackQuery.js';

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

@@ -0,0 +1,2 @@
+import type { Query } from '../../types';
+export declare const useBonusesCountQuery: Query<number>;

package/dist/client/hooks/useBonusesCountQuery.js

@@ -0,0 +1,27 @@
+import { useQuery } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { getBonusesCount } from '../../services/index.js';
+import { getBonusesCountQueryKey } from '../../utils/index.js';
+import { getSession } from '../services/index.js';
+import { useSessionQuery } from './useSessionQuery.js';
+export const useBonusesCountQuery = (config) => {
+    const sessionQuery = useSessionQuery();
+    const query = useQuery({
+        ...config,
+        enabled: config?.enabled === false
+            ? false
+            : sessionQuery.data?.status === 'authenticated',
+        queryKey: getBonusesCountQueryKey(),
+        queryFn: async ({ signal }) => {
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            return await getBonusesCount({
+                signal,
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+        },
+    });
+    return query;
+};

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

@@ -0,0 +1,2 @@
+import type { Query } from '../../types';
+export declare const useCashbackBonusesCountQuery: Query<number>;

package/dist/client/hooks/useCashbackBonusesCountQuery.js

@@ -0,0 +1,26 @@
+import { useQuery } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { getCashbackBonusesCount } from '../../services/index.js';
+import { getCashbackBonusesCountQueryKey } from '../../utils/index.js';
+import { getSession } from '../services/index.js';
+import { useSessionQuery } from './useSessionQuery.js';
+export const useCashbackBonusesCountQuery = (config) => {
+    const sessionQuery = useSessionQuery();
+    return useQuery({
+        ...config,
+        enabled: config?.enabled === false
+            ? false
+            : sessionQuery.data?.status === 'authenticated',
+        queryKey: getCashbackBonusesCountQueryKey(),
+        queryFn: async ({ signal }) => {
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            return await getCashbackBonusesCount({
+                signal,
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+        },
+    });
+};

package/dist/client/hooks/useClaimCashbackBonusMutation.js

@@ -1,7 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { claimCashbackBonus } from '../../services/index.js';
-import { getCashbackBonusesQueryKey, getClaimCashbackBonusMutationKey, getQueryClient, } from '../../utils/index.js';
+import { getCashbackBonusesCountQueryKey, getCashbackBonusesQueryKey, getClaimCashbackBonusMutationKey, getQueryClient, } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 export const useClaimCashbackBonusMutation = (config) => {
     const queryClient = getQueryClient();
@@ -17,6 +17,9 @@ export const useClaimCashbackBonusMutation = (config) => {
                 },
             });
             queryClient.setQueryData(getCashbackBonusesQueryKey(), (prev) => prev?.filter((bonus) => bonus.id !== id));
+            queryClient.setQueryData(getCashbackBonusesCountQueryKey(), (prev) => {
+                return !prev ? 0 : prev > 0 ? prev - 1 : 0;
+            });
         },
     });
 };

package/dist/components/Account/Account.js

@@ -5,7 +5,7 @@ import Image from 'next/image';
 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 { useAccountQuery, useBonusesCountQuery, useCashbackBonusesCountQuery, useGlobalStore, useLocaleInfo, useProfileCompletionQuery, useSignOutMutation, useUnreadMessagesCountQuery, useWalletQuery, } from '../../client/hooks/index.js';
 import { AlertCircleIcon, Bell01Icon, ChevronRightIcon, CoinsStacked02Icon, CoinsSwap02Icon, Gift01Icon, Logout01Icon, Settings02Icon, } from '../../icons/index.js';
 import avatarPlaceholder from '../../images/placeholder-avatar.png';
 import { Badge, Button, Drawer, Popover } from '../../ui/index.js';
@@ -86,17 +86,26 @@ function Links(props) {
         messages: ctx.messages,
     })));
     const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, { refetchInterval: 5000 });
+    const unreadMessagesCount = unreadMessagesCountQuery.data ?? 0;
+    const profileCompletionQuery = useProfileCompletionQuery();
+    const profileCompletion = profileCompletionQuery.data;
+    const profileCompletionPercentage = parseDecimal(profileCompletion?.completionPercentage, 0);
+    const bonusesCountQuery = useBonusesCountQuery();
+    const bonusesCount = bonusesCountQuery.data ?? 0;
+    const cashbackBonusesCountQuery = useCashbackBonusesCountQuery();
+    const cashbackBonusesCount = cashbackBonusesCountQuery.data ?? 0;
+    const rewardsCount = bonusesCount + cashbackBonusesCount;
     return (_jsxs("nav", { className: recipe.nav({ className: 'mt-xl' }), children: [_jsxs("ul", { children: [_jsx("li", { className: recipe.navItemRoot(), children: _jsxs("button", { type: "button", className: recipe.navItemLink(), onClick: () => {
                                 globalStore.account.setOpen(false);
                                 globalStore.account__mobile.setOpen(false);
                                 globalStore.messages.setOpen(true);
-                            }, 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: () => {
+                            }, children: [_jsx(Bell01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Notifications" }), unreadMessagesCount > 0 && (_jsx("span", { className: recipe.navItemBadge(), "data-type": "warning", children: unreadMessagesCount })), _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() })] }) })] }), props.shouldShowSettings && (_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" }), rewardsCount > 0 && (_jsx("span", { className: recipe.navItemBadge(), "data-type": "warning", children: rewardsCount })), _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" }), profileCompletionPercentage < 100 && (_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/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 '../../../../types';
 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 '../../../../types';
 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/Jackpots/JackpotsCarousel/JackpotsCarousel.d.ts

@@ -1,9 +1,9 @@
 import { type CSSProperties } from 'react';
-export interface ClassNameEntries {
+interface ClassNameEntries {
     root?: string;
     itemRoot?: string;
 }
-export interface StyleEntries {
+interface StyleEntries {
     root?: CSSProperties;
     itemRoot?: CSSProperties;
 }
@@ -18,3 +18,4 @@ export interface JackpotsCarouselProps {
     animate?: boolean;
 }
 export declare function JackpotsCarousel({ style, className, ...props }: JackpotsCarouselProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarousel.js

@@ -56,7 +56,9 @@ export function JackpotsCarousel({ style, className, ...props }) {
     const jackpots = jackpotsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
     if (jackpots.length <= 0)
         return null;
-    const styles = isStyleEntries(style) ? style : { root: style };
+    const styles = isStyleEntries(style, ['root', 'itemRoot'])
+        ? style
+        : { root: style };
     const classNames = isString(className)
         ? { root: className }
         : (className ?? {});

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

@@ -1,11 +1,22 @@
 import { type ImageProps } from 'next/image';
+import type { CSSProperties } from 'react';
 import type { GameProvider } from '../../../types';
+interface ClassNameEntries {
+    root?: string;
+    itemRoot?: string;
+}
+interface StyleEntries {
+    root?: CSSProperties;
+    itemRoot?: CSSProperties;
+}
 export interface JackpotsListProps {
     layout: 'list';
     /** @default "Jackpots" */
     heading?: string;
-    className?: string;
+    className?: string | ClassNameEntries;
+    style?: CSSProperties | StyleEntries;
     gameProviders: GameProvider[];
     gameProviderImages?: Partial<Record<GameProvider, ImageProps['src']>>;
 }
-export declare function JackpotsList(props: JackpotsListProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function JackpotsList({ style, className, ...props }: JackpotsListProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/Jackpots/JackpotsList/JackpotsList.js

@@ -1,12 +1,14 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isString } from 'lodash-es';
 import Image, {} from 'next/image';
 import { useJackpotsQuery } from '../../../client/hooks/index.js';
 import closeChest from '../../../images/close-chest.png';
+import { isStyleEntries } from '../../../utils/index.js';
 import { JackpotsListItemContext, JackpotsListPropsContext, } from './JackpotsListContext.js';
 import { JackpotsListItemDesktop } from './JackpotsListItemDesktop.js';
 import { JackpotsListItemMobile } from './JackpotsListItemMobile.js';
-export function JackpotsList(props) {
+export function JackpotsList({ style, className, ...props }) {
     const jackpotsQuery = useJackpotsQuery({
         first: 100,
         filter: {
@@ -25,5 +27,11 @@ export function JackpotsList(props) {
     const jackpots = jackpotsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
     if (jackpots.length <= 0)
         return null;
-    return (_jsx(JackpotsListPropsContext, { 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(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotsListItemDesktop, {}) }, jackpot.id))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: jackpots.map((jackpot) => (_jsx(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotsListItemMobile, {}) }, 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!"] })] }))] }) }));
+    const styles = isStyleEntries(style, ['root', 'itemRoot'])
+        ? style
+        : { root: style };
+    const classNames = isString(className)
+        ? { root: className }
+        : (className ?? {});
+    return (_jsx(JackpotsListPropsContext, { value: props, children: _jsxs("div", { style: styles.root, className: classNames.root, 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(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotsListItemDesktop, { style: styles.itemRoot, className: classNames.itemRoot }) }, jackpot.id))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: jackpots.map((jackpot) => (_jsx(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotsListItemMobile, { style: styles.itemRoot, className: classNames.itemRoot }) }, 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/JackpotsList/JackpotsListItemDesktop.d.ts

@@ -1 +1,7 @@
-export declare function JackpotsListItemDesktop(): import("react/jsx-runtime").JSX.Element;
+import type { CSSProperties } from 'react';
+interface JackpotsListItemDesktopProps {
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function JackpotsListItemDesktop(props: JackpotsListItemDesktopProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Jackpots/JackpotsList/JackpotsListItemDesktop.js

@@ -14,10 +14,10 @@ import styles from './JackpotsListItem.module.css';
 import { JackpotsListItemGameProviders } from './JackpotsListItemGameProviders.js';
 import { JackpotsListItemRules } from './JackpotsListItemRules.js';
 import { useJackpotsListItemData } from './useJackpotsListItemData.js';
-export function JackpotsListItemDesktop() {
+export function JackpotsListItemDesktop(props) {
     const jackpot = useJackpotsListItemContext();
     const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, getAccumulatingJackpotDescription, starTierStyles, } = useJackpotsListItemData();
-    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, {
+    return (_jsxs("div", { style: props.style, className: twMerge('bg-bg-tertiary border-border-primary rounded-2xl border', props.className), 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,
                                                                     maxDecimalPlaces: 2,

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

@@ -1 +1,7 @@
-export declare function JackpotsListItemMobile(): import("react/jsx-runtime").JSX.Element;
+import { type CSSProperties } from 'react';
+interface JackpotsListItemMobileProps {
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function JackpotsListItemMobile(props: JackpotsListItemMobileProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Jackpots/JackpotsList/JackpotsListItemMobile.js

@@ -14,11 +14,11 @@ import styles from './JackpotsListItem.module.css';
 import { JackpotsListItemGameProviders } from './JackpotsListItemGameProviders.js';
 import { JackpotsListItemRules } from './JackpotsListItemRules.js';
 import { useJackpotsListItemData } from './useJackpotsListItemData.js';
-export function JackpotsListItemMobile() {
+export function JackpotsListItemMobile(props) {
     const jackpot = useJackpotsListItemContext();
     const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, getAccumulatingJackpotDescription, starTierStyles, } = useJackpotsListItemData();
     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, {
+    return (_jsxs("div", { style: props.style, className: twMerge('bg-bg-primary border-border-primary rounded-2xl border', props.className), children: [_jsxs("div", { className: "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,
                                                                 minDecimalPlaces: 2,
                                                                 maxDecimalPlaces: 2,

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

@@ -1,9 +1,26 @@
+import { type CSSProperties } from 'react';
+interface ClassNameEntries {
+    root?: string;
+    itemRoot?: string;
+    itemBadgeRoot?: string;
+    itemBadgeLabel?: string;
+    itemBadgeIcon?: string;
+}
+interface StyleEntries {
+    root?: CSSProperties;
+    itemRoot?: CSSProperties;
+    itemBadgeRoot?: CSSProperties;
+    itemBadgeLabel?: CSSProperties;
+    itemBadgeIcon?: CSSProperties;
+}
 export interface TournamentsCarouselProps {
     layout: 'carousel';
     /** @default "Tournaments" */
     heading?: string;
     /** @default "/tournaments" */
     viewAllUrl?: string;
-    className?: string;
+    className?: string | ClassNameEntries;
+    style?: CSSProperties | StyleEntries;
 }
-export declare function TournamentsCarousel(props: TournamentsCarouselProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function TournamentsCarousel({ style, className, ...props }: TournamentsCarouselProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/Tournaments/TournamentsCarousel/TournamentsCarousel.js

@@ -1,14 +1,16 @@
 '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 { useTournamentsQuery } from '../../../client/hooks/index.js';
 import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon, } from '../../../icons/index.js';
 import { Button } from '../../../ui/index.js';
+import { isStyleEntries } from '../../../utils/index.js';
 import { TournamentsCarouselItemContext } from './TournamentsCarouselContext.js';
 import { TournamentsCarouselItem } from './TournamentsCarouselItem.js';
-export function TournamentsCarousel(props) {
+export function TournamentsCarousel({ style, className, ...props }) {
     const [emblaRef, emblaApi] = useEmblaCarousel({
         align: 'start',
         slidesToScroll: 1,
@@ -47,5 +49,27 @@ export function TournamentsCarousel(props) {
     const tournaments = tournamentsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
     if (tournaments.length <= 0)
         return null;
-    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-lg font-semibold", children: props.heading ?? 'Tournaments' }), _jsxs("div", { className: "flex items-center md:gap-3xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/tournaments', 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, { 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-lg lg:overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-2.5", children: tournaments.map((tournament) => (_jsx(TournamentsCarouselItemContext, { value: tournament, children: _jsx(TournamentsCarouselItem, { viewAllUrl: props.viewAllUrl, className: "w-full" }) }, tournament.id))) }) })] }));
+    const styles = isStyleEntries(style, [
+        'root',
+        'itemRoot',
+        'itemBadgeRoot',
+        'itemBadgeLabel',
+        'itemBadgeIcon',
+    ])
+        ? style
+        : { root: style };
+    const classNames = isString(className)
+        ? { root: className }
+        : (className ?? {});
+    return (_jsxs("div", { className: classNames.root, style: styles.root, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-lg font-semibold", children: props.heading ?? 'Tournaments' }), _jsxs("div", { className: "flex items-center md:gap-3xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/tournaments', 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, { 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-lg lg:overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-2.5", children: tournaments.map((tournament) => (_jsx(TournamentsCarouselItemContext, { value: tournament, children: _jsx(TournamentsCarouselItem, { viewAllUrl: props.viewAllUrl, style: {
+                                root: styles.itemRoot,
+                                badgeIcon: styles.itemBadgeIcon,
+                                badgeRoot: styles.itemBadgeRoot,
+                                badgeLabel: styles.itemBadgeLabel,
+                            }, className: {
+                                root: classNames.itemRoot,
+                                badgeRoot: classNames.itemBadgeRoot,
+                                badgeLabel: classNames.itemBadgeLabel,
+                                badgeIcon: classNames.itemBadgeIcon,
+                            } }) }, tournament.id))) }) })] }));
 }

package/dist/components/Tournaments/TournamentsCarousel/TournamentsCarouselItem.d.ts

@@ -1,6 +1,21 @@
+import { type CSSProperties } from 'react';
+interface ClassNameEntries {
+    root?: string;
+    badgeRoot?: string;
+    badgeLabel?: string;
+    badgeIcon?: string;
+}
+interface StyleEntries {
+    root?: CSSProperties;
+    badgeRoot?: CSSProperties;
+    badgeLabel?: CSSProperties;
+    badgeIcon?: CSSProperties;
+}
 export interface TournamentsCarouselItemProps {
-    className?: string;
+    style?: CSSProperties | StyleEntries;
+    className?: string | ClassNameEntries;
     /** @default "/tournaments" */
     viewAllUrl?: string;
 }
-export declare function TournamentsCarouselItem({ className, viewAllUrl, }: TournamentsCarouselItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function TournamentsCarouselItem({ style, className, viewAllUrl, }: TournamentsCarouselItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Tournaments/TournamentsCarousel/TournamentsCarouselItem.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { pick } from 'lodash-es';
+import { isString, pick } from 'lodash-es';
 import Image from 'next/image';
 import Link from 'next/link';
 import React, { useEffect, useMemo, useState } from 'react';
@@ -11,10 +11,10 @@ import { StarIcon } from '../../../icons/StarIcon.js';
 import firstPlace from '../../../images/first-place.png';
 import trophyTwo from '../../../images/trophy-two.png';
 import trophy from '../../../images/trophy.png';
-import { formatNumber, mask } from '../../../utils/index.js';
+import { formatNumber, isStyleEntries, mask } from '../../../utils/index.js';
 import { useTournamentsCarouselItemContext } from './TournamentsCarouselContext.js';
-import styles from './TournamentsCarouselItem.module.css';
-export function TournamentsCarouselItem({ className, viewAllUrl, }) {
+import css from './TournamentsCarouselItem.module.css';
+export function TournamentsCarouselItem({ style, className, viewAllUrl, }) {
     const tournament = useTournamentsCarouselItemContext();
     const localeInfo = useLocaleInfo();
     const [timeRemaining, setTimeRemaining] = useState({
@@ -67,7 +67,18 @@ export function TournamentsCarouselItem({ className, viewAllUrl, }) {
         .map(Number)
         .reduce((sum, val) => sum + val, 0);
     const prizeAmountsByRank = Object.values(tournament.rewardSettings).map(Number);
-    return (_jsxs("div", { className: twMerge('bg-bg-tertiary border-border-primary relative flex shrink-0 rounded-2xl border p-3 text-center lg:gap-6 lg:p-5', className), children: [_jsx("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", { className: "w-full", children: [_jsxs("div", { className: "flex w-full justify-between", 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-full border px-2 py-0.5 text-xs font-medium", children: [_jsx(Award01Icon, { className: "text-utility-brand-500 size-3.5" }), "Multiplier"] }), _jsx("div", { className: "flex h-fit", children: timeParts.map((part, idx) => (_jsxs(React.Fragment, { children: [_jsxs("div", { className: twMerge('bg-bg-primary text-text-primary-900 flex h-fit w-8 flex-col items-center rounded-[4px] pb-1.5'), children: [_jsx("span", { className: "text-base font-medium", children: String(part.value).padStart(2, '0') }), _jsx("span", { className: "text-[8px]", children: part.label })] }), idx < timeParts.length - 1 && (_jsxs("div", { className: "flex flex-col justify-center gap-[6px] px-[6px]", children: [_jsx("div", { className: "bg-bg-primary h-1 w-1 rounded-full" }), _jsx("div", { className: "bg-bg-primary h-1 w-1 rounded-full" })] }))] }, part.label))) })] }), _jsxs("div", { className: "flex justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-text-primary-900 mt-2.5 text-left text-lg font-medium lg:mt-5 lg:text-2xl", children: tournament.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(tournamentReward, {
+    const styles = isStyleEntries(style, [
+        'root',
+        'badgeRoot',
+        'badgeLabel',
+        'badgeIcon',
+    ])
+        ? style
+        : { root: style };
+    const classNames = isString(className)
+        ? { root: className }
+        : (className ?? {});
+    return (_jsxs("div", { className: twMerge('bg-bg-tertiary border-border-primary relative flex w-full shrink-0 rounded-2xl border p-3 text-center lg:gap-6 lg:p-5', classNames.root), style: styles.root, children: [_jsx("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", { className: "w-full", children: [_jsxs("div", { className: "flex w-full justify-between", children: [_jsxs("div", { style: styles.badgeRoot, className: twMerge('border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium', classNames.badgeRoot), children: [_jsx(Award01Icon, { style: styles.badgeIcon, className: twMerge('text-utility-brand-500 size-3.5', classNames.badgeIcon) }), _jsx("span", { style: styles.badgeLabel, className: classNames.badgeLabel, children: "Multiplier" })] }), _jsx("div", { className: "flex h-fit", children: timeParts.map((part, idx) => (_jsxs(React.Fragment, { children: [_jsxs("div", { className: twMerge('bg-bg-primary text-text-primary-900 flex h-fit w-8 flex-col items-center rounded-[4px] pb-1.5'), children: [_jsx("span", { className: "text-base font-medium", children: String(part.value).padStart(2, '0') }), _jsx("span", { className: "text-[8px]", children: part.label })] }), idx < timeParts.length - 1 && (_jsxs("div", { className: "flex flex-col justify-center gap-[6px] px-[6px]", children: [_jsx("div", { className: "bg-bg-primary h-1 w-1 rounded-full" }), _jsx("div", { className: "bg-bg-primary h-1 w-1 rounded-full" })] }))] }, part.label))) })] }), _jsxs("div", { className: "flex justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-text-primary-900 mt-2.5 text-left text-lg font-medium lg:mt-5 lg:text-2xl", children: tournament.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(tournamentReward, {
                                                                         currency: localeInfo.currency.code,
                                                                         minDecimalPlaces: 2,
                                                                         maxDecimalPlaces: 2,
@@ -77,7 +88,7 @@ export function TournamentsCarouselItem({ className, viewAllUrl, }) {
                                                             maxDecimalPlaces: 2,
                                                         }) })] })] }) })) : (_jsxs("div", { className: "bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex", 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!" })] })] }))] }) }) }) }), _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 items-center gap-2", children: [_jsx(Image, { width: 24, height: 24, src: trophyTwo, quality: 100, alt: "leaderboardIcon", className: "size-full w-6" }), _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: tournament.currentLeaderboard.edges.length
                                             ? 'Leaderboard'
-                                            : 'Starting soon!' })] }), _jsxs(Link, { className: "text-button-tertiary-fg flex text-sm font-semibold", href: viewAllUrl ?? '/tournaments', children: ["See details", _jsx(ChevronRightIcon, { className: "size-5" })] })] }), _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: tournament.currentLeaderboard.edges.length ? (_jsx(_Fragment, { children: tournament.currentLeaderboard.edges.map((tournament, 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(tournament.node.username) }), _jsxs("td", { className: "border-border-secondary h-12 border-t-2", children: [tournament.node.multiplier, "x"] }), i + 1 <= prizeAmountsByRank.length ? (_jsx("td", { className: "border-border-secondary text-brand-400 h-12 border-t-2", children: formatNumber(prizeAmountsByRank[i], {
+                                            : 'Starting soon!' })] }), _jsxs(Link, { className: "text-button-tertiary-fg flex text-sm font-semibold", href: viewAllUrl ?? '/tournaments', children: ["See details", _jsx(ChevronRightIcon, { className: "size-5" })] })] }), _jsx("div", { className: twMerge('max-h-[272px] overflow-y-scroll', css['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: tournament.currentLeaderboard.edges.length ? (_jsx(_Fragment, { children: tournament.currentLeaderboard.edges.map((tournament, 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(tournament.node.username) }), _jsxs("td", { className: "border-border-secondary h-12 border-t-2", children: [tournament.node.multiplier, "x"] }), i + 1 <= prizeAmountsByRank.length ? (_jsx("td", { className: "border-border-secondary text-brand-400 h-12 border-t-2", children: formatNumber(prizeAmountsByRank[i], {
                                                             currency: localeInfo.currency.code,
                                                             minDecimalPlaces: 2,
                                                             maxDecimalPlaces: 2,

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

@@ -1,9 +1,26 @@
+import type { CSSProperties } from 'react';
 import type { GameProvider } from '../../../types';
+interface ClassNameEntries {
+    root?: string;
+    itemRoot?: string;
+    itemBadgeRoot?: string;
+    itemBadgeLabel?: string;
+    itemBadgeIcon?: string;
+}
+interface StyleEntries {
+    root?: CSSProperties;
+    itemRoot?: CSSProperties;
+    itemBadgeRoot?: CSSProperties;
+    itemBadgeLabel?: CSSProperties;
+    itemBadgeIcon?: CSSProperties;
+}
 export interface TournamentsListProps {
     layout: 'list';
     /** @default "Tournaments" */
     heading?: string;
-    className?: string;
+    className?: string | ClassNameEntries;
+    style?: CSSProperties | StyleEntries;
     gameProviders: GameProvider[];
 }
-export declare function TournamentsList(props: TournamentsListProps): import("react/jsx-runtime").JSX.Element;
+export declare function TournamentsList({ style, className, ...props }: TournamentsListProps): import("react/jsx-runtime").JSX.Element;
+export {};