@opexa/portal-components 0.0.360 → 0.0.362

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

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

package/dist/client/hooks/useFacebookClientQuery.js

@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+import { getFacebookClientId } from '../../services/account.js';
+import { getFacebookClientIdQueryKey } from '../../utils/queryKeys.js';
+export const useFacebookClientQuery = (options) => {
+    const query = useQuery({
+        ...options,
+        queryKey: getFacebookClientIdQueryKey(),
+        queryFn: async ({ signal }) => {
+            return await getFacebookClientId({ signal });
+        },
+    });
+    return query;
+};

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

@@ -0,0 +1,2 @@
+import type { Mutation } from '../../types';
+export declare const useUnlinkFacebookMutation: Mutation<void, string>;

package/dist/client/hooks/useUnlinkFacebookMutation.js

@@ -0,0 +1,31 @@
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { unlinkFacebook } from '../../services/account.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getUnlinkFacebookMutationKey } from '../../utils/mutationKeys.js';
+import { getAccountQueryKey } from '../../utils/queryKeys.js';
+import { getSession } from '../services/getSession.js';
+export const useUnlinkFacebookMutation = (config) => {
+    const queryClient = getQueryClient();
+    return useMutation({
+        ...config,
+        mutationKey: getUnlinkFacebookMutationKey(),
+        mutationFn: async (id) => {
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            await unlinkFacebook(id, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+            queryClient.setQueryData(getAccountQueryKey(), (prev) => {
+                if (!prev)
+                    return prev;
+                return {
+                    ...prev,
+                    facebookId: null,
+                };
+            });
+        },
+    });
+};

package/dist/components/AccountInfo/AccountInfo.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import FacebookLogin from '@greatsumini/react-facebook-login';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { GoogleOAuthProvider, useGoogleLogin } from '@react-oauth/google';
 import { differenceInYears, format } from 'date-fns';
@@ -10,10 +11,12 @@ import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
 import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
 import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useFacebookClientQuery } from '../../client/hooks/useFacebookClientQuery.js';
 import { useGoogleClientIdQuery } from '../../client/hooks/useGoogleClientIdQuery.js';
 import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
 import { useMobileNumberParser } from '../../client/hooks/useMobileNumberParser.js';
 import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
+import { useUnlinkFacebookMutation } from '../../client/hooks/useUnlinkFacebookMutation.js';
 import { useUnlinkGoogleMutation } from '../../client/hooks/useUnlinkGoogleMutation.js';
 import { useUpdateAccountMutation } from '../../client/hooks/useUpdateAccountMutation.js';
 import { toaster } from '../../client/utils/toaster.js';
@@ -159,7 +162,55 @@ function SSO({ google, facebook }) {
     const googleClientId = googleClientIdQuery.data;
     if (!facebook && !google)
         return null;
-    return (_jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Account Connections" }), _jsxs("div", { className: "mt-5 rounded-xl border border-border-secondary bg-bg-primary-alt px-4 py-5 shadow-xs", children: [googleClientId && (_jsx(GoogleOAuthProvider, { clientId: googleClientId, children: _jsx(LinkGoogleAccount, {}) })), facebook /* FIXME: replace with facebookClientId or something */ && (_jsxs("div", { className: "mt-6 flex items-center", children: [_jsxs("div", { className: "flex grow items-center gap-sm", children: [_jsx(IconButton, { variant: "outline", colorScheme: "gray", children: _jsx(FacebookIcon, { className: "size-6" }) }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-sm leading-tight", children: "Facebook" }), _jsx("p", { className: "mt-xs text-text-success-primary-600 text-xs leading-tight", children: "Connected" })] })] }), _jsx("button", { type: "button", className: "font-semibold text-button-tertiary-error-fg text-sm", children: "Disconnect" })] }))] })] }));
+    return (_jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Account Connections" }), _jsxs("div", { className: "mt-5 flex flex-col gap-2 rounded-xl border border-border-secondary bg-bg-primary-alt px-4 py-5 shadow-xs", children: [googleClientId && google && (_jsx(GoogleOAuthProvider, { clientId: googleClientId, children: _jsx(LinkGoogleAccount, {}) })), facebook && _jsx(LinkFacebookAccount, {})] })] }));
+}
+const LinkFacebookAccount = () => {
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const sessionQuery = useSessionQuery();
+    const session = sessionQuery.data;
+    const facebookClientIdQuery = useFacebookClientQuery();
+    const facebookClientId = facebookClientIdQuery.data;
+    if (!account || !facebookClientId)
+        return null;
+    return (_jsxs("div", { className: "flex items-center gap-sm", children: [_jsxs("div", { className: "flex grow items-center gap-sm", children: [_jsx(IconButton, { variant: "outline", colorScheme: "gray", children: _jsx(FacebookIcon, { className: "size-6" }) }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-sm leading-tight", children: "Facebook" }), _jsx("p", { className: twMerge('mt-xs text-xs leading-tight', account.facebookId
+                                    ? 'text-text-success-primary-600'
+                                    : 'text-text-secondary-700'), children: account.facebookId ? 'Connected' : 'Not Connected' })] })] }), account.facebookId ? (_jsx(UnlinkFacebookAccount, {})) : (_jsx(FacebookLogin, { appId: facebookClientId, useRedirect: true, dialogParams: {
+                    state: encodeURIComponent(`${window.location.origin},${PLATFORM_CODE},${session?.token}`),
+                    redirect_uri: `${AUTH_ENDPOINT}/facebook/link`,
+                }, onFail: () => {
+                    toaster.error({
+                        title: 'Facebook Sign In Failed',
+                        description: 'Failed to sign in with Facebook. Please try again.',
+                    });
+                }, render: ({ onClick }) => {
+                    return (_jsx(Button, { onClick: onClick, fullWidth: false, children: "Connect" }));
+                } }))] }));
+};
+function UnlinkFacebookAccount() {
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const disclosure = useDisclosure();
+    const unlinkFacebookMutation = useUnlinkFacebookMutation({
+        onSuccess() {
+            toaster.success({
+                title: 'Successfully Disconnected Facebook Account',
+                description: 'Your Facebook account has been disconnected. You can reconnect anytime from your account settings.',
+            });
+            disclosure.setOpen(false);
+        },
+        onError() {
+            toaster.error({
+                title: 'Error',
+                description: 'An error occurred while disconnecting your Facebook account. Please try again later.',
+            });
+        },
+    });
+    if (!account)
+        return null;
+    return (_jsxs(Dialog.Root, { open: disclosure.open, onOpenChange: (details) => disclosure.setOpen(details.open), lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsx(Dialog.Trigger, { className: "font-semibold text-button-tertiary-error-fg text-sm", children: "Disconnect" }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto min-h-auto max-w-[25rem] overflow-y-auto rounded-xl p-6", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col ", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-brand", children: _jsx(LinkBroken02Icon, {}) }), _jsx(Dialog.Title, { className: "mt-4 mb-1 text-center font-semibold text-lg xl:mt-xl", children: "Disconnect Facebook Account" }), _jsx(Dialog.Description, { className: "text-center text-sm text-text-tertiary-600 leading-2xl", children: "Are you sure you want to disconnect your Facebook account? This may affect your ability to log in or sync data." })] }), _jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "flex justify-between gap-2 pt-6", children: [_jsx(Button, { variant: "outline", disabled: unlinkFacebookMutation.isPending, onClick: () => api.setOpen(false), children: "Cancel" }), _jsx(Button, { variant: "solid", disabled: unlinkFacebookMutation.isPending, onClick: () => {
+                                                    unlinkFacebookMutation.mutate(account.id);
+                                                }, children: "Disconnect" })] })) })] }) })] })] }));
 }
 const LinkGoogleAccount = () => {
     const accountQuery = useAccountQuery();
@@ -200,7 +251,7 @@ function UnlinkGoogleAccount() {
     });
     if (!account)
         return null;
-    return (_jsxs(Dialog.Root, { open: disclosure.open, onOpenChange: (details) => disclosure.setOpen(details.open), lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsx(Dialog.Trigger, { className: "font-semibold text-button-tertiary-error-fg text-sm", children: "Disconnect" }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto min-h-auto max-w-[25rem] overflow-y-auto rounded-xl p-6", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col ", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-brand", children: _jsx(LinkBroken02Icon, {}) }), _jsx(Dialog.Title, { className: "mb-1 text-center font-semibold text-lg xl:mt-xl", children: "Disconnect Google Account" }), _jsx(Dialog.Description, { className: "text-center text-sm text-text-tertiary-600 leading-2xl", children: "Are you sure you want to disconnect your Google account? This may affect your ability to log in or sync data." })] }), _jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "flex justify-between gap-2 pt-6", children: [_jsx(Button, { variant: "outline", disabled: unlinkGoogleMutation.isPending, onClick: () => api.setOpen(false), children: "Cancel" }), _jsx(Button, { variant: "solid", disabled: unlinkGoogleMutation.isPending, onClick: () => {
+    return (_jsxs(Dialog.Root, { open: disclosure.open, onOpenChange: (details) => disclosure.setOpen(details.open), lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsx(Dialog.Trigger, { className: "font-semibold text-button-tertiary-error-fg text-sm", children: "Disconnect" }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto min-h-auto max-w-[25rem] overflow-y-auto rounded-xl p-6", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col ", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-brand", children: _jsx(LinkBroken02Icon, {}) }), _jsx(Dialog.Title, { className: "mt-4 mb-1 text-center font-semibold text-lg xl:mt-xl", children: "Disconnect Google Account" }), _jsx(Dialog.Description, { className: "text-center text-sm text-text-tertiary-600 leading-2xl", children: "Are you sure you want to disconnect your Google account? This may affect your ability to log in or sync data." })] }), _jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "flex justify-between gap-2 pt-6", children: [_jsx(Button, { variant: "outline", disabled: unlinkGoogleMutation.isPending, onClick: () => api.setOpen(false), children: "Cancel" }), _jsx(Button, { variant: "solid", disabled: unlinkGoogleMutation.isPending, onClick: () => {
                                                     unlinkGoogleMutation.mutate(account.id);
                                                 }, children: "Disconnect" })] })) })] }) })] })] }));
 }

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

@@ -0,0 +1,12 @@
+import type { ImageProps } from 'next/image';
+export interface BannerEntry {
+    src: ImageProps['src'];
+    redirectUrl?: string;
+}
+export interface BannerProps {
+    banners: BannerEntry[];
+    imageWidth?: number | [mobile: number, desktop: number];
+    imageHeight?: number | [mobile: number, desktop: number];
+    className?: string;
+}
+export declare function Banner__client(props: BannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Banner/Banner.client.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import emblaCarouselAutoplay from 'embla-carousel-autoplay';
+import useEmblaCarousel, {} from 'embla-carousel-react';
+import isMobile from 'is-mobile';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Fragment, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { dataAttr } from '../../utils/dataAttr.js';
+export function Banner__client(props) {
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        loop: true,
+        align: 'start',
+    }, [
+        emblaCarouselAutoplay({
+            playOnInit: true,
+            delay: 5000,
+        }),
+    ]);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    useEffect(() => {
+        function handler(detail) {
+            setCurrentIndex(detail?.selectedScrollSnap() ?? 0);
+        }
+        emblaApi?.on('scroll', handler);
+        emblaApi?.on('init', handler);
+        return () => {
+            emblaApi?.on('init', handler);
+            emblaApi?.off('scroll', handler);
+        };
+    }, [emblaApi]);
+    const imageWidth = !props.imageWidth
+        ? [400, 1200]
+        : Array.isArray(props.imageWidth)
+            ? props.imageWidth
+            : [props.imageWidth, props.imageWidth];
+    const imageHeight = !props.imageHeight
+        ? [225, 300]
+        : Array.isArray(props.imageHeight)
+            ? props.imageHeight
+            : [props.imageHeight, props.imageHeight];
+    return (_jsxs("div", { className: twMerge('relative', props.className), children: [_jsx("div", { ref: emblaRef, className: "overflow-hidden", children: _jsx("div", { className: "flex gap-2", children: props.banners.map((banner, index) => {
+                        const img = (_jsx(Image, { src: banner.src, alt: "", width: isMobile() ? imageWidth[0] : imageWidth[1], height: isMobile() ? imageHeight[0] : imageHeight[1], className: "block h-auto w-full", priority: index === 0 }));
+                        return (_jsx(Fragment, { children: !banner.redirectUrl ? (_jsx("div", { className: "w-full shrink-0", children: img })) : (_jsx(Link, { href: banner.redirectUrl, className: "block w-full shrink-0", "aria-label": `Open ${banner.redirectUrl}`, children: img })) }, index));
+                    }) }) }), _jsx("div", { className: "absolute bottom-lg left-1/2 flex w-fit -translate-x-1/2 gap-2", children: props.banners.map((_, index) => (_jsx("button", { type: "button", className: "ui-active:bg-brand-500 bg-gray-300 size-3 shrink-0 rounded-full border border-white transition-all duration-300 ui-active:w-9", onClick: () => {
+                        emblaApi?.scrollTo(index);
+                    }, "aria-label": `Go to slide ${index + 1}`, "data-active": dataAttr(index === currentIndex) }, index))) })] }));
+}

package/dist/components/DepositWithdrawal/DepositWithdrawal.lazy.js

@@ -31,12 +31,17 @@ export function DepositWithdrawal(props) {
     const walletQuery = useWalletQuery({
         refetchInterval: 5000,
     });
-    //check if the user has pending/ongoing bonuses
+    // biome-ignore lint/correctness/useExhaustiveDependencies: globalStore is stable and doesn't need to be in dependencies
     useEffect(() => {
-        if (hasPendingBonus && !globalStore.pendingBonus.shouldShowWarning) {
+        if (hasPendingBonus) {
             globalStore.pendingBonus.setShouldShowWarning(hasPendingBonus);
         }
-    }, [hasPendingBonus, globalStore.pendingBonus]);
+        return () => {
+            if (!hasPendingBonus) {
+                globalStore.pendingBonus.setShouldShowWarning(false);
+            }
+        };
+    }, [hasPendingBonus]);
     return (_jsxs(_Fragment, { children: [_jsx(DepositWithdrawalPropsProvider, { value: props, children: _jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.depositWithdrawal.open, onOpenChange: (details) => {
                         globalStore.depositWithdrawal.setOpen(details.open);
                         if (!details.open) {

package/dist/components/DigitainLauncher/Loading.d.ts

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

package/dist/components/DigitainLauncher/Loading.js

@@ -0,0 +1,5 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Loading() {
+    return (_jsx("div", { className: "flex h-[calc(100vh-400px)] w-full items-center justify-center px-4", children: _jsxs("div", { className: "flex flex-col items-center space-y-4", children: [_jsx("div", { className: "h-10 w-10 animate-spin rounded-full border-4 border-blue-500 border-t-transparent" }), _jsx("p", { className: "font-medium text-gray-700 text-lg", children: "Loading Sports Book\u2026" })] }) }));
+}

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

@@ -1,4 +1,4 @@
 import { type JackpotsCarouselProps } from './JackpotsCarousel/JackpotsCarousel';
 import { type JackpotsListProps } from './JackpotsList/JackpotsList';
-export type JackpotsProps = JackpotsCarouselProps | JackpotsListProps;
+export type JackpotsProps = (JackpotsCarouselProps | JackpotsListProps);
 export declare function Jackpots(props: JackpotsProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -16,6 +16,17 @@ export interface JackpotsCarouselProps {
     className?: string | ClassNameEntries;
     style?: CSSProperties | StyleEntries;
     animate?: boolean;
+    customJackpotChestImage?: {
+        image: {
+            open: string;
+            closed: string;
+        };
+        style?: {
+            wrapper?: string;
+            image?: string;
+        };
+    };
+    jackpotProfileShape?: 'oval' | 'star';
 }
 export declare function JackpotsCarousel({ style, className, ...props }: JackpotsCarouselProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -64,5 +64,5 @@ export function JackpotsCarousel({ style, className, ...props }) {
     const classNames = isString(className)
         ? { root: className }
         : (className ?? {});
-    return (_jsxs("div", { style: styles.root, className: classNames.root, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "font-semibold text-lg", children: props.heading ?? 'Jackpots' }), _jsxs("div", { className: "flex items-center md:gap-3xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/jackpots', className: "flex gap-sm font-semibold text-button-tertiary-fg text-sm", 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: jackpots.map((jackpot) => (_jsx(JackpotsCarouselItemContext, { value: jackpot, children: _jsx(JackpotsCarouselItem, { style: styles.itemRoot, className: classNames.itemRoot, viewAllUrl: props.viewAllUrl, animate: props.animate }) }, jackpot.id))) }) })] }));
+    return (_jsxs("div", { style: styles.root, className: classNames.root, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "font-semibold text-lg", children: props.heading ?? 'Jackpots' }), _jsxs("div", { className: "flex items-center md:gap-3xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/jackpots', className: "flex gap-sm font-semibold text-button-tertiary-fg text-sm", 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: jackpots.map((jackpot) => (_jsx(JackpotsCarouselItemContext, { value: jackpot, children: _jsx(JackpotsCarouselItem, { style: styles.itemRoot, className: classNames.itemRoot, viewAllUrl: props.viewAllUrl, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape }) }, jackpot.id))) }) })] }));
 }

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

@@ -4,6 +4,17 @@ export interface JackpotsCarouselItemProps {
     className?: string;
     /** @default "/jackpots" */
     viewAllUrl?: string;
+    customJackpotChestImage?: {
+        image: {
+            open: string;
+            closed: string;
+        };
+        style?: {
+            wrapper?: string;
+            image?: string;
+        };
+    };
     animate?: boolean;
+    jackpotProfileShape?: 'oval' | 'star';
 }
-export declare function JackpotsCarouselItem({ style, className, viewAllUrl, animate, }: JackpotsCarouselItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function JackpotsCarouselItem({ style, className, viewAllUrl, animate, customJackpotChestImage, jackpotProfileShape, }: JackpotsCarouselItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -12,6 +12,7 @@ import { useLocaleInfo } from '../../../client/hooks/useLocaleInfo.js';
 import { ArrowNarrowUpRightIcon } from '../../../icons/ArrowNarrowUpRightIcon.js';
 import { ChevronLeftIcon } from '../../../icons/ChevronLeftIcon.js';
 import { ChevronRightIcon } from '../../../icons/ChevronRightIcon.js';
+import { StarIcon } from '../../../icons/StarIcon.js';
 import { Trophy01Icon } from '../../../icons/Trophy01Icon.js';
 import { User01Icon } from '../../../icons/User01Icon.js';
 import closeChest from '../../../images/close-chest.png';
@@ -25,7 +26,7 @@ import { mask } from '../../../utils/mask.js';
 import { parseDecimal } from '../../../utils/parseDecimal.js';
 import { useJackpotsCarouselItemContext } from './JackpotsCarouselContext.js';
 import styles from './JackpotsCarouselItem.module.css';
-export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = true, }) {
+export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = true, customJackpotChestImage, jackpotProfileShape = 'oval', }) {
     const jackpot = useJackpotsCarouselItemContext();
     const jackpotPayoutsQuery = useJackpotPayoutsQuery({
         first: 30,
@@ -86,7 +87,13 @@ export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = t
                                                             currency: localeInfo.currency.code,
                                                             minDecimalPlaces: 2,
                                                             maxDecimalPlaces: 2,
-                                                        }) })] }), _jsx("div", { className: "hidden min-w-25 lg:block" }), _jsx("div", { className: "right-0 bottom-[-60] z-1 min-w-25 lg:absolute", children: _jsx(Image, { width: 150, height: 150, src: isPayingOut ? openChest : closeChest, alt: "closeChest", className: "size-full h-25 w-25 p-2 lg:h-37.5 lg:w-37.5" }) })] }), latestJackpotPayout.amount ? (_jsx("div", { children: _jsxs("div", { className: "relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex", children: [_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsxs("div", { className: "absolute right-0 bottom-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: [latestJackpotPayout.multiplier, "x"] })] }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs", children: [_jsx(Trophy01Icon, { className: "size-3.5 text-utility-brand-600" }), "Recent Payout"] }), _jsx("div", { className: "font-semibold", children: mask(latestJackpotPayout.member.name, {
+                                                        }) })] }), _jsx("div", { className: "hidden min-w-25 lg:block" }), _jsx("div", { className: twMerge('right-0 bottom-[-60] z-1 min-w-25 lg:absolute', customJackpotChestImage?.style?.wrapper), children: _jsx(Image, { width: 150, height: 150, src: customJackpotChestImage?.image
+                                                        ? isPayingOut
+                                                            ? customJackpotChestImage.image.open
+                                                            : customJackpotChestImage.image.closed
+                                                        : isPayingOut
+                                                            ? openChest
+                                                            : closeChest, alt: "closeChest", className: twMerge('size-full h-25 w-25 p-2 lg:h-37.5 lg:w-37.5', customJackpotChestImage?.style?.image) }) })] }), latestJackpotPayout.amount ? (_jsx("div", { children: _jsxs("div", { className: "relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex", children: [jackpotProfileShape === 'oval' ? (_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsxs("div", { className: "absolute right-0 bottom-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: [latestJackpotPayout.multiplier, "x"] })] })) : (_jsxs("div", { className: "relative grid h-18 w-18", children: [_jsx(StarIcon, { className: "col-start-1 row-start-1 h-full w-full" }), _jsx(User01Icon, { className: "z-10 col-start-1 row-start-1 size-9 place-self-center text-text-quarterary-500" }), _jsxs("div", { className: "-right-0 absolute bottom-0 z-20 flex h-7 w-7 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 text-center font-bold text-brand-950 text-xs", children: [latestJackpotPayout.multiplier, "x"] })] })), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs", children: [_jsx(Trophy01Icon, { className: "size-3.5 text-utility-brand-600" }), "Recent Payout"] }), _jsx("div", { className: "font-semibold", children: mask(latestJackpotPayout.member.name, {
                                                                 totalCharsCount: 6,
                                                             }) }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(latestJackpotPayout.amount, {
                                                                 currency: localeInfo.currency.code,

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

@@ -31,6 +31,17 @@ export interface JackpotsListProps {
      */
     viewGamesUrl?: string | ((gameProvider: GameProviderData) => string);
     animate?: boolean;
+    customJackpotChestImage?: {
+        image: {
+            open: string;
+            closed: string;
+        };
+        style?: {
+            wrapper?: string;
+            image?: string;
+        };
+    };
+    jackpotProfileShape?: 'oval' | 'star';
 }
 export declare function JackpotsList(props: JackpotsListProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -31,5 +31,5 @@ export function JackpotsList(props) {
     const classNames = isString(props.className)
         ? { root: props.className }
         : (props.className ?? {});
-    return (_jsx(JackpotsListPropsContext, { value: props, children: _jsxs("div", { style: styles.root, className: classNames.root, children: [_jsx("div", { className: "mb-3 font-semibold text-lg 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, animate: props.animate }) }, 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, animate: props.animate }) }, jackpot.id))) })] })) : (_jsxs("div", { className: 'mt-5 flex h-fit flex-col items-center justify-center lg:mt-0 lg:h-62', children: [_jsx(Image, { width: 100, height: 100, src: closeChest, alt: "closeChest", className: "size-full h-29.5 w-29.5 mix-blend-luminosity lg:h-25 lg:w-25" }), _jsxs("div", { className: "mt-4 font-semibold text-base text-text-primary-900", children: ["No ", props.heading ?? 'Jackpots'] }), _jsxs("div", { className: "mt-1 text-center text-sm text-text-tertiary-600", children: ["No ", props.heading?.toLocaleLowerCase() ?? 'jackpots', " are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }))] }) }));
+    return (_jsx(JackpotsListPropsContext, { value: props, children: _jsxs("div", { style: styles.root, className: classNames.root, children: [_jsx("div", { className: "mb-3 font-semibold text-lg 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, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape }) }, 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, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape }) }, jackpot.id))) })] })) : (_jsxs("div", { className: 'mt-5 flex h-fit flex-col items-center justify-center lg:mt-0 lg:h-62', children: [_jsx(Image, { width: 100, height: 100, src: closeChest, alt: "closeChest", className: "size-full h-29.5 w-29.5 mix-blend-luminosity lg:h-25 lg:w-25" }), _jsxs("div", { className: "mt-4 font-semibold text-base text-text-primary-900", children: ["No ", props.heading ?? 'Jackpots'] }), _jsxs("div", { className: "mt-1 text-center text-sm text-text-tertiary-600", 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

@@ -3,6 +3,17 @@ interface JackpotsListItemDesktopProps {
     className?: string;
     style?: CSSProperties;
     animate?: boolean;
+    customJackpotChestImage?: {
+        image: {
+            open: string;
+            closed: string;
+        };
+        style?: {
+            wrapper?: string;
+            image?: string;
+        };
+    };
+    jackpotProfileShape?: 'oval' | 'star';
 }
-export declare function JackpotsListItemDesktop({ animate, ...props }: JackpotsListItemDesktopProps): import("react/jsx-runtime").JSX.Element;
+export declare function JackpotsListItemDesktop({ animate, customJackpotChestImage, jackpotProfileShape, ...props }: JackpotsListItemDesktopProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,6 +6,7 @@ import { twMerge } from 'tailwind-merge';
 import { ArrowNarrowUpRightIcon } from '../../../icons/ArrowNarrowUpRightIcon.js';
 import { ChevronLeftIcon } from '../../../icons/ChevronLeftIcon.js';
 import { ChevronRightIcon } from '../../../icons/ChevronRightIcon.js';
+import { StarIcon } from '../../../icons/StarIcon.js';
 import { Trophy01Icon } from '../../../icons/Trophy01Icon.js';
 import { User01Icon } from '../../../icons/User01Icon.js';
 import closeChest from '../../../images/close-chest.png';
@@ -22,14 +23,20 @@ import styles from './JackpotsListItem.module.css';
 import { JackpotsListItemGameProviders } from './JackpotsListItemGameProviders.js';
 import { JackpotsListItemRules } from './JackpotsListItemRules.js';
 import { useJackpotsListItemData } from './useJackpotsListItemData.js';
-export function JackpotsListItemDesktop({ animate = true, ...props }) {
+export function JackpotsListItemDesktop({ animate = true, customJackpotChestImage, jackpotProfileShape = 'oval', ...props }) {
     const jackpot = useJackpotsListItemContext();
     const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, getAccumulatingJackpotDescription, } = useJackpotsListItemData();
     return (_jsxs("div", { className: twMerge('rounded-2xl border border-border-primary bg-bg-tertiary', props.className), children: [_jsxs("div", { style: props.style, className: twMerge('relative flex shrink-0 rounded-2xl p-3 text-center lg:gap-4 lg:p-5'), children: [_jsxs("div", { className: "relative z-1 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: "flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs", children: [_jsx("span", { className: "full size-1.5 animate-pulse rounded bg-utility-success-500" }), "Paying Out"] })) : (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-blue-200 bg-utility-blue-50 px-2 py-0.5 font-medium text-utility-blue-700 text-xs", children: [_jsx(ArrowNarrowUpRightIcon, { className: "size-3.5 text-utility-blue-500" }), "Accumulating"] })), _jsx("div", { className: "mt-1 text-left font-medium text-lg text-text-primary-900 lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: "mt-1.5 w-fit rounded-md bg-bg-primary px-2 py-1 font-bold text-2xl text-brand-400 lg:mt-2 lg:text-4xl", children: formatNumber(jackpotAmount, {
                                                                     currency: localeInfo.currency.code,
                                                                     minDecimalPlaces: 2,
                                                                     maxDecimalPlaces: 2,
-                                                                }) })] }), _jsx("div", { className: "min-w-30" }), _jsx("div", { className: "right-0 bottom-[-60] z-1 min-w-30 lg:absolute", children: _jsx(Image, { width: 150, height: 150, src: isPayingOut ? openChest : closeChest, alt: "closeChest", className: "size-full h-25 w-25 p-2 lg:h-37.5 lg:w-37.5" }) })] }), topJackpotPayout.amount ? (_jsx("div", { children: _jsxs("div", { className: "relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex", children: [_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsxs("div", { className: "absolute right-0 bottom-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: [topJackpotPayout.multiplier, "x"] })] }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs", children: [_jsx(Trophy01Icon, { className: "size-3.5 text-utility-brand-600" }), "Recent Payout"] }), _jsx("div", { className: "font-semibold", children: mask(topJackpotPayout.member.name, {
+                                                                }) })] }), _jsx("div", { className: "min-w-30" }), _jsx("div", { className: twMerge('right-0 bottom-[-60] z-1 min-w-30 lg:absolute', customJackpotChestImage?.style?.wrapper), children: _jsx(Image, { width: 150, height: 150, src: customJackpotChestImage?.image
+                                                                ? isPayingOut
+                                                                    ? customJackpotChestImage.image.open
+                                                                    : customJackpotChestImage.image.closed
+                                                                : isPayingOut
+                                                                    ? openChest
+                                                                    : closeChest, alt: "closeChest", className: twMerge('size-full h-25 w-25 p-2 lg:h-37.5 lg:w-37.5', customJackpotChestImage?.style?.image) }) })] }), topJackpotPayout.amount ? (_jsx("div", { children: _jsxs("div", { className: "relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex", children: [jackpotProfileShape === 'oval' ? (_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsxs("div", { className: "absolute right-0 bottom-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: [topJackpotPayout.multiplier, "x"] })] })) : (_jsxs("div", { className: "relative grid h-18 w-18", children: [_jsx(StarIcon, { className: "col-start-1 row-start-1 h-full w-full" }), _jsx(User01Icon, { className: "z-10 col-start-1 row-start-1 size-9 place-self-center text-text-quarterary-500" }), _jsxs("div", { className: "-right-0 absolute bottom-0 z-20 flex h-7 w-7 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 text-center font-bold text-brand-950 text-xs", children: [topJackpotPayout.multiplier, "x"] })] })), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs", children: [_jsx(Trophy01Icon, { className: "size-3.5 text-utility-brand-600" }), "Recent Payout"] }), _jsx("div", { className: "font-semibold", children: mask(topJackpotPayout.member.name, {
                                                                         totalCharsCount: 6,
                                                                     }) }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(topJackpotPayout.amount, {
                                                                         currency: localeInfo.currency.code,

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

@@ -3,6 +3,17 @@ interface JackpotsListItemMobileProps {
     className?: string;
     style?: CSSProperties;
     animate?: boolean;
+    customJackpotChestImage?: {
+        image: {
+            open: string;
+            closed: string;
+        };
+        style?: {
+            wrapper?: string;
+            image?: string;
+        };
+    };
+    jackpotProfileShape?: 'oval' | 'star';
 }
-export declare function JackpotsListItemMobile({ animate, ...props }: JackpotsListItemMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare function JackpotsListItemMobile({ animate, customJackpotChestImage, jackpotProfileShape, ...props }: JackpotsListItemMobileProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -9,6 +9,7 @@ import { ArrowNarrowUpIcon } from '../../../icons/ArrowNarrowUpIcon.js';
 import { ArrowNarrowUpRightIcon } from '../../../icons/ArrowNarrowUpRightIcon.js';
 import { ChevronLeftIcon } from '../../../icons/ChevronLeftIcon.js';
 import { ChevronRightIcon } from '../../../icons/ChevronRightIcon.js';
+import { StarIcon } from '../../../icons/StarIcon.js';
 import { Trophy01Icon } from '../../../icons/Trophy01Icon.js';
 import { User01Icon } from '../../../icons/User01Icon.js';
 import closeChest from '../../../images/close-chest.png';
@@ -25,7 +26,7 @@ import styles from './JackpotsListItem.module.css';
 import { JackpotsListItemGameProviders } from './JackpotsListItemGameProviders.js';
 import { JackpotsListItemRules } from './JackpotsListItemRules.js';
 import { useJackpotsListItemData } from './useJackpotsListItemData.js';
-export function JackpotsListItemMobile({ animate = true, ...props }) {
+export function JackpotsListItemMobile({ animate = true, customJackpotChestImage, jackpotProfileShape = 'oval', ...props }) {
     const jackpot = useJackpotsListItemContext();
     const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, getAccumulatingJackpotDescription, } = useJackpotsListItemData();
     const [isDetailsVisible, setIsDetailsVisible] = useState(false);
@@ -57,7 +58,13 @@ export function JackpotsListItemMobile({ animate = true, ...props }) {
                                                                 currency: localeInfo.currency.code,
                                                                 minDecimalPlaces: 2,
                                                                 maxDecimalPlaces: 2,
-                                                            }) })] }), _jsx("div", { className: "right-0 bottom-[-60] z-1 block min-w-34.5 lg:absolute", children: _jsx(Image, { width: 100, height: 100, src: isPayingOut ? openChest : closeChest, alt: "closeChest", className: "size-full h-34.5 w-34.5 p-2 lg:h-37.5 lg:w-37.5" }) })] }) }) }) }), _jsxs("div", { className: "mt-3 lg:mt-4", children: [_jsxs("div", { className: "mb-1 flex justify-between", children: [_jsx("div", { className: "font-semibold text-text-primary-900 text-xs", children: formatNumber(0, {
+                                                            }) })] }), _jsx("div", { className: twMerge('right-0 bottom-[-60] z-1 block min-w-34.5 lg:absolute', customJackpotChestImage?.style?.wrapper), children: _jsx(Image, { width: 100, height: 100, src: customJackpotChestImage?.image
+                                                            ? isPayingOut
+                                                                ? customJackpotChestImage.image.open
+                                                                : customJackpotChestImage.image.closed
+                                                            : isPayingOut
+                                                                ? openChest
+                                                                : closeChest, alt: "closeChest", className: twMerge('size-full h-34.5 w-34.5 p-2 lg:h-37.5 lg:w-37.5', customJackpotChestImage?.style?.image) }) })] }) }) }) }), _jsxs("div", { className: "mt-3 lg:mt-4", children: [_jsxs("div", { className: "mb-1 flex justify-between", children: [_jsx("div", { className: "font-semibold text-text-primary-900 text-xs", children: formatNumber(0, {
                                                     currency: localeInfo.currency.code,
                                                     compact: true,
                                                 }) }), _jsxs("div", { className: "relative flex items-center justify-end gap-1.5", children: [isPayingOut ? (_jsxs("div", { className: "flex w-6 items-center", children: [_jsx("div", { className: twMerge('absolute left-0', styles['animate-arrow-red-flash-1']), children: _jsx(ChevronLeftIcon, { className: "size-4.5" }) }), _jsx("div", { className: twMerge('absolute left-1.5', styles['animate-arrow-red-flash-2']), children: _jsx(ChevronLeftIcon, { className: "size-4.5" }) }), _jsx("div", { className: twMerge('absolute left-3', styles['animate-arrow-red-flash-3']), children: _jsx(ChevronLeftIcon, { className: "size-4.5" }) })] })) : (_jsxs("div", { className: "flex w-6 items-center", children: [_jsx("div", { className: twMerge('absolute left-0', styles['animate-arrow-green-flash-1']), children: _jsx(ChevronRightIcon, { className: "size-4.5" }) }), _jsx("div", { className: twMerge('absolute left-1.5', styles['animate-arrow-green-flash-2']), children: _jsx(ChevronRightIcon, { className: "size-4.5" }) }), _jsx("div", { className: twMerge('absolute left-3', styles['animate-arrow-green-flash-3']), children: _jsx(ChevronRightIcon, { className: "size-4.5" }) })] })), _jsx("div", { className: "font-semibold text-text-primary-900 text-xs", children: formatNumber(jackpot?.maximumJackpotPoolLimit, {
@@ -78,7 +85,7 @@ export function JackpotsListItemMobile({ animate = true, ...props }) {
                                                 currency: localeInfo.currency.code,
                                                 compact: true,
                                             })} Play now for your chance to win big! 🔥`
-                                            : getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0) })] }), topJackpotPayout.amount ? (_jsx("div", { children: _jsxs("div", { className: "relative mt-4 flex w-full gap-4 rounded-lg bg-bg-primary p-4", children: [_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsxs("div", { className: "absolute right-0 bottom-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: [topJackpotPayout.multiplier, "x"] })] }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs", children: [_jsx(Trophy01Icon, { className: "size-3.5 text-utility-brand-600" }), "Recent Payout"] }), _jsx("div", { className: "font-semibold", children: mask(topJackpotPayout.member.name) }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(topJackpotPayout.amount, {
+                                            : getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0) })] }), topJackpotPayout.amount ? (_jsx("div", { children: _jsxs("div", { className: "relative mt-4 flex w-full gap-4 rounded-lg bg-bg-primary p-4", children: [jackpotProfileShape === 'oval' ? (_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsxs("div", { className: "absolute right-0 bottom-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs", children: [topJackpotPayout.multiplier, "x"] })] })) : (_jsxs("div", { className: "relative grid h-18 w-18", children: [_jsx(StarIcon, { className: "col-start-1 row-start-1 h-full w-full" }), _jsx(User01Icon, { className: "z-10 col-start-1 row-start-1 size-9 place-self-center text-text-quarterary-500" }), _jsxs("div", { className: "-right-0 absolute bottom-0 z-20 flex h-7 w-7 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 text-center font-bold text-brand-950 text-xs", children: [topJackpotPayout.multiplier, "x"] })] })), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsxs("div", { className: "flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs", children: [_jsx(Trophy01Icon, { className: "size-3.5 text-utility-brand-600" }), "Recent Payout"] }), _jsx("div", { className: "font-semibold", children: mask(topJackpotPayout.member.name) }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(topJackpotPayout.amount, {
                                                         currency: localeInfo.currency.code,
                                                         minDecimalPlaces: 2,
                                                         maxDecimalPlaces: 2,

package/dist/components/KYC/BasicInformation.d.ts

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