@opexa/portal-components 0.0.18 → 0.0.19

package/dist/components/JackpotCounter/JackpotCounterItem.mjs

@@ -1,10 +1,10 @@
 "use client";
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { Progress as h } from "@ark-ui/react";
-import f from "next/image";
-import N from "next/link";
-import { useCallback as v, useMemo as w } from "react";
-import { twMerge as l } from "tailwind-merge";
+import { jsx as e, jsxs as r, Fragment as v } from "react/jsx-runtime";
+import { Progress as y } from "@ark-ui/react";
+import p from "next/image";
+import A from "next/link";
+import { useCallback as D, useMemo as J } from "react";
+import { twMerge as a } from "tailwind-merge";
 import "@opexa/portal-sdk-core";
 import "@tanstack/react-query";
 import "tiny-invariant";
@@ -15,93 +15,124 @@ import "../../utils/getLocaleInfo.mjs";
 import "../../utils/getQueryClient.mjs";
 import "../../utils/isMobile.mjs";
 import "../../utils/parseDecimal.mjs";
+import "../../client/services/getSession.mjs";
 import "lodash-es";
 import "@opexa/portal-sdk-core/object-id";
 import "../../client/hooks/useGlobalStore.mjs";
 import "../../client/hooks/useInfiniteQueryHelper.mjs";
-import { useLocaleInfo as C } from "../../client/hooks/useLocaleInfo.mjs";
+import { useLocaleInfo as L } from "../../client/hooks/useLocaleInfo.mjs";
 import "usehooks-ts";
-import { ArrowNarrowUpRightIcon as z } from "../../icons/ArrowNarrowUpRightIcon.mjs";
-import { ChevronLeftIcon as d } from "../../icons/ChevronLeftIcon.mjs";
-import { ChevronRightIcon as m } from "../../icons/ChevronRightIcon.mjs";
+import { useJackpotPayoutsQuery as T } from "../../client/hooks/useJackpotPayoutsQuery.mjs";
+import { ArrowNarrowUpRightIcon as S } from "../../icons/ArrowNarrowUpRightIcon.mjs";
+import { ChevronLeftIcon as x } from "../../icons/ChevronLeftIcon.mjs";
+import { ChevronRightIcon as d } from "../../icons/ChevronRightIcon.mjs";
+import { StarIcon as w } from "../../icons/StarIcon.mjs";
 import { Trophy01Icon as P } from "../../icons/Trophy01Icon.mjs";
-import { StarIcon as I } from "../../icons/StarIcon.mjs";
-import A from "../../images/close-chest.png.mjs";
-import L from "../../images/first-place.png.mjs";
-import J from "../../images/leaderboard.png.mjs";
-import T from "../../images/open-chest.png.mjs";
+import q from "../../images/close-chest.png.mjs";
+import M from "../../images/first-place.png.mjs";
+import R from "../../images/leaderboard.png.mjs";
+import O from "../../images/open-chest.png.mjs";
 import s from "./JackpotCounterItem.module.css.mjs";
-function ue({
-  jackpot: r,
+function Ne({
+  jackpot: t,
   className: o,
-  viewAllUrl: x
+  viewAllUrl: u
 }) {
-  const c = C(), i = r.drawing, p = i ? r.maximumJackpotPoolLimit : r.pool, b = v(
-    ({ isFirst: u }) => /* @__PURE__ */ e(
-      i ? d : m,
+  var N;
+  const h = ((N = T({
+    first: 30,
+    filter: {
+      jackpot: {
+        equal: t.id
+      }
+    },
+    sort: {
+      cursor: "AMOUNT",
+      order: "DESC"
+    }
+  }).data) == null ? void 0 : N.pages[0].edges.map((c) => c.node)) ?? [], b = h[0] ?? [], m = L(), i = t.drawing, z = i ? t.maximumJackpotPoolLimit : t.pool, g = D(
+    ({ index: c }) => /* @__PURE__ */ e(
+      i ? x : d,
       {
-        className: l(
-          "scale-400 lg:scale-250 min-w-2.5 lg:min-w-4",
-          u ? i ? "text-error-600" : "text-success-800" : "text-brand-300"
-        )
+        className: a(
+          "scale-400 lg:scale-250 text-brand-300 min-w-2.5 lg:min-w-4",
+          i ? s["animate-wave-color-error"] : s["animate-wave-color-success"]
+        ),
+        style: {
+          animationDelay: i ? `${(40 - c - 1) * 0.1}s` : `${c * 0.1}s`
+        }
       }
     ),
     [i]
-  ), y = w(
-    () => Array.from({ length: 40 }, (u, a) => /* @__PURE__ */ e(b, { isFirst: a === 0 }, a)),
-    [b]
+  ), I = J(
+    () => Array.from({ length: 40 }, (c, l) => /* @__PURE__ */ e(g, { isFirst: l === 0, index: l }, l)),
+    [g]
   );
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ r(
     "div",
     {
-      className: l(
+      className: a(
         "bg-bg-tertiary border-border-primary relative flex shrink-0 rounded-2xl border p-3 text-center lg:gap-4 lg:p-5",
         o
       ),
       children: [
-        /* @__PURE__ */ t("div", { className: "z-1 relative flex flex-1 flex-col", children: [
-          /* @__PURE__ */ e("div", { className: "flex h-full flex-col justify-between", children: /* @__PURE__ */ e("div", { className: "flex w-full justify-between", children: /* @__PURE__ */ t("div", { className: "flex w-full flex-col", children: [
-            /* @__PURE__ */ t("div", { className: "relative flex w-full justify-between", children: [
-              /* @__PURE__ */ t("div", { children: [
-                i ? /* @__PURE__ */ t("div", { className: "border-utility-success-200 bg-utility-success-50 text-utility-success-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", children: [
+        /* @__PURE__ */ r("div", { className: "z-1 relative flex flex-1 flex-col", children: [
+          /* @__PURE__ */ e("div", { className: "flex h-full flex-col justify-between", children: /* @__PURE__ */ e("div", { className: "flex w-full justify-between", children: /* @__PURE__ */ r("div", { className: "flex w-full flex-col", children: [
+            /* @__PURE__ */ r("div", { className: "relative flex w-full justify-between", children: [
+              /* @__PURE__ */ r("div", { children: [
+                i ? /* @__PURE__ */ r("div", { className: "border-utility-success-200 bg-utility-success-50 text-utility-success-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", children: [
                   /* @__PURE__ */ e("span", { className: "full bg-utility-success-500 size-1.5 animate-pulse rounded" }),
                   "Paying Out"
-                ] }) : /* @__PURE__ */ t("div", { className: "border-utility-blue-200 bg-utility-blue-50 text-utility-blue-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", children: [
-                  /* @__PURE__ */ e(z, { className: "text-utility-blue-500 size-3.5" }),
+                ] }) : /* @__PURE__ */ r("div", { className: "border-utility-blue-200 bg-utility-blue-50 text-utility-blue-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", children: [
+                  /* @__PURE__ */ e(S, { className: "text-utility-blue-500 size-3.5" }),
                   "Accumulating"
                 ] }),
-                /* @__PURE__ */ e("div", { className: "text-text-primary-900 mt-1 text-left text-lg font-medium lg:mt-5 lg:text-2xl", children: r.name }),
-                /* @__PURE__ */ e("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: n(p, {
-                  currency: c.currency.code,
+                /* @__PURE__ */ e("div", { className: "text-text-primary-900 mt-1 text-left text-lg font-medium lg:mt-5 lg:text-2xl", children: t.name }),
+                /* @__PURE__ */ e("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: n(z, {
+                  currency: m.currency.code,
                   minDecimalPlaces: 2,
                   maxDecimalPlaces: 2
                 }) })
               ] }),
-              /* @__PURE__ */ e("div", { className: "z-1 bottom-[-60] right-0 block lg:absolute", children: /* @__PURE__ */ e(
-                f,
+              /* @__PURE__ */ e("div", { className: "z-1 bottom-[-60] right-0 lg:absolute", children: /* @__PURE__ */ e(
+                p,
                 {
                   width: 150,
                   height: 150,
-                  src: i ? T : A,
+                  src: i ? O : q,
                   alt: "closeChest",
                   quality: 100,
                   className: "h-25 w-25 lg:h-37.5 lg:w-37.5 size-full p-2"
                 }
               ) })
             ] }),
-            /* @__PURE__ */ t("div", { className: "bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex", children: [
+            b.amount ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ r("div", { className: "bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex", children: [
+              /* @__PURE__ */ e("div", { className: "border-yellow-400 relative h-18 w-18 rounded-full border", children: /* @__PURE__ */ e("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" }) }),
+              /* @__PURE__ */ r("div", { className: "flex flex-col gap-1 text-left", children: [
+                /* @__PURE__ */ r("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: [
+                  /* @__PURE__ */ e(P, { className: "text-utility-brand-600 size-3.5" }),
+                  "Top Payout"
+                ] }),
+                /* @__PURE__ */ e("div", { className: "font-semibold", children: C(b.member.name) }),
+                /* @__PURE__ */ e("div", { className: "text-brand-400 text-2xl", children: n(b.amount, {
+                  currency: m.currency.code,
+                  minDecimalPlaces: 2,
+                  maxDecimalPlaces: 2
+                }) })
+              ] })
+            ] }) }) : /* @__PURE__ */ r("div", { className: "bg-bg-primary relative mt-4 hidden w-full gap-4 rounded-lg p-4 lg:flex", children: [
               /* @__PURE__ */ e(
-                f,
+                p,
                 {
                   width: 66,
                   height: 87,
-                  src: L,
+                  src: M,
                   alt: "closeChest",
                   className: "size-full h-auto w-[66px] mix-blend-luminosity"
                 }
               ),
-              /* @__PURE__ */ t("div", { className: "flex flex-col gap-1 text-left", children: [
-                /* @__PURE__ */ t("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: [
+              /* @__PURE__ */ r("div", { className: "flex flex-col gap-1 text-left", children: [
+                /* @__PURE__ */ r("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: [
                   /* @__PURE__ */ e(P, { className: "text-utility-brand-600 size-3.5" }),
                   "Top Payout"
                 ] }),
@@ -110,137 +141,137 @@ function ue({
               ] })
             ] })
           ] }) }) }),
-          /* @__PURE__ */ t("div", { className: "mt-3 lg:mt-4", children: [
-            /* @__PURE__ */ t("div", { className: "mb-1 flex justify-between", children: [
+          /* @__PURE__ */ r("div", { className: "mt-3 lg:mt-4", children: [
+            /* @__PURE__ */ r("div", { className: "mb-1 flex justify-between", children: [
               /* @__PURE__ */ e("div", { className: "text-text-primary-900 text-xs font-semibold", children: n(0, {
-                currency: c.currency.code,
+                currency: m.currency.code,
                 compact: !0
               }) }),
-              /* @__PURE__ */ t("div", { className: "relative flex items-center justify-end gap-1.5", children: [
-                i ? /* @__PURE__ */ t("div", { className: "flex w-6 items-center", children: [
+              /* @__PURE__ */ r("div", { className: "relative flex items-center justify-end gap-1.5", children: [
+                i ? /* @__PURE__ */ r("div", { className: "flex w-6 items-center", children: [
                   /* @__PURE__ */ e(
                     "div",
                     {
-                      className: l(
+                      className: a(
                         "absolute left-0",
                         s["animate-arrow-red-flash-1"]
                       ),
-                      children: /* @__PURE__ */ e(d, { className: "size-4.5" })
+                      children: /* @__PURE__ */ e(x, { className: "size-4.5" })
                     }
                   ),
                   /* @__PURE__ */ e(
                     "div",
                     {
-                      className: l(
+                      className: a(
                         "absolute left-1.5",
                         s["animate-arrow-red-flash-2"]
                       ),
-                      children: /* @__PURE__ */ e(d, { className: "size-4.5" })
+                      children: /* @__PURE__ */ e(x, { className: "size-4.5" })
                     }
                   ),
                   /* @__PURE__ */ e(
                     "div",
                     {
-                      className: l(
+                      className: a(
                         "absolute left-3",
                         s["animate-arrow-red-flash-3"]
                       ),
-                      children: /* @__PURE__ */ e(d, { className: "size-4.5" })
+                      children: /* @__PURE__ */ e(x, { className: "size-4.5" })
                     }
                   )
-                ] }) : /* @__PURE__ */ t("div", { className: "flex w-6 items-center", children: [
+                ] }) : /* @__PURE__ */ r("div", { className: "flex w-6 items-center", children: [
                   /* @__PURE__ */ e(
                     "div",
                     {
-                      className: l(
+                      className: a(
                         "absolute left-0",
                         s["animate-arrow-green-flash-1"]
                       ),
-                      children: /* @__PURE__ */ e(m, { className: "size-4.5" })
+                      children: /* @__PURE__ */ e(d, { className: "size-4.5" })
                     }
                   ),
                   /* @__PURE__ */ e(
                     "div",
                     {
-                      className: l(
+                      className: a(
                         "absolute left-1.5",
                         s["animate-arrow-green-flash-2"]
                       ),
-                      children: /* @__PURE__ */ e(m, { className: "size-4.5" })
+                      children: /* @__PURE__ */ e(d, { className: "size-4.5" })
                     }
                   ),
                   /* @__PURE__ */ e(
                     "div",
                     {
-                      className: l(
+                      className: a(
                         "absolute left-3",
                         s["animate-arrow-green-flash-3"]
                       ),
-                      children: /* @__PURE__ */ e(m, { className: "size-4.5" })
+                      children: /* @__PURE__ */ e(d, { className: "size-4.5" })
                     }
                   )
                 ] }),
-                /* @__PURE__ */ e("div", { className: "text-text-primary-900 text-xs font-semibold", children: n(r == null ? void 0 : r.maximumJackpotPoolLimit, {
-                  currency: c.currency.code,
+                /* @__PURE__ */ e("div", { className: "text-text-primary-900 text-xs font-semibold", children: n(t == null ? void 0 : t.maximumJackpotPoolLimit, {
+                  currency: m.currency.code,
                   compact: !0
                 }) })
               ] })
             ] }),
             /* @__PURE__ */ e(
-              h.Root,
+              y.Root,
               {
                 className: "bg-bg-primary h-2 w-full rounded-full lg:h-4",
                 max: 100,
-                value: S(
-                  Number(r.pool),
-                  Number(r.maximumJackpotPoolLimit)
+                value: Q(
+                  Number(t.pool),
+                  Number(t.maximumJackpotPoolLimit)
                 ),
-                children: /* @__PURE__ */ e(h.Track, { className: "bg-bg-primary h-full overflow-hidden rounded-full", children: /* @__PURE__ */ e(h.Range, { className: "bg-brand-500 relative h-full overflow-hidden rounded-full pl-1.5", children: /* @__PURE__ */ e(
+                children: /* @__PURE__ */ e(y.Track, { className: "bg-bg-primary h-full overflow-hidden rounded-full", children: /* @__PURE__ */ e(y.Range, { className: "bg-brand-500 relative h-full overflow-hidden rounded-full pl-1.5", children: /* @__PURE__ */ e(
                   "div",
                   {
                     className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5",
                     "aria-hidden": "true",
-                    children: y
+                    children: I
                   }
                 ) }) })
               }
             ),
             /* @__PURE__ */ e("div", { className: "mt-1 block text-start text-2xs lg:hidden", children: i ? `The pot has hit ${n(
-              r == null ? void 0 : r.maximumJackpotPoolLimit,
+              t == null ? void 0 : t.maximumJackpotPoolLimit,
               {
-                currency: c.currency.code,
+                currency: m.currency.code,
                 compact: !0
               }
-            )} Play now for your chance to win big! 🔥` : q(
-              Number(r == null ? void 0 : r.pool) ?? 0,
-              Number(r == null ? void 0 : r.maximumJackpotPoolLimit) ?? 0
+            )} Play now for your chance to win big! 🔥` : $(
+              Number(t == null ? void 0 : t.pool) ?? 0,
+              Number(t == null ? void 0 : t.maximumJackpotPoolLimit) ?? 0
             ) })
           ] })
         ] }),
-        /* @__PURE__ */ t("div", { className: "z-1 hidden flex-1 space-y-4 lg:block", children: [
-          /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ t("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ r("div", { className: "z-1 hidden flex-1 space-y-4 lg:block", children: [
+          /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ r("div", { className: "flex gap-2", children: [
               /* @__PURE__ */ e(
-                f,
+                p,
                 {
                   width: 24,
                   height: 24,
-                  src: J,
+                  src: R,
                   quality: 100,
                   alt: "leaderboardIcon",
                   className: "size-full h-auto w-6"
                 }
               ),
-              /* @__PURE__ */ e("div", { className: "text-text-primary-900 text-lg font-semibold", children: "Starting soon!" })
+              /* @__PURE__ */ e("div", { className: "text-text-primary-900 text-lg font-semibold", children: h.length ? "Leaderboard" : "Starting soon!" })
             ] }),
-            /* @__PURE__ */ t(
-              N,
+            /* @__PURE__ */ r(
+              A,
               {
                 className: "text-button-tertiary-fg flex text-sm font-semibold",
-                href: x ?? "/jackpots",
+                href: u ?? "/jackpots",
                 children: [
                   "See details",
-                  /* @__PURE__ */ e(m, { className: "size-5" })
+                  /* @__PURE__ */ e(d, { className: "size-5" })
                 ]
               }
             )
@@ -248,43 +279,89 @@ function ue({
           /* @__PURE__ */ e(
             "div",
             {
-              className: l(
+              className: a(
                 "max-h-[272px] overflow-y-scroll",
                 s.scrollArea
               ),
-              children: /* @__PURE__ */ e("div", { className: "border-gray-200 overflow-hidden rounded-xl", children: /* @__PURE__ */ t("table", { className: "w-full", children: [
-                /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ t("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium", children: [
+              children: /* @__PURE__ */ e("div", { className: "border-gray-200 overflow-hidden rounded-xl", children: /* @__PURE__ */ r("table", { className: "w-full", children: [
+                /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ r("tr", { className: "bg-bg-secondary text-text-tertiary-600 h-8 text-xs font-medium", children: [
                   /* @__PURE__ */ e("th", { className: "w-[52px]", children: "#" }),
                   /* @__PURE__ */ e("th", { children: "Player" }),
                   /* @__PURE__ */ e("th", { children: "Multiplier" }),
                   /* @__PURE__ */ e("th", { children: "Prize" })
                 ] }) }),
-                /* @__PURE__ */ e("tbody", { children: Array.from({ length: 10 }).map((u, a) => /* @__PURE__ */ t("tr", { className: "bg-bg-primary text-sm text-text-secondary-700", children: [
-                  /* @__PURE__ */ e("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: a + 1 < 6 ? /* @__PURE__ */ t("div", { className: "relative", children: [
-                    /* @__PURE__ */ e(
-                      I,
-                      {
-                        className: l(
-                          "mx-auto size-6.5",
-                          g[a].starColor
+                /* @__PURE__ */ e("tbody", { children: h.length ? /* @__PURE__ */ e(v, { children: h.map((c, l) => /* @__PURE__ */ r(
+                  "tr",
+                  {
+                    className: "bg-bg-primary text-text-secondary-700 text-sm",
+                    children: [
+                      /* @__PURE__ */ e("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: l + 1 < 6 ? /* @__PURE__ */ r("div", { className: "relative", children: [
+                        /* @__PURE__ */ e(
+                          w,
+                          {
+                            className: a(
+                              "mx-auto size-6.5",
+                              f[l].starColor
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ e(
+                          "span",
+                          {
+                            className: a(
+                              "absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold",
+                              f[l].numberColor
+                            ),
+                            children: l + 1
+                          }
                         )
-                      }
-                    ),
-                    /* @__PURE__ */ e(
-                      "span",
-                      {
-                        className: l(
-                          "absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold",
-                          g[a].numberColor
+                      ] }) : l + 1 }),
+                      /* @__PURE__ */ e("td", { className: "border-border-secondary h-12 border-t-2", children: C(c.member.name) }),
+                      /* @__PURE__ */ r("td", { className: "border-border-secondary h-12 border-t-2", children: [
+                        c.multiplier,
+                        "x"
+                      ] }),
+                      /* @__PURE__ */ e("td", { className: "border-border-secondary text-brand-400 h-12 border-t-2", children: n(b.amount, {
+                        currency: m.currency.code,
+                        minDecimalPlaces: 2,
+                        maxDecimalPlaces: 2
+                      }) })
+                    ]
+                  },
+                  l
+                )) }) : /* @__PURE__ */ e(v, { children: Array.from({ length: 10 }).map((c, l) => /* @__PURE__ */ r(
+                  "tr",
+                  {
+                    className: "bg-bg-primary text-text-secondary-700 text-sm",
+                    children: [
+                      /* @__PURE__ */ e("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: l + 1 < 6 ? /* @__PURE__ */ r("div", { className: "relative", children: [
+                        /* @__PURE__ */ e(
+                          w,
+                          {
+                            className: a(
+                              "mx-auto size-6.5",
+                              f[l].starColor
+                            )
+                          }
                         ),
-                        children: a + 1
-                      }
-                    )
-                  ] }) : "-" }),
-                  /* @__PURE__ */ e("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }),
-                  /* @__PURE__ */ e("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }),
-                  /* @__PURE__ */ e("td", { className: "border-border-secondary h-12 border-t-2", children: "-" })
-                ] }, a)) })
+                        /* @__PURE__ */ e(
+                          "span",
+                          {
+                            className: a(
+                              "absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold",
+                              f[l].numberColor
+                            ),
+                            children: l + 1
+                          }
+                        )
+                      ] }) : l + 1 }),
+                      /* @__PURE__ */ e("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }),
+                      /* @__PURE__ */ e("td", { className: "border-border-secondary h-12 border-t-2", children: "-" }),
+                      /* @__PURE__ */ e("td", { className: "border-border-secondary h-12 border-t-2", children: "-" })
+                    ]
+                  },
+                  l
+                )) }) })
               ] }) })
             }
           )
@@ -292,14 +369,23 @@ function ue({
         i && /* @__PURE__ */ e(
           "div",
           {
-            className: l(s["light-rays"], "absolute right-0 top-0 rounded-2xl")
+            className: a(
+              s["light-rays"],
+              "absolute right-0 top-0 rounded-2xl [--light-rays-top:25%] lg:[--light-rays-top:150px]"
+            )
           }
         )
       ]
     }
   );
 }
-const S = (r, o) => o === 0 ? 0 : r / o * 100, q = (r, o) => (o === 0 ? 0 : r / o * 100) <= 90 ? "The jackpot is heating up! Keep playing to stay in the action and watch it grow!" : "🔥 It’s about to pop! Stay in the game for your shot at the prize!", g = [
+function C(t) {
+  if (t.length <= 7)
+    return "*".repeat(t.length);
+  const o = t.slice(0, 3), u = "*".repeat(7);
+  return o + u;
+}
+const Q = (t, o) => o === 0 ? 0 : t / o * 100, $ = (t, o) => (o === 0 ? 0 : t / o * 100) <= 90 ? "The jackpot is heating up! Keep playing to stay in the action and watch it grow!" : "🔥 It’s about to pop! Stay in the game for your shot at the prize!", f = [
   {
     starColor: "text-yellow-400",
     numberColor: "text-bg-primary"
@@ -322,5 +408,6 @@ const S = (r, o) => o === 0 ? 0 : r / o * 100, q = (r, o) => (o === 0 ? 0 : r /
   }
 ];
 export {
-  ue as JackpotCounterItem
+  Ne as JackpotCounterItem,
+  C as maskName
 };

package/dist/components/JackpotCounter/JackpotCounterItem.module.css.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a="_scrollArea_1m8hd_289",r={"animate-arrow-green-flash-1":"_animate-arrow-green-flash-1_1m8hd_19","animate-arrow-green-flash-2":"_animate-arrow-green-flash-2_1m8hd_29","animate-arrow-green-flash-3":"_animate-arrow-green-flash-3_1m8hd_39","animate-arrow-red-flash-1":"_animate-arrow-red-flash-1_1m8hd_67","animate-arrow-red-flash-2":"_animate-arrow-red-flash-2_1m8hd_75","animate-arrow-red-flash-3":"_animate-arrow-red-flash-3_1m8hd_85","light-rays":"_light-rays_1m8hd_107",scrollArea:a};exports.default=r;exports.scrollArea=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a="_scrollArea_oua78_289",r={"animate-arrow-green-flash-1":"_animate-arrow-green-flash-1_oua78_19","animate-arrow-green-flash-2":"_animate-arrow-green-flash-2_oua78_29","animate-arrow-green-flash-3":"_animate-arrow-green-flash-3_oua78_39","animate-arrow-red-flash-1":"_animate-arrow-red-flash-1_oua78_67","animate-arrow-red-flash-2":"_animate-arrow-red-flash-2_oua78_75","animate-arrow-red-flash-3":"_animate-arrow-red-flash-3_oua78_85","light-rays":"_light-rays_oua78_109",scrollArea:a,"animate-wave-color-success":"_animate-wave-color-success_oua78_351","animate-wave-color-error":"_animate-wave-color-error_oua78_361"};exports.default=r;exports.scrollArea=a;

package/dist/components/JackpotCounter/JackpotCounterItem.module.css.mjs

@@ -1,12 +1,14 @@
-const a = "_scrollArea_1m8hd_289", r = {
-  "animate-arrow-green-flash-1": "_animate-arrow-green-flash-1_1m8hd_19",
-  "animate-arrow-green-flash-2": "_animate-arrow-green-flash-2_1m8hd_29",
-  "animate-arrow-green-flash-3": "_animate-arrow-green-flash-3_1m8hd_39",
-  "animate-arrow-red-flash-1": "_animate-arrow-red-flash-1_1m8hd_67",
-  "animate-arrow-red-flash-2": "_animate-arrow-red-flash-2_1m8hd_75",
-  "animate-arrow-red-flash-3": "_animate-arrow-red-flash-3_1m8hd_85",
-  "light-rays": "_light-rays_1m8hd_107",
-  scrollArea: a
+const a = "_scrollArea_oua78_289", r = {
+  "animate-arrow-green-flash-1": "_animate-arrow-green-flash-1_oua78_19",
+  "animate-arrow-green-flash-2": "_animate-arrow-green-flash-2_oua78_29",
+  "animate-arrow-green-flash-3": "_animate-arrow-green-flash-3_oua78_39",
+  "animate-arrow-red-flash-1": "_animate-arrow-red-flash-1_oua78_67",
+  "animate-arrow-red-flash-2": "_animate-arrow-red-flash-2_oua78_75",
+  "animate-arrow-red-flash-3": "_animate-arrow-red-flash-3_oua78_85",
+  "light-rays": "_light-rays_oua78_109",
+  scrollArea: a,
+  "animate-wave-color-success": "_animate-wave-color-success_oua78_351",
+  "animate-wave-color-error": "_animate-wave-color-error_oua78_361"
 };
 export {
   r as default,

package/dist/components/Jackpots/JackpotGameProviders.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),m=require("embla-carousel-react"),x=require("next/image"),s=require("react"),f=require("../../icons/ArrowLeftIcon.js"),v=require("../../icons/ArrowRightIcon.js"),N=require("../../images/fantasma-games.png.js"),b=require("../../images/hacksaw-gaming.png.js");require("../../ui/AlertDialog/AlertDialog.js");require("../../ui/Avatar/Avatar.js");require("../../ui/Badge/Badge.js");const a=require("../../ui/Button/Button.js");require("../../ui/Checkbox/Checkbox.js");require("../../ui/Clipboard/Clipboard.js");require("../../ui/Collapsible/Collapsible.js");require("../../ui/Combobox/Combobox.js");require("../../ui/DatePicker/DatePicker.js");require("../../ui/Dialog/Dialog.js");require("../../ui/Drawer/Drawer.js");require("../../ui/Field/Field.js");require("@ark-ui/react");require("../../utils/capitalize.js");require("../../utils/parseDecimal.js");require("../../constants/index.js");require("../../utils/getLocaleInfo.js");require("../../utils/getQueryClient.js");require("../../utils/isMobile.js");require("../../ui/IconButton/iconButton.recipe.js");require("../../ui/NumberInput/NumberInput.js");require("../../ui/PasswordInput/PasswordInput.js");require("../../ui/PinInput/PinInput.js");require("../../ui/Popover/Popover.js");require("tailwind-merge");require("../../ui/Progress/Progress.js");require("../../ui/SegmentGroup/SegmentGroup.js");require("../../ui/Select/Select.js");require("../../ui/Table/Table.js");require("../../ui/Tabs/Tabs.js");function g(){const[c,e]=m({align:"start",slidesToScroll:1}),t=s.useCallback(()=>{e&&e.scrollPrev()},[e]),n=s.useCallback(()=>{e&&e.scrollNext()},[e]),[o,u]=s.useState(!1),[d,q]=s.useState(!1),i=s.useCallback(()=>{e&&(u(e.canScrollPrev()),q(e.canScrollNext()))},[e]);return s.useEffect(()=>{e&&(i(),e.on("select",i),e.on("reInit",i))},[e,i]),r.jsxs("div",{className:"p-4 pb-8",children:[r.jsxs("div",{className:"flex items-center justify-between",children:[r.jsx("div",{className:"text-text-primary-900 text-lg font-semibold",children:"Jackpot Game Providers"}),r.jsxs("div",{className:"hidden lg:flex",children:[r.jsx(a.Button,{disabled:!o,onClick:t,variant:"outline",colorScheme:"gray",className:"rounded-r-none border-r-0","aria-label":"Previous",children:r.jsx(f.ArrowLeftIcon,{className:"size-5"})}),r.jsxs(a.Button,{disabled:!d,onClick:n,variant:"outline",colorScheme:"gray",className:"rounded-l-none","aria-label":"Next",children:[r.jsx("span",{className:"sr-only",children:"Next"}),r.jsx(v.ArrowRightIcon,{className:"size-5"})]})]})]}),r.jsx("div",{className:"relative mt-3 overflow-hidden",ref:c,children:r.jsx("div",{className:"flex gap-3.5",children:Array.from({length:12},(h,l)=>r.jsx("div",{className:"bg-gray-800 lg:bg-bg-primary-900 min-w-27.5 rounded-md",children:r.jsx(x,{src:l%2?b:N,alt:"provider",className:"size-full"})},l))})})]})}exports.JackpotGameProviders=g;