@opexa/portal-components 0.0.17 → 0.0.18

package/dist/components/Disclaimer/Disclaimer.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as t, jsxs as e } from "react/jsx-runtime";
-import { Portal as m } from "@ark-ui/react";
+import { Portal as l } from "@ark-ui/react";
 import r from "next/image";
 import { useRef as a } from "react";
 import s from "../../images/pagcor.png.mjs";
@@ -11,6 +11,7 @@ import "../../ui/Badge/Badge.mjs";
 import { Button as c } from "../../ui/Button/Button.mjs";
 import "../../ui/Checkbox/Checkbox.mjs";
 import "../../ui/Clipboard/Clipboard.mjs";
+import "../../ui/Collapsible/Collapsible.mjs";
 import "../../ui/DatePicker/DatePicker.mjs";
 import { Root as p, Backdrop as f, Positioner as u, Content as d, Title as g, Description as x } from "../../ui/Dialog/Dialog.mjs";
 import "../../ui/Drawer/Drawer.mjs";
@@ -23,15 +24,17 @@ import "../../utils/getQueryClient.mjs";
 import "../../utils/isMobile.mjs";
 import "../../ui/IconButton/iconButton.recipe.mjs";
 import "../../ui/NumberInput/NumberInput.mjs";
+import "../../ui/PasswordInput/PasswordInput.mjs";
 import "../../ui/PinInput/PinInput.mjs";
 import "../../ui/Popover/Popover.mjs";
 import "tailwind-merge";
+import "../../ui/Progress/Progress.mjs";
 import "../../ui/SegmentGroup/SegmentGroup.mjs";
 import "../../ui/Select/Select.mjs";
 import "../../ui/Table/Table.mjs";
 import "../../ui/Tabs/Tabs.mjs";
 import { useDisclaimer as h } from "./useDisclaimer.mjs";
-function Y(l) {
+function $(m) {
   const o = h(), i = a(null);
   return /* @__PURE__ */ t(
     p,
@@ -42,13 +45,13 @@ function Y(l) {
       closeOnEscape: !1,
       closeOnInteractOutside: !1,
       initialFocusEl: () => i.current,
-      children: /* @__PURE__ */ e(m, { children: [
+      children: /* @__PURE__ */ e(l, { children: [
         /* @__PURE__ */ t(f, {}),
-        /* @__PURE__ */ t(u, { children: /* @__PURE__ */ e(d, { className: "flex h-full w-full flex-col items-start bg-white p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [
+        /* @__PURE__ */ t(u, { children: /* @__PURE__ */ e(d, { className: "flex h-full w-full flex-col items-start p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [
           /* @__PURE__ */ t(
             r,
             {
-              src: l.logo,
+              src: m.logo,
               alt: "",
               width: 200,
               height: 100,
@@ -58,14 +61,14 @@ function Y(l) {
           ),
           /* @__PURE__ */ e("div", { className: "w-full grow", children: [
             /* @__PURE__ */ t(g, { className: "mt-3xl text-center text-lg font-semibold", children: "Age Verification" }),
-            /* @__PURE__ */ e(x, { className: "text-gray-600 mt-xs text-center text-sm", children: [
+            /* @__PURE__ */ e(x, { className: "text-text-tertiary-600 mt-xs text-center text-sm", children: [
               "By entering this website I acknowledge and confirmI am 21 years of age and I agree with the",
               " ",
               /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
-                  className: "text-accent-700 underline underline-offset-2",
+                  className: "text-brand-400 underline underline-offset-2",
                   children: "Terms and Conditions."
                 }
               )
@@ -107,5 +110,5 @@ function Y(l) {
   );
 }
 export {
-  Y as Disclaimer
+  $ as Disclaimer
 };

package/dist/components/Empty/Empty.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./CloudIcon.js");function l(t){return e.jsxs("div",{role:"alert","aria-live":"polite",className:t.className,children:[e.jsxs("div",{className:"relative mx-auto w-[9.5rem] pt-4",children:[e.jsx("div",{className:"bg-gray-100 absolute left-1/2 top-0 size-[6.5rem] -translate-x-1/2 rounded-full"}),e.jsx(s.CloudIcon,{className:"relative h-auto w-full shrink-0"}),e.jsx("div",{className:"bg-gray-600/25 absolute bottom-2 left-1/2 flex size-9 -translate-x-1/2 items-center justify-center rounded-full backdrop-blur-sm",children:e.jsx(t.icon,{className:"size-6 text-white"})})]}),e.jsx("h2",{className:"mt-xl text-center font-semibold",children:t.title}),e.jsx("p",{className:"text-gray-500 mx-auto mt-xs max-w-[25rem] text-center text-sm",children:t.message})]})}exports.Empty=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("./CloudIcon.js");function s(t){return e.jsxs("div",{role:"alert","aria-live":"polite",className:t.className,children:[e.jsxs("div",{className:"relative mx-auto w-[9.5rem] pt-4",children:[e.jsx("div",{className:"bg-utility-gray-200 absolute left-1/2 top-0 size-[6.5rem] -translate-x-1/2 rounded-full"}),e.jsx(l.CloudIcon,{className:"relative h-auto w-full shrink-0"}),e.jsx("div",{className:"bg-utility-gray-200/40 absolute bottom-2 left-1/2 flex size-12 -translate-x-1/2 items-center justify-center rounded-full backdrop-blur-sm",children:e.jsx(t.icon,{className:"size-6 text-white"})}),e.jsx("div",{className:"bg-utility-gray-200 absolute left-4 top-3.5 size-2.5 rounded-full"}),e.jsx("div",{className:"bg-utility-gray-200 absolute bottom-0.5 left-3 size-3.5 rounded-full"}),e.jsx("div",{className:"bg-utility-gray-200 absolute right-3.5 top-1 size-2 rounded-full"}),e.jsx("div",{className:"bg-utility-gray-200 absolute right-0 top-6.5 size-3.5 rounded-full"})]}),e.jsx("h2",{className:"mt-xl text-center font-semibold",children:t.title}),e.jsx("p",{className:"text-text-tertiary-600 mx-auto mt-xs max-w-[25rem] text-center text-sm",children:t.message})]})}exports.Empty=s;

package/dist/components/Empty/Empty.mjs

@@ -1,16 +1,20 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { CloudIcon as l } from "./CloudIcon.mjs";
-function m(t) {
-  return /* @__PURE__ */ a("div", { role: "alert", "aria-live": "polite", className: t.className, children: [
-    /* @__PURE__ */ a("div", { className: "relative mx-auto w-[9.5rem] pt-4", children: [
-      /* @__PURE__ */ e("div", { className: "bg-gray-100 absolute left-1/2 top-0 size-[6.5rem] -translate-x-1/2 rounded-full" }),
-      /* @__PURE__ */ e(l, { className: "relative h-auto w-full shrink-0" }),
-      /* @__PURE__ */ e("div", { className: "bg-gray-600/25 absolute bottom-2 left-1/2 flex size-9 -translate-x-1/2 items-center justify-center rounded-full backdrop-blur-sm", children: /* @__PURE__ */ e(t.icon, { className: "size-6 text-white" }) })
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { CloudIcon as a } from "./CloudIcon.mjs";
+function r(t) {
+  return /* @__PURE__ */ l("div", { role: "alert", "aria-live": "polite", className: t.className, children: [
+    /* @__PURE__ */ l("div", { className: "relative mx-auto w-[9.5rem] pt-4", children: [
+      /* @__PURE__ */ e("div", { className: "bg-utility-gray-200 absolute left-1/2 top-0 size-[6.5rem] -translate-x-1/2 rounded-full" }),
+      /* @__PURE__ */ e(a, { className: "relative h-auto w-full shrink-0" }),
+      /* @__PURE__ */ e("div", { className: "bg-utility-gray-200/40 absolute bottom-2 left-1/2 flex size-12 -translate-x-1/2 items-center justify-center rounded-full backdrop-blur-sm", children: /* @__PURE__ */ e(t.icon, { className: "size-6 text-white" }) }),
+      /* @__PURE__ */ e("div", { className: "bg-utility-gray-200 absolute left-4 top-3.5 size-2.5 rounded-full" }),
+      /* @__PURE__ */ e("div", { className: "bg-utility-gray-200 absolute bottom-0.5 left-3 size-3.5 rounded-full" }),
+      /* @__PURE__ */ e("div", { className: "bg-utility-gray-200 absolute right-3.5 top-1 size-2 rounded-full" }),
+      /* @__PURE__ */ e("div", { className: "bg-utility-gray-200 absolute right-0 top-6.5 size-3.5 rounded-full" })
     ] }),
     /* @__PURE__ */ e("h2", { className: "mt-xl text-center font-semibold", children: t.title }),
-    /* @__PURE__ */ e("p", { className: "text-gray-500 mx-auto mt-xs max-w-[25rem] text-center text-sm", children: t.message })
+    /* @__PURE__ */ e("p", { className: "text-text-tertiary-600 mx-auto mt-xs max-w-[25rem] text-center text-sm", children: t.message })
   ] });
 }
 export {
-  m as Empty
+  r as Empty
 };

package/dist/components/GameLaunch/GameLaunch.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@ark-ui/react"),I=require("next/image"),p=require("react"),L=require("zustand/shallow");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("lodash-es");require("@opexa/portal-sdk-core/object-id");const g=require("../../client/hooks/useDisclosure.js"),N=require("../../client/hooks/useEndGameSessionMutation.js"),z=require("../../client/hooks/useGlobalStore.js");require("../../client/hooks/useInfiniteQueryHelper.js");require("usehooks-ts");const y=require("../../icons/AlertCircleIcon.js"),G=require("../../icons/ChevronLeftIcon.js"),j=require("../../icons/Expand03Icon.js"),f=require("../../icons/SpinnerIcon.js"),O=require("../../icons/Wallet02Icon.js"),q=require("../../icons/XIcon.js"),i=require("../../ui/AlertDialog/AlertDialog.js");require("../../ui/Avatar/Avatar.js");require("../../ui/Badge/Badge.js");const u=require("../../ui/Button/Button.js");require("../../ui/Checkbox/Checkbox.js");require("../../ui/Clipboard/Clipboard.js");require("../../ui/DatePicker/DatePicker.js");require("../../ui/Dialog/Dialog.js");require("../../ui/Drawer/Drawer.js");require("../../ui/Field/Field.js");const l=require("../../ui/IconButton/IconButton.js");require("../../ui/NumberInput/NumberInput.js");require("../../ui/PinInput/PinInput.js");require("../../ui/Popover/Popover.js");require("tailwind-merge");require("../../ui/SegmentGroup/SegmentGroup.js");require("../../ui/Select/Select.js");require("../../ui/Table/Table.js");require("../../ui/Tabs/Tabs.js");function b(d){var h;const m=p.useRef(null),n=g.useDisclosure({defaultOpen:!0,onOpenChange(a){a||setTimeout(()=>{var x;(x=m.current)==null||x.scrollIntoView({behavior:"smooth",block:"start",inline:"start"})},25)}}),r=g.useDisclosure(),c=N.useEndGameSessionMutation(),s=z.useGlobalStore(L.useShallow(a=>({gameLaunch:a.gameLaunch,depositWithdrawal:a.depositWithdrawal})));async function o(){s.gameLaunch.details.status==="PLAYING"&&await c.mutateAsync({game:s.gameLaunch.details.game,session:s.gameLaunch.details.session}),n.setOpen(!0),s.gameLaunch.setDetails({status:"WAITING",session:null,game:null})}return e.jsxs(e.Fragment,{children:[e.jsxs(t.Presence,{ref:m,present:s.gameLaunch.details.status!=="WAITING"&&!n.open,lazyMount:!0,unmountOnExit:s.gameLaunch.details.status==="WAITING",className:"border-gray-200 w-full overflow-hidden rounded-lg border ui-open:animate-fade-in ui-closed:animate-fade-out",children:[e.jsxs("section",{className:"aspect-[960/540] w-full",children:[s.gameLaunch.details.status==="LOADING"&&e.jsx("div",{className:"flex size-full items-center justify-center",children:e.jsx(f.SpinnerIcon,{className:"size-8"})}),s.gameLaunch.details.status==="FAILED"&&e.jsx("div",{}),s.gameLaunch.details.status==="PLAYING"&&e.jsx("iframe",{src:((h=s.gameLaunch.details.session)==null?void 0:h.launchUrl)??"",className:"size-full"})]}),e.jsxs("section",{className:"border-gray-200 flex justify-end gap-lg border-t p-2",children:[e.jsx(l.IconButton,{size:"sm",variant:"outline",colorScheme:"gray",onClick:()=>{if(s.gameLaunch.details.status!=="PLAYING"){o();return}r.setOpen(!0)},disabled:s.gameLaunch.details.status==="LOADING","aria-label":"Quit Game",title:"Quit",children:e.jsx(q.XIcon,{className:"size-5"})}),e.jsx(l.IconButton,{size:"sm",variant:"outline",colorScheme:"gray",onClick:()=>n.setOpen(!0),title:"Maximize","aria-label":"Maximize",children:e.jsx(j.Expand03Icon,{className:"size-5"})})]})]}),e.jsx(t.Dialog.Root,{open:s.gameLaunch.details.status!=="WAITING"&&n.open&&!r.open,lazyMount:!0,closeOnEscape:!1,closeOnInteractOutside:!1,children:e.jsx(t.Portal,{children:e.jsx(t.Dialog.Positioner,{className:"z-dialog fixed inset-0",children:e.jsxs(t.Dialog.Content,{className:"ui-open:animate-dialog-in ui-closed:animate-dialog-out flex size-full flex-col bg-white",children:[e.jsxs("section",{className:"grid grid-cols-[22rem_auto_22rem] items-center px-4 py-2",children:[e.jsx("div",{className:"flex items-center justify-start gap-2",children:e.jsx(l.IconButton,{size:"sm",variant:"outline",colorScheme:"gray",onClick:()=>{if(s.gameLaunch.details.status!=="PLAYING"){o();return}r.setOpen(!0)},disabled:s.gameLaunch.details.status==="LOADING",title:"Quit","aria-label":"Quit Game",children:e.jsx(G.ChevronLeftIcon,{className:"size-5"})})}),e.jsx("div",{className:"flex items-center justify-center",children:!!d.logo&&e.jsx(I,{src:d.logo,height:40,width:80,alt:"",className:"h-9 w-auto shrink-0"})}),e.jsxs("div",{className:"flex justify-end gap-2",children:[e.jsxs(u.Button,{size:"sm",fullWidth:!1,onClick:()=>{s.depositWithdrawal.setOpen(!0)},children:[e.jsx(O.Wallet02Icon,{className:"size-5"}),"Wallet"]}),e.jsx(l.IconButton,{size:"sm",variant:"outline",colorScheme:"gray",onClick:()=>n.setOpen(!1),title:"Minimize","aria-label":"Minimize",children:e.jsx(j.Expand03Icon,{className:"size-5"})})]})]}),e.jsxs("section",{className:"grow",children:[s.gameLaunch.details.status==="LOADING"&&e.jsx("div",{className:"flex size-full items-center justify-center",children:e.jsx(f.SpinnerIcon,{className:"size-8"})}),s.gameLaunch.details.status==="FAILED"&&e.jsx("div",{}),s.gameLaunch.details.status==="PLAYING"&&e.jsx("iframe",{src:s.gameLaunch.details.session.launchUrl??"",className:"size-full"})]})]})})})}),e.jsx(i.Root,{role:"alertdialog",open:r.open,onOpenChange:a=>{r.setOpen(a.open)},lazyMount:!0,closeOnEscape:!1,closeOnInteractOutside:!1,children:e.jsxs(t.Portal,{children:[e.jsx(i.Backdrop,{}),e.jsx(i.Positioner,{children:e.jsxs(i.Content,{children:[e.jsxs(i.Header,{children:[e.jsx("div",{className:"flex size-12 items-center justify-center rounded-full bg-[#FEE4E2] text-[#D92D20]",children:e.jsx(y.AlertCircleIcon,{})}),e.jsx(i.CloseTrigger,{children:e.jsx(q.XIcon,{})})]}),e.jsxs(i.Body,{children:[e.jsx(i.Title,{children:"Quit Game"}),e.jsx(i.Description,{children:"Are you sure you want to quit?"})]}),e.jsx(i.Context,{children:a=>e.jsxs(i.Footer,{children:[e.jsx(u.Button,{variant:"outline",colorScheme:"gray",disabled:c.isPending,onClick:()=>{a.setOpen(!1)},children:"Cancel"}),e.jsx(u.Button,{colorScheme:"danger",disabled:c.isPending,onClick:async()=>{await o(),a.setOpen(!1)},children:"Proceed"})]})})]})})]})})]})}exports.GameLaunch=b;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("@ark-ui/react"),p=require("next/image"),I=require("react"),L=require("zustand/shallow");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("lodash-es");require("@opexa/portal-sdk-core/object-id");const g=require("../../client/hooks/useDisclosure.js"),N=require("../../client/hooks/useEndGameSessionMutation.js"),y=require("../../client/hooks/useGlobalStore.js");require("../../client/hooks/useInfiniteQueryHelper.js");require("usehooks-ts");const z=require("../../icons/AlertCircleIcon.js"),b=require("../../icons/ChevronLeftIcon.js"),j=require("../../icons/Expand03Icon.js"),f=require("../../icons/SpinnerIcon.js"),G=require("../../icons/Wallet02Icon.js"),q=require("../../icons/XIcon.js"),i=require("../../ui/AlertDialog/AlertDialog.js");require("../../ui/Avatar/Avatar.js");require("../../ui/Badge/Badge.js");const u=require("../../ui/Button/Button.js");require("../../ui/Checkbox/Checkbox.js");require("../../ui/Clipboard/Clipboard.js");require("../../ui/Collapsible/Collapsible.js");require("../../ui/DatePicker/DatePicker.js");require("../../ui/Dialog/Dialog.js");require("../../ui/Drawer/Drawer.js");require("../../ui/Field/Field.js");const l=require("../../ui/IconButton/IconButton.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 O(d){var h;const m=I.useRef(null),t=g.useDisclosure({defaultOpen:!0,onOpenChange(r){r||setTimeout(()=>{var x;(x=m.current)==null||x.scrollIntoView({behavior:"smooth",block:"start",inline:"start"})},25)}}),n=g.useDisclosure(),c=N.useEndGameSessionMutation(),s=y.useGlobalStore(L.useShallow(r=>({gameLaunch:r.gameLaunch,depositWithdrawal:r.depositWithdrawal})));async function o(){s.gameLaunch.details.status==="PLAYING"&&await c.mutateAsync({game:s.gameLaunch.details.game,session:s.gameLaunch.details.session}),t.setOpen(!0),s.gameLaunch.setDetails({status:"WAITING",session:null,game:null})}return e.jsxs(e.Fragment,{children:[e.jsxs(a.Presence,{ref:m,present:s.gameLaunch.details.status!=="WAITING"&&!t.open,lazyMount:!0,unmountOnExit:s.gameLaunch.details.status==="WAITING",className:"border-border-primary bg-bg-primary-alt w-full overflow-hidden rounded-lg border ui-open:animate-fade-in ui-closed:animate-fade-out",children:[e.jsxs("section",{className:"aspect-[960/540] w-full",children:[s.gameLaunch.details.status==="LOADING"&&e.jsx("div",{className:"flex size-full items-center justify-center",children:e.jsx(f.SpinnerIcon,{className:"size-8"})}),s.gameLaunch.details.status==="FAILED"&&e.jsx("div",{}),s.gameLaunch.details.status==="PLAYING"&&e.jsx("iframe",{src:((h=s.gameLaunch.details.session)==null?void 0:h.launchUrl)??"",className:"size-full"})]}),e.jsxs("section",{className:"border-border-primary flex justify-end gap-lg border-t p-2",children:[e.jsx(l.IconButton,{size:"sm",variant:"outline",colorScheme:"gray",onClick:()=>{if(s.gameLaunch.details.status!=="PLAYING"){o();return}n.setOpen(!0)},disabled:s.gameLaunch.details.status==="LOADING","aria-label":"Quit Game",title:"Quit",children:e.jsx(q.XIcon,{className:"size-5"})}),e.jsx(l.IconButton,{size:"sm",variant:"outline",colorScheme:"gray",onClick:()=>t.setOpen(!0),title:"Maximize","aria-label":"Maximize",children:e.jsx(j.Expand03Icon,{className:"size-5"})})]})]}),e.jsx(a.Dialog.Root,{open:s.gameLaunch.details.status!=="WAITING"&&t.open&&!n.open,lazyMount:!0,closeOnEscape:!1,closeOnInteractOutside:!1,children:e.jsx(a.Portal,{children:e.jsx(a.Dialog.Positioner,{className:"z-dialog fixed inset-0",children:e.jsxs(a.Dialog.Content,{className:"ui-open:animate-dialog-in ui-closed:animate-dialog-out bg-bg-primary-alt flex size-full flex-col",children:[e.jsxs("section",{className:"grid grid-cols-[22rem_auto_22rem] items-center px-4 py-2",children:[e.jsx("div",{className:"flex items-center justify-start gap-2",children:e.jsx(l.IconButton,{size:"sm",variant:"outline",colorScheme:"gray",onClick:()=>{if(s.gameLaunch.details.status!=="PLAYING"){o();return}n.setOpen(!0)},disabled:s.gameLaunch.details.status==="LOADING",title:"Quit","aria-label":"Quit Game",children:e.jsx(b.ChevronLeftIcon,{className:"size-5"})})}),e.jsx("div",{className:"flex items-center justify-center",children:!!d.logo&&e.jsx(p,{src:d.logo,height:40,width:80,alt:"",className:"h-9 w-auto shrink-0"})}),e.jsxs("div",{className:"flex justify-end gap-2",children:[e.jsxs(u.Button,{size:"sm",fullWidth:!1,onClick:()=>{s.depositWithdrawal.setOpen(!0)},children:[e.jsx(G.Wallet02Icon,{className:"size-5"}),"Wallet"]}),e.jsx(l.IconButton,{size:"sm",variant:"outline",colorScheme:"gray",onClick:()=>t.setOpen(!1),title:"Minimize","aria-label":"Minimize",children:e.jsx(j.Expand03Icon,{className:"size-5"})})]})]}),e.jsxs("section",{className:"grow",children:[s.gameLaunch.details.status==="LOADING"&&e.jsx("div",{className:"flex size-full items-center justify-center",children:e.jsx(f.SpinnerIcon,{className:"size-8"})}),s.gameLaunch.details.status==="FAILED"&&e.jsx("div",{}),s.gameLaunch.details.status==="PLAYING"&&e.jsx("iframe",{src:s.gameLaunch.details.session.launchUrl??"",className:"size-full"})]})]})})})}),e.jsx(i.Root,{role:"alertdialog",open:n.open,onOpenChange:r=>{n.setOpen(r.open)},lazyMount:!0,closeOnEscape:!1,closeOnInteractOutside:!1,children:e.jsxs(a.Portal,{children:[e.jsx(i.Backdrop,{}),e.jsx(i.Positioner,{children:e.jsxs(i.Content,{children:[e.jsxs(i.Header,{children:[e.jsx("div",{className:"bg-error-700/25 text-error-200 flex size-12 items-center justify-center rounded-full",children:e.jsx(z.AlertCircleIcon,{})}),e.jsx(i.CloseTrigger,{children:e.jsx(q.XIcon,{})})]}),e.jsxs(i.Body,{children:[e.jsx(i.Title,{children:"Quit Game"}),e.jsx(i.Description,{children:"Are you sure you want to quit?"})]}),e.jsx(i.Context,{children:r=>e.jsxs(i.Footer,{children:[e.jsx(u.Button,{variant:"outline",colorScheme:"gray",disabled:c.isPending,onClick:()=>{r.setOpen(!1)},children:"Cancel"}),e.jsx(u.Button,{colorScheme:"danger",disabled:c.isPending,onClick:async()=>{await o(),r.setOpen(!1)},children:"Proceed"})]})})]})})]})})]})}exports.GameLaunch=O;

package/dist/components/GameLaunch/GameLaunch.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs as t, Fragment as z, jsx as e } from "react/jsx-runtime";
 import { Presence as y, Dialog as c, Portal as f } from "@ark-ui/react";
-import O from "next/image";
-import { useRef as G } from "react";
-import { useShallow as x } from "zustand/shallow";
+import b from "next/image";
+import { useRef as O } from "react";
+import { useShallow as G } from "zustand/shallow";
 import "@opexa/portal-sdk-core";
 import "@tanstack/react-query";
 import "tiny-invariant";
@@ -16,7 +16,7 @@ import "../../utils/isMobile.mjs";
 import "lodash-es";
 import "@opexa/portal-sdk-core/object-id";
 import { useDisclosure as g } from "../../client/hooks/useDisclosure.mjs";
-import { useEndGameSessionMutation as b } from "../../client/hooks/useEndGameSessionMutation.mjs";
+import { useEndGameSessionMutation as x } from "../../client/hooks/useEndGameSessionMutation.mjs";
 import { useGlobalStore as A } from "../../client/hooks/useGlobalStore.mjs";
 import "../../client/hooks/useInfiniteQueryHelper.mjs";
 import "usehooks-ts";
@@ -26,28 +26,31 @@ import { Expand03Icon as N } from "../../icons/Expand03Icon.mjs";
 import { SpinnerIcon as L } from "../../icons/SpinnerIcon.mjs";
 import { Wallet02Icon as w } from "../../icons/Wallet02Icon.mjs";
 import { XIcon as I } from "../../icons/XIcon.mjs";
-import { Root as D, Backdrop as S, Positioner as P, Content as k, Header as E, CloseTrigger as W, Body as j, Title as M, Description as T, Context as F, Footer as Q } from "../../ui/AlertDialog/AlertDialog.mjs";
+import { Root as S, Backdrop as D, Positioner as P, Content as k, Header as W, CloseTrigger as j, Body as M, Title as E, Description as T, Context as Q, Footer as Y } from "../../ui/AlertDialog/AlertDialog.mjs";
 import "../../ui/Avatar/Avatar.mjs";
 import "../../ui/Badge/Badge.mjs";
 import { Button as m } from "../../ui/Button/Button.mjs";
 import "../../ui/Checkbox/Checkbox.mjs";
 import "../../ui/Clipboard/Clipboard.mjs";
+import "../../ui/Collapsible/Collapsible.mjs";
 import "../../ui/DatePicker/DatePicker.mjs";
 import "../../ui/Dialog/Dialog.mjs";
 import "../../ui/Drawer/Drawer.mjs";
 import "../../ui/Field/Field.mjs";
-import { IconButton as l } from "../../ui/IconButton/IconButton.mjs";
+import { IconButton as o } from "../../ui/IconButton/IconButton.mjs";
 import "../../ui/NumberInput/NumberInput.mjs";
+import "../../ui/PasswordInput/PasswordInput.mjs";
 import "../../ui/PinInput/PinInput.mjs";
 import "../../ui/Popover/Popover.mjs";
 import "tailwind-merge";
+import "../../ui/Progress/Progress.mjs";
 import "../../ui/SegmentGroup/SegmentGroup.mjs";
 import "../../ui/Select/Select.mjs";
 import "../../ui/Table/Table.mjs";
 import "../../ui/Tabs/Tabs.mjs";
-function ke(u) {
+function Me(u) {
   var p;
-  const d = G(null), s = g({
+  const d = O(null), s = g({
     defaultOpen: !0,
     onOpenChange(a) {
       a || setTimeout(() => {
@@ -59,14 +62,14 @@ function ke(u) {
         });
       }, 25);
     }
-  }), n = g(), r = b(), i = A(
-    x((a) => ({
+  }), r = g(), l = x(), i = A(
+    G((a) => ({
       gameLaunch: a.gameLaunch,
       depositWithdrawal: a.depositWithdrawal
     }))
   );
-  async function o() {
-    i.gameLaunch.details.status === "PLAYING" && await r.mutateAsync({
+  async function n() {
+    i.gameLaunch.details.status === "PLAYING" && await l.mutateAsync({
       game: i.gameLaunch.details.game,
       session: i.gameLaunch.details.session
     }), s.setOpen(!0), i.gameLaunch.setDetails({
@@ -83,7 +86,7 @@ function ke(u) {
         present: i.gameLaunch.details.status !== "WAITING" && !s.open,
         lazyMount: !0,
         unmountOnExit: i.gameLaunch.details.status === "WAITING",
-        className: "border-gray-200 w-full overflow-hidden rounded-lg border ui-open:animate-fade-in ui-closed:animate-fade-out",
+        className: "border-border-primary bg-bg-primary-alt w-full overflow-hidden rounded-lg border ui-open:animate-fade-in ui-closed:animate-fade-out",
         children: [
           /* @__PURE__ */ t("section", { className: "aspect-[960/540] w-full", children: [
             i.gameLaunch.details.status === "LOADING" && /* @__PURE__ */ e("div", { className: "flex size-full items-center justify-center", children: /* @__PURE__ */ e(L, { className: "size-8" }) }),
@@ -96,19 +99,19 @@ function ke(u) {
               }
             )
           ] }),
-          /* @__PURE__ */ t("section", { className: "border-gray-200 flex justify-end gap-lg border-t p-2", children: [
+          /* @__PURE__ */ t("section", { className: "border-border-primary flex justify-end gap-lg border-t p-2", children: [
             /* @__PURE__ */ e(
-              l,
+              o,
               {
                 size: "sm",
                 variant: "outline",
                 colorScheme: "gray",
                 onClick: () => {
                   if (i.gameLaunch.details.status !== "PLAYING") {
-                    o();
+                    n();
                     return;
                   }
-                  n.setOpen(!0);
+                  r.setOpen(!0);
                 },
                 disabled: i.gameLaunch.details.status === "LOADING",
                 "aria-label": "Quit Game",
@@ -117,7 +120,7 @@ function ke(u) {
               }
             ),
             /* @__PURE__ */ e(
-              l,
+              o,
               {
                 size: "sm",
                 variant: "outline",
@@ -135,24 +138,24 @@ function ke(u) {
     /* @__PURE__ */ e(
       c.Root,
       {
-        open: i.gameLaunch.details.status !== "WAITING" && s.open && !n.open,
+        open: i.gameLaunch.details.status !== "WAITING" && s.open && !r.open,
         lazyMount: !0,
         closeOnEscape: !1,
         closeOnInteractOutside: !1,
-        children: /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(c.Positioner, { className: "z-dialog fixed inset-0", children: /* @__PURE__ */ t(c.Content, { className: "ui-open:animate-dialog-in ui-closed:animate-dialog-out flex size-full flex-col bg-white", children: [
+        children: /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(c.Positioner, { className: "z-dialog fixed inset-0", children: /* @__PURE__ */ t(c.Content, { className: "ui-open:animate-dialog-in ui-closed:animate-dialog-out bg-bg-primary-alt flex size-full flex-col", children: [
           /* @__PURE__ */ t("section", { className: "grid grid-cols-[22rem_auto_22rem] items-center px-4 py-2", children: [
             /* @__PURE__ */ e("div", { className: "flex items-center justify-start gap-2", children: /* @__PURE__ */ e(
-              l,
+              o,
               {
                 size: "sm",
                 variant: "outline",
                 colorScheme: "gray",
                 onClick: () => {
                   if (i.gameLaunch.details.status !== "PLAYING") {
-                    o();
+                    n();
                     return;
                   }
-                  n.setOpen(!0);
+                  r.setOpen(!0);
                 },
                 disabled: i.gameLaunch.details.status === "LOADING",
                 title: "Quit",
@@ -161,7 +164,7 @@ function ke(u) {
               }
             ) }),
             /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: !!u.logo && /* @__PURE__ */ e(
-              O,
+              b,
               {
                 src: u.logo,
                 height: 40,
@@ -186,7 +189,7 @@ function ke(u) {
                 }
               ),
               /* @__PURE__ */ e(
-                l,
+                o,
                 {
                   size: "sm",
                   variant: "outline",
@@ -214,34 +217,34 @@ function ke(u) {
       }
     ),
     /* @__PURE__ */ e(
-      D,
+      S,
       {
         role: "alertdialog",
-        open: n.open,
+        open: r.open,
         onOpenChange: (a) => {
-          n.setOpen(a.open);
+          r.setOpen(a.open);
         },
         lazyMount: !0,
         closeOnEscape: !1,
         closeOnInteractOutside: !1,
         children: /* @__PURE__ */ t(f, { children: [
-          /* @__PURE__ */ e(S, {}),
+          /* @__PURE__ */ e(D, {}),
           /* @__PURE__ */ e(P, { children: /* @__PURE__ */ t(k, { children: [
-            /* @__PURE__ */ t(E, { children: [
-              /* @__PURE__ */ e("div", { className: "flex size-12 items-center justify-center rounded-full bg-[#FEE4E2] text-[#D92D20]", children: /* @__PURE__ */ e(v, {}) }),
-              /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(I, {}) })
+            /* @__PURE__ */ t(W, { children: [
+              /* @__PURE__ */ e("div", { className: "bg-error-700/25 text-error-200 flex size-12 items-center justify-center rounded-full", children: /* @__PURE__ */ e(v, {}) }),
+              /* @__PURE__ */ e(j, { children: /* @__PURE__ */ e(I, {}) })
             ] }),
-            /* @__PURE__ */ t(j, { children: [
-              /* @__PURE__ */ e(M, { children: "Quit Game" }),
+            /* @__PURE__ */ t(M, { children: [
+              /* @__PURE__ */ e(E, { children: "Quit Game" }),
               /* @__PURE__ */ e(T, { children: "Are you sure you want to quit?" })
             ] }),
-            /* @__PURE__ */ e(F, { children: (a) => /* @__PURE__ */ t(Q, { children: [
+            /* @__PURE__ */ e(Q, { children: (a) => /* @__PURE__ */ t(Y, { children: [
               /* @__PURE__ */ e(
                 m,
                 {
                   variant: "outline",
                   colorScheme: "gray",
-                  disabled: r.isPending,
+                  disabled: l.isPending,
                   onClick: () => {
                     a.setOpen(!1);
                   },
@@ -252,9 +255,9 @@ function ke(u) {
                 m,
                 {
                   colorScheme: "danger",
-                  disabled: r.isPending,
+                  disabled: l.isPending,
                   onClick: async () => {
-                    await o(), a.setOpen(!1);
+                    await n(), a.setOpen(!1);
                   },
                   children: "Proceed"
                 }
@@ -267,5 +270,5 @@ function ke(u) {
   ] });
 }
 export {
-  ke as GameLaunch
+  Me as GameLaunch
 };

package/dist/components/Games/Games.client.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),j=require("embla-carousel-react"),w=require("next/image"),v=require("next/link"),i=require("react"),S=require("tailwind-merge");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("lodash-es");require("@opexa/portal-sdk-core/object-id");const y=require("../../client/hooks/useGamesQuery.js");require("../../client/hooks/useGlobalStore.js");require("../../client/hooks/useInfiniteQueryHelper.js");require("usehooks-ts");const P=require("../../icons/ArrowLeftIcon.js"),k=require("../../icons/ArrowRightIcon.js"),I=require("../../icons/ChevronRightIcon.js"),C=require("../../icons/SpinnerIcon.js");require("../../ui/AlertDialog/AlertDialog.js");require("../../ui/Avatar/Avatar.js");require("../../ui/Badge/Badge.js");const o=require("../../ui/Button/Button.js");require("../../ui/Checkbox/Checkbox.js");require("../../ui/Clipboard/Clipboard.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("../../ui/IconButton/iconButton.recipe.js");require("../../ui/NumberInput/NumberInput.js");require("../../ui/PinInput/PinInput.js");require("../../ui/Popover/Popover.js");require("../../ui/SegmentGroup/SegmentGroup.js");require("../../ui/Select/Select.js");require("../../ui/Table/Table.js");require("../../ui/Tabs/Tabs.js");require("zustand/shallow");const b=require("../GameLaunch/GameLaunchTrigger.js");function B(n){var a;const l=n.numOfRows??1,t=y.useGamesQuery({first:(l+1)*6,filter:n.filter}),u=((a=t.data)==null?void 0:a.pages.map(s=>s.edges.map(N=>N.node)).flat())??[],[d,e]=j({align:"start",slidesToScroll:3,breakpoints:{"(min-width: 1024px)":{slidesToScroll:6}}}),[q,g]=i.useState(!0),[x,m]=i.useState(!0),h=i.useCallback(()=>e==null?void 0:e.scrollPrev(),[e]),f=i.useCallback(async()=>{!(e!=null&&e.canScrollNext())&&t.hasNextPage&&(await t.fetchNextPage(),e==null||e.reInit(),await new Promise(s=>setTimeout(s,1))),e==null||e.scrollNext()},[e,t]),c=i.useCallback(s=>{g(!(s!=null&&s.canScrollPrev())),m(!(s!=null&&s.canScrollNext()))},[]);return i.useEffect(()=>{e&&(c(e),e.on("reInit",c).on("select",c))},[e,c]),r.jsxs("div",{className:n.className,children:[r.jsxs("div",{className:"flex items-center",children:[r.jsx("h2",{className:"text-lg font-semibold",children:n.heading}),r.jsx("div",{className:"grow"}),r.jsxs("div",{className:"flex items-center justify-center gap-xl",children:[r.jsxs(v,{href:n.seeAllUrl,className:"flex gap-sm text-sm font-semibold",children:["See All",r.jsx(I.ChevronRightIcon,{className:"size-5 lg:hidden"})]}),r.jsxs("div",{className:"hidden lg:flex",children:[r.jsx(o.Button,{variant:"outline",colorScheme:"gray",className:"rounded-r-none border-r-0",onClick:h,disabled:q,"aria-label":"Previous",children:r.jsx(P.ArrowLeftIcon,{className:"size-5"})}),r.jsx(o.Button,{variant:"outline",colorScheme:"gray",className:"rounded-l-none",onClick:f,disabled:x&&!t.hasNextPage?!0:t.isFetchingNextPage,"aria-label":"Next",children:t.isFetchingNextPage?r.jsx(C.SpinnerIcon,{className:"size-5"}):r.jsx(k.ArrowRightIcon,{className:"size-5"})})]})]})]}),r.jsx("div",{ref:d,className:"relative mt-lg lg:overflow-hidden",children:r.jsx("div",{className:S.twMerge("grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md",l===3?"grid-rows-3":l===2?"grid-rows-2":"grid-rows-1"),children:u.map(s=>r.jsxs(b.GameLaunchTrigger,{game:s,className:"block w-full",children:[r.jsx(w,{src:s.image,alt:"",width:200,height:200,priority:!0,className:"aspect-square w-full rounded-t-md object-cover"}),r.jsx("span",{className:"bg-gray-50 block w-full truncate rounded-b-md px-2 py-2.5 text-center text-xs font-semibold",children:s.name})]},s.id))})})]})}exports.Games__client=B;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),w=require("embla-carousel-react"),j=require("next/image"),v=require("next/link"),i=require("react"),S=require("tailwind-merge");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("lodash-es");require("@opexa/portal-sdk-core/object-id");const y=require("../../client/hooks/useGamesQuery.js");require("../../client/hooks/useGlobalStore.js");require("../../client/hooks/useInfiniteQueryHelper.js");require("usehooks-ts");const b=require("../../icons/ArrowLeftIcon.js"),P=require("../../icons/ArrowRightIcon.js"),k=require("../../icons/ChevronRightIcon.js"),I=require("../../icons/SpinnerIcon.js");require("../../ui/AlertDialog/AlertDialog.js");require("../../ui/Avatar/Avatar.js");require("../../ui/Badge/Badge.js");const o=require("../../ui/Button/Button.js");require("../../ui/Checkbox/Checkbox.js");require("../../ui/Clipboard/Clipboard.js");require("../../ui/Collapsible/Collapsible.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("../../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("../../ui/Progress/Progress.js");require("../../ui/SegmentGroup/SegmentGroup.js");require("../../ui/Select/Select.js");require("../../ui/Table/Table.js");require("../../ui/Tabs/Tabs.js");require("zustand/shallow");const C=require("../GameLaunch/GameLaunchTrigger.js");function B(n){var l;const a=n.numOfRows??1,t=y.useGamesQuery({first:(a+1)*6,filter:n.filter}),u=((l=t.data)==null?void 0:l.pages.map(s=>s.edges.map(N=>N.node)).flat())??[],[d,e]=w({align:"start",slidesToScroll:3,breakpoints:{"(min-width: 1024px)":{slidesToScroll:6}}}),[q,g]=i.useState(!0),[x,m]=i.useState(!0),h=i.useCallback(()=>e==null?void 0:e.scrollPrev(),[e]),f=i.useCallback(async()=>{!(e!=null&&e.canScrollNext())&&t.hasNextPage&&(await t.fetchNextPage(),e==null||e.reInit(),await new Promise(s=>setTimeout(s,1))),e==null||e.scrollNext()},[e,t]),c=i.useCallback(s=>{g(!(s!=null&&s.canScrollPrev())),m(!(s!=null&&s.canScrollNext()))},[]);return i.useEffect(()=>{e&&(c(e),e.on("reInit",c).on("select",c))},[e,c]),r.jsxs("div",{className:n.className,children:[r.jsxs("div",{className:"flex items-center",children:[r.jsx("h2",{className:"text-lg font-semibold",children:n.heading??"Games"}),r.jsx("div",{className:"grow"}),r.jsxs("div",{className:"flex items-center justify-center gap-xl",children:[r.jsxs(v,{href:n.viewAllUrl??"/games",className:"text-button-tertiary-fg flex gap-sm text-sm font-semibold",children:["See All",r.jsx(k.ChevronRightIcon,{className:"size-5 lg:hidden"})]}),r.jsxs("div",{className:"hidden lg:flex",children:[r.jsx(o.Button,{variant:"outline",colorScheme:"gray",className:"rounded-r-none border-r-0",onClick:h,disabled:q,"aria-label":"Previous",children:r.jsx(b.ArrowLeftIcon,{className:"size-5"})}),r.jsx(o.Button,{variant:"outline",colorScheme:"gray",className:"rounded-l-none",onClick:f,disabled:x&&!t.hasNextPage?!0:t.isFetchingNextPage,"aria-label":"Next",children:t.isFetchingNextPage?r.jsx(I.SpinnerIcon,{className:"size-5"}):r.jsx(P.ArrowRightIcon,{className:"size-5"})})]})]})]}),r.jsx("div",{ref:d,className:"relative mt-lg lg:overflow-hidden",children:r.jsx("div",{className:S.twMerge("grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md",a===3?"grid-rows-3":a===2?"grid-rows-2":"grid-rows-1"),children:u.map(s=>r.jsxs(C.GameLaunchTrigger,{game:s,className:"block w-full shadow-sm",children:[r.jsx(j,{src:s.image,alt:"",width:200,height:200,priority:!0,className:"aspect-square w-full rounded-t-md object-cover"}),r.jsx("span",{className:"bg-bg-tertiary text-text-primary-brand block w-full truncate rounded-b-md px-2 py-2.5 text-center text-xs font-semibold",children:s.name})]},s.id))})})]})}exports.Games__client=B;

package/dist/components/Games/Games.client.mjs

@@ -1,10 +1,10 @@
 "use client";
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import P from "embla-carousel-react";
-import S from "next/image";
-import k from "next/link";
-import { useState as n, useCallback as m, useEffect as y } from "react";
-import { twMerge as B } from "tailwind-merge";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import y from "embla-carousel-react";
+import P from "next/image";
+import S from "next/link";
+import { useState as c, useCallback as a, useEffect as k } from "react";
+import { twMerge as b } from "tailwind-merge";
 import "@opexa/portal-sdk-core";
 import "@tanstack/react-query";
 import "tiny-invariant";
@@ -16,12 +16,12 @@ import "../../utils/getQueryClient.mjs";
 import "../../utils/isMobile.mjs";
 import "lodash-es";
 import "@opexa/portal-sdk-core/object-id";
-import { useGamesQuery as C } from "../../client/hooks/useGamesQuery.mjs";
+import { useGamesQuery as B } from "../../client/hooks/useGamesQuery.mjs";
 import "../../client/hooks/useGlobalStore.mjs";
 import "../../client/hooks/useInfiniteQueryHelper.mjs";
 import "usehooks-ts";
-import { ArrowLeftIcon as I } from "../../icons/ArrowLeftIcon.mjs";
-import { ArrowRightIcon as b } from "../../icons/ArrowRightIcon.mjs";
+import { ArrowLeftIcon as C } from "../../icons/ArrowLeftIcon.mjs";
+import { ArrowRightIcon as I } from "../../icons/ArrowRightIcon.mjs";
 import { ChevronRightIcon as R } from "../../icons/ChevronRightIcon.mjs";
 import { SpinnerIcon as j } from "../../icons/SpinnerIcon.mjs";
 import "../../ui/AlertDialog/AlertDialog.mjs";
@@ -30,6 +30,7 @@ import "../../ui/Badge/Badge.mjs";
 import { Button as d } from "../../ui/Button/Button.mjs";
 import "../../ui/Checkbox/Checkbox.mjs";
 import "../../ui/Clipboard/Clipboard.mjs";
+import "../../ui/Collapsible/Collapsible.mjs";
 import "../../ui/DatePicker/DatePicker.mjs";
 import "../../ui/Dialog/Dialog.mjs";
 import "../../ui/Drawer/Drawer.mjs";
@@ -37,20 +38,22 @@ import "../../ui/Field/Field.mjs";
 import "@ark-ui/react";
 import "../../ui/IconButton/iconButton.recipe.mjs";
 import "../../ui/NumberInput/NumberInput.mjs";
+import "../../ui/PasswordInput/PasswordInput.mjs";
 import "../../ui/PinInput/PinInput.mjs";
 import "../../ui/Popover/Popover.mjs";
+import "../../ui/Progress/Progress.mjs";
 import "../../ui/SegmentGroup/SegmentGroup.mjs";
 import "../../ui/Select/Select.mjs";
 import "../../ui/Table/Table.mjs";
 import "../../ui/Tabs/Tabs.mjs";
 import "zustand/shallow";
 import { GameLaunchTrigger as z } from "../GameLaunch/GameLaunchTrigger.mjs";
-function ye(s) {
-  var c;
-  const a = s.numOfRows ?? 1, o = C({
-    first: (a + 1) * 6,
+function Ce(s) {
+  var n;
+  const m = s.numOfRows ?? 1, o = B({
+    first: (m + 1) * 6,
     filter: s.filter
-  }), f = ((c = o.data) == null ? void 0 : c.pages.map((r) => r.edges.map((w) => w.node)).flat()) ?? [], [p, e] = P({
+  }), p = ((n = o.data) == null ? void 0 : n.pages.map((t) => t.edges.map((v) => v.node)).flat()) ?? [], [f, e] = y({
     align: "start",
     slidesToScroll: 3,
     breakpoints: {
@@ -58,77 +61,77 @@ function ye(s) {
         slidesToScroll: 6
       }
     }
-  }), [g, u] = n(!0), [h, N] = n(!0), x = m(
+  }), [g, u] = c(!0), [h, x] = c(!0), N = a(
     () => e == null ? void 0 : e.scrollPrev(),
     [e]
-  ), v = m(async () => {
-    !(e != null && e.canScrollNext()) && o.hasNextPage && (await o.fetchNextPage(), e == null || e.reInit(), await new Promise((r) => setTimeout(r, 1))), e == null || e.scrollNext();
-  }, [e, o]), l = m((r) => {
-    u(!(r != null && r.canScrollPrev())), N(!(r != null && r.canScrollNext()));
+  ), w = a(async () => {
+    !(e != null && e.canScrollNext()) && o.hasNextPage && (await o.fetchNextPage(), e == null || e.reInit(), await new Promise((t) => setTimeout(t, 1))), e == null || e.scrollNext();
+  }, [e, o]), l = a((t) => {
+    u(!(t != null && t.canScrollPrev())), x(!(t != null && t.canScrollNext()));
   }, []);
-  return y(() => {
+  return k(() => {
     e && (l(e), e.on("reInit", l).on("select", l));
   }, [e, l]), /* @__PURE__ */ i("div", { className: s.className, children: [
     /* @__PURE__ */ i("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ t("h2", { className: "text-lg font-semibold", children: s.heading }),
-      /* @__PURE__ */ t("div", { className: "grow" }),
+      /* @__PURE__ */ r("h2", { className: "text-lg font-semibold", children: s.heading ?? "Games" }),
+      /* @__PURE__ */ r("div", { className: "grow" }),
       /* @__PURE__ */ i("div", { className: "flex items-center justify-center gap-xl", children: [
         /* @__PURE__ */ i(
-          k,
+          S,
           {
-            href: s.seeAllUrl,
-            className: "flex gap-sm text-sm font-semibold",
+            href: s.viewAllUrl ?? "/games",
+            className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold",
             children: [
               "See All",
-              /* @__PURE__ */ t(R, { className: "size-5 lg:hidden" })
+              /* @__PURE__ */ r(R, { className: "size-5 lg:hidden" })
             ]
           }
         ),
         /* @__PURE__ */ i("div", { className: "hidden lg:flex", children: [
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ r(
             d,
             {
               variant: "outline",
               colorScheme: "gray",
               className: "rounded-r-none border-r-0",
-              onClick: x,
+              onClick: N,
               disabled: g,
               "aria-label": "Previous",
-              children: /* @__PURE__ */ t(I, { className: "size-5" })
+              children: /* @__PURE__ */ r(C, { className: "size-5" })
             }
           ),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ r(
             d,
             {
               variant: "outline",
               colorScheme: "gray",
               className: "rounded-l-none",
-              onClick: v,
+              onClick: w,
               disabled: h && !o.hasNextPage ? !0 : o.isFetchingNextPage,
               "aria-label": "Next",
-              children: o.isFetchingNextPage ? /* @__PURE__ */ t(j, { className: "size-5" }) : /* @__PURE__ */ t(b, { className: "size-5" })
+              children: o.isFetchingNextPage ? /* @__PURE__ */ r(j, { className: "size-5" }) : /* @__PURE__ */ r(I, { className: "size-5" })
             }
           )
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ t("div", { ref: p, className: "relative mt-lg lg:overflow-hidden", children: /* @__PURE__ */ t(
+    /* @__PURE__ */ r("div", { ref: f, className: "relative mt-lg lg:overflow-hidden", children: /* @__PURE__ */ r(
       "div",
       {
-        className: B(
+        className: b(
           "grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md",
-          a === 3 ? "grid-rows-3" : a === 2 ? "grid-rows-2" : "grid-rows-1"
+          m === 3 ? "grid-rows-3" : m === 2 ? "grid-rows-2" : "grid-rows-1"
         ),
-        children: f.map((r) => /* @__PURE__ */ i(
+        children: p.map((t) => /* @__PURE__ */ i(
           z,
           {
-            game: r,
-            className: "block w-full",
+            game: t,
+            className: "block w-full shadow-sm",
             children: [
-              /* @__PURE__ */ t(
-                S,
+              /* @__PURE__ */ r(
+                P,
                 {
-                  src: r.image,
+                  src: t.image,
                   alt: "",
                   width: 200,
                   height: 200,
@@ -136,15 +139,15 @@ function ye(s) {
                   className: "aspect-square w-full rounded-t-md object-cover"
                 }
               ),
-              /* @__PURE__ */ t("span", { className: "bg-gray-50 block w-full truncate rounded-b-md px-2 py-2.5 text-center text-xs font-semibold", children: r.name })
+              /* @__PURE__ */ r("span", { className: "bg-bg-tertiary text-text-primary-brand block w-full truncate rounded-b-md px-2 py-2.5 text-center text-xs font-semibold", children: t.name })
             ]
           },
-          r.id
+          t.id
         ))
       }
     ) })
   ] });
 }
 export {
-  ye as Games__client
+  Ce as Games__client
 };

package/dist/components/Games/Games.d.ts

@@ -1,7 +1,12 @@
 import { GamesInput } from '@opexa/portal-sdk-core';
 export interface GamesProps {
-    heading: string;
-    seeAllUrl: string;
+    /** @default "Games" */
+    heading?: string;
+    /**
+     * @description URL for viewing all games
+     * @default "/games"
+     */
+    viewAllUrl?: string;
     /** @default 1 */
     numOfRows?: 1 | 2 | 3;
     className?: string;