@opexa/portal-components 0.0.34 → 0.0.36

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,57 @@
+'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 } from '../../utils/index.js';
+import { maskDisplayName } from '../../utils/maskDisplayName.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: maskDisplayName(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: maskDisplayName(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

@@ -1,7 +1,7 @@
-import type { Jackpot } from '@opexa/portal-sdk-core';
-export interface JackpotCounterCardProps {
-    jackpot: Jackpot;
-    /** @default "/jackpots" */
-    viewAllUrl?: string;
+import type { Tournament } from '@opexa/portal-sdk-core';
+import type { GameProviderData } from '~/types';
+export interface TournamentItemMobileProps {
+    tournament: Tournament;
+    gameProviders: GameProviderData[];
 }
-export declare function TournamentItemMobile({ jackpot }: JackpotCounterCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function TournamentItemMobile({ tournament, gameProviders, }: TournamentItemMobileProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tournaments/TournamentItemMobile.js

@@ -1,79 +1,39 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { pick } from 'lodash-es';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Image from 'next/image';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { useLocaleInfo } from '../../client/hooks/index.js';
-import { Trophy01Icon } from '../../icons/index.js';
+import { Trophy01Icon, User01Icon } from '../../icons/index.js';
 import { ArrowNarrowDownIcon } from '../../icons/ArrowNarrowDownIcon.js';
 import { ArrowNarrowUpIcon } from '../../icons/ArrowNarrowUpIcon.js';
 import { Award01Icon } from '../../icons/Award01Icon.js';
 import { StarIcon } from '../../icons/StarIcon.js';
-import firstPlace from '../../images/first-place.png';
-import trophy from '../../images/trophy.png';
+import firstPlace from '~/images/first-place.png';
+import trophy from '~/images/trophy.png';
 import { Button } from '../../ui/index.js';
 import { formatNumber } from '../../utils/index.js';
+import { maskDisplayName } from '../../utils/maskDisplayName.js';
 import { TournamentGameProviders } from './TournamentGameProviders.js';
 import { TournamentRules } from './TournamentRules.js';
-export function TournamentItemMobile({ jackpot }) {
-    const localeInfo = useLocaleInfo();
+import { useTournamentItemData } from './useTournamentItemData.js';
+export function TournamentItemMobile({ tournament, gameProviders, }) {
     const [isDetailsVisible, setIsDetailsVisible] = useState(false);
-    const [timeRemaining, setTimeRemaining] = useState({
-        days: 0,
-        hours: 0,
-        minutes: 0,
-        seconds: 0,
-        isPast: false,
-    });
-    // Temp Date
-    const activationEndDateTime = useMemo(() => {
-        const now = new Date();
-        return new Date(now.setSeconds(now.getSeconds() + 2 * 24 * 60 * 60)); // Add 2 days in seconds
-    }, []);
-    const calculateRemainingTime = React.useCallback(() => {
-        const now = new Date();
-        const diffMs = activationEndDateTime.getTime() - now.getTime();
-        if (diffMs <= 0) {
-            setTimeRemaining({
-                days: 0,
-                hours: 0,
-                minutes: 0,
-                seconds: 0,
-                isPast: true,
-            });
-            return;
-        }
-        const diffSeconds = Math.floor(diffMs / 1000);
-        const days = Math.floor(diffSeconds / (3600 * 24));
-        const hours = Math.floor((diffSeconds % (3600 * 24)) / 3600);
-        const minutes = Math.floor((diffSeconds % 3600) / 60);
-        const seconds = diffSeconds % 60;
-        const updated = pick({ days, hours, minutes, seconds, isPast: false }, [
-            'days',
-            'hours',
-            'minutes',
-            'seconds',
-            'isPast',
-        ]);
-        setTimeRemaining(updated);
-    }, [activationEndDateTime]);
-    useEffect(() => {
-        calculateRemainingTime();
-        const interval = setInterval(calculateRemainingTime, 1000); // Update every second
-        return () => clearInterval(interval);
-    }, [activationEndDateTime, calculateRemainingTime]);
-    const timeParts = [
-        { label: 'Day', value: timeRemaining.days },
-        { label: 'Hour', value: timeRemaining.hours },
-        { label: 'Min', value: timeRemaining.minutes },
-        { label: 'Sec', value: timeRemaining.seconds },
-    ];
-    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: jackpot.name }), _jsx("div", { className: "bg-bg-primary text-brand-400 mt-1.5 w-fit rounded-md px-2 py-1 text-2xl font-bold lg:mt-2 lg:text-4xl", children: formatNumber(jackpot.pool, {
+    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" }) })] }) }) }) }), _jsxs("div", { className: "bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4 lg:hidden", children: [_jsx("div", { className: "h-[87px] min-w-[66px]", children: _jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "closeChest", className: "size-full 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: "Starting soon!" }) }), _jsx(TournamentRules, { jackpotRules: "<strong>Rules and guidelines <br> 1/20/2025 ~ 1/21/2025</strong><br><br>\r\n                      <p>1. The contest prize pool closely depends on the bankroll \u2014 the more players bet, the bigger it grows.</p>" })] }), _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: 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 })] })) : ('-') }), _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))) })] }) }) })] }), _jsx(TournamentGameProviders, {}), _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" })] }) }) })] }))] }));
+                                                        }) })] }), _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: maskDisplayName(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: maskDisplayName(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 = [
     {

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

@@ -1,8 +1,10 @@
+import type { GameProviderData } from '~/types';
 export interface TournamentsProps {
     /** @default "Tournaments" */
     heading?: string;
     /** @default "/tournaments" */
     viewAllUrl?: string;
     className?: string;
+    gameProviders: GameProviderData[];
 }
-export declare function Tournaments(props: TournamentsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Tournaments(props: TournamentsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tournaments/Tournaments.js

@@ -1,26 +1,19 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useJackpotsQuery } from '../../client/hooks/index.js';
-import { TournamentItem } from './TournamentItem.js';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { useTournamentsQuery } from '../../client/hooks/index.js';
+import closeChest from '~/images/close-chest.png';
+import { TournamentItemDesktop } from './TournamentItemDesktop.js';
 import { TournamentItemMobile } from './TournamentItemMobile.js';
 export function Tournaments(props) {
-    const jackpotsQuery = useJackpotsQuery({
+    const tournamentsQuery = useTournamentsQuery({
         first: 100,
         filter: {
             status: {
                 equal: 'ACTIVE',
             },
-            deleted: {
-                equal: false,
-            },
-        },
-        sort: {
-            cursor: 'POOL',
-            order: 'DESC',
         },
     });
-    const jackpots = jackpotsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
-    if (jackpots.length <= 0)
-        return null;
-    return (_jsxs("div", { className: props.className, children: [_jsx("div", { className: "mb-3 text-lg font-semibold lg:mb-4.5", children: props.heading ?? 'Tournaments' }), _jsx("div", { className: "hidden flex-col gap-6 lg:flex", children: jackpots.map((jackpot) => (_jsx(TournamentItem, { jackpot: jackpot }, jackpot.id))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: jackpots.map((jackpot) => (_jsx(TournamentItemMobile, { jackpot: jackpot }, jackpot.id))) })] }));
+    const tournaments = tournamentsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
+    return (_jsxs("div", { className: props.className, children: [_jsx("div", { className: "mb-3 text-lg font-semibold lg:mb-4.5", children: props.heading ?? 'Tournaments' }), tournaments.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden flex-col gap-6 lg:flex", children: tournaments.map((tournament, i) => (_jsx(TournamentItemDesktop, { tournament: tournament, gameProviders: props.gameProviders }, i))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: tournaments.map((tournament, i) => (_jsx(TournamentItemMobile, { tournament: tournament, gameProviders: props.gameProviders }, i))) })] })) : (_jsxs("div", { className: "mt-11 flex flex-col items-center justify-center", children: [_jsx(Image, { width: 100, height: 100, src: closeChest, alt: "closeChest", quality: 100, className: "h-29.5 w-29.5 lg:h-25 lg:w-25 size-full mix-blend-luminosity" }), _jsx("div", { className: "text-text-primary-900 mt-4 text-base font-semibold", children: props.heading ?? 'Tournaments' }), _jsxs("div", { className: "text-text-tertiary-600 mt-1 text-center text-sm", children: ["No ", props.heading?.toLocaleLowerCase() ?? 'tournaments', " are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }))] }));
 }

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

@@ -0,0 +1,16 @@
+import type { Tournament } from '@opexa/portal-sdk-core';
+import type { GameProviderData } from '~/types';
+export interface TournamentItemProps {
+    tournament: Tournament;
+    gameProviders: GameProviderData[];
+}
+export declare function useTournamentItemData({ tournament, gameProviders, }: TournamentItemProps): {
+    timeParts: {
+        label: string;
+        value: number;
+    }[];
+    tournamentReward: number;
+    prizeAmountsByRank: number[];
+    filteredGameProviders: GameProviderData[];
+    localeInfo: import("../../utils").LocaleInfo;
+};

package/dist/components/Tournaments/useTournamentItemData.js

@@ -0,0 +1,64 @@
+import { pick } from 'lodash-es';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useLocaleInfo } from '../../client/hooks/index.js';
+export function useTournamentItemData({ tournament, gameProviders, }) {
+    const localeInfo = useLocaleInfo();
+    const [timeRemaining, setTimeRemaining] = useState({
+        days: 0,
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+        isPast: false,
+    });
+    const activationEndDateTime = useMemo(() => new Date(tournament.activationEndDateTime), [tournament.activationEndDateTime]);
+    const calculateRemainingTime = React.useCallback(() => {
+        const now = new Date();
+        const diffMs = activationEndDateTime.getTime() - now.getTime();
+        if (diffMs <= 0) {
+            setTimeRemaining({
+                days: 0,
+                hours: 0,
+                minutes: 0,
+                seconds: 0,
+                isPast: true,
+            });
+            return;
+        }
+        const diffSeconds = Math.floor(diffMs / 1000);
+        const days = Math.floor(diffSeconds / (3600 * 24));
+        const hours = Math.floor((diffSeconds % (3600 * 24)) / 3600);
+        const minutes = Math.floor((diffSeconds % 3600) / 60);
+        const seconds = diffSeconds % 60;
+        const updated = pick({ days, hours, minutes, seconds, isPast: false }, [
+            'days',
+            'hours',
+            'minutes',
+            'seconds',
+            'isPast',
+        ]);
+        setTimeRemaining(updated);
+    }, [activationEndDateTime]);
+    useEffect(() => {
+        calculateRemainingTime();
+        const interval = setInterval(calculateRemainingTime, 1000); // Update every second
+        return () => clearInterval(interval);
+    }, [activationEndDateTime, calculateRemainingTime]);
+    const timeParts = [
+        { label: 'Day', value: timeRemaining.days },
+        { label: 'Hour', value: timeRemaining.hours },
+        { label: 'Min', value: timeRemaining.minutes },
+        { label: 'Sec', value: timeRemaining.seconds },
+    ];
+    const tournamentReward = Object.values(tournament.rewardSettings)
+        .map(Number)
+        .reduce((sum, val) => sum + val, 0);
+    const prizeAmountsByRank = Object.values(tournament.rewardSettings).map(Number);
+    const filteredGameProviders = gameProviders.filter((provider) => tournament.enabledGameProviders.includes(provider.id));
+    return {
+        timeParts,
+        tournamentReward,
+        prizeAmountsByRank,
+        filteredGameProviders,
+        localeInfo,
+    };
+}

package/dist/components/index.d.ts

@@ -16,7 +16,6 @@ export * from './Games';
 export * from './GamesSearch';
 export * from './JackpotCounter';
 export * from './Jackpots';
-export * from './KYC';
 export * from './Marquee';
 export * from './Messages';
 export * from './PortalProvider';

package/dist/components/index.js

@@ -16,7 +16,6 @@ export * from './Games/index.js';
 export * from './GamesSearch/index.js';
 export * from './JackpotCounter/index.js';
 export * from './Jackpots/index.js';
-export * from './KYC/index.js';
 export * from './Marquee/index.js';
 export * from './Messages/index.js';
 export * from './PortalProvider/index.js';

package/dist/icons/CreditCardCheckIcon.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare function CreditCardCheckIcon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/CreditCardCheckIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CreditCardCheckIcon(props) {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "M16 18L18 20L22 16M22 10H2M22 12V8.2C22 7.0799 22 6.51984 21.782 6.09202C21.5903 5.7157 21.2843 5.40974 20.908 5.21799C20.4802 5 19.9201 5 18.8 5H5.2C4.0799 5 3.51984 5 3.09202 5.21799C2.7157 5.40973 2.40973 5.71569 2.21799 6.09202C2 6.51984 2 7.0799 2 8.2V15.8C2 16.9201 2 17.4802 2.21799 17.908C2.40973 18.2843 2.71569 18.5903 3.09202 18.782C3.51984 19 4.0799 19 5.2 19H12" }) }));
+}

package/dist/icons/FaceIdIcon.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare function FaceIdIcon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/FaceIdIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FaceIdIcon(props) {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "M8 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V8M8 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V16M21 8V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H16M21 16V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H16M7.5 8V9.5M16.5 8V9.5M11 12.6001C11.8 12.6001 12.5 11.9001 12.5 11.1001V8M15.2002 15.2C13.4002 17 10.5002 17 8.7002 15.2" }) }));
+}

package/dist/icons/FileSearch02Icon.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare function FileSearch02Icon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/FileSearch02Icon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FileSearch02Icon(props) {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "M14 11H8M10 15H8M16 7H8M20 10.5V6.8C20 5.11984 20 4.27976 19.673 3.63803C19.3854 3.07354 18.9265 2.6146 18.362 2.32698C17.7202 2 16.8802 2 15.2 2H8.8C7.11984 2 6.27976 2 5.63803 2.32698C5.07354 2.6146 4.6146 3.07354 4.32698 3.63803C4 4.27976 4 5.11984 4 6.8V17.2C4 18.8802 4 19.7202 4.32698 20.362C4.6146 20.9265 5.07354 21.3854 5.63803 21.673C6.27976 22 7.11984 22 8.8 22H11.5M22 22L20.5 20.5M21.5 18C21.5 19.933 19.933 21.5 18 21.5C16.067 21.5 14.5 19.933 14.5 18C14.5 16.067 16.067 14.5 18 14.5C19.933 14.5 21.5 16.067 21.5 18Z" }) }));
+}

package/dist/icons/FileX02Icon.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare function FileX02Icon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/FileX02Icon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FileX02Icon(props) {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "M14 11H8M10 15H8M16 7H8M20 12V6.8C20 5.11984 20 4.27976 19.673 3.63803C19.3854 3.07354 18.9265 2.6146 18.362 2.32698C17.7202 2 16.8802 2 15.2 2H8.8C7.11984 2 6.27976 2 5.63803 2.32698C5.07354 2.6146 4.6146 3.07354 4.32698 3.63803C4 4.27976 4 5.11984 4 6.8V17.2C4 18.8802 4 19.7202 4.32698 20.362C4.6146 20.9265 5.07354 21.3854 5.63803 21.673C6.27976 22 7.11984 22 8.8 22H12M16 16L21 21M21 16L16 21" }) }));
+}

package/dist/icons/Globe05Icon.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare function Globe05Icon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/Globe05Icon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Globe05Icon(props) {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "M15 2.4578C14.053 2.16035 13.0452 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 10.2847 21.5681 8.67022 20.8071 7.25945M17 5.75H17.005M10.5001 21.8883L10.5002 19.6849C10.5002 19.5656 10.5429 19.4502 10.6205 19.3596L13.1063 16.4594C13.3106 16.2211 13.2473 15.8556 12.9748 15.6999L10.1185 14.0677C10.0409 14.0234 9.97663 13.9591 9.93234 13.8814L8.07046 10.6186C7.97356 10.4488 7.78657 10.3511 7.59183 10.3684L2.06418 10.8607M21 6C21 8.20914 19 10 17 12C15 10 13 8.20914 13 6C13 3.79086 14.7909 2 17 2C19.2091 2 21 3.79086 21 6ZM17.25 5.75C17.25 5.88807 17.1381 6 17 6C16.8619 6 16.75 5.88807 16.75 5.75C16.75 5.61193 16.8619 5.5 17 5.5C17.1381 5.5 17.25 5.61193 17.25 5.75Z" }) }));
+}

package/dist/icons/index.d.ts

@@ -23,14 +23,19 @@ export * from './CoinsHandIcon';
 export * from './CoinsStacked02Icon';
 export * from './CoinsSwap02Icon';
 export * from './CreditCard02Icon';
+export * from './CreditCardCheckIcon';
 export * from './Diamond01Icon';
 export * from './Expand03Icon';
 export * from './EyeIcon';
 export * from './EyeOffIcon';
 export * from './FacebookIcon';
+export * from './FaceIdIcon';
 export * from './File02Icon';
 export * from './FileCheck02Icon';
+export * from './FileSearch02Icon';
+export * from './FileX02Icon';
 export * from './Gift01Icon';
+export * from './Globe05Icon';
 export * from './GoogleIcon';
 export * from './HelpCircleIcon';
 export * from './InfoCircleIcon';

package/dist/icons/index.js

@@ -23,14 +23,19 @@ export * from './CoinsHandIcon.js';
 export * from './CoinsStacked02Icon.js';
 export * from './CoinsSwap02Icon.js';
 export * from './CreditCard02Icon.js';
+export * from './CreditCardCheckIcon.js';
 export * from './Diamond01Icon.js';
 export * from './Expand03Icon.js';
 export * from './EyeIcon.js';
 export * from './EyeOffIcon.js';
 export * from './FacebookIcon.js';
+export * from './FaceIdIcon.js';
 export * from './File02Icon.js';
 export * from './FileCheck02Icon.js';
+export * from './FileSearch02Icon.js';
+export * from './FileX02Icon.js';
 export * from './Gift01Icon.js';
+export * from './Globe05Icon.js';
 export * from './GoogleIcon.js';
 export * from './HelpCircleIcon.js';
 export * from './InfoCircleIcon.js';

package/dist/styles/theme.css

@@ -214,6 +214,8 @@
   --color-bg-quaternary: #373a41;
   --color-bg-active: #22262f;
   --color-bg-disabled-subtle: #f9fafb;
+  --color-bg-success-secondary: #079455;
+  --color-bg-overlay: #22262f;
 
   --color-text-brand: #feee95;
   --color-text-brand-primary-600: #eaaa08;
@@ -235,6 +237,9 @@
   --color-text-success-primary: #17b26a;
   --color-text-success-primary-600: #47cd89;
   --color-text-warning-primary: #f79009;
+  --color-text-error-primary: #f04438;
+  --color-text-featured-icon-light-success: #abefc6;
+  --color-text-featured-icon-light-error: #fecdca;
 
   --color-border-primary: #373a41;
   --color-border-secondary: #22262f;