@opexa/portal-components 0.0.99 → 0.0.101

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

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

package/dist/components/Search/SearchTrigger.js

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

package/dist/components/SignIn/MobileNumberSignIn.js

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

package/dist/components/SignIn/NameAndPasswordSignIn.js

@@ -4,18 +4,27 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
-import { useAuthenticateMutation, useGlobalStore, useSignInMutation, } from '../../client/hooks/index.js';
-import { toaster } from '../../client/utils/index.js';
+import { useAuthenticateMutation } from '../../client/hooks/useAuthenticateMutation.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useSignInMutation } from '../../client/hooks/useSignInMutation.js';
+import { toaster } from '../../client/utils/toaster.js';
 import { SECRET_QUESTIONS, SECRET_QUESTIONS_MAP } from '../../constants/index.js';
-import { CheckIcon, EyeIcon, EyeOffIcon, FacebookIcon, GoogleIcon, } from '../../icons/index.js';
-import { Button, Checkbox, Field, PasswordInput } from '../../ui/index.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import { EyeIcon } from '../../icons/EyeIcon.js';
+import { EyeOffIcon } from '../../icons/EyeOffIcon.js';
+import { FacebookIcon } from '../../icons/FacebookIcon.js';
+import { GoogleIcon } from '../../icons/GoogleIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Checkbox } from '../../ui/Checkbox/index.js';
+import { Field } from '../../ui/Field/index.js';
+import { PasswordInput } from '../../ui/PasswordInput/index.js';
 import { useSignInContext } from './SignInContext.js';
 export function NameAndPasswordSignIn() {
     const context = useSignInContext();
     const dialog = useDialogContext();
-    const globalStore = useGlobalStore(useShallow((popups) => ({
-        signIn: popups.signIn,
-        signUp: popups.signUp,
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        signIn: ctx.signIn,
+        signUp: ctx.signUp,
     })));
     const signInMutation = useSignInMutation({
         onSuccess(authenticator) {

package/dist/components/SignIn/SignIn.d.ts

@@ -1,7 +1,3 @@
-import { type ImageProps } from 'next/image';
-import type { ReactNode } from 'react';
-export interface SignInProps {
-    logo: ImageProps['src'];
-    children?: ReactNode;
-}
-export declare function SignIn(props: SignInProps): import("react/jsx-runtime").JSX.Element;
+import type { SignInProps } from './SignIn.lazy';
+export declare function SignIn(props: SignInProps): import("react/jsx-runtime").JSX.Element | undefined;
+export type { SignInProps };

package/dist/components/SignIn/SignIn.js

@@ -1,18 +1,14 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Portal } from '@ark-ui/react';
-import Image, {} from 'next/image';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks/index.js';
-import { XIcon } from '../../icons/index.js';
-import { Dialog } from '../../ui/index.js';
-import { SignInContext } from './SignInContext.js';
-import { SignInForm } from './SignInForm.js';
-import { useSignIn } from './useSignIn.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+const Component = dynamic(() => import('./SignIn.lazy.js').then((m) => m.SignIn), {
+    ssr: false,
+    loading: () => null,
+});
 export function SignIn(props) {
-    const signIn = useSignIn();
-    const signInStore = useGlobalStore(useShallow((popups) => popups.signIn));
-    return (_jsx(SignInContext, { value: signIn, children: _jsx(Dialog.Root, { open: signInStore.open, onOpenChange: (details) => {
-                signInStore.setOpen(details.open);
-            }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto h-full w-full items-start p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-7.5 w-auto", draggable: false }), _jsx(SignInForm, {})] }) })] }) }) }));
+    const touched = useGlobalStore(useShallow((ctx) => ctx.signIn['~touched']));
+    if (touched)
+        return _jsx(Component, { ...props });
 }

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

@@ -0,0 +1,7 @@
+import { type ImageProps } from 'next/image';
+import type { ReactNode } from 'react';
+export interface SignInProps {
+    logo: ImageProps['src'];
+    children?: ReactNode;
+}
+export declare function SignIn(props: SignInProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/SignIn.lazy.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
+import Image, {} from 'next/image';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { SignInContext } from './SignInContext.js';
+import { SignInForm } from './SignInForm.js';
+import { useSignIn } from './useSignIn.js';
+export function SignIn(props) {
+    const signIn = useSignIn();
+    const signInStore = useGlobalStore(useShallow((ctx) => ctx.signIn));
+    return (_jsx(SignInContext, { value: signIn, children: _jsx(Dialog.Root, { open: signInStore.open, onOpenChange: (details) => {
+                signInStore.setOpen(details.open);
+            }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto h-full w-full items-start p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-7.5 w-auto", draggable: false }), _jsx(SignInForm, {})] }) })] }) }) }));
+}

package/dist/components/SignIn/SignInContext.js

@@ -1,2 +1,2 @@
-import { createContext } from '../../client/utils/index.js';
+import { createContext } from '../../client/utils/createContext.js';
 export const [SignInContext, useSignInContext] = createContext();

package/dist/components/SignIn/SignInMethod.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { z } from 'zod';
-import { SegmentGroup } from '../../ui/index.js';
+import { SegmentGroup } from '../../ui/SegmentGroup/index.js';
 import { useSignInContext } from './SignInContext.js';
 const METHODS = [
     'MOBILE_NUMBER',

package/dist/components/SignIn/SignInTrigger.js

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

package/dist/components/SignUp/SignUp.d.ts

@@ -1,7 +1,3 @@
-import { type ImageProps } from 'next/image';
-import { type ReactNode } from 'react';
-export interface SignUpProps {
-    logo: ImageProps['src'];
-    children?: ReactNode;
-}
-export declare function SignUp(props: SignUpProps): import("react/jsx-runtime").JSX.Element;
+import type { SignUpProps } from './SignUp.lazy';
+export declare function SignUp(props: SignUpProps): import("react/jsx-runtime").JSX.Element | undefined;
+export type { SignUpProps };

package/dist/components/SignUp/SignUp.js

@@ -1,16 +1,14 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Portal } from '@ark-ui/react';
-import Image, {} from 'next/image';
-import { Suspense } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks/index.js';
-import { XIcon } from '../../icons/index.js';
-import { Dialog } from '../../ui/index.js';
-import { SignUpForm } from './SignUpForm.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+const Component = dynamic(() => import('./SignUp.lazy.js').then((m) => m.SignUp), {
+    ssr: false,
+    loading: () => null,
+});
 export function SignUp(props) {
-    const signUpStore = useGlobalStore(useShallow((popups) => popups.signUp));
-    return (_jsx(Dialog.Root, { open: signUpStore.open, onOpenChange: (details) => {
-            signUpStore.setOpen(details.open);
-        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto h-full w-full items-start p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsx(Suspense, { children: _jsx(SignUpForm, {}) })] }) })] }) }));
+    const touched = useGlobalStore(useShallow((ctx) => ctx.signUp['~touched']));
+    if (touched)
+        return _jsx(Component, { ...props });
 }

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

@@ -0,0 +1,7 @@
+import { type ImageProps } from 'next/image';
+import { type ReactNode } from 'react';
+export interface SignUpProps {
+    logo: ImageProps['src'];
+    children?: ReactNode;
+}
+export declare function SignUp(props: SignUpProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SignUp/SignUp.lazy.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
+import Image, {} from 'next/image';
+import { Suspense } from 'react';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { SignUpForm } from './SignUpForm.js';
+export function SignUp(props) {
+    const signUpStore = useGlobalStore(useShallow((ctx) => ctx.signUp));
+    return (_jsx(Dialog.Root, { open: signUpStore.open, onOpenChange: (details) => {
+            signUpStore.setOpen(details.open);
+        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto h-full w-full items-start p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsx(Suspense, { children: _jsx(SignUpForm, {}) })] }) })] }) }));
+}

package/dist/components/SignUp/SignUpForm.js

@@ -8,16 +8,26 @@ import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
-import { useCooldown, useGlobalStore, useLocaleInfo, useMobileNumberParser, useSendVerificationCodeMutation, useSignInMutation, useSignUpMutation, } from '../../client/hooks/index.js';
-import { toaster } from '../../client/utils/index.js';
-import { ArrowLeftIcon, CheckIcon } from '../../icons/index.js';
+import { useCooldown } from '../../client/hooks/useCooldown.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useMobileNumberParser } from '../../client/hooks/useMobileNumberParser.js';
+import { useSendVerificationCodeMutation } from '../../client/hooks/useSendVerificationCodeMutation.js';
+import { useSignInMutation } from '../../client/hooks/useSignInMutation.js';
+import { useSignUpMutation } from '../../client/hooks/useSignUpMutation.js';
+import { toaster } from '../../client/utils/toaster.js';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
 import { ObjectType } from '../../services/ObjectType.js';
-import { Button, Checkbox, Field, PinInput } from '../../ui/index.js';
+import { Button } from '../../ui/Button/index.js';
+import { Checkbox } from '../../ui/Checkbox/index.js';
+import { Field } from '../../ui/Field/index.js';
+import { PinInput } from '../../ui/PinInput/index.js';
 export function SignUpForm() {
     const [step, setStep] = useState(1);
     const dialog = useDialogContext();
     const search = useSearchParams();
-    const signInStore = useGlobalStore(useShallow((popups) => popups.signIn));
+    const signInStore = useGlobalStore(useShallow((ctx) => ctx.signIn));
     const signUpMutation = useSignUpMutation();
     const signInMutation = useSignInMutation();
     const sendVerificationCodeMutation = useSendVerificationCodeMutation();

package/dist/components/SignUp/SignUpTrigger.js

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

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

@@ -1,2 +1,6 @@
-import type { TopWinsProps } from './TopWins';
+export interface TopWinsProps {
+    /** @default "Recent Big Wins" */
+    heading?: string;
+    className?: string;
+}
 export declare function TopWins__client(props: TopWinsProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -2,8 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import useEmblaCarousel from 'embla-carousel-react';
 import Image from 'next/image';
-import { useLocaleInfo, useTopWinsQuery } from '../../client/hooks/index.js';
-import { formatNumber, getGameImageUrl } from '../../utils/index.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useTopWinsQuery } from '../../client/hooks/useTopWinsQuery.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
 export function TopWins__client(props) {
     const localeInfo = useLocaleInfo();
     const topWinsQuery = useTopWinsQuery();
@@ -14,7 +16,10 @@ export function TopWins__client(props) {
     });
     if (!topWins?.length)
         return null;
-    return (_jsxs("div", { className: props.className, children: [_jsx("div", { className: "mb-3 text-lg font-semibold md:mb-4", children: props.heading ?? 'Recent Big Wins' }), _jsx("div", { ref: emblaRef, className: "relative lg:overflow-hidden", children: _jsx("div", { className: "flex gap-sm lg:gap-md", children: topWins.map((topWin) => (_jsxs("div", { className: "bg-bg-tertiary border-border-primary flex w-[calc((100%-(0.375rem*2))/3)] shrink-0 flex-col space-y-2 rounded-sm border p-2 text-center lg:w-[calc((100%-(0.5rem*5))/6)] xl:w-[calc((100%-(0.5rem*9))/10)]", children: [_jsx("div", { className: "mx-auto aspect-square w-full", children: topWin.game && (_jsx(Image, { width: 100, height: 100, src: getGameImageUrl(topWin.game), alt: "", className: "size-full rounded-sm object-cover" })) }), _jsxs("div", { className: "space-y-0.5", children: [_jsx("div", { className: "text-text-secondary-700 text-xs", children: topWin.member.name }), _jsx("div", { className: "text-text-primary-brand text-sm font-semibold", children: formatNumber(topWin.payout, {
+    return (_jsxs("div", { className: props.className, children: [_jsx("div", { className: "mb-3 text-lg font-semibold md:mb-4", children: props.heading ?? 'Recent Big Wins' }), _jsx("div", { ref: emblaRef, className: "relative lg:overflow-hidden", children: _jsx("div", { className: "flex gap-sm lg:gap-md", children: topWins.map((topWin) => (_jsxs("div", { className: "bg-bg-tertiary border-border-primary flex w-[calc((100%-(0.375rem*2))/3)] shrink-0 flex-col space-y-2 rounded-sm border p-2 text-center lg:w-[calc((100%-(0.5rem*5))/6)] xl:w-[calc((100%-(0.5rem*9))/10)]", children: [_jsx("div", { className: "mx-auto aspect-square w-full", children: topWin.game && (_jsx(Image, { width: 100, height: 100, src: getGameImageUrl({
+                                        id: topWin.game.id,
+                                        provider: topWin.game.provider,
+                                    }), alt: "", className: "size-full rounded-sm object-cover" })) }), _jsxs("div", { className: "space-y-0.5", children: [_jsx("div", { className: "text-text-secondary-700 text-xs", children: topWin.member.name }), _jsx("div", { className: "text-text-primary-brand text-sm font-semibold", children: formatNumber(topWin.payout, {
                                             currency: localeInfo.currency.code,
                                             minDecimalPlaces: 2,
                                         }) }), _jsxs("div", { className: "text-text-secondary-700 text-xs", children: [formatNumber(topWin.multiplier, {

package/dist/components/TopWins/TopWins.d.ts

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

package/dist/components/TopWins/TopWins.js

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

package/dist/components/TournamentCounter/TournamentCounterItem.d.ts

@@ -1,4 +1,4 @@
-import type { Tournament } from '../../types';
+import type { Tournament } from '@opexa/portal-sdk-core';
 export interface TournamentCounterItemProps {
     tournament: Tournament;
     className?: string;

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

@@ -0,0 +1,7 @@
+import type { Tournament } from '@opexa/portal-sdk-core';
+import type { GameProviderData } from '../../types';
+export interface TournamentItemProps {
+    tournament: Tournament;
+    gameProviders: GameProviderData[];
+}
+export declare function TournamentItemDesktop({ tournament, gameProviders, }: TournamentItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tournaments/TournamentItemDesktop.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Image from 'next/image';
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Trophy01Icon, User01Icon } from '../../icons/index.js';
+import { Award01Icon } from '../../icons/Award01Icon.js';
+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 styles from '../JackpotCounter/JackpotCounterItem.module.css';
+import { TournamentGameProviders } from './TournamentGameProviders.js';
+import { TournamentRules } from './TournamentRules.js';
+import { useTournamentItemData } from './useTournamentItemData.js';
+export function TournamentItemDesktop({ tournament, gameProviders, }) {
+    const { prizeAmountsByRank, timeParts, tournamentReward, filteredGameProviders, localeInfo, } = useTournamentItemData({ tournament, gameProviders });
+    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, {
+                                                                currency: localeInfo.currency.code,
+                                                                minDecimalPlaces: 2,
+                                                                maxDecimalPlaces: 2,
+                                                            }) })] }), _jsx("div", { className: "z-1 bottom-[-60] right-0 block lg:absolute", children: _jsx("div", { className: "h-[155px] w-auto shrink-0", children: _jsx(Image, { quality: 100, width: 155, height: 155, src: trophy, alt: "trophy", className: "px-6 py-2.5" }) }) })] }), tournament.topPayouts.length ? (_jsx("div", { children: _jsxs("div", { className: "bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex", children: [_jsxs("div", { className: "bg-bg-tertiary relative flex h-18 w-18 items-center justify-center rounded-full", children: [_jsx(User01Icon, { className: "text-text-quarterary-500 size-9" }), _jsx("div", { className: "bg-yellow-400 text-brand-950 border-bg-primary absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] text-xs font-bold", children: "1st" })] }), _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: mask(tournament?.topPayouts[0]?.member?.name || '') }), _jsx("div", { className: "text-brand-400 text-2xl", children: formatNumber(tournament?.topPayouts[0]?.amount, {
+                                                                    currency: localeInfo.currency.code,
+                                                                    minDecimalPlaces: 2,
+                                                                    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(TournamentRules, { jackpotRules: tournament.description })] }), _jsx("div", { className: twMerge('max-h-[272px] overflow-y-scroll', styles['scrollArea']), children: _jsx("div", { className: "border-gray-200 overflow-hidden rounded-xl", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium", children: [_jsx("th", { className: "w-[52px]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: 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,
+                                                                }) })) : (_jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }))] }, i))) })) : (_jsx(_Fragment, { children: Array.from({ length: 10 }).map((_, 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: "-" }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" })] }, i))) })) })] }) }) })] })] }), Boolean(filteredGameProviders.length) && (_jsx(TournamentGameProviders, { gameProviders: filteredGameProviders }))] }));
+}
+const starTierStyles = [
+    {
+        starColor: 'text-yellow-400',
+        numberColor: 'text-bg-primary',
+    },
+    {
+        starColor: 'text-utility-gray-700',
+        numberColor: 'text-bg-primary',
+    },
+    {
+        starColor: 'text-yellow-700',
+        numberColor: 'text-bg-primary',
+    },
+    {
+        starColor: 'text-bg-quaternary',
+        numberColor: 'text-text-primary-900',
+    },
+    {
+        starColor: 'text-bg-quaternary',
+        numberColor: 'text-text-primary-900',
+    },
+];

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

@@ -0,0 +1,7 @@
+import type { Tournament } from '@opexa/portal-sdk-core';
+import type { GameProviderData } from '../../types';
+export interface TournamentItemMobileProps {
+    tournament: Tournament;
+    gameProviders: GameProviderData[];
+}
+export declare function TournamentItemMobile({ tournament, gameProviders, }: TournamentItemMobileProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tournaments/TournamentItemMobile.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Image from 'next/image';
+import React, { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { ArrowNarrowDownIcon, ArrowNarrowUpIcon, Award01Icon, StarIcon, Trophy01Icon, User01Icon, } from '../../icons/index.js';
+import firstPlace from '../../images/first-place.png';
+import trophy from '../../images/trophy.png';
+import { Button } from '../../ui/index.js';
+import { formatNumber, mask } from '../../utils/index.js';
+import { TournamentGameProviders } from './TournamentGameProviders.js';
+import { TournamentRules } from './TournamentRules.js';
+import { useTournamentItemData } from './useTournamentItemData.js';
+export function TournamentItemMobile({ tournament, gameProviders, }) {
+    const [isDetailsVisible, setIsDetailsVisible] = useState(false);
+    const { prizeAmountsByRank, timeParts, tournamentReward, filteredGameProviders, localeInfo, } = useTournamentItemData({ tournament, gameProviders });
+    return (_jsxs("div", { className: "bg-bg-primary border-border-primary rounded-2xl border", children: [_jsx("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", { 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-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,
+                                                        }) })] }), _jsx("div", { className: "z-1 absolute bottom-[-60] right-0", children: _jsx(Image, { width: 72.94, height: 93, src: trophy, alt: "trophy", quality: 100, className: "size-full" }) })] }) }) }) }), tournament.topPayouts.length ? (_jsx("div", { children: _jsxs("div", { className: "bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4", children: [_jsxs("div", { className: "bg-bg-tertiary relative flex h-18 w-18 items-center justify-center rounded-full", children: [_jsx(User01Icon, { className: "text-text-quarterary-500 size-9" }), _jsx("div", { className: "bg-yellow-400 text-brand-950 border-bg-primary absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] text-xs font-bold", children: "1st" })] }), _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: mask(tournament?.topPayouts[0]?.member?.name || '') }), _jsx("div", { className: "text-brand-400 text-2xl", children: formatNumber(tournament?.topPayouts[0]?.amount, {
+                                                    currency: localeInfo.currency.code,
+                                                    minDecimalPlaces: 2,
+                                                    maxDecimalPlaces: 2,
+                                                }) })] })] }) })) : (_jsxs("div", { className: "bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4", children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "closeChest", className: "size-full h-auto w-[66px] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 flex h-fit w-fit items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium", children: [_jsx(Trophy01Icon, { className: "text-utility-brand-600 size-3.5" }), "Top Payout"] }), _jsx("div", { className: "font-semibold", children: "No winners yet" }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the tournament!" })] })] })), _jsx(Button, { variant: "outline", className: twMerge('mt-5.5 px-3.5 py-2.5 text-sm', isDetailsVisible ? 'hidden' : 'flex'), onClick: () => setIsDetailsVisible(!isDetailsVisible), children: _jsxs("div", { className: "flex gap-1.5", children: ["See Details", _jsx(ArrowNarrowDownIcon, { className: "size-5" })] }) })] }) }), isDetailsVisible && (_jsxs("div", { children: [_jsxs("div", { className: "z-1 flex-1", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("div", { className: "flex gap-2", children: _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: tournament.currentLeaderboard.edges.length
+                                                ? 'Leaderboard'
+                                                : 'Starting soon!' }) }), _jsx(TournamentRules, { jackpotRules: tournament.description })] }), _jsx("div", { children: _jsx("div", { className: "border-gray-200 overflow-hidden", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-center text-xs font-medium", children: [_jsx("th", { className: "w-[52px]", children: "#" }), _jsx("th", { children: "Player" }), _jsx("th", { children: "Multiplier" }), _jsx("th", { children: "Prize" })] }) }), _jsx("tbody", { children: tournament.currentLeaderboard.edges.length ? (_jsx(_Fragment, { children: tournament.currentLeaderboard.edges.map((tournament, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-center text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: i + 1 < 6 ? (_jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', starTierStyles[i].starColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: mask(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,
+                                                                }) })) : (_jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }))] }, i))) })) : (_jsx(_Fragment, { children: Array.from({ length: 5 }).map((_, i) => (_jsxs("tr", { className: "bg-bg-primary text-text-secondary-700 text-center text-sm", children: [_jsx("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: i + 1 < 6 ? (_jsxs("div", { className: "relative", children: [_jsx(StarIcon, { className: twMerge('mx-auto size-6.5', starTierStyles[i].starColor) }), _jsx("span", { className: twMerge('absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold', starTierStyles[i].numberColor), children: i + 1 })] })) : (i + 1) }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }), _jsx("td", { className: "border-border-secondary h-12 border-t-2", children: "-" })] }, i))) })) })] }) }) })] }), Boolean(filteredGameProviders.length) && (_jsx(TournamentGameProviders, { gameProviders: filteredGameProviders })), _jsx("div", { className: "m-3", children: _jsx(Button, { variant: "outline", className: twMerge('px-3.5 py-2.5 text-sm', !isDetailsVisible ? 'hidden' : 'flex'), onClick: () => setIsDetailsVisible(!isDetailsVisible), children: _jsxs("div", { className: "flex gap-1.5", children: ["Hide", _jsx(ArrowNarrowUpIcon, { className: "size-5" })] }) }) })] }))] }));
+}
+const starTierStyles = [
+    {
+        starColor: 'text-yellow-400',
+        numberColor: 'text-bg-primary',
+    },
+    {
+        starColor: 'text-utility-gray-700',
+        numberColor: 'text-bg-primary',
+    },
+    {
+        starColor: 'text-yellow-700',
+        numberColor: 'text-bg-primary',
+    },
+    {
+        starColor: 'text-bg-quaternary',
+        numberColor: 'text-text-primary-900',
+    },
+    {
+        starColor: 'text-bg-quaternary',
+        numberColor: 'text-text-primary-900',
+    },
+];