@opexa/portal-components 0.0.26 → 0.0.27

package/dist/components/Jackpots/JackpotItemMobile.mjs

@@ -1,41 +1,23 @@
 "use client";
-import { jsx as e, jsxs as r, Fragment as v } from "react/jsx-runtime";
-import { Progress as f } from "@ark-ui/react";
-import w from "next/image";
-import { useCallback as A, useMemo as L, useState as T } from "react";
-import { twMerge as i } from "tailwind-merge";
-import "@opexa/portal-sdk-core";
-import "@tanstack/react-query";
-import "tiny-invariant";
-import "../../constants/index.mjs";
-import "../../utils/capitalize.mjs";
-import { formatNumber as n } from "../../utils/formatNumber.mjs";
-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 S } from "../../client/hooks/useLocaleInfo.mjs";
-import "usehooks-ts";
-import { useJackpotPayoutsQuery as R } from "../../client/hooks/useJackpotPayoutsQuery.mjs";
-import { ArrowNarrowUpRightIcon as M } from "../../icons/ArrowNarrowUpRightIcon.mjs";
-import { ChevronLeftIcon as x } from "../../icons/ChevronLeftIcon.mjs";
-import { ChevronRightIcon as p } from "../../icons/ChevronRightIcon.mjs";
-import { StarIcon as P } from "../../icons/StarIcon.mjs";
-import { Trophy01Icon as C } from "../../icons/Trophy01Icon.mjs";
-import { ArrowNarrowDownIcon as q } from "../../icons/ArrowNarrowDownIcon.mjs";
-import { ArrowNarrowUpIcon as O } from "../../icons/ArrowNarrowUpIcon.mjs";
-import Q from "../../images/close-chest.png.mjs";
-import U from "../../images/first-place.png.mjs";
-import $ from "../../images/open-chest.png.mjs";
+import { jsxs as r, jsx as e, Fragment as y } from "react/jsx-runtime";
+import { Progress as x } from "@ark-ui/react";
+import g from "next/image";
+import { useState as L } from "react";
+import { twMerge as l } from "tailwind-merge";
+import { ArrowNarrowUpRightIcon as R } from "../../icons/ArrowNarrowUpRightIcon.mjs";
+import { ChevronLeftIcon as f } from "../../icons/ChevronLeftIcon.mjs";
+import { ChevronRightIcon as b } from "../../icons/ChevronRightIcon.mjs";
+import { StarIcon as v } from "../../icons/StarIcon.mjs";
+import { Trophy01Icon as w } from "../../icons/Trophy01Icon.mjs";
+import { ArrowNarrowDownIcon as T } from "../../icons/ArrowNarrowDownIcon.mjs";
+import { ArrowNarrowUpIcon as S } from "../../icons/ArrowNarrowUpIcon.mjs";
+import M from "../../images/close-chest.png.mjs";
+import B from "../../images/first-place.png.mjs";
+import G from "../../images/open-chest.png.mjs";
 import "../../ui/AlertDialog/AlertDialog.mjs";
 import "../../ui/Avatar/Avatar.mjs";
 import "../../ui/Badge/Badge.mjs";
-import { Button as z } from "../../ui/Button/Button.mjs";
+import { Button as P } from "../../ui/Button/Button.mjs";
 import "../../ui/Checkbox/Checkbox.mjs";
 import "../../ui/Clipboard/Clipboard.mjs";
 import "../../ui/Collapsible/Collapsible.mjs";
@@ -44,6 +26,13 @@ import "../../ui/DatePicker/DatePicker.mjs";
 import "../../ui/Dialog/Dialog.mjs";
 import "../../ui/Drawer/Drawer.mjs";
 import "../../ui/Field/Field.mjs";
+import "../../utils/capitalize.mjs";
+import { formatNumber as m } from "../../utils/formatNumber.mjs";
+import "../../constants/index.mjs";
+import "../../utils/getLocaleInfo.mjs";
+import "../../utils/getQueryClient.mjs";
+import "../../utils/isMobile.mjs";
+import "../../utils/parseDecimal.mjs";
 import "../../ui/IconButton/iconButton.recipe.mjs";
 import "../../ui/NumberInput/NumberInput.mjs";
 import "../../ui/PasswordInput/PasswordInput.mjs";
@@ -54,72 +43,58 @@ import "../../ui/SegmentGroup/SegmentGroup.mjs";
 import "../../ui/Select/Select.mjs";
 import "../../ui/Table/Table.mjs";
 import "../../ui/Tabs/Tabs.mjs";
-import { maskName as I } from "../JackpotCounter/JackpotCounterItem.mjs";
-import o from "../JackpotCounter/JackpotCounterItem.module.css.mjs";
-import { JackpotGameProviders as F } from "./JackpotGameProviders.mjs";
-import { JackpotRules as V } from "./JackpotRules.mjs";
-function We({ jackpot: t }) {
-  var N;
-  const d = ((N = R({
-    first: 30,
-    filter: {
-      jackpot: {
-        equal: t.id
-      }
-    },
-    sort: {
-      cursor: "AMOUNT",
-      order: "DESC"
-    }
-  }).data) == null ? void 0 : N.pages[0].edges.map((s) => s.node)) ?? [], h = d[0] ?? [], c = S(), a = t.drawing, D = a ? t.maximumJackpotPoolLimit : t.pool, y = A(
-    ({ index: s }) => /* @__PURE__ */ e(
-      a ? x : p,
-      {
-        className: i(
-          "scale-400 lg:scale-250 text-brand-300 min-w-2.5 lg:min-w-4",
-          a ? o["animate-wave-color-error"] : o["animate-wave-color-success"]
-        ),
-        style: {
-          animationDelay: a ? `${(40 - s - 1) * 0.1}s` : `${s * 0.1}s`
-        }
-      }
-    ),
-    [a]
-  ), J = L(
-    () => Array.from({ length: 40 }, (s, l) => /* @__PURE__ */ e(y, { isFirst: l === 0, index: l }, l)),
-    [y]
-  ), [u, g] = T(!1);
+import { maskName as z } from "../JackpotCounter/JackpotCounterItem.mjs";
+import a from "../JackpotCounter/JackpotCounterItem.module.css.mjs";
+import { JackpotGameProviders as O } from "./JackpotGameProviders.mjs";
+import { JackpotRules as U } from "./JackpotRules.mjs";
+import { useJackpotItemData as V } from "./useJackpotItemData.mjs";
+function Be({
+  jackpot: t,
+  gameProviders: p
+}) {
+  const {
+    jackpotPayouts: u,
+    topJackpotPayout: h,
+    filteredGameProviders: I,
+    localeInfo: s,
+    isPayingOut: o,
+    jackpotAmount: C,
+    arrowImages: D,
+    calculatePercentage: J,
+    getAccumulatingJackpotDescription: A,
+    starTierStyles: c
+  } = V({ jackpot: t, gameProviders: p }), [d, N] = L(!1);
   return /* @__PURE__ */ r("div", { className: "bg-bg-primary border-border-primary rounded-2xl border", children: [
     /* @__PURE__ */ r(
       "div",
       {
-        className: i(
+        className: l(
           "bg-bg-tertiary relative flex shrink-0 rounded-2xl p-3 text-center lg:gap-4 lg:p-5"
         ),
         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__ */ e("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ r("div", { className: "relative flex w-full justify-between", children: [
               /* @__PURE__ */ r("div", { children: [
-                a ? /* @__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: [
+                o ? /* @__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__ */ 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(M, { className: "text-utility-blue-500 size-3.5" }),
+                  /* @__PURE__ */ e(R, { 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: 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(D, {
-                  currency: c.currency.code,
+                /* @__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: m(C, {
+                  currency: s.currency.code,
                   minDecimalPlaces: 2,
                   maxDecimalPlaces: 2
                 }) })
               ] }),
               /* @__PURE__ */ e("div", { className: "z-1 bottom-[-60] right-0 block lg:absolute", children: /* @__PURE__ */ e(
-                w,
+                g,
                 {
                   width: 100,
                   height: 100,
-                  src: a ? $ : Q,
+                  src: o ? G : M,
                   alt: "closeChest",
                   quality: 100,
                   className: "size-full h-auto w-[100px]"
@@ -128,106 +103,106 @@ function We({ jackpot: t }) {
             ] }) }) }) }),
             /* @__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,
+                /* @__PURE__ */ e("div", { className: "text-text-primary-900 text-xs font-semibold", children: m(0, {
+                  currency: s.currency.code,
                   compact: !0
                 }) }),
                 /* @__PURE__ */ r("div", { className: "relative flex items-center justify-end gap-1.5", children: [
-                  a ? /* @__PURE__ */ r("div", { className: "flex w-6 items-center", children: [
+                  o ? /* @__PURE__ */ r("div", { className: "flex w-6 items-center", children: [
                     /* @__PURE__ */ e(
                       "div",
                       {
-                        className: i(
+                        className: l(
                           "absolute left-0",
-                          o["animate-arrow-red-flash-1"]
+                          a["animate-arrow-red-flash-1"]
                         ),
-                        children: /* @__PURE__ */ e(x, { className: "size-4.5" })
+                        children: /* @__PURE__ */ e(f, { className: "size-4.5" })
                       }
                     ),
                     /* @__PURE__ */ e(
                       "div",
                       {
-                        className: i(
+                        className: l(
                           "absolute left-1.5",
-                          o["animate-arrow-red-flash-2"]
+                          a["animate-arrow-red-flash-2"]
                         ),
-                        children: /* @__PURE__ */ e(x, { className: "size-4.5" })
+                        children: /* @__PURE__ */ e(f, { className: "size-4.5" })
                       }
                     ),
                     /* @__PURE__ */ e(
                       "div",
                       {
-                        className: i(
+                        className: l(
                           "absolute left-3",
-                          o["animate-arrow-red-flash-3"]
+                          a["animate-arrow-red-flash-3"]
                         ),
-                        children: /* @__PURE__ */ e(x, { className: "size-4.5" })
+                        children: /* @__PURE__ */ e(f, { className: "size-4.5" })
                       }
                     )
                   ] }) : /* @__PURE__ */ r("div", { className: "flex w-6 items-center", children: [
                     /* @__PURE__ */ e(
                       "div",
                       {
-                        className: i(
+                        className: l(
                           "absolute left-0",
-                          o["animate-arrow-green-flash-1"]
+                          a["animate-arrow-green-flash-1"]
                         ),
-                        children: /* @__PURE__ */ e(p, { className: "size-4.5" })
+                        children: /* @__PURE__ */ e(b, { className: "size-4.5" })
                       }
                     ),
                     /* @__PURE__ */ e(
                       "div",
                       {
-                        className: i(
+                        className: l(
                           "absolute left-1.5",
-                          o["animate-arrow-green-flash-2"]
+                          a["animate-arrow-green-flash-2"]
                         ),
-                        children: /* @__PURE__ */ e(p, { className: "size-4.5" })
+                        children: /* @__PURE__ */ e(b, { className: "size-4.5" })
                       }
                     ),
                     /* @__PURE__ */ e(
                       "div",
                       {
-                        className: i(
+                        className: l(
                           "absolute left-3",
-                          o["animate-arrow-green-flash-3"]
+                          a["animate-arrow-green-flash-3"]
                         ),
-                        children: /* @__PURE__ */ e(p, { className: "size-4.5" })
+                        children: /* @__PURE__ */ e(b, { className: "size-4.5" })
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ e("div", { className: "text-text-primary-900 text-xs font-semibold", children: n(t == null ? void 0 : t.maximumJackpotPoolLimit, {
-                    currency: c.currency.code,
+                  /* @__PURE__ */ e("div", { className: "text-text-primary-900 text-xs font-semibold", children: m(t == null ? void 0 : t.maximumJackpotPoolLimit, {
+                    currency: s.currency.code,
                     compact: !0
                   }) })
                 ] })
               ] }),
               /* @__PURE__ */ e(
-                f.Root,
+                x.Root,
                 {
                   className: "bg-bg-primary h-2 w-full rounded-full lg:h-4",
                   max: 100,
-                  value: _(
+                  value: J(
                     Number(t.pool),
                     Number(t.maximumJackpotPoolLimit)
                   ),
-                  children: /* @__PURE__ */ e(f.Track, { className: "bg-bg-primary h-full overflow-hidden rounded-full", children: /* @__PURE__ */ e(f.Range, { className: "bg-brand-500 relative h-full overflow-hidden rounded-full pl-1.5", children: /* @__PURE__ */ e(
+                  children: /* @__PURE__ */ e(x.Track, { className: "bg-bg-primary h-full overflow-hidden rounded-full", children: /* @__PURE__ */ e(x.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: J
+                      children: D
                     }
                   ) }) })
                 }
               ),
-              /* @__PURE__ */ e("div", { className: "mt-1 block text-start text-2xs lg:hidden", children: a ? `The pot has hit ${n(
+              /* @__PURE__ */ e("div", { className: "mt-1 block text-start text-2xs lg:hidden", children: o ? `The pot has hit ${m(
                 t == null ? void 0 : t.maximumJackpotPoolLimit,
                 {
-                  currency: c.currency.code,
+                  currency: s.currency.code,
                   compact: !0
                 }
-              )} Play now for your chance to win big! 🔥` : B(
+              )} Play now for your chance to win big! 🔥` : A(
                 Number(t == null ? void 0 : t.pool) ?? 0,
                 Number(t == null ? void 0 : t.maximumJackpotPoolLimit) ?? 0
               ) })
@@ -236,30 +211,30 @@ function We({ jackpot: t }) {
               /* @__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(C, { className: "text-utility-brand-600 size-3.5" }),
+                  /* @__PURE__ */ e(w, { className: "text-utility-brand-600 size-3.5" }),
                   "Top Payout"
                 ] }),
-                /* @__PURE__ */ e("div", { className: "font-semibold", children: I(h.member.name) }),
-                /* @__PURE__ */ e("div", { className: "text-brand-400 text-2xl", children: n(h.amount, {
-                  currency: c.currency.code,
+                /* @__PURE__ */ e("div", { className: "font-semibold", children: z(h.member.name) }),
+                /* @__PURE__ */ e("div", { className: "text-brand-400 text-2xl", children: m(h.amount, {
+                  currency: s.currency.code,
                   minDecimalPlaces: 2,
                   maxDecimalPlaces: 2
                 }) })
               ] })
             ] }) }) : /* @__PURE__ */ r("div", { className: "bg-bg-primary relative mt-4 flex w-full gap-4 rounded-lg p-4", children: [
               /* @__PURE__ */ e(
-                w,
+                g,
                 {
                   width: 66,
                   height: 87,
-                  src: U,
+                  src: B,
                   alt: "closeChest",
                   className: "size-full h-auto w-[66px] mix-blend-luminosity"
                 }
               ),
               /* @__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(C, { className: "text-utility-brand-600 size-3.5" }),
+                  /* @__PURE__ */ e(w, { className: "text-utility-brand-600 size-3.5" }),
                   "Top Payout"
                 ] }),
                 /* @__PURE__ */ e("div", { className: "font-semibold", children: "No winners yet" }),
@@ -267,26 +242,26 @@ function We({ jackpot: t }) {
               ] })
             ] }),
             /* @__PURE__ */ e(
-              z,
+              P,
               {
                 variant: "outline",
-                className: i(
+                className: l(
                   "mt-5.5 px-3.5 py-2.5 text-sm",
-                  u ? "hidden" : "flex"
+                  d ? "hidden" : "flex"
                 ),
-                onClick: () => g(!u),
+                onClick: () => N(!d),
                 children: /* @__PURE__ */ r("div", { className: "flex gap-1.5", children: [
                   "See Details",
-                  /* @__PURE__ */ e(q, { className: "size-5" })
+                  /* @__PURE__ */ e(T, { className: "size-5" })
                 ] })
               }
             )
           ] }),
-          a && /* @__PURE__ */ e(
+          o && /* @__PURE__ */ e(
             "div",
             {
-              className: i(
-                o["light-rays"],
+              className: l(
+                a["light-rays"],
                 "absolute right-0 top-0 rounded-2xl [--light-rays-top:15%] lg:[--light-rays-top:150px]"
               )
             }
@@ -294,11 +269,11 @@ function We({ jackpot: t }) {
         ]
       }
     ),
-    u && /* @__PURE__ */ r("div", { children: [
+    d && /* @__PURE__ */ r("div", { children: [
       /* @__PURE__ */ r("div", { className: "z-1 flex-1", children: [
         /* @__PURE__ */ r("div", { className: "flex items-center justify-between p-3", children: [
-          /* @__PURE__ */ e("div", { className: "flex gap-2", children: /* @__PURE__ */ e("div", { className: "text-text-primary-900 text-lg font-semibold", children: d.length ? "Leaderboard" : "Starting soon!" }) }),
-          /* @__PURE__ */ e(V, { jackpotRules: t.description })
+          /* @__PURE__ */ e("div", { className: "flex gap-2", children: /* @__PURE__ */ e("div", { className: "text-text-primary-900 text-lg font-semibold", children: u.length ? "Leaderboard" : "Starting soon!" }) }),
+          /* @__PURE__ */ e(U, { jackpotRules: t.description })
         ] }),
         /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: "border-gray-200 overflow-hidden", 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-center text-xs font-medium", children: [
@@ -307,121 +282,99 @@ function We({ jackpot: t }) {
             /* @__PURE__ */ e("th", { children: "Multiplier" }),
             /* @__PURE__ */ e("th", { children: "Prize" })
           ] }) }),
-          /* @__PURE__ */ e("tbody", { children: d.length ? /* @__PURE__ */ e(v, { children: d.map((s, l) => /* @__PURE__ */ r(
+          /* @__PURE__ */ e("tbody", { children: u.length ? /* @__PURE__ */ e(y, { children: u.map((n, i) => /* @__PURE__ */ r(
             "tr",
             {
-              className: "bg-bg-primary text-text-secondary-700 text-sm",
+              className: "bg-bg-primary text-text-secondary-700 text-center text-sm",
               children: [
-                /* @__PURE__ */ e("td", { className: "border-border-secondary h-12 w-[52px] border-t-2 text-center", children: l + 1 < 6 ? /* @__PURE__ */ r("div", { className: "relative", children: [
+                /* @__PURE__ */ e("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: i + 1 < 6 ? /* @__PURE__ */ r("div", { className: "relative", children: [
                   /* @__PURE__ */ e(
-                    P,
+                    v,
                     {
-                      className: i(
+                      className: l(
                         "mx-auto size-6.5",
-                        b[l].starColor
+                        c[i].starColor
                       )
                     }
                   ),
                   /* @__PURE__ */ e(
                     "span",
                     {
-                      className: i(
+                      className: l(
                         "absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold",
-                        b[l].numberColor
+                        c[i].numberColor
                       ),
-                      children: l + 1
+                      children: i + 1
                     }
                   )
-                ] }) : l + 1 }),
-                /* @__PURE__ */ e("td", { className: "border-border-secondary h-12 border-t-2 text-center", children: I(s.member.name) }),
-                /* @__PURE__ */ r("td", { className: "border-border-secondary h-12 border-t-2 text-center", children: [
-                  s.multiplier,
+                ] }) : i + 1 }),
+                /* @__PURE__ */ e("td", { className: "border-border-secondary h-12 border-t-2", children: z(n.member.name) }),
+                /* @__PURE__ */ r("td", { className: "border-border-secondary h-12 border-t-2", children: [
+                  n.multiplier,
                   "x"
                 ] }),
-                /* @__PURE__ */ e("td", { className: "border-border-secondary text-brand-400 h-12 border-t-2 text-center", children: n(h.amount, {
-                  currency: c.currency.code,
+                /* @__PURE__ */ e("td", { className: "border-border-secondary text-brand-400 h-12 border-t-2", children: m(n.amount, {
+                  currency: s.currency.code,
                   minDecimalPlaces: 2,
                   maxDecimalPlaces: 2
                 }) })
               ]
             },
-            l
-          )) }) : /* @__PURE__ */ e(v, { children: Array.from({ length: 10 }).map((s, l) => /* @__PURE__ */ r(
+            i
+          )) }) : /* @__PURE__ */ e(y, { children: Array.from({ length: 10 }).map((n, i) => /* @__PURE__ */ r(
             "tr",
             {
-              className: "bg-bg-primary text-text-secondary-700 text-sm",
+              className: "bg-bg-primary text-text-secondary-700 text-center 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("td", { className: "border-border-secondary h-12 w-[52px] border-t-2", children: i + 1 < 6 ? /* @__PURE__ */ r("div", { className: "relative", children: [
                   /* @__PURE__ */ e(
-                    P,
+                    v,
                     {
-                      className: i(
+                      className: l(
                         "mx-auto size-6.5",
-                        b[l].starColor
+                        c[i].starColor
                       )
                     }
                   ),
                   /* @__PURE__ */ e(
                     "span",
                     {
-                      className: i(
+                      className: l(
                         "absolute inset-0 mt-0.5 flex items-center justify-center text-2xs font-bold",
-                        b[l].numberColor
+                        c[i].numberColor
                       ),
-                      children: l + 1
+                      children: i + 1
                     }
                   )
-                ] }) : l + 1 }),
+                ] }) : i + 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
+            i
           )) }) })
         ] }) }) })
       ] }),
-      /* @__PURE__ */ e(F, {}),
+      !!I.length && /* @__PURE__ */ e(O, { gameProviders: p }),
       /* @__PURE__ */ e("div", { className: "m-3", children: /* @__PURE__ */ e(
-        z,
+        P,
         {
           variant: "outline",
-          className: i(
+          className: l(
             "px-3.5 py-2.5 text-sm",
-            u ? "flex" : "hidden"
+            d ? "flex" : "hidden"
           ),
-          onClick: () => g(!u),
+          onClick: () => N(!d),
           children: /* @__PURE__ */ r("div", { className: "flex gap-1.5", children: [
             "Hide",
-            /* @__PURE__ */ e(O, { className: "size-5" })
+            /* @__PURE__ */ e(S, { className: "size-5" })
           ] })
         }
       ) })
     ] })
   ] });
 }
-const _ = (t, m) => m === 0 ? 0 : t / m * 100, B = (t, m) => (m === 0 ? 0 : t / m * 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!", b = [
-  {
-    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"
-  }
-];
 export {
-  We as JackpotItemMobile
+  Be as JackpotItemMobile
 };

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

@@ -1,8 +1,10 @@
+import { GameProviderData } from '../../types';
 export interface JackpotsProps {
     /** @default "Promos" */
     heading?: string;
     /** @default "/jackpots" */
     viewAllUrl?: string;
     className?: string;
+    gameProviders: GameProviderData[];
 }
 export declare function Jackpots(props: JackpotsProps): import("react").JSX.Element | null;

package/dist/components/Jackpots/Jackpots.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("@opexa/portal-sdk-core");require("@tanstack/react-query");require("tiny-invariant");require("../../constants/index.js");require("../../utils/capitalize.js");require("../../utils/parseDecimal.js");require("../../utils/getLocaleInfo.js");require("../../utils/getQueryClient.js");require("../../utils/isMobile.js");require("../../client/services/getSession.js");require("react");require("lodash-es");require("@opexa/portal-sdk-core/object-id");require("../../client/hooks/useGlobalStore.js");require("../../client/hooks/useInfiniteQueryHelper.js");const t=require("../../client/hooks/useJackpotsQuery.js");require("usehooks-ts");const u=require("./JackpotItem.js"),a=require("./JackpotItemMobile.js");function c(i){var s;const l=((s=t.useJackpotsQuery({first:100,filter:{status:{equal:"ACTIVE"},deleted:{equal:!1}},sort:{cursor:"POOL",order:"DESC"}}).data)==null?void 0:s.pages[0].edges.map(e=>e.node))??[];return l.length<=0?null:r.jsxs("div",{className:i.className,children:[r.jsx("div",{className:"text-lg font-semibold mb-3 lg:mb-4.5",children:i.heading??"Jackpots"}),r.jsx("div",{className:"hidden flex-col gap-6 lg:flex",children:l.map(e=>r.jsx(u.JackpotItem,{jackpot:e,viewAllUrl:i.viewAllUrl},e.id))}),r.jsx("div",{className:"flex flex-col gap-6 lg:hidden",children:l.map(e=>r.jsx(a.JackpotItemMobile,{jackpot:e,viewAllUrl:i.viewAllUrl},e.id))})]})}exports.Jackpots=c;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime");require("@opexa/portal-sdk-core");require("@tanstack/react-query");require("tiny-invariant");require("../../constants/index.js");require("../../utils/capitalize.js");require("../../utils/parseDecimal.js");require("../../utils/getLocaleInfo.js");require("../../utils/getQueryClient.js");require("../../utils/isMobile.js");require("../../client/services/getSession.js");require("react");require("lodash-es");require("@opexa/portal-sdk-core/object-id");require("../../client/hooks/useGlobalStore.js");require("../../client/hooks/useInfiniteQueryHelper.js");const t=require("../../client/hooks/useJackpotsQuery.js");require("usehooks-ts");const a=require("./JackpotItemDesktop.js"),u=require("./JackpotItemMobile.js");function c(r){var l;const s=((l=t.useJackpotsQuery({first:100,filter:{status:{equal:"ACTIVE"},deleted:{equal:!1}},sort:{cursor:"POOL",order:"DESC"}}).data)==null?void 0:l.pages[0].edges.map(e=>e.node))??[];return s.length<=0?null:i.jsxs("div",{className:r.className,children:[i.jsx("div",{className:"mb-3 text-lg font-semibold lg:mb-4.5",children:r.heading??"Jackpots"}),i.jsx("div",{className:"hidden flex-col gap-6 lg:flex",children:s.map(e=>i.jsx(a.JackpotItemDesktop,{gameProviders:r.gameProviders,jackpot:e,viewAllUrl:r.viewAllUrl},e.id))}),i.jsx("div",{className:"flex flex-col gap-6 lg:hidden",children:s.map(e=>i.jsx(u.JackpotItemMobile,{gameProviders:r.gameProviders,jackpot:e,viewAllUrl:r.viewAllUrl},e.id))})]})}exports.Jackpots=c;