@opexa/portal-components 0.0.378 → 0.0.380

package/dist/components/AccountInfo/GoogleDisconnect.d.ts

@@ -0,0 +1,7 @@
+import { type UseDisclosureReturn } from '../../client/hooks/useDisclosure';
+interface GoogleDisconnectProps {
+    onConfirmAction?: (ctx: UseDisclosureReturn) => React.ReactNode;
+    children?: (ctx: UseDisclosureReturn) => React.ReactNode;
+}
+export declare function GoogleDisconnect(props: GoogleDisconnectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/AccountInfo/GoogleDisconnect.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDisclosure, } from '../../client/hooks/useDisclosure.js';
+import { LinkBrokenIcon } from '../../icons/LinkBrokenIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+export function GoogleDisconnect(props) {
+    const disclosure = useDisclosure();
+    return (_jsxs(_Fragment, { children: [props.children?.(disclosure), _jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: disclosure.open, onOpenChange: (details) => disclosure.setOpen(details.open), closeOnEscape: false, closeOnInteractOutside: false, children: _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(LinkBrokenIcon, {}) }), _jsx("h2", { className: "mb-1 text-center font-semibold text-lg xl:mt-xl", children: "Disconnect Google Account" }), _jsx("p", { 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("div", { className: "pt-6", children: props.onConfirmAction?.(disclosure) })] }) })] }) })] }));
+}

package/dist/components/DepositWithdrawal/Withdrawal/GCashWithdrawal/GCashWithdrawal.js

@@ -26,6 +26,7 @@ import { Portal } from '../../../../ui/Portal/index.js';
 import { parseDecimal } from '../../../../utils/parseDecimal.js';
 import { AmountChoices } from '../../AmountChoices.js';
 import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
+import { explainError } from '../../utils.js';
 import { TransactionPasswordNotSet } from '../TransactionPasswordNotSet.js';
 export function GCashWithdrawal() {
     const depositWithdrawalProps = useDepositWithdrawalPropsContext();
@@ -130,7 +131,7 @@ export function GCashWithdrawal() {
                 }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-success-secondary text-text-featured-icon-light-success", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Withdraw', status === 'success' && 'Withdrawal Submitted', status === 'failed' && 'Withdraw Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
                                                         "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
                                                         'Your withdrawal request has been submitted successfully and is awaiting confirmation. You won’t have to wait long — once approved, the funds will be credited to your account.', status === 'failed' &&
-                                                        'Something went wrong while processing your withdrawal. Please try again or contact support.'] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
+                                                        explainError(createWithdrawalMutation.error?.name)] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
                                                     api.setOpen(false);
                                                 }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
 }

package/dist/components/DepositWithdrawal/Withdrawal/MayaAppWithdrawal/MayaAppWithdrawal.js

@@ -24,6 +24,7 @@ import { Portal } from '../../../../ui/Portal/index.js';
 import { parseDecimal } from '../../../../utils/parseDecimal.js';
 import { AmountChoices } from '../../AmountChoices.js';
 import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
+import { explainError } from '../../utils.js';
 import { TransactionPasswordNotSet } from '../TransactionPasswordNotSet.js';
 export function MayaAppWithdrawal() {
     const depositWithdrawalProps = useDepositWithdrawalPropsContext();
@@ -120,7 +121,7 @@ export function MayaAppWithdrawal() {
                 }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-success-secondary text-text-featured-icon-light-success", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Withdraw', status === 'success' && 'Withdrawal Submitted', status === 'failed' && 'Withdraw Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
                                                         "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
                                                         'Your withdrawal request has been submitted successfully and is awaiting confirmation. You won’t have to wait long — once approved, the funds will be credited to your account.', status === 'failed' &&
-                                                        'Something went wrong while processing your withdrawal. Please try again or contact support.'] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
+                                                        explainError(createWithdrawalMutation.error?.name)] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
                                                     api.setOpen(false);
                                                 }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
 }

package/dist/components/DepositWithdrawal/Withdrawal/MayaWithdrawal/MayaWithdrawal.js

@@ -26,6 +26,7 @@ import { Portal } from '../../../../ui/Portal/index.js';
 import { parseDecimal } from '../../../../utils/parseDecimal.js';
 import { AmountChoices } from '../../AmountChoices.js';
 import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
+import { explainError } from '../../utils.js';
 import { TransactionPasswordNotSet } from '../TransactionPasswordNotSet.js';
 export function MayaWithdrawal() {
     const depositWithdrawalProps = useDepositWithdrawalPropsContext();
@@ -130,7 +131,7 @@ export function MayaWithdrawal() {
                 }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-success-secondary text-text-featured-icon-light-success", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Withdraw', status === 'success' && 'Withdrawal Submitted', status === 'failed' && 'Withdraw Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
                                                         "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
                                                         'Your withdrawal request has been submitted successfully and is awaiting confirmation. You won’t have to wait long — once approved, the funds will be credited to your account.', status === 'failed' &&
-                                                        'Something went wrong while processing your withdrawal. Please try again or contact support.'] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
+                                                        explainError(createWithdrawalMutation.error?.name)] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
                                                     api.setOpen(false);
                                                 }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
 }

package/dist/components/DepositWithdrawal/Withdrawal/PisoPayWithdrawal/PisoPayWithdrawal.js

@@ -28,6 +28,7 @@ import { Select } from '../../../../ui/Select/index.js';
 import { parseDecimal } from '../../../../utils/parseDecimal.js';
 import { AmountChoices } from '../../AmountChoices.js';
 import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
+import { explainError } from '../../utils.js';
 import { TransactionPasswordNotSet } from '../TransactionPasswordNotSet.js';
 export function PisoPayWithdrawal() {
     const depositWithdrawalProps = useDepositWithdrawalPropsContext();
@@ -154,7 +155,7 @@ export function PisoPayWithdrawal() {
                 }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-success-secondary text-text-featured-icon-light-success", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Withdraw', status === 'success' && 'Withdrawal Submitted', status === 'failed' && 'Withdraw Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
                                                         "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
                                                         'Your withdrawal request has been submitted successfully and is awaiting confirmation. You won’t have to wait long — once approved, the funds will be credited to your account.', status === 'failed' &&
-                                                        'Something went wrong while processing your withdrawal. Please try again or contact support.'] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
+                                                        explainError(createWithdrawalMutation.error?.name)] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
                                                     api.setOpen(false);
                                                 }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
 }

package/dist/components/DepositWithdrawal/Withdrawal/VentajaWithdrawal/VentajaWithdrawal.js

@@ -28,6 +28,7 @@ import { Select } from '../../../../ui/Select/index.js';
 import { parseDecimal } from '../../../../utils/parseDecimal.js';
 import { AmountChoices } from '../../AmountChoices.js';
 import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
+import { explainError } from '../../utils.js';
 import { TransactionPasswordNotSet } from '../TransactionPasswordNotSet.js';
 export function VentajaWithdrawal() {
     const depositWithdrawalProps = useDepositWithdrawalPropsContext();
@@ -156,7 +157,7 @@ export function VentajaWithdrawal() {
                 }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-success-secondary text-text-featured-icon-light-success", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Withdraw', status === 'success' && 'Withdrawal Submitted', status === 'failed' && 'Withdraw Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
                                                         "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
                                                         'Your withdrawal request has been submitted successfully and is awaiting confirmation. You won’t have to wait long — once approved, the funds will be credited to your account.', status === 'failed' &&
-                                                        'Something went wrong while processing your withdrawal. Please try again or contact support.'] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
+                                                        explainError(createWithdrawalMutation.error?.name)] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
                                                     api.setOpen(false);
                                                 }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
 }

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

@@ -0,0 +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-jackpot-rays-primary);
+  --second: var(--color-jackpot-rays-secondary);
+}
+
+.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-jackpot-table-scrollbar-track);
+  border-radius: 9999px;
+}
+
+.scrollArea::-webkit-scrollbar-thumb {
+  background-color: var(--color-jackpot-table-scrollbar-thumb);
+  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/JackpotsCarousel/JackpotsCarousel.d.ts

@@ -1,7 +1,18 @@
 import { type CSSProperties } from 'react';
-interface ClassNameEntries {
+export interface ClassNameEntries {
     root?: string;
     itemRoot?: string;
+    jackpotAmountRoot?: string;
+    latestPayoutRoot?: string;
+    latestPayoutBadgeRoot?: string;
+    latestPayoutBadgeIcon?: string;
+    latestPayoutAmount?: string;
+    progressBarRoot?: string;
+    progressBarTrack?: string;
+    recentPayoutsRoot?: string;
+    recentPayoutsTableRoot?: string;
+    recentPayoutsTableHeadRow?: string;
+    recentPayoutsTableBodyRow?: string;
 }
 interface StyleEntries {
     root?: CSSProperties;

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, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape }) }, 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, viewAllUrl: props.viewAllUrl, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape }) }, jackpot.id))) }) })] }));
 }

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

@@ -1,7 +1,8 @@
 import { type CSSProperties } from 'react';
+import type { ClassNameEntries } from './JackpotsCarousel';
 export interface JackpotsCarouselItemProps {
     style?: CSSProperties;
-    className?: string;
+    className?: ClassNameEntries;
     /** @default "/jackpots" */
     viewAllUrl?: string;
     customJackpotChestImage?: {

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

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Progress } from '@ark-ui/react/progress';
 import { format } from 'date-fns';
 import isMobile from 'is-mobile';
@@ -24,8 +24,8 @@ import { capitalize } from '../../../utils/capitalize.js';
 import { formatNumber } from '../../../utils/formatNumber.js';
 import { mask } from '../../../utils/mask.js';
 import { parseDecimal } from '../../../utils/parseDecimal.js';
+import styles from '../Jackpots.module.css';
 import { useJackpotsCarouselItemContext } from './JackpotsCarouselContext.js';
-import styles from './JackpotsCarouselItem.module.css';
 export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = true, customJackpotChestImage, jackpotProfileShape = 'oval', }) {
     const jackpot = useJackpotsCarouselItemContext();
     const jackpotPayoutsQuery = useJackpotPayoutsQuery({
@@ -72,18 +72,20 @@ export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = t
         }
     }, [isMobileDevice]);
     useEffect(() => {
-        if (isMobile() && mainTooltipOpen) {
+        if (isMobileDevice && mainTooltipOpen) {
             const timeout = setTimeout(() => setMainTooltipOpen(false), 3000);
             return () => clearTimeout(timeout);
         }
-    }, [mainTooltipOpen]);
+    }, [mainTooltipOpen, isMobileDevice]);
     useEffect(() => {
-        if (isMobile() && minLimitTooltipOpen) {
+        if (isMobileDevice && minLimitTooltipOpen) {
             const timeout = setTimeout(() => setMinLimitTooltipOpen(false), 3000);
             return () => clearTimeout(timeout);
         }
-    }, [minLimitTooltipOpen]);
-    return (_jsxs("div", { className: twMerge('relative flex w-full shrink-0 rounded-2xl border border-border-primary bg-bg-tertiary p-3 text-center lg:gap-4 lg:p-5', className), style: style, 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, {
+    }, [minLimitTooltipOpen, isMobileDevice]);
+    const ProfileIcon = () => 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"] })] }));
+    const PayoutBadge = () => (_jsxs("div", { className: twMerge('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', className?.latestPayoutBadgeRoot), children: [_jsx(Trophy01Icon, { className: twMerge('size-3.5 text-utility-brand-600', className?.latestPayoutBadgeIcon) }), "Latest Payout"] }));
+    return (_jsxs("div", { className: twMerge('relative flex w-full shrink-0 rounded-2xl border border-border-primary bg-bg-tertiary p-3 text-center lg:gap-4 lg:p-5', className?.itemRoot), style: style, 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: twMerge('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', className?.jackpotAmountRoot), children: formatNumber(jackpotAmount, {
                                                             currency: localeInfo.currency.code,
                                                             minDecimalPlaces: 2,
                                                             maxDecimalPlaces: 2,
@@ -93,19 +95,19 @@ export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = t
                                                             : 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, {
+                                                            : closeChest, alt: "closeChest", className: twMerge('size-full h-25 w-25 p-2 lg:h-37.5 lg:w-37.5', customJackpotChestImage?.style?.image) }) })] }), _jsx("div", { className: twMerge('relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex', className?.latestPayoutRoot), children: latestJackpotPayout?.amount ? (_jsxs(_Fragment, { children: [_jsx(ProfileIcon, {}), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsx(PayoutBadge, {}), _jsx("div", { className: "font-semibold", children: mask(latestJackpotPayout.member.name, {
                                                                 totalCharsCount: 6,
-                                                            }) }), _jsx("div", { className: "text-2xl text-brand-400", children: formatNumber(latestJackpotPayout.amount, {
+                                                            }) }), _jsx("div", { className: twMerge('text-2xl text-brand-400', className?.latestPayoutAmount), children: formatNumber(latestJackpotPayout.amount, {
                                                                 currency: localeInfo.currency.code,
                                                                 minDecimalPlaces: 2,
                                                                 maxDecimalPlaces: 2,
-                                                            }) })] })] }) })) : (_jsxs("div", { className: "relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex", children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "firstPlace", className: "size-full h-auto w-[4.125rem] mix-blend-luminosity" }), _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: "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: "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, {
+                                                            }) })] })] })) : (_jsxs(_Fragment, { children: [_jsx(Image, { width: 66, height: 87, src: firstPlace, alt: "firstPlace", className: "size-full h-auto w-[4.125rem] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsx(PayoutBadge, {}), _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: "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 ? (_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, {
+                                        }) }), _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: "h-full overflow-hidden rounded-full bg-bg-primary", children: _jsxs(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: [_jsxs(Tooltip.Root, { ...(isMobileDevice
+                                                }) })] })] }), _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 bg-bg-primary', className?.progressBarTrack), children: _jsxs(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: [_jsxs(Tooltip.Root, { ...(isMobileDevice
                                                     ? {
                                                         open: mainTooltipOpen,
                                                         onOpenChange: (details) => setMainTooltipOpen(details.open),
@@ -125,23 +127,23 @@ export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = t
                                         currency: localeInfo.currency.code,
                                         compact: true,
                                     })} Play now for your chance to win big! 🔥`
-                                    : getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0) })] })] }), _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 gap-2", children: [_jsx(Image, { width: 24, height: 24, src: leaderboard, alt: "leaderboardIcon", className: "size-full h-auto w-6" }), _jsx("div", { className: "font-semibold text-lg text-text-primary-900", children: jackpotPayouts.length ? 'Recent payouts' : 'Starting soon!' })] }), _jsxs(Link, { className: "flex font-semibold text-button-tertiary-fg text-sm", href: viewAllUrl ?? '/jackpots', children: ["See details", _jsx(ChevronRightIcon, { className: "size-5" })] })] }), _jsx("div", { className: twMerge('max-h-[17rem] overflow-y-scroll', styles.scrollArea), children: _jsx("div", { className: "overflow-hidden rounded-xl border-gray-200", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsx("tr", { className: "h-8 whitespace-nowrap bg-bg-secondary text-left font-medium text-text-tertiary-600 text-xs", children: [
+                                    : getAccumulatingJackpotDescription(Number(jackpot?.pool) ?? 0, Number(jackpot?.maximumJackpotPoolLimit) ?? 0) })] })] }), _jsxs("div", { className: twMerge('z-1 hidden flex-1 space-y-4 lg:block', className?.recentPayoutsRoot), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Image, { width: 24, height: 24, src: leaderboard, alt: "leaderboardIcon", className: "size-full h-auto w-6" }), _jsx("div", { className: "font-semibold text-lg text-text-primary-900", children: jackpotPayouts.length ? 'Recent payouts' : 'Starting soon!' })] }), _jsxs(Link, { className: "flex font-semibold text-button-tertiary-fg text-sm", href: viewAllUrl ?? '/jackpots', children: ["See details", _jsx(ChevronRightIcon, { className: "size-5" })] })] }), _jsx("div", { className: twMerge('max-h-[17rem] overflow-y-scroll', styles.scrollArea), children: _jsx("div", { className: "overflow-hidden rounded-xl border-gray-200", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsx("tr", { className: twMerge('h-8 whitespace-nowrap bg-bg-secondary text-left font-medium text-text-tertiary-600 text-xs', className?.recentPayoutsTableHeadRow), children: [
                                                 'Player',
                                                 'Game Provider',
                                                 'Multiplier',
                                                 'Prize',
                                                 'Timestamp',
                                             ].map((header) => (_jsx("th", { className: "px-4", children: header }, header))) }) }), _jsx("tbody", { children: jackpotPayouts.length
-                                            ? jackpotPayouts.map((jackpotPayout, i) => (_jsxs("tr", { className: "whitespace-nowrap bg-bg-primary text-left text-sm text-text-secondary-700", children: [_jsx("td", { className: "h-12 border-border-secondary border-t-2 px-4", children: mask(jackpotPayout.member.name, {
+                                            ? jackpotPayouts.map((jp, i) => (_jsxs("tr", { className: twMerge('whitespace-nowrap bg-bg-primary text-left text-sm text-text-secondary-700', className?.recentPayoutsTableBodyRow), children: [_jsx("td", { className: "h-12 border-border-secondary border-t-2 px-4", children: mask(jp.member.name, {
                                                             totalCharsCount: 6,
-                                                        }) }), _jsx("td", { className: "h-12 border-border-secondary border-t-2 px-4", children: capitalize(jackpotPayout.game?.provider ?? '-', {
+                                                        }) }), _jsx("td", { className: "h-12 border-border-secondary border-t-2 px-4", children: capitalize(jp.game?.provider ?? '-', {
                                                             delimiter: capitalize.delimiters.UNDERSCORE,
-                                                        }) }), _jsxs("td", { className: "h-12 border-border-secondary border-t-2 px-4", children: [jackpotPayout.multiplier, "x"] }), _jsx("td", { className: "h-12 border-border-secondary border-t-2 px-4 text-brand-400", children: formatNumber(jackpotPayout.amount, {
+                                                        }) }), _jsxs("td", { className: "h-12 border-border-secondary border-t-2 px-4", children: [jp.multiplier, "x"] }), _jsx("td", { className: "h-12 border-border-secondary border-t-2 px-4 text-brand-400", children: formatNumber(jp.amount, {
                                                             currency: localeInfo.currency.code,
                                                             minDecimalPlaces: 2,
                                                             maxDecimalPlaces: 2,
-                                                        }) }), _jsx("td", { className: "h-12 border-border-secondary border-t-2 px-4", children: format(new Date(jackpotPayout.dateTimeCreated), 'dd MMM yyyy h:mm a') })] }, i)))
-                                            : Array.from({ length: 10 }).map((_, i) => (_jsxs("tr", { className: "bg-bg-primary text-sm text-text-secondary-700", children: [_jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" }), _jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" })] }, i))) })] }) }) })] }), isPayingOut && animate && (_jsx("div", { className: twMerge(styles['light-rays'], 'absolute top-0 right-0 rounded-2xl [--light-rays-top:25%] lg:[--light-rays-top:9.375rem]') }))] }));
+                                                        }) }), _jsx("td", { className: "h-12 border-border-secondary border-t-2 px-4", children: format(new Date(jp.dateTimeCreated), 'dd MMM yyyy h:mm a') })] }, i)))
+                                            : Array.from({ length: 10 }).map((_, i) => (_jsx("tr", { className: twMerge('bg-bg-primary text-sm text-text-secondary-700', className?.recentPayoutsTableBodyRow), children: Array.from({ length: 5 }).map((_, j) => (_jsx("td", { className: "h-12 border-border-secondary border-t-2", children: "-" }, j))) }, i))) })] }) }) })] }), isPayingOut && animate && (_jsx("div", { className: twMerge(styles['light-rays'], 'absolute top-0 right-0 rounded-2xl [--light-rays-top:25%] lg:[--light-rays-top:9.375rem]') }))] }));
 }
 const getAccumulatingJackpotDescription = (part, total) => {
     const percentage = total === 0 ? 0 : (part / total) * 100;

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

@@ -1,11 +1,25 @@
 import { type ImageProps } from 'next/image';
 import type { CSSProperties } from 'react';
 import type { GameProvider, GameProviderData } from '../../../types';
-interface ClassNameEntries {
+export interface ClassNameEntries {
     root?: string;
     itemRoot?: string;
+    providerRoot?: string;
+    providerHeading?: string;
+    providerNavigationButton?: string;
     providerThumbnailRoot?: string;
     providerThumbnailImage?: string;
+    jackpotAmountRoot?: string;
+    latestPayoutRoot?: string;
+    latestPayoutBadgeRoot?: string;
+    latestPayoutBadgeIcon?: string;
+    latestPayoutAmount?: string;
+    progressBarRoot?: string;
+    progressBarTrack?: string;
+    recentPayoutsRoot?: string;
+    recentPayoutsTableRoot?: string;
+    recentPayoutsTableHeadRow?: string;
+    recentPayoutsTableBodyRow?: string;
 }
 interface StyleEntries {
     root?: CSSProperties;

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, 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!"] })] }))] }) }));
+    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, 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, 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

@@ -1,6 +1,7 @@
 import type { CSSProperties } from 'react';
+import type { ClassNameEntries } from './JackpotsList';
 interface JackpotsListItemDesktopProps {
-    className?: string;
+    className?: ClassNameEntries;
     style?: CSSProperties;
     animate?: boolean;
     customJackpotChestImage?: {
@@ -15,5 +16,5 @@ interface JackpotsListItemDesktopProps {
     };
     jackpotProfileShape?: 'oval' | 'star';
 }
-export declare function JackpotsListItemDesktop({ animate, customJackpotChestImage, jackpotProfileShape, ...props }: JackpotsListItemDesktopProps): import("react/jsx-runtime").JSX.Element;
+export declare function JackpotsListItemDesktop({ animate, customJackpotChestImage, jackpotProfileShape, className, ...props }: JackpotsListItemDesktopProps): import("react/jsx-runtime").JSX.Element;
 export {};