@opexa/portal-components 0.0.884 → 0.0.886

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

@@ -0,0 +1,173 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress } from '@ark-ui/react/progress';
+import { format } from 'date-fns';
+import isMobile from 'is-mobile';
+import Image from 'next/image';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useIntersectionObserver } from 'usehooks-ts';
+import { useJackpotPayoutsQuery } from '../../../client/hooks/useJackpotPayoutsQuery.js';
+import { useLocaleInfo } from '../../../client/hooks/useLocaleInfo.js';
+import { ChevronDownIcon } from '../../../icons/ChevronDownIcon.js';
+import { ChevronLeftIcon } from '../../../icons/ChevronLeftIcon.js';
+import { ChevronRightIcon } from '../../../icons/ChevronRightIcon.js';
+import { ChevronUpIcon } from '../../../icons/ChevronUpIcon.js';
+import { User02Icon } from '../../../icons/User02Icon.js';
+import treasureChestBg from '../../../images/chest-bg.webp';
+import coin from '../../../images/coin.webp';
+import coins from '../../../images/coins.webp';
+import star from '../../../images/star.webp';
+import treasureChest from '../../../images/treasure.webp';
+import { formatNumber } from '../../../utils/formatNumber.js';
+import { getPercentage } from '../../../utils/getPercentage.js';
+import styles from '../Jackpots.module.css';
+import { CRAZYWIN_JACKPOTS_VARIATIONS, maskName } from '../utils.js';
+import { useJackpotsListItemContext } from './JackpotsListContext.js';
+import { JackpotsListItemGameProviders } from './JackpotsListItemGameProviders.js';
+import { useJackpotsListItemData } from './useJackpotsListItemData.js';
+export function JackpotsListItemCrazyWin({ index, }) {
+    const jackpot = useJackpotsListItemContext();
+    const localeInfo = useLocaleInfo();
+    const { getAccumulatingJackpotDescription, filteredGameProviders } = useJackpotsListItemData();
+    const jackpotPayoutsQuery = useJackpotPayoutsQuery({
+        first: 30,
+        filter: {
+            jackpot: {
+                equal: jackpot.id,
+            },
+        },
+    });
+    const [ref] = useIntersectionObserver({
+        threshold: 0.5,
+        rootMargin: '50px',
+    });
+    const [infoIndex, setInfoIndex] = useState(0);
+    const [seeDetails, setSeeDetails] = useState(false);
+    const [mainTooltipOpen, setMainTooltipOpen] = useState(false);
+    const isPayingOut = jackpot.drawing;
+    const jackpotAmount = jackpot.pool;
+    const jackpotPayouts = jackpotPayoutsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
+    const variation = CRAZYWIN_JACKPOTS_VARIATIONS[index % CRAZYWIN_JACKPOTS_VARIATIONS.length];
+    const isMobileDevice = useMemo(() => isMobile(), []);
+    const getInfoBlocks = useCallback(() => {
+        return [
+            `Current Jackpot: <b>${formatNumber(jackpotAmount, {
+                currency: localeInfo.currency.code,
+                minDecimalPlaces: 2,
+                maxDecimalPlaces: 2,
+            })}</b>`,
+            `Minimum Payout Limit: <b>${formatNumber(jackpot.minimumJackpotPoolDrawingLimit, {
+                currency: localeInfo.currency.code,
+                minDecimalPlaces: 2,
+                maxDecimalPlaces: 2,
+            })}</b>`,
+            `Maximum Payout Limit: <b>${formatNumber(jackpot.maximumJackpotPoolLimit, {
+                currency: localeInfo.currency.code,
+                minDecimalPlaces: 2,
+                maxDecimalPlaces: 2,
+            })}</b>`,
+            isPayingOut
+                ? `The pot has hit <b>${formatNumber(jackpot.maximumJackpotPoolLimit, {
+                    currency: localeInfo.currency.code,
+                    minDecimalPlaces: 2,
+                    maxDecimalPlaces: 2,
+                })}</b> Play now for your chance to win big! 🔥`
+                : getAccumulatingJackpotDescription(Number(jackpot.pool), Number(jackpot.maximumJackpotPoolLimit)),
+        ];
+    }, [
+        isPayingOut,
+        jackpot,
+        jackpotAmount,
+        localeInfo,
+        getAccumulatingJackpotDescription,
+    ]);
+    const Arrow = useCallback(({ index }) => {
+        const Icon = isPayingOut ? ChevronLeftIcon : ChevronRightIcon;
+        return (_jsx(Icon, { className: twMerge('min-w-2.5 scale-400 text-brand-300 lg:min-w-4 lg:scale-250', isPayingOut
+                ? styles['animate-wave-color-error']
+                : styles['animate-wave-color-success']), style: {
+                animationDelay: isPayingOut
+                    ? `${(40 - index - 1) * 0.1}s`
+                    : `${index * 0.1}s`,
+            } }));
+    }, [isPayingOut]);
+    const arrowImages = useMemo(() => Array.from({ length: 40 }, (_, i) => _jsx(Arrow, { index: i }, i)), [Arrow]);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setInfoIndex((i) => (i + 1) % getInfoBlocks().length);
+        }, 4000);
+        return () => clearInterval(interval);
+    }, [getInfoBlocks]);
+    useEffect(() => {
+        if (isMobileDevice && mainTooltipOpen) {
+            const timeout = setTimeout(() => setMainTooltipOpen(false), 3000);
+            return () => clearTimeout(timeout);
+        }
+    }, [mainTooltipOpen, isMobileDevice]);
+    if (jackpot.status === 'DISABLED' && jackpot.drawing !== true) {
+        return null;
+    }
+    return (_jsxs("div", { className: "w-full shrink-0", children: [_jsxs("div", { ref: ref, className: twMerge('relative flex w-full shrink-0 rounded-t-2xl p-3 text-center lg:gap-4 lg:p-5', variation.background), children: [_jsxs("div", { className: "flex w-full flex-col gap-6 lg:flex-row lg:gap-0", children: [_jsxs("div", { className: "relative z-1 flex flex-1 flex-col", children: [[
+                                        [
+                                            styles['flicker-scale-fade-2'],
+                                            'absolute right-[38%] top-[2%] h-2 w-2 delay-75',
+                                        ],
+                                        [
+                                            styles['flicker-scale-fade'],
+                                            'absolute right-[20%] top-[10%] h-3 w-3',
+                                        ],
+                                        [
+                                            styles['flicker-scale-fade-2'],
+                                            'absolute right-[30%] top-[10%] h-5 w-5',
+                                        ],
+                                        [
+                                            styles['flicker-scale-fade'],
+                                            'absolute right-[36%] top-[35%] h-3 w-3',
+                                        ],
+                                        [
+                                            styles['flicker-scale-fade'],
+                                            'absolute right-[15%] top-[56%] h-3 w-3',
+                                        ],
+                                        [
+                                            styles['flicker-scale-fade-2'],
+                                            'absolute right-[50%] top-[55%] h-4 w-4',
+                                        ],
+                                    ].map(([animationClass, positionClass], i) => (_jsx(Image, { src: star, alt: "star", draggable: "false", className: twMerge(animationClass, positionClass) }, i))), _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsx("div", { className: "flex w-full flex-col", children: _jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "mb-2 flex gap-1 font-medium", children: _jsxs("div", { className: twMerge('flex w-fit items-center justify-center gap-1 rounded-[10px] border border-[#82F0D0] px-[10px] py-1 text-[#82F0D0] text-xs lg:text-sm'), children: [_jsx("div", { className: twMerge('h-[6px] w-[6px] animate-color rounded-full', isPayingOut
+                                                                                    ? styles['pulse-error']
+                                                                                    : styles['pulse-success']) }), _jsx("div", { className: twMerge('rounded text-[#CECFD2]'), children: isPayingOut ? 'Paying Out' : 'Accumulating' })] }) }), _jsx("div", { className: "mb-2 text-left font-semibold text-[18px] text-white lg:mb-0 lg:text-2xl", children: jackpot?.name }), _jsx("div", { className: `${variation.poolBg} ${variation.textColor} flex w-fit rounded-lg px-2 font-semibold text-[26px] lg:text-[36px]`, children: formatNumber(jackpotAmount, {
+                                                                        currency: localeInfo.currency.code,
+                                                                        minDecimalPlaces: 2,
+                                                                        maxDecimalPlaces: 2,
+                                                                    }) })] }), _jsx(Image, { width: 175, height: 175, src: treasureChest, alt: "treasure chest", className: twMerge('absolute top-[0px] right-[-3px] h-[124px] w-[124px] md:top-0 lg:top-[-30px] lg:h-[175px] lg:w-[175px]'), priority: false, loading: "lazy" })] }) }) }) }), _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", "aria-live": "polite", children: formatNumber(0, {
+                                                            currency: localeInfo.currency.code,
+                                                            compact: true,
+                                                        }) }), _jsxs("div", { className: "relative flex items-center justify-end gap-1.5", children: [isPayingOut ? (_jsx("div", { className: "flex w-6 items-center", children: [0, 1.5, 3].map((left, i) => (_jsx("div", { className: twMerge(`absolute left-${left}`, styles[`animate-arrow-red-flash-${i + 1}`]), children: _jsx(ChevronLeftIcon, { className: "size-4.5" }) }, i))) })) : (_jsx("div", { className: "flex w-6 items-center", children: [0, 1.5, 3].map((left, i) => (_jsx("div", { className: twMerge(`absolute left-${left}`, styles[`animate-arrow-green-flash-${i + 1}`]), children: _jsx(ChevronRightIcon, { className: "size-4.5" }) }, i))) })), _jsx("div", { className: "font-semibold text-text-primary-900 text-xs", children: formatNumber(jackpot?.maximumJackpotPoolLimit, {
+                                                                    currency: localeInfo.currency.code,
+                                                                    compact: true,
+                                                                }) })] })] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary lg:h-4", max: 100, value: getPercentage(jackpot.pool, jackpot.maximumJackpotPoolLimit), "aria-valuenow": getPercentage(jackpot.pool, jackpot.maximumJackpotPoolLimit), "aria-valuemax": 100, "aria-label": "Jackpot progress", children: _jsx(Progress.Track, { className: twMerge('h-full overflow-hidden rounded-full', variation.progressBg), children: _jsx(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }) }) }) }), _jsx("div", { className: "mt-2 h-2 text-left text-[#F5F5F6] text-xs lg:h-auto lg:text-sm", dangerouslySetInnerHTML: { __html: getInfoBlocks()[infoIndex] } }, infoIndex)] })] }), _jsx("div", { className: "flex items-start gap-5 text-white", children: jackpotPayouts.length ? (_jsxs("div", { className: "flex h-full w-full flex-row items-center justify-between gap-3 lg:w-[280px] lg:flex-col lg:justify-center", children: [_jsx("p", { className: "hidden font-bold text-lg lg:block", children: "Recent Payout \uD83C\uDF89" }), _jsxs("div", { children: [_jsx("p", { className: "mb-1 block font-bold text-[14px] lg:hidden lg:text-lg", children: "Recent Payout \uD83C\uDF89" }), _jsxs("p", { className: "block text-xs leading-[18px] tracking-wider lg:hidden", children: ["Massive payout unlocked! ", _jsx("br", {}), " Who's next? \uD83D\uDCB0"] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: `${variation.topPayoutImgBorderColor} relative flex h-[54px] w-[54px] items-center justify-center rounded-full object-contain p-[3.5px] lg:h-[74px] lg:w-[74px]`, children: [_jsx("div", { className: `flex h-full w-full items-center justify-center rounded-full ${variation.topPayoutImgBg}`, children: _jsx(User02Icon, { className: "h-[34px] w-auto lg:h-[44px]" }) }), _jsx("div", { className: `${variation.topPayoutImgBorderColor} absolute right-[-6px] bottom-[-5px] flex h-8 w-8 items-center justify-center rounded-full p-[2px] lg:right-0 lg:bottom-0`, children: _jsxs("div", { className: `flex h-full w-full items-center justify-center rounded-full font-bold text-[10px] ${variation.topPayoutImgBorderColor} ${variation.textColor} ${variation.multiplierBg} ${variation.multiplierColor}`, children: [jackpotPayouts[0].multiplier, "x"] }) })] }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold text-2xl", children: maskName(jackpotPayouts[0].member.name) }), _jsx("p", { className: `${variation.poolBg} rounded-lg px-2 font-semibold text-[22px] ${variation.textColor}`, children: formatNumber(jackpotPayouts[0].amount, {
+                                                                currency: localeInfo.currency.code,
+                                                                minDecimalPlaces: 2,
+                                                                maxDecimalPlaces: 2,
+                                                            }) })] })] }), _jsxs("p", { className: "hidden text-center text-xs leading-[18px] tracking-wider lg:block", children: ["Massive payout unlocked! ", _jsx("br", {}), " Who's next? \uD83D\uDCB0"] })] })) : (_jsxs("div", { className: "flex h-full w-full flex-row-reverse items-center justify-between lg:w-[280px] lg:flex-col lg:justify-center", children: [_jsx(Image, { src: coins, alt: "coins", className: "ml-2" }), _jsxs("div", { children: [_jsx("p", { className: "mt-1 font-semibold text-lg leading-6", children: "No one has won big yet" }), _jsxs("p", { className: "mt-1 text-start text-[0.75rem] leading-[1.125rem] lg:text-center", children: ["You could be the first to win the ", _jsx("br", {}), " jackpot!"] })] })] })) })] }), isPayingOut ? (_jsx("div", { className: twMerge(styles['light-rays'], variation.raysColor, 'rounded-t-2xl [--light-rays-left:90%] [--light-rays-top:100px]') })) : (_jsx(Image, { width: 175, height: 175, src: treasureChestBg, alt: "treasure chest background", className: twMerge('absolute top-0 right-0 h-full w-[380px] object-cover opacity-50'), priority: false, loading: "lazy" }))] }), _jsxs("div", { className: "relative flex w-full flex-col items-center rounded-b-2xl bg-[#171b26] px-4", children: [_jsxs("div", { className: "flex w-full justify-between py-4", children: [_jsxs("button", { onClick: () => setSeeDetails((v) => !v), type: "button", className: "flex items-center gap-1 font-medium text-[#fff] text-sm", children: ["See details", ' ', seeDetails ? (_jsx(ChevronUpIcon, { className: "h-5" })) : (_jsx(ChevronDownIcon, { className: "h-5" }))] }), _jsx("button", { type: "button", className: "text-nowrap text-[#FFE5AF] text-sm underline underline-offset-4", children: "Jackpot Rules" })] }), seeDetails && (_jsxs("div", { className: "w-full", children: [_jsxs("div", { children: [_jsx("div", { className: "mt-[6px] flex justify-between text-[#CECFD2] text-lg", children: _jsxs("div", { className: "flex items-center gap-3 font-semibold", children: [_jsx(Image, { src: coin, alt: "coin", className: "h-6" }), "Recent Payouts"] }) }), _jsx("div", { className: "mt-[1.25rem] mb-[2rem] gap-[0.625rem]", children: _jsx("div", { className: "flex-1 overflow-x-auto rounded-lg border border-[#1F242F]", children: _jsxs("table", { className: "w-full min-w-[700px]", children: [_jsx("thead", { children: _jsx("tr", { className: "h-[44px] bg-[#0C111D] text-[#94969C] text-xs", children: [
+                                                                'Player',
+                                                                'Game Provider',
+                                                                'Multiplier',
+                                                                'Prize',
+                                                                'Timestamp',
+                                                            ].map((label) => (_jsx("th", { className: "whitespace-nowrap border-[#1F242F] border-b px-6 py-2 text-left", children: label }, label))) }) }), _jsx("tbody", { children: jackpotPayouts.length
+                                                            ? jackpotPayouts
+                                                                .filter((jp) => jp.id !== '5HMmGqAZDPqqeFHBmv')
+                                                                .map((jp) => (_jsxs("tr", { className: "h-[44px] bg-[#0C111D] text-left text-[#94969C] text-sm", children: [_jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: maskName(jp?.member?.name) }), _jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: formatProviderName(jp?.game.provider ?? '-') }), _jsxs("td", { className: "border-[#1F242F] border-b px-6 py-2", children: [jp?.multiplier, "x"] }), _jsx("td", { className: "border-[#1F242F] border-b px-6 py-2 text-[#47CD89]", children: formatNumber(jp?.amount ?? 0, {
+                                                                            currency: localeInfo.currency.code,
+                                                                            minDecimalPlaces: 2,
+                                                                            maxDecimalPlaces: 2,
+                                                                        }) }), _jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: format(new Date(jp.dateTimeCreated), 'dd MMM yyyy h:mm a') })] }, jp.id)))
+                                                            : Array.from({ length: 5 }).map((_, i) => (_jsxs("tr", { className: "h-[44px] bg-[#0C111D] text-left text-[#94969C] text-sm", children: [_jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: "-" }), _jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: "-" }), _jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: "-" }), _jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: "-" }), _jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: "-" })] }, i))) })] }) }) })] }), _jsx("div", { className: "w-full", children: Boolean(filteredGameProviders.length) && (_jsx(JackpotsListItemGameProviders, { gameProviders: filteredGameProviders, heading: _jsxs("div", { className: "flex items-center gap-3 font-semibold", children: [_jsx(Image, { src: treasureChest, alt: "treasure chest", className: "size-6" }), "Game Providers"] }) })) })] }))] })] }));
+}
+function formatProviderName(provider) {
+    return provider
+        .split('_')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(' ');
+}

package/dist/components/Jackpots/JackpotsList/JackpotsListItem.module.css

@@ -1,184 +1,184 @@
-@keyframes arrow-green-flash {
-  0% {
-    color: #abefc6;
-  }
-  100% {
-    color: #079455;
-  }
-}
-
-.animate-arrow-green-flash-1 {
-  animation: arrow-green-flash 0.4s infinite;
-  animation-delay: -0.2s;
-}
-
-.animate-arrow-green-flash-2 {
-  animation: arrow-green-flash 0.4s infinite;
-  animation-delay: -0.1s;
-}
-
-.animate-arrow-green-flash-3 {
-  animation: arrow-green-flash 0.4s infinite;
-}
-
-@keyframes arrow-red-flash {
-  0%,
-  100% {
-    color: #f97066;
-  }
-  50% {
-    color: #fecdca;
-  }
-}
-
-.animate-arrow-red-flash-1 {
-  animation: arrow-red-flash 0.4s infinite;
-}
-
-.animate-arrow-red-flash-2 {
-  animation: arrow-red-flash 0.4s infinite;
-  animation-delay: -0.1s;
-}
-
-.animate-arrow-red-flash-3 {
-  animation: arrow-red-flash 0.4s infinite;
-  animation-delay: -0.2s;
-}
-
-/* Animated BG */
-@keyframes rotate {
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-.light-rays {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-
-  --first: var(--color-bg-tertiary);
-  --second: var(--color-bg-quaternary);
-}
-
-.light-rays::before,
-.light-rays::after {
-  content: '';
-  position: absolute;
-  top: var(--light-rays-top, 150px);
-  left: calc(50% - 90px);
-  margin: -100vmax;
-  width: 200vmax;
-  height: 200vmax;
-  opacity: 0.6;
-  transform-origin: center;
-}
-
-.light-rays::before {
-  background: conic-gradient(
-    var(--first) 0deg 7.2deg,
-    var(--second) 7.2deg 14.4deg,
-    var(--first) 14.4deg 21.6deg,
-    var(--second) 21.6deg 28.8deg,
-    var(--first) 28.8deg 36deg,
-    var(--second) 36deg 43.2deg,
-    var(--first) 43.2deg 50.4deg,
-    var(--second) 50.4deg 57.6deg,
-    var(--first) 57.6deg 64.8deg,
-    var(--second) 64.8deg 72deg,
-    var(--first) 72deg 79.2deg,
-    var(--second) 79.2deg 86.4deg,
-    var(--first) 86.4deg 93.6deg,
-    var(--second) 93.6deg 100.8deg,
-    var(--first) 100.8deg 108deg,
-    var(--second) 108deg 115.2deg,
-    var(--first) 115.2deg 122.4deg,
-    var(--second) 122.4deg 129.6deg,
-    var(--first) 129.6deg 136.8deg,
-    var(--second) 136.8deg 144deg,
-    var(--first) 144deg 151.2deg,
-    var(--second) 151.2deg 158.4deg,
-    var(--first) 158.4deg 165.6deg,
-    var(--second) 165.6deg 172.8deg,
-    var(--first) 172.8deg 180deg,
-    var(--second) 180deg 187.2deg,
-    var(--first) 187.2deg 194.4deg,
-    var(--second) 194.4deg 201.6deg,
-    var(--first) 201.6deg 208.8deg,
-    var(--second) 208.8deg 216deg,
-    var(--first) 216deg 223.2deg,
-    var(--second) 223.2deg 230.4deg,
-    var(--first) 230.4deg 237.6deg,
-    var(--second) 237.6deg 244.8deg,
-    var(--first) 244.8deg 252deg,
-    var(--second) 252deg 259.2deg,
-    var(--first) 259.2deg 266.4deg,
-    var(--second) 266.4deg 273.6deg,
-    var(--first) 273.6deg 280.8deg,
-    var(--second) 280.8deg 288deg,
-    var(--first) 288deg 295.2deg,
-    var(--second) 295.2deg 302.4deg,
-    var(--first) 302.4deg 309.6deg,
-    var(--second) 309.6deg 316.8deg,
-    var(--first) 316.8deg 324deg,
-    var(--second) 324deg 331.2deg,
-    var(--first) 331.2deg 338.4deg,
-    var(--second) 338.4deg 345.6deg,
-    var(--first) 345.6deg 352.8deg,
-    var(--second) 352.8deg 360deg
-  );
-  animation: rotate 20s linear infinite;
-}
-
-@media (max-width: 1024px) {
-  .light-rays::before,
-  .light-rays::after {
-    left: auto;
-    right: 11%;
-  }
-}
-
-/* ScrollArea.module.css */
-.scrollArea {
-  overflow-y: scroll;
-  padding-right: 4px;
-}
-
-/* WebKit-based browsers */
-.scrollArea::-webkit-scrollbar {
-  width: 8px;
-}
-
-.scrollArea::-webkit-scrollbar-track {
-  background: var(--color-bg-primary-alt);
-  border-radius: 9999px;
-}
-
-.scrollArea::-webkit-scrollbar-thumb {
-  background-color: var(--color-bg-quaternary);
-  border-radius: 9999px;
-}
-
-@keyframes waveColor {
-  0%,
-  2.5% {
-    color: var(--wave-highlight-color);
-  }
-  2.51%,
-  100% {
-    color: var(--color-brand-300);
-  }
-}
-
-.animate-wave-color-success {
-  --wave-highlight-color: var(--color-success-800);
-  animation: waveColor 4s ease-in-out infinite;
-}
-
-.animate-wave-color-error {
-  --wave-highlight-color: var(--color-error-600);
-  animation: waveColor 4s ease-in-out infinite;
-}
+@keyframes arrow-green-flash {
+  0% {
+    color: #abefc6;
+  }
+  100% {
+    color: #079455;
+  }
+}
+
+.animate-arrow-green-flash-1 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+.animate-arrow-green-flash-2 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-green-flash-3 {
+  animation: arrow-green-flash 0.4s infinite;
+}
+
+@keyframes arrow-red-flash {
+  0%,
+  100% {
+    color: #f97066;
+  }
+  50% {
+    color: #fecdca;
+  }
+}
+
+.animate-arrow-red-flash-1 {
+  animation: arrow-red-flash 0.4s infinite;
+}
+
+.animate-arrow-red-flash-2 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-red-flash-3 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+/* Animated BG */
+@keyframes rotate {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.light-rays {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+
+  --first: var(--color-bg-tertiary);
+  --second: var(--color-bg-quaternary);
+}
+
+.light-rays::before,
+.light-rays::after {
+  content: '';
+  position: absolute;
+  top: var(--light-rays-top, 150px);
+  left: calc(50% - 90px);
+  margin: -100vmax;
+  width: 200vmax;
+  height: 200vmax;
+  opacity: 0.6;
+  transform-origin: center;
+}
+
+.light-rays::before {
+  background: conic-gradient(
+    var(--first) 0deg 7.2deg,
+    var(--second) 7.2deg 14.4deg,
+    var(--first) 14.4deg 21.6deg,
+    var(--second) 21.6deg 28.8deg,
+    var(--first) 28.8deg 36deg,
+    var(--second) 36deg 43.2deg,
+    var(--first) 43.2deg 50.4deg,
+    var(--second) 50.4deg 57.6deg,
+    var(--first) 57.6deg 64.8deg,
+    var(--second) 64.8deg 72deg,
+    var(--first) 72deg 79.2deg,
+    var(--second) 79.2deg 86.4deg,
+    var(--first) 86.4deg 93.6deg,
+    var(--second) 93.6deg 100.8deg,
+    var(--first) 100.8deg 108deg,
+    var(--second) 108deg 115.2deg,
+    var(--first) 115.2deg 122.4deg,
+    var(--second) 122.4deg 129.6deg,
+    var(--first) 129.6deg 136.8deg,
+    var(--second) 136.8deg 144deg,
+    var(--first) 144deg 151.2deg,
+    var(--second) 151.2deg 158.4deg,
+    var(--first) 158.4deg 165.6deg,
+    var(--second) 165.6deg 172.8deg,
+    var(--first) 172.8deg 180deg,
+    var(--second) 180deg 187.2deg,
+    var(--first) 187.2deg 194.4deg,
+    var(--second) 194.4deg 201.6deg,
+    var(--first) 201.6deg 208.8deg,
+    var(--second) 208.8deg 216deg,
+    var(--first) 216deg 223.2deg,
+    var(--second) 223.2deg 230.4deg,
+    var(--first) 230.4deg 237.6deg,
+    var(--second) 237.6deg 244.8deg,
+    var(--first) 244.8deg 252deg,
+    var(--second) 252deg 259.2deg,
+    var(--first) 259.2deg 266.4deg,
+    var(--second) 266.4deg 273.6deg,
+    var(--first) 273.6deg 280.8deg,
+    var(--second) 280.8deg 288deg,
+    var(--first) 288deg 295.2deg,
+    var(--second) 295.2deg 302.4deg,
+    var(--first) 302.4deg 309.6deg,
+    var(--second) 309.6deg 316.8deg,
+    var(--first) 316.8deg 324deg,
+    var(--second) 324deg 331.2deg,
+    var(--first) 331.2deg 338.4deg,
+    var(--second) 338.4deg 345.6deg,
+    var(--first) 345.6deg 352.8deg,
+    var(--second) 352.8deg 360deg
+  );
+  animation: rotate 20s linear infinite;
+}
+
+@media (max-width: 1024px) {
+  .light-rays::before,
+  .light-rays::after {
+    left: auto;
+    right: 11%;
+  }
+}
+
+/* ScrollArea.module.css */
+.scrollArea {
+  overflow-y: scroll;
+  padding-right: 4px;
+}
+
+/* WebKit-based browsers */
+.scrollArea::-webkit-scrollbar {
+  width: 8px;
+}
+
+.scrollArea::-webkit-scrollbar-track {
+  background: var(--color-bg-primary-alt);
+  border-radius: 9999px;
+}
+
+.scrollArea::-webkit-scrollbar-thumb {
+  background-color: var(--color-bg-quaternary);
+  border-radius: 9999px;
+}
+
+@keyframes waveColor {
+  0%,
+  2.5% {
+    color: var(--wave-highlight-color);
+  }
+  2.51%,
+  100% {
+    color: var(--color-brand-300);
+  }
+}
+
+.animate-wave-color-success {
+  --wave-highlight-color: var(--color-success-800);
+  animation: waveColor 4s ease-in-out infinite;
+}
+
+.animate-wave-color-error {
+  --wave-highlight-color: var(--color-error-600);
+  animation: waveColor 4s ease-in-out infinite;
+}

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

@@ -1,11 +1,13 @@
 import { type ImageProps } from 'next/image';
+import { type ReactNode } from 'react';
 import type { GameProviderData } from '../../../types';
 interface JackpotGameProvider extends GameProviderData {
     redirectUrl: string;
     providedLogo?: ImageProps['src'];
 }
 export interface JackpotsListItemGameProvidersProps {
+    heading?: string | ReactNode;
     gameProviders: JackpotGameProvider[];
 }
-export declare function JackpotsListItemGameProviders({ gameProviders, }: JackpotsListItemGameProvidersProps): import("react/jsx-runtime").JSX.Element;
+export declare function JackpotsListItemGameProviders({ heading, gameProviders, }: JackpotsListItemGameProvidersProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -9,7 +9,7 @@ import { ArrowLeftIcon } from '../../../icons/ArrowLeftIcon.js';
 import { ArrowRightIcon } from '../../../icons/ArrowRightIcon.js';
 import { Button } from '../../../ui/Button/index.js';
 import { useJackpotsListPropsContext } from './JackpotsListContext.js';
-export function JackpotsListItemGameProviders({ gameProviders, }) {
+export function JackpotsListItemGameProviders({ heading, gameProviders, }) {
     const jackpotsProps = useJackpotsListPropsContext();
     const classNames = isString(jackpotsProps.className)
         ? { root: jackpotsProps.className }
@@ -41,5 +41,5 @@ export function JackpotsListItemGameProviders({ gameProviders, }) {
         emblaApi.on('select', onSelect);
         emblaApi.on('reInit', onSelect);
     }, [emblaApi, onSelect]);
-    return (_jsxs("div", { className: twMerge('p-4 pb-8', classNames.providerRoot), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: twMerge('font-semibold text-lg text-text-primary-900', classNames.providerHeading), children: "Jackpot Game Providers" }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: twMerge('rounded-r-none border-r-0', classNames.providerNavigationButton), "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: twMerge('rounded-l-none', classNames.providerNavigationButton), "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] }), _jsx("div", { className: "relative mt-3 overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-3.5", children: gameProviders.map((provider) => (_jsx(Link, { href: provider.redirectUrl, className: twMerge('min-w-27.5 rounded-md bg-brand-800 lg:bg-bg-primary-900', classNames.providerThumbnailRoot), children: _jsx(Image, { src: provider.providedLogo ?? provider.logo, alt: "provider", className: twMerge('size-full', classNames.providerThumbnailImage), width: 300, height: 150 }) }, provider.slug))) }) })] }));
+    return (_jsxs("div", { className: twMerge('p-4 pb-8', classNames.providerRoot), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: twMerge('font-semibold text-lg text-text-primary-900', classNames.providerHeading), children: heading ?? 'Jackpot Game Providers' }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: twMerge('rounded-r-none border-r-0', classNames.providerNavigationButton), "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: twMerge('rounded-l-none', classNames.providerNavigationButton), "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] }), _jsx("div", { className: "relative mt-3 overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-3.5", children: gameProviders.map((provider) => (_jsx(Link, { href: provider.redirectUrl, className: twMerge('min-w-27.5 rounded-md bg-brand-800 lg:bg-bg-primary-900', classNames.providerThumbnailRoot), children: _jsx(Image, { src: provider.providedLogo ?? provider.logo, alt: "provider", className: twMerge('size-full', classNames.providerThumbnailImage), width: 300, height: 150 }) }, provider.slug))) }) })] }));
 }

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

@@ -1,4 +1,4 @@
-export declare const JACKPOTS_VARIATIONS: {
+export declare const CRAZYWIN_JACKPOTS_VARIATIONS: {
     background: string;
     progressBg: string;
     textColor: string;
@@ -9,3 +9,16 @@ export declare const JACKPOTS_VARIATIONS: {
     topPayoutImgBg: string;
     raysColor: string;
 }[];
+export declare const HAPPYBINGO_JACKPOTS_VARIATIONS: {
+    background: string;
+    progressBg: string;
+    textColor: string;
+    poolBg: string;
+    multiplierColor: string;
+    multiplierBg: string;
+    topPayoutImgBorderColor: string;
+    topPayoutImgBg: string;
+    raysColor: string;
+}[];
+export declare function formatProviderName(provider: string): string;
+export declare const maskName: (name: string) => string;