@opexa/portal-components 0.0.93 → 0.0.94

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 {};

package/dist/components/Tournaments/TournamentsList/TournamentsList.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 { useTournamentsQuery } from '../../../client/hooks/index.js';
 import closeChest from '../../../images/close-chest.png';
+import { isStyleEntries } from '../../../utils/index.js';
 import { TournamentsListItemContext, TournamentsListPropsContext, } from './TournamentsListContext.js';
 import { TournamentsListItemDesktop } from './TournamentsListItemDesktop.js';
 import { TournamentsListItemMobile } from './TournamentsListItemMobile.js';
-export function TournamentsList(props) {
+export function TournamentsList({ style, className, ...props }) {
     const tournamentsQuery = useTournamentsQuery({
         first: 100,
         filter: {
@@ -16,5 +18,37 @@ export function TournamentsList(props) {
         },
     });
     const tournaments = tournamentsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
-    return (_jsx(TournamentsListPropsContext, { 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 ?? 'Tournaments' }), tournaments.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden flex-col gap-6 lg:flex", children: tournaments.map((tournament) => (_jsx(TournamentsListItemContext, { value: tournament, children: _jsx(TournamentsListItemDesktop, {}) }, tournament.id))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: tournaments.map((tournament) => (_jsx(TournamentsListItemContext, { value: tournament, children: _jsx(TournamentsListItemMobile, {}) }, tournament.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 ?? 'Tournaments' }), _jsxs("div", { className: "text-text-tertiary-600 mt-1 text-center text-sm", children: ["No ", props.heading?.toLocaleLowerCase() ?? 'tournaments', " are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }))] }) }));
+    const styles = isStyleEntries(style, [
+        'root',
+        'itemRoot',
+        'itemBadgeRoot',
+        'itemBadgeLabel',
+        'itemBadgeIcon',
+    ])
+        ? style
+        : { root: style };
+    const classNames = isString(className)
+        ? { root: className }
+        : (className ?? {});
+    return (_jsx(TournamentsListPropsContext, { 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 ?? 'Tournaments' }), tournaments.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden flex-col gap-6 lg:flex", children: tournaments.map((tournament) => (_jsx(TournamentsListItemContext, { value: tournament, children: _jsx(TournamentsListItemDesktop, { 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))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: tournaments.map((tournament) => (_jsx(TournamentsListItemContext, { value: tournament, children: _jsx(TournamentsListItemMobile, { 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))) })] })) : (_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 ?? 'Tournaments' }), _jsxs("div", { className: "text-text-tertiary-600 mt-1 text-center text-sm", children: ["No ", props.heading?.toLocaleLowerCase() ?? 'tournaments', " are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }))] }) }));
 }

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

@@ -1 +1,19 @@
-export declare function TournamentsListItemDesktop(): import("react/jsx-runtime").JSX.Element;
+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;
+}
+interface TournamentsListItemDesktopProps {
+    style?: CSSProperties | StyleEntries;
+    className?: string | ClassNameEntries;
+}
+export declare function TournamentsListItemDesktop({ style, className, }: TournamentsListItemDesktopProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Tournaments/TournamentsList/TournamentsListItemDesktop.js

@@ -1,21 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isString } from 'lodash-es';
 import Image from 'next/image';
-import React from 'react';
+import React, {} from 'react';
 import { twMerge } from 'tailwind-merge';
 import { Award01Icon, StarIcon, Trophy01Icon, User01Icon, } from '../../../icons/index.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 styles from './TournamentItem.module.css';
+import { formatNumber, isStyleEntries, mask } from '../../../utils/index.js';
+import css from './TournamentItem.module.css';
 import { useTournamentsListItemContext } from './TournamentsListContext.js';
 import { TournamentsListItemGameProviders } from './TournamentsListItemGameProviders.js';
 import { TournamentsListItemRules } from './TournamentsListItemRules.js';
 import { useTournamentsListItemData } from './useTournamentListItemData.js';
-export function TournamentsListItemDesktop() {
+export function TournamentsListItemDesktop({ style, className, }) {
     const tournament = useTournamentsListItemContext();
     const { prizeAmountsByRank, timeParts, tournamentReward, filteredGameProviders, localeInfo, } = useTournamentsListItemData();
-    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-6 lg:p-5'), 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))) })] }), _jsx("div", { className: "text-text-primary-900 mt-1 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", { style: styles.root, className: twMerge('bg-bg-tertiary border-border-primary rounded-2xl border', classNames.root), children: [_jsxs("div", { className: twMerge('relative flex shrink-0 p-3 text-center lg:gap-6 lg:p-5'), 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))) })] }), _jsx("div", { className: "text-text-primary-900 mt-1 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,
@@ -25,7 +37,7 @@ export function TournamentsListItemDesktop() {
                                                                     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!' })] }), _jsx(TournamentsListItemRules, {})] }), _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!' })] }), _jsx(TournamentsListItemRules, {})] }), _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/TournamentsListItemMobile.d.ts

@@ -1 +1,19 @@
-export declare function TournamentsListItemMobile(): import("react/jsx-runtime").JSX.Element;
+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;
+}
+interface TournamentsListItemMobileProps {
+    style?: CSSProperties | StyleEntries;
+    className?: string | ClassNameEntries;
+}
+export declare function TournamentsListItemMobile({ style, className, }: TournamentsListItemMobileProps): import("react/jsx-runtime").JSX.Element;
+export {};