@opexa/portal-components 0.0.308 → 0.0.309

package/dist/client/hooks/useCamera.js

@@ -95,7 +95,7 @@ export function useCamera(options = {}) {
             videoRef.current?.pause();
             resolve();
         });
-    }, [setData, setError]);
+    }, []);
     const snap = useCallback(async () => {
         setData(null);
         setError(null);
@@ -176,7 +176,7 @@ export function useCamera(options = {}) {
         setLoading(false);
         setSnapping(false);
         return Promise.resolve();
-    }, [setData, setError]);
+    }, []);
     const reopen = useCallback(async () => {
         setSnapping(false);
         setLoading(true);

package/dist/client/hooks/useControllableState.js

@@ -7,7 +7,7 @@ function useCallbackRef(callback, deps = []) {
         callbackRef.current = callback;
     });
     return React.useCallback((...args) => callbackRef.current?.(...args), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // biome-ignore lint/correctness/useExhaustiveDependencies: ""
     deps);
 }
 export function useControllableState(props) {

package/dist/client/hooks/useInfiniteQueryHelper.js

@@ -11,9 +11,8 @@ export function useInfiniteQueryHelper(useQuery, variables) {
         ...variables,
         first: pageSize,
     });
-    const availableRows = query.data?.pages
-        .map((page) => page.edges.map((edge) => edge.node))
-        .flat() ?? [];
+    const availableRows = query.data?.pages.flatMap((page) => page.edges.map((edge) => edge.node)) ??
+        [];
     const availablePages = chunk(availableRows, pageSize);
     const totalAvailableRows = availableRows.length;
     const totalAAvailablePages = Math.ceil(availableRows.length / pageSize);

package/dist/client/hooks/useMarkGameAsFavoriteMutation.js

@@ -24,8 +24,7 @@ export const useMarkGameAsFavoriteMutation = (config) => {
             })
                 .map(([, arr]) => arr)
                 .filter(Boolean)
-                .map((obj) => obj.pages.map((q) => q.edges.map((edge) => edge.node)).flat())
-                .flat();
+                .flatMap((obj) => obj.pages.flatMap((q) => q.edges.map((edge) => edge.node)));
             const game = games.find((game) => game.reference === id);
             queryClient.setQueryData(getFavoriteGamesQueryKey(), (prev = []) => {
                 if (game) {

package/dist/client/hooks/useMobileNumberParser.js

@@ -21,7 +21,7 @@ export function useMobileNumberParser() {
             return localeInfo.mobileNumber.areaCode + value.substring(1);
         }
         if (value.startsWith(localeInfo.mobileNumber.areaCode.substring(1))) {
-            return '+' + value;
+            return `+${value}`;
         }
         return localeInfo.mobileNumber.areaCode + value;
     }, [localeInfo.mobileNumber.areaCode]);

package/dist/client/utils/recaptcha.d.ts

@@ -0,0 +1,14 @@
+export interface ReCAPTCHAExecuteOptions {
+    action: 'submit' | (string & {});
+}
+export interface ReCAPTCHA {
+    ready(callback: () => void): void;
+    execute(siteKey: string, options: ReCAPTCHAExecuteOptions): Promise<string>;
+}
+export declare function ReCAPTCHAReady(): Promise<void>;
+export declare function ReCAPTCHAExecute(options: ReCAPTCHAExecuteOptions): Promise<string>;
+declare global {
+    interface Window {
+        grecaptcha: ReCAPTCHA;
+    }
+}

package/dist/client/utils/recaptcha.js

@@ -0,0 +1,18 @@
+import { RECAPTCHA_SITE_KEY } from '../../constants/index.js';
+let loaded = false;
+export function ReCAPTCHAReady() {
+    return new Promise((resolve) => {
+        if (!loaded) {
+            window.grecaptcha.ready(() => {
+                loaded = true;
+                resolve();
+            });
+        }
+        else {
+            resolve();
+        }
+    });
+}
+export async function ReCAPTCHAExecute(options) {
+    return await window.grecaptcha.execute(RECAPTCHA_SITE_KEY, options);
+}

package/dist/components/Account/Account.lazy.js

@@ -66,12 +66,12 @@ export function Account(props) {
                     strategy: 'fixed',
                 }, ids: {
                     trigger: 'opexa-portal-components:account-trigger',
-                }, children: _jsx(Portal, { children: _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "border-border-primary bg-bg-primary relative z-popover w-[23.438rem] overflow-hidden rounded-xl border p-xl ui-open:animate-fade-in ui-closed:animate-fade-out", children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { router: router })] }) }) }) })] }));
+                }, children: _jsx(Portal, { children: _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "relative z-popover w-[23.438rem] ui-closed:animate-fade-out ui-open:animate-fade-in overflow-hidden rounded-xl border border-border-primary bg-bg-primary p-xl", children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { router: router })] }) }) }) })] }));
 }
 function Profile() {
     const accountQuery = useAccountQuery();
     const account = accountQuery.data;
-    return (_jsxs("div", { className: "flex shrink-0 items-center gap-lg", children: [_jsx(Image, { src: avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-12" }), _jsxs("div", { className: "grow", children: [_jsx("p", { className: "text-text-secondary-700 font-semibold leading-tight", children: account?.name }), _jsxs("div", { className: "flex", children: [_jsxs("p", { className: "text-text-tertiary-600 grow items-center leading-tight", children: ["ID: ", account?.id] }), _jsxs(Badge.Root, { colorScheme: account?.verified ? 'success' : 'danger', className: "self-start", children: [_jsx(Badge.Indicator, {}), _jsx(Badge.Label, { children: account?.verified ? 'Verified' : 'Unverified' })] })] })] })] }));
+    return (_jsxs("div", { className: "flex shrink-0 items-center gap-lg", children: [_jsx(Image, { src: avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-12" }), _jsxs("div", { className: "grow", children: [_jsx("p", { className: "font-semibold text-text-secondary-700 leading-tight", children: account?.name }), _jsxs("div", { className: "flex", children: [_jsxs("p", { className: "grow items-center text-text-tertiary-600 leading-tight", children: ["ID: ", account?.id] }), _jsxs(Badge.Root, { colorScheme: account?.verified ? 'success' : 'danger', className: "self-start", children: [_jsx(Badge.Indicator, {}), _jsx(Badge.Label, { children: account?.verified ? 'Verified' : 'Unverified' })] })] })] })] }));
 }
 function Wallet() {
     const localeInfo = useLocaleInfo();
@@ -86,13 +86,13 @@ function Wallet() {
     const depositBalance = parseDecimal(walletQuery.data?.balance, 0);
     const bonusBalance = parseDecimal(walletQuery.data?.bonus, 0);
     const totalBalance = depositBalance + bonusBalance;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "border-border-primary bg-bg-tertiary mt-3 rounded-xl border p-xl", children: [_jsx("div", { className: "text-text-secondary-700 text-sm", children: "Total Balance" }), _jsx("div", { className: "text-3xl font-bold", children: formatNumber(totalBalance, {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mt-3 rounded-xl border border-border-primary bg-bg-tertiary p-xl", children: [_jsx("div", { className: "text-sm text-text-secondary-700", children: "Total Balance" }), _jsx("div", { className: "font-bold text-3xl", children: formatNumber(totalBalance, {
                             currency: localeInfo?.currency.code,
                             minDecimalPlaces: 2,
-                        }) }), _jsxs("div", { className: "mt-1.5 flex gap-7xl", children: [_jsxs("div", { children: [_jsx("p", { className: "text-text-secondary-700 text-2xs", children: "Deposit Balance" }), _jsx("p", { className: "text-medium text-text-primary-brand", children: formatNumber(depositBalance, {
+                        }) }), _jsxs("div", { className: "mt-1.5 flex gap-7xl", children: [_jsxs("div", { children: [_jsx("p", { className: "text-2xs text-text-secondary-700", children: "Deposit Balance" }), _jsx("p", { className: "text-medium text-text-primary-brand", children: formatNumber(depositBalance, {
                                             currency: localeInfo?.currency.code,
                                             minDecimalPlaces: 2,
-                                        }) })] }), _jsxs("div", { children: [_jsx("p", { className: "text-text-secondary-700 text-2xs", children: "Bonus Balance" }), _jsx("p", { className: "text-medium text-text-primary-brand", children: formatNumber(bonusBalance, {
+                                        }) })] }), _jsxs("div", { children: [_jsx("p", { className: "text-2xs text-text-secondary-700", children: "Bonus Balance" }), _jsx("p", { className: "text-medium text-text-primary-brand", children: formatNumber(bonusBalance, {
                                             currency: localeInfo?.currency.code,
                                             minDecimalPlaces: 2,
                                         }) })] })] })] }), ' ', _jsxs("div", { className: "mt-3 flex gap-lg", children: [_jsx(Button, { size: "xs", variant: "outline", onClick: () => {

package/dist/components/Account/account.recipe.js

@@ -2,11 +2,11 @@ import { tv } from 'tailwind-variants';
 export const accountRecipe = tv({
     slots: {
         nav: 'space-y-xl',
-        navItemRoot: 'bg-bg-primary-alt block first:rounded-t-xl last:rounded-b-xl',
-        navItemLink: 'flex w-full items-center px-xl py-xl text-left text-sm font-semibold',
-        navItemIcon: 'text-text-nav-item-button-icon size-5',
+        navItemRoot: 'block bg-bg-primary-alt first:rounded-t-xl last:rounded-b-xl',
+        navItemLink: 'flex w-full items-center px-xl py-xl text-left font-semibold text-sm',
+        navItemIcon: 'size-5 text-text-nav-item-button-icon',
         navItemLabel: 'ml-lg grow',
-        navItemIndicator: 'text-gray-400 text-text-quarterary-500 size-5',
+        navItemIndicator: 'size-5 text-gray-400 text-text-quarterary-500',
         navItemBadge: [
             'mr-md',
             'flex',

package/dist/components/AccountInfo/AccountInfo.js

@@ -24,7 +24,7 @@ export function AccountInfo(props) {
 function ProfileInfo() {
     const accountQuery = useAccountQuery();
     const account = accountQuery.data;
-    return (_jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Profile Info" }), _jsxs("div", { className: "bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", children: [_jsx("div", { className: "border-border-secondary border-b px-4 py-5", children: _jsxs("div", { className: "flex items-center gap-xl", children: [_jsx(Image, { src: avatar, alt: "", width: 80, height: 80, className: "size-14 shrink-0 rounded-md object-cover" }), _jsxs("div", { children: [_jsx("h3", { className: "text-text-secondary-700 text-lg font-semibold leading-tight", children: account?.name }), _jsx("p", { className: "text-text-tertiary-600 leading-tight", children: account?.id })] })] }) }), _jsx("div", { className: "flex justify-end px-xl py-lg", children: _jsx(Button, { size: "sm", variant: "outline", fullWidth: false, children: "Upload New Avatar" }) })] })] }));
+    return (_jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Profile Info" }), _jsxs("div", { className: "mt-5 rounded-xl border border-border-secondary bg-bg-primary-alt", children: [_jsx("div", { className: "border-border-secondary border-b px-4 py-5", children: _jsxs("div", { className: "flex items-center gap-xl", children: [_jsx(Image, { src: avatar, alt: "", width: 80, height: 80, className: "size-14 shrink-0 rounded-md object-cover" }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-lg text-text-secondary-700 leading-tight", children: account?.name }), _jsx("p", { className: "text-text-tertiary-600 leading-tight", children: account?.id })] })] }) }), _jsx("div", { className: "flex justify-end px-xl py-lg", children: _jsx(Button, { size: "sm", variant: "outline", fullWidth: false, children: "Upload New Avatar" }) })] })] }));
 }
 function PersonalInfo() {
     const accountQuery = useAccountQuery();
@@ -78,7 +78,7 @@ function PersonalInfo() {
             });
         }
     }, [account, form]);
-    return (_jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Personal Data" }), _jsxs("form", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", onSubmit: form.handleSubmit((data) => {
+    return (_jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Personal Data" }), _jsxs("form", { className: "mt-5 rounded-xl border border-border-secondary bg-bg-primary-alt shadow-xs", onSubmit: form.handleSubmit((data) => {
                     updateAccountMutation.mutate({
                         realName: data.realName && account?.realName !== data.realName
                             ? data.realName
@@ -87,7 +87,7 @@ function PersonalInfo() {
                             ? data.birthDay
                             : undefined,
                     });
-                }), children: [_jsxs("div", { className: "px-4 py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, readOnly: !!account?.realName, children: [_jsx(Field.Label, { children: "Full name" }), _jsx(Field.Input, { ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.birthDay, readOnly: !!account?.birthDay, children: [_jsx(Field.Label, { children: "Date of birth" }), _jsx(Field.Input, { type: "date", ...form.register('birthDay') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: !form.formState.isValid || updateAccountMutation.isPending, children: "Save Changes" })] }))] })] }));
+                }), children: [_jsxs("div", { className: "px-4 py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, readOnly: !!account?.realName, children: [_jsx(Field.Label, { children: "Full name" }), _jsx(Field.Input, { ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.birthDay, readOnly: !!account?.birthDay, children: [_jsx(Field.Label, { children: "Date of birth" }), _jsx(Field.Input, { type: "date", ...form.register('birthDay') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "flex justify-end gap-lg border-border-secondary border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: !form.formState.isValid || updateAccountMutation.isPending, children: "Save Changes" })] }))] })] }));
 }
 function ContactInfo() {
     const localeInfo = useLocaleInfo();
@@ -132,7 +132,7 @@ function ContactInfo() {
             });
         }
     }, [account, form, parse]);
-    return (_jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Contact Info" }), _jsxs("form", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", onSubmit: form.handleSubmit((data) => {
+    return (_jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Contact Info" }), _jsxs("form", { className: "mt-5 rounded-xl border border-border-secondary bg-bg-primary-alt shadow-xs", onSubmit: form.handleSubmit((data) => {
                     updateAccountMutation.mutate({
                         emailAddress: data.emailAddress && account?.emailAddress !== data.emailAddress
                             ? data.emailAddress
@@ -142,8 +142,8 @@ function ContactInfo() {
                             ? format(data.mobileNumber)
                             : undefined,
                     });
-                }), children: [_jsxs("div", { className: "px-xl py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx(localeInfo.country.flag, { className: "pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2" }), _jsx(Field.Input, { className: "pl-10.5", readOnly: account?.mobileNumber != null, ...form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: form.formState.errors.mobileNumber?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.emailAddress, children: [_jsx(Field.Label, { children: "Email address" }), _jsx(Field.Input, { ...form.register('emailAddress') }), _jsx(Field.ErrorText, { children: form.formState.errors.emailAddress?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: updateAccountMutation.isPending || !form.formState.isValid, children: "Save Changes" })] }))] })] }));
+                }), children: [_jsxs("div", { className: "px-xl py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx(localeInfo.country.flag, { className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3.5 size-5" }), _jsx(Field.Input, { className: "pl-10.5", readOnly: account?.mobileNumber != null, ...form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: form.formState.errors.mobileNumber?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.emailAddress, children: [_jsx(Field.Label, { children: "Email address" }), _jsx(Field.Input, { ...form.register('emailAddress') }), _jsx(Field.ErrorText, { children: form.formState.errors.emailAddress?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "flex justify-end gap-lg border-border-secondary border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: updateAccountMutation.isPending || !form.formState.isValid, children: "Save Changes" })] }))] })] }));
 }
 function SSO() {
-    return (_jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Account Connections" }), _jsxs("div", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5", children: [_jsxs("div", { className: "flex items-center", children: [_jsxs("div", { className: "flex grow items-center gap-sm", children: [_jsx(IconButton, { variant: "outline", colorScheme: "gray", children: _jsx(GoogleIcon, { className: "size-6" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium leading-tight", children: "Google" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-xs leading-tight", children: "Not Connected" })] })] }), _jsx(Button, { fullWidth: false, children: "Connect" })] }), _jsxs("div", { className: "mt-6 flex items-center", children: [_jsxs("div", { className: "flex grow items-center gap-sm", children: [_jsx(IconButton, { variant: "outline", colorScheme: "gray", children: _jsx(FacebookIcon, { className: "size-6" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium leading-tight", children: "Facebook" }), _jsx("p", { className: "text-text-success-primary-600 mt-xs text-xs leading-tight", children: "Connected" })] })] }), _jsx("button", { className: "text-button-tertiary-error-fg text-sm font-semibold", children: "Disconnect" })] })] })] }));
+    return (_jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Account Connections" }), _jsxs("div", { className: "mt-5 rounded-xl border border-border-secondary bg-bg-primary-alt px-4 py-5 shadow-xs", children: [_jsxs("div", { className: "flex items-center", children: [_jsxs("div", { className: "flex grow items-center gap-sm", children: [_jsx(IconButton, { variant: "outline", colorScheme: "gray", children: _jsx(GoogleIcon, { className: "size-6" }) }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-sm leading-tight", children: "Google" }), _jsx("p", { className: "mt-xs text-text-secondary-700 text-xs leading-tight", children: "Not Connected" })] })] }), _jsx(Button, { fullWidth: false, children: "Connect" })] }), _jsxs("div", { className: "mt-6 flex items-center", children: [_jsxs("div", { className: "flex grow items-center gap-sm", children: [_jsx(IconButton, { variant: "outline", colorScheme: "gray", children: _jsx(FacebookIcon, { className: "size-6" }) }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-sm leading-tight", children: "Facebook" }), _jsx("p", { className: "mt-xs text-text-success-primary-600 text-xs leading-tight", children: "Connected" })] })] }), _jsx("button", { type: "button", className: "font-semibold text-button-tertiary-error-fg text-sm", children: "Disconnect" })] })] })] }));
 }

package/dist/components/AccountSecurity/AccountSecurity.js

@@ -85,9 +85,9 @@ function LoginPassword() {
         },
     });
     const secretQuestion = form.watch('secretQuestion');
-    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-start gap-8", children: [_jsxs("div", { className: "grow", children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Log in password" }), _jsx("p", { className: "text-text-tertiary-600 text-sm", children: "Access your account by logging in with your name and password." })] }), _jsx(ark.svg, { asChild: true, className: twMerge('size-6', profileCompletion?.accountPassword
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-start gap-8", children: [_jsxs("div", { className: "grow", children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Log in password" }), _jsx("p", { className: "text-sm text-text-tertiary-600", children: "Access your account by logging in with your name and password." })] }), _jsx(ark.svg, { asChild: true, className: twMerge('size-6', profileCompletion?.accountPassword
                             ? 'text-text-success-primary'
-                            : 'text-text-warning-primary'), children: profileCompletion?.accountPassword ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("form", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", onSubmit: form.handleSubmit((data) => {
+                            : 'text-text-warning-primary'), children: profileCompletion?.accountPassword ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("form", { className: "mt-5 rounded-xl border border-border-secondary bg-bg-primary-alt shadow-xs", onSubmit: form.handleSubmit((data) => {
                     updateAccountMutation.mutate({
                         password: data.password ? data.password : undefined,
                         secretAnswer: data.secretAnswer ? data.secretAnswer : undefined,
@@ -104,7 +104,7 @@ function LoginPassword() {
                                                 shouldTouch: true,
                                                 shouldValidate: true,
                                             });
-                                        }, children: [_jsx(Select.Label, { children: "Security Question" }), _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: secretQuestionCollection.items.map((provider) => (_jsxs(Select.Item, { item: provider, children: [_jsx(Select.ItemText, { children: secretQuestionCollection.stringifyItem(provider) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, provider))) }) }) }) })] }), _jsx(Field.ErrorText, { children: form.formState.errors.secretQuestion?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.secretAnswer, children: [_jsx(Field.Label, { children: "Answer" }), _jsx(Field.Input, { ...form.register('secretAnswer') }), _jsx(Field.ErrorText, { children: form.formState.errors.secretAnswer?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: updateAccountMutation.isPending || !form.formState.isValid, children: "Save Changes" })] }))] })] }));
+                                        }, children: [_jsx(Select.Label, { children: "Security Question" }), _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: secretQuestionCollection.items.map((provider) => (_jsxs(Select.Item, { item: provider, children: [_jsx(Select.ItemText, { children: secretQuestionCollection.stringifyItem(provider) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, provider))) }) }) }) })] }), _jsx(Field.ErrorText, { children: form.formState.errors.secretQuestion?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.secretAnswer, children: [_jsx(Field.Label, { children: "Answer" }), _jsx(Field.Input, { ...form.register('secretAnswer') }), _jsx(Field.ErrorText, { children: form.formState.errors.secretAnswer?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "flex justify-end gap-lg border-border-secondary border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: updateAccountMutation.isPending || !form.formState.isValid, children: "Save Changes" })] }))] })] }));
 }
 function TransactionPassword() {
     const profileCompletionQuery = useProfileCompletionQuery();
@@ -144,13 +144,13 @@ function TransactionPassword() {
             confirmPassword: '',
         },
     });
-    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-start gap-8", children: [_jsxs("div", { className: "grow", children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Transaction password" }), _jsx("p", { className: "text-text-tertiary-600 text-sm", children: "The transaction password secures and confirms your wallet withdrawals." })] }), _jsx(ark.svg, { asChild: true, className: twMerge('size-6', profileCompletion?.accountPassword
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-start gap-8", children: [_jsxs("div", { className: "grow", children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Transaction password" }), _jsx("p", { className: "text-sm text-text-tertiary-600", children: "The transaction password secures and confirms your wallet withdrawals." })] }), _jsx(ark.svg, { asChild: true, className: twMerge('size-6', profileCompletion?.accountPassword
                             ? 'text-text-success-primary'
-                            : 'text-text-warning-primary'), children: profileCompletion?.accountPassword ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("form", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", onSubmit: form.handleSubmit((data) => {
+                            : 'text-text-warning-primary'), children: profileCompletion?.accountPassword ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("form", { className: "mt-5 rounded-xl border border-border-secondary bg-bg-primary-alt shadow-xs", onSubmit: form.handleSubmit((data) => {
                     updateAccountMutation.mutate({
                         transactionPassword: data.password ? data.password : undefined,
                     });
-                }), children: [_jsxs("div", { className: "px-xl py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.confirmPassword, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Confirm Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.confirmPassword?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: !form.formState.isValid || updateAccountMutation.isPending, children: "Save Changes" })] }))] })] }));
+                }), children: [_jsxs("div", { className: "px-xl py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.confirmPassword, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Confirm Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.confirmPassword?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "flex justify-end gap-lg border-border-secondary border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: !form.formState.isValid || updateAccountMutation.isPending, children: "Save Changes" })] }))] })] }));
 }
 const secretQuestionCollection = createListCollection({
     items: SECRET_QUESTIONS,

package/dist/components/AccountVerification/AccountVerification.js

@@ -31,21 +31,21 @@ export function AccountVerification(props) {
     const success = verification?.status === 'VERIFIED' || verification?.status === 'APPROVED';
     const failed = verification?.status === 'REJECTED';
     if (verificationQuery.isLoading) {
-        return _jsx(Spinner02Icon, { className: "text-text-brand-primary-600 size-5" });
+        return _jsx(Spinner02Icon, { className: "size-5 text-text-brand-primary-600" });
     }
-    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-start gap-8", children: [_jsxs("div", { className: "grow", children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Verify your identity" }), _jsx("p", { className: "text-text-tertiary-600 text-sm", children: "Complete personal verification to unlock all features and enhance account security." })] }), _jsx(ark.svg, { asChild: true, className: twMerge('size-6', profileCompletion?.accountVerification
+    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-start gap-8", children: [_jsxs("div", { className: "grow", children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Verify your identity" }), _jsx("p", { className: "text-sm text-text-tertiary-600", children: "Complete personal verification to unlock all features and enhance account security." })] }), _jsx(ark.svg, { asChild: true, className: twMerge('size-6', profileCompletion?.accountVerification
                             ? 'text-text-success-primary'
-                            : 'text-text-warning-primary'), children: profileCompletion?.accountVerification ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("div", { className: "shadow-xs border-border-secondary bg-bg-primary-alt mt-5 rounded-xl border", children: [_jsx("div", { className: "px-4 py-5", children: _jsxs("ul", { className: "space-y-lg", children: [_jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(FileCheck02Icon, {}), "Basic Information"] }), _jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(CreditCard02Icon, {}), "Government ID"] }), _jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(FaceIdIcon, {}), "Facial Verification"] })] }) }), !isKycCompleted && (_jsx("div", { className: "border-border-secondary flex justify-end border-t px-4 py-3 lg:py-xl", children: _jsx(Button, { size: "sm", className: "w-full lg:w-fit", onClick: () => globalStore.kyc.setOpen(true), children: "Verify Now" }) }))] }), success && _jsx(VerificationSuccess, {}), pending && _jsx(VerificationInProgress, {}), failed && _jsx(VerificationFailed, {}), empty && _jsx(VerificationNotSubmitted, {})] }));
+                            : 'text-text-warning-primary'), children: profileCompletion?.accountVerification ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("div", { className: "mt-5 rounded-xl border border-border-secondary bg-bg-primary-alt shadow-xs", children: [_jsx("div", { className: "px-4 py-5", children: _jsxs("ul", { className: "space-y-lg", children: [_jsxs("li", { className: "flex icon:size-6 items-center gap-lg icon:text-text-nav-item-button-icon text-text-secondary-700", children: [_jsx(FileCheck02Icon, {}), "Basic Information"] }), _jsxs("li", { className: "flex icon:size-6 items-center gap-lg icon:text-text-nav-item-button-icon text-text-secondary-700", children: [_jsx(CreditCard02Icon, {}), "Government ID"] }), _jsxs("li", { className: "flex icon:size-6 items-center gap-lg icon:text-text-nav-item-button-icon text-text-secondary-700", children: [_jsx(FaceIdIcon, {}), "Facial Verification"] })] }) }), !isKycCompleted && (_jsx("div", { className: "flex justify-end border-border-secondary border-t px-4 py-3 lg:py-xl", children: _jsx(Button, { size: "sm", className: "w-full lg:w-fit", onClick: () => globalStore.kyc.setOpen(true), children: "Verify Now" }) }))] }), success && _jsx(VerificationSuccess, {}), pending && _jsx(VerificationInProgress, {}), failed && _jsx(VerificationFailed, {}), empty && _jsx(VerificationNotSubmitted, {})] }));
 }
 function VerificationNotSubmitted() {
-    return (_jsxs("div", { className: "shadow-xs border-border-primary bg-bg-primary-alt mt-6 flex flex-col gap-2 rounded-xl border p-xl lg:flex-row", children: [_jsx("div", { className: "border-text-warning-primary/10 flex size-[2.1875rem] items-center justify-center rounded-full border-2", children: _jsx("div", { className: "border-text-warning-primary/30 flex size-[1.666625rem] items-center justify-center rounded-full border-2", children: _jsx(AlertCircleIcon, { className: "text-text-warning-primary size-5" }) }) }), _jsx("p", { className: "text-text-tertiary-600 max-w-[800px] text-sm", children: "To serve you better and unlock all features, please provide valid identification documents. This helps protect your account and makes recovery easier if ever needed." })] }));
+    return (_jsxs("div", { className: "mt-6 flex flex-col gap-2 rounded-xl border border-border-primary bg-bg-primary-alt p-xl shadow-xs lg:flex-row", children: [_jsx("div", { className: "flex size-[2.1875rem] items-center justify-center rounded-full border-2 border-text-warning-primary/10", children: _jsx("div", { className: "flex size-[1.666625rem] items-center justify-center rounded-full border-2 border-text-warning-primary/30", children: _jsx(AlertCircleIcon, { className: "size-5 text-text-warning-primary" }) }) }), _jsx("p", { className: "max-w-[800px] text-sm text-text-tertiary-600", children: "To serve you better and unlock all features, please provide valid identification documents. This helps protect your account and makes recovery easier if ever needed." })] }));
 }
 function VerificationInProgress() {
-    return (_jsxs("div", { className: "shadow-xs border-border-primary bg-bg-primary-alt mt-6 flex flex-col gap-2 rounded-xl border p-xl lg:flex-row", children: [_jsx("div", { className: "border-text-warning-primary/10 flex size-[2.1875rem] items-center justify-center rounded-full border-2", children: _jsx("div", { className: "border-text-warning-primary/30 flex size-[1.666625rem] items-center justify-center rounded-full border-2", children: _jsx(FileSearch02Icon, { className: "text-text-warning-primary size-5" }) }) }), _jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Under review" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm", children: "To serve you better and unlock all features, please provide valid identification documents. This helps protect your account and makes recovery easier if ever needed." })] })] }));
+    return (_jsxs("div", { className: "mt-6 flex flex-col gap-2 rounded-xl border border-border-primary bg-bg-primary-alt p-xl shadow-xs lg:flex-row", children: [_jsx("div", { className: "flex size-[2.1875rem] items-center justify-center rounded-full border-2 border-text-warning-primary/10", children: _jsx("div", { className: "flex size-[1.666625rem] items-center justify-center rounded-full border-2 border-text-warning-primary/30", children: _jsx(FileSearch02Icon, { className: "size-5 text-text-warning-primary" }) }) }), _jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Under review" }), _jsx("p", { className: "mt-xs text-sm text-text-tertiary-600", children: "To serve you better and unlock all features, please provide valid identification documents. This helps protect your account and makes recovery easier if ever needed." })] })] }));
 }
 function VerificationSuccess() {
-    return (_jsxs("div", { className: "shadow-xs border-border-primary bg-bg-primary-alt mt-6 flex flex-col gap-2 rounded-xl border p-xl lg:flex-row", children: [_jsx("div", { className: "border-text-success-primary/10 flex size-[2.1875rem] items-center justify-center rounded-full border-2", children: _jsx("div", { className: "border-text-success-primary/30 flex size-[1.666625rem] items-center justify-center rounded-full border-2", children: _jsx(FileCheck02Icon, { className: "text-text-success-primary size-5" }) }) }), _jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Verification successful" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm", children: "Your account has been successfully verified. You now have full access to all features and improved account security." })] })] }));
+    return (_jsxs("div", { className: "mt-6 flex flex-col gap-2 rounded-xl border border-border-primary bg-bg-primary-alt p-xl shadow-xs lg:flex-row", children: [_jsx("div", { className: "flex size-[2.1875rem] items-center justify-center rounded-full border-2 border-text-success-primary/10", children: _jsx("div", { className: "flex size-[1.666625rem] items-center justify-center rounded-full border-2 border-text-success-primary/30", children: _jsx(FileCheck02Icon, { className: "size-5 text-text-success-primary" }) }) }), _jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Verification successful" }), _jsx("p", { className: "mt-xs text-sm text-text-tertiary-600", children: "Your account has been successfully verified. You now have full access to all features and improved account security." })] })] }));
 }
 function VerificationFailed() {
-    return (_jsxs("div", { className: "shadow-xs border-border-primary bg-bg-primary-alt mt-6 flex flex-col gap-2 rounded-xl border p-xl lg:flex-row", children: [_jsx("div", { className: "border-text-error-primary/10 flex size-[2.1875rem] items-center justify-center rounded-full border-2", children: _jsx("div", { className: "border-text-error-primary/30 flex size-[1.666625rem] items-center justify-center rounded-full border-2", children: _jsx(FileX02Icon, { className: "text-text-error-primary size-5" }) }) }), _jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Verification failed" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm", children: "There was an issue with the verification process. Please try again or contact support for assistance." })] })] }));
+    return (_jsxs("div", { className: "mt-6 flex flex-col gap-2 rounded-xl border border-border-primary bg-bg-primary-alt p-xl shadow-xs lg:flex-row", children: [_jsx("div", { className: "flex size-[2.1875rem] items-center justify-center rounded-full border-2 border-text-error-primary/10", children: _jsx("div", { className: "flex size-[1.666625rem] items-center justify-center rounded-full border-2 border-text-error-primary/30", children: _jsx(FileX02Icon, { className: "size-5 text-text-error-primary" }) }) }), _jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Verification failed" }), _jsx("p", { className: "mt-xs text-sm text-text-tertiary-600", children: "There was an issue with the verification process. Please try again or contact support for assistance." })] })] }));
 }

package/dist/components/Banner/Banner.js

@@ -43,7 +43,7 @@ export function Banner(props) {
     return (_jsxs("div", { className: twMerge('relative', props.className), children: [_jsx("div", { ref: emblaRef, className: "overflow-hidden", children: _jsx("div", { className: "flex gap-2", children: props.banners.map((banner, index) => {
                         const img = (_jsx(Image, { src: banner.src, alt: "", width: isMobile() ? imageWidth[0] : imageWidth[1], height: isMobile() ? imageHeight[0] : imageHeight[1], className: "block h-auto w-full", priority: index === 0 }));
                         return (_jsx(Fragment, { children: !banner.redirectUrl ? (_jsx("div", { className: "w-full shrink-0", children: img })) : (_jsx(Link, { href: banner.redirectUrl, className: "block w-full shrink-0", "aria-label": `Open ${banner.redirectUrl}`, children: img })) }, index));
-                    }) }) }), _jsx("div", { className: "absolute bottom-lg left-1/2 flex w-fit -translate-x-1/2 gap-2", children: props.banners.map((_, index) => (_jsx("button", { type: "button", className: "ui-active:bg-brand-500 bg-gray-300 size-3 shrink-0 rounded-full border border-white transition-all duration-300 ui-active:w-9", onClick: () => {
+                    }) }) }), _jsx("div", { className: "-translate-x-1/2 absolute bottom-lg left-1/2 flex w-fit gap-2", children: props.banners.map((_, index) => (_jsx("button", { type: "button", className: "size-3 ui-active:w-9 shrink-0 rounded-full border border-white bg-gray-300 ui-active:bg-brand-500 transition-all duration-300", onClick: () => {
                         emblaApi?.scrollTo(index);
                     }, "aria-label": `Go to slide ${index + 1}`, "data-active": dataAttr(index === currentIndex) }, index))) })] }));
 }

package/dist/components/BetRecords/BetRecords.client.js

@@ -93,13 +93,13 @@ export function BetRecords__client(props) {
                 setTab('all');
         },
     });
-    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-sm font-semibold leading-tight lg:text-lg", children: "Bet Records" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm leading-tight", children: "Review your betting history" }), _jsx("div", { className: "mt-lg lg:mt-2xl", children: _jsxs(SegmentGroup.Root, { value: state.type ?? 'all', onValueChange: (details) => {
+    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "font-semibold text-sm leading-tight lg:text-lg", children: "Bet Records" }), _jsx("p", { className: "mt-xs text-sm text-text-tertiary-600 leading-tight", children: "Review your betting history" }), _jsx("div", { className: "mt-lg lg:mt-2xl", children: _jsxs(SegmentGroup.Root, { value: state.type ?? 'all', onValueChange: (details) => {
                         firstPage();
                         setState({
                             type: z.enum(GAME_TYPES).safeParse(details.value).data ?? null,
                             provider: null,
                         });
-                    }, className: "w-full overflow-x-auto lg:w-fit", children: [_jsxs(SegmentGroup.Item, { value: "all", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), gameTypes.map((type) => (_jsxs(SegmentGroup.Item, { value: type.id, children: [_jsx(SegmentGroup.ItemText, { children: type.name }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }, type.id))), _jsx(SegmentGroup.Indicator, {})] }) }), _jsx("div", { className: "border-border-secondary mt-2xl hidden border-t lg:block" }), _jsx("h3", { className: "text-text-secondary-700 mt-3xl text-sm font-semibold", children: "Table" }), _jsxs("div", { className: "mt-xl flex flex-col gap-lg lg:flex-row lg:items-center", children: [_jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
+                    }, className: "w-full overflow-x-auto lg:w-fit", children: [_jsxs(SegmentGroup.Item, { value: "all", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), gameTypes.map((type) => (_jsxs(SegmentGroup.Item, { value: type.id, children: [_jsx(SegmentGroup.ItemText, { children: type.name }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }, type.id))), _jsx(SegmentGroup.Indicator, {})] }) }), _jsx("div", { className: "mt-2xl hidden border-border-secondary border-t lg:block" }), _jsx("h3", { className: "mt-3xl font-semibold text-sm text-text-secondary-700", children: "Table" }), _jsxs("div", { className: "mt-xl flex flex-col gap-lg lg:flex-row lg:items-center", children: [_jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
                             const value = TabDefinition.parse(details.value);
                             if (value === 'today') {
                                 const now = new Date();
@@ -154,7 +154,7 @@ export function BetRecords__client(props) {
                                                             delimiter: capitalize.delimiters.UNDERSCORE,
                                                         }) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, status))) }) }) }) })] })] }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
                     ? 'Fetching latest bet records...'
-                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Bet Time" }), _jsx(Table.Heading, { children: "Settlement Time" }), _jsx(Table.Heading, { children: "Bet Content" }), _jsx(Table.Heading, { children: "Odds" }), _jsx(Table.Heading, { children: "Bet Amount" }), _jsx(Table.Heading, { children: "Valid Bet" }), _jsx(Table.Heading, { children: "Settled Amount" }), _jsx(Table.Heading, { children: "Jackpot Contribution" }), _jsx(Table.Heading, { children: "Jackpot Payout" }), _jsx(Table.Heading, { children: "Bet Status" }), _jsx(Table.Heading, { children: "Game Name" }), _jsx(Table.Heading, { children: "Vendor Round ID" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsxs(Table.Cell, { className: "!py-1", children: [_jsx("div", { className: "leading-tight", children: format(data.dateTimeCreated, 'MM/dd/yyyy', {
+                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "scrollbar:h-2 overflow-hidden overflow-x-auto rounded-none scrollbar-thumb:rounded-full border-border-secondary border-b scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Bet Time" }), _jsx(Table.Heading, { children: "Settlement Time" }), _jsx(Table.Heading, { children: "Bet Content" }), _jsx(Table.Heading, { children: "Odds" }), _jsx(Table.Heading, { children: "Bet Amount" }), _jsx(Table.Heading, { children: "Valid Bet" }), _jsx(Table.Heading, { children: "Settled Amount" }), _jsx(Table.Heading, { children: "Jackpot Contribution" }), _jsx(Table.Heading, { children: "Jackpot Payout" }), _jsx(Table.Heading, { children: "Bet Status" }), _jsx(Table.Heading, { children: "Game Name" }), _jsx(Table.Heading, { children: "Vendor Round ID" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsxs(Table.Cell, { className: "!py-1", children: [_jsx("div", { className: "leading-tight", children: format(data.dateTimeCreated, 'MM/dd/yyyy', {
                                                             in: tz(localeInfo.timezone),
                                                         }) }), _jsx("div", { className: "text-text-tertiary-600 leading-tight", children: format(data.dateTimeCreated, 'hh:mm a', {
                                                             in: tz(localeInfo.timezone),
@@ -183,7 +183,7 @@ export function BetRecords__client(props) {
                                                             ? 'blue'
                                                             : 'danger', children: _jsx(Badge.Label, { children: capitalize(data.status, {
                                                             delimiter: capitalize.delimiters.UNDERSCORE,
-                                                        }) }) }) }), _jsx(Table.Cell, { className: "!py-1", children: data.game.name }), _jsx(Table.Cell, { className: "!py-1", children: data.vendorRoundId })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center justify-between gap-lg px-4 py-3", children: [_jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasPrevPage || loading, onClick: () => prev(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsxs("p", { className: "text-text-secondary-700 text-sm font-medium", children: ["Page ", page, " of ", totalPages] }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] }))] }));
+                                                        }) }) }) }), _jsx(Table.Cell, { className: "!py-1", children: data.game.name }), _jsx(Table.Cell, { className: "!py-1", children: data.vendorRoundId })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center justify-between gap-lg px-4 py-3", children: [_jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasPrevPage || loading, onClick: () => prev(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsxs("p", { className: "font-medium text-sm text-text-secondary-700", children: ["Page ", page, " of ", totalPages] }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] }))] }));
 }
 const statusCollection = createListCollection({
     items: ['SETTLED', 'NOT_SETTLED'],
@@ -231,5 +231,5 @@ function RangeDatePickerCalendar({ monthOffset }) {
     const offset = datePicker.getOffset({
         months: monthOffset,
     });
-    return (_jsxs(DatePicker.View, { view: "day", className: "border-border-secondary px-6 py-5 lg:first:border-r", children: [_jsxs(DatePicker.ViewControl, { children: [_jsx(DatePicker.PrevTrigger, { children: _jsx(ChevronLeftIcon, {}) }), _jsx("span", { className: "text-text-secondary-700 text-base font-semibold", children: offset.visibleRangeText.start }), _jsx(DatePicker.NextTrigger, { children: _jsx(ChevronRightIcon, {}) })] }), _jsxs(DatePicker.Table, { children: [_jsx(DatePicker.TableHead, { children: _jsx(DatePicker.TableRow, { children: datePicker.weekDays.map((weekDay, id) => (_jsx(DatePicker.TableHeader, { children: weekDay.short.slice(0, 2) }, id))) }) }), _jsx(DatePicker.TableBody, { children: offset.weeks.map((week, id) => (_jsx(DatePicker.TableRow, { children: week.map((day, id) => (_jsx(DatePicker.TableCell, { value: day, visibleRange: offset.visibleRange, children: _jsx(DatePicker.TableCellTrigger, { children: day.day }) }, id))) }, id))) })] })] }));
+    return (_jsxs(DatePicker.View, { view: "day", className: "border-border-secondary px-6 py-5 lg:first:border-r", children: [_jsxs(DatePicker.ViewControl, { children: [_jsx(DatePicker.PrevTrigger, { children: _jsx(ChevronLeftIcon, {}) }), _jsx("span", { className: "font-semibold text-base text-text-secondary-700", children: offset.visibleRangeText.start }), _jsx(DatePicker.NextTrigger, { children: _jsx(ChevronRightIcon, {}) })] }), _jsxs(DatePicker.Table, { children: [_jsx(DatePicker.TableHead, { children: _jsx(DatePicker.TableRow, { children: datePicker.weekDays.map((weekDay, id) => (_jsx(DatePicker.TableHeader, { children: weekDay.short.slice(0, 2) }, id))) }) }), _jsx(DatePicker.TableBody, { children: offset.weeks.map((week, id) => (_jsx(DatePicker.TableRow, { children: week.map((day, id) => (_jsx(DatePicker.TableCell, { value: day, visibleRange: offset.visibleRange, children: _jsx(DatePicker.TableCellTrigger, { children: day.day }) }, id))) }, id))) })] })] }));
 }

package/dist/components/Bonus/Bonus.client.js

@@ -26,9 +26,9 @@ export function Bonus__client(props) {
         return null;
     const turnoverRequirement = parseDecimal(bonus.turnoverRequirement, 0);
     const currentTurnoverRequirementContribution = parseDecimal(bonus.currentTurnoverRequirementContribution, 0);
-    return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllUrl ?? '/rewards', className: "text-button-tertiary-fg flex items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Rewards"] }), _jsx("div", { className: "mt-3xl", children: bonus.promo.banner?.url ? (_jsx(Image, { src: bonus.promo.banner.url, alt: "", width: 1024, height: 600, unoptimized: true, priority: true, className: "h-auto w-full rounded-xl" })) : (_jsx(DefaultImage, {})) }), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: remainingTime.expired ? 'danger' : 'brand-dark', className: "mt-xl lg:mt-6", children: [_jsx(Badge.Icon, { children: _jsx(StopWatchIcon, {}) }), _jsx(Badge.Label, { children: remainingTime.expired ? 'Expired' : remainingTime.toString() })] }), _jsx("h1", { className: "text-text-primary-900 mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: bonus.promo.name }), _jsx("p", { className: "text-text-primary-brand mt-xl text-base lg:mt-6 lg:text-lg", children: "Complete the wagering before time runs out to convert your bonus balance into real money!" }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl flex items-center justify-between rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsx("p", { children: "Your bonus balance" }), _jsx("p", { children: _jsx("span", { className: "text-text-primary-900", children: formatNumber(bonus.balance, {
+    return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllUrl ?? '/rewards', className: "flex items-center gap-lg font-semibold text-button-tertiary-fg text-lg", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Rewards"] }), _jsx("div", { className: "mt-3xl", children: bonus.promo.banner?.url ? (_jsx(Image, { src: bonus.promo.banner.url, alt: "", width: 1024, height: 600, unoptimized: true, priority: true, className: "h-auto w-full rounded-xl" })) : (_jsx(DefaultImage, {})) }), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: remainingTime.expired ? 'danger' : 'brand-dark', className: "mt-xl lg:mt-6", children: [_jsx(Badge.Icon, { children: _jsx(StopWatchIcon, {}) }), _jsx(Badge.Label, { children: remainingTime.expired ? 'Expired' : remainingTime.toString() })] }), _jsx("h1", { className: "mt-xl font-semibold text-2xl text-text-primary-900 lg:mt-6 lg:text-3xl", children: bonus.promo.name }), _jsx("p", { className: "mt-xl text-base text-text-primary-brand lg:mt-6 lg:text-lg", children: "Complete the wagering before time runs out to convert your bonus balance into real money!" }), _jsxs("div", { className: "mt-xl flex items-center justify-between rounded-md border border-border-primary bg-bg-tertiary px-3.5 py-xl text-text-secondary-700 lg:mt-6", children: [_jsx("p", { children: "Your bonus balance" }), _jsx("p", { children: _jsx("span", { className: "text-text-primary-900", children: formatNumber(bonus.balance, {
                                 currency: localeInfo.currency.code,
-                            }) }) })] }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { children: ["Wagering ", bonus.currentTurnoverRequirementContributionPercentage, "%"] }), _jsxs("p", { children: [currentTurnoverRequirementContribution, "/", turnoverRequirement] })] }), _jsx(Progress.Root, { className: "mt-2", min: 0, max: turnoverRequirement, value: clamp(currentTurnoverRequirementContribution, 0, turnoverRequirement), children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) })] }), _jsxs(Collapsible.Root, { className: "mt-xl lg:mt-6", children: [_jsxs(Collapsible.Trigger, { className: "text-button-tertiary-fg flex items-center gap-sm text-sm font-semibold", children: ["Game Provider Contribution", _jsx(Collapsible.Indicator, { asChild: true, children: _jsx(ChevronRightIcon, { className: "size-5" }) })] }), _jsx(Collapsible.Content, { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl space-y-1.5 rounded-md border px-3.5 py-xl lg:mt-6", children: Object.entries(bonus.promo
+                            }) }) })] }), _jsxs("div", { className: "mt-xl rounded-md border border-border-primary bg-bg-tertiary px-3.5 py-xl text-text-secondary-700 lg:mt-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { children: ["Wagering ", bonus.currentTurnoverRequirementContributionPercentage, "%"] }), _jsxs("p", { children: [currentTurnoverRequirementContribution, "/", turnoverRequirement] })] }), _jsx(Progress.Root, { className: "mt-2", min: 0, max: turnoverRequirement, value: clamp(currentTurnoverRequirementContribution, 0, turnoverRequirement), children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) })] }), _jsxs(Collapsible.Root, { className: "mt-xl lg:mt-6", children: [_jsxs(Collapsible.Trigger, { className: "flex items-center gap-sm font-semibold text-button-tertiary-fg text-sm", children: ["Game Provider Contribution", _jsx(Collapsible.Indicator, { asChild: true, children: _jsx(ChevronRightIcon, { className: "size-5" }) })] }), _jsx(Collapsible.Content, { className: "mt-xl space-y-1.5 rounded-md border border-border-primary bg-bg-tertiary px-3.5 py-xl text-text-secondary-700 lg:mt-6", children: Object.entries(bonus.promo
                             .turnoverRequirementContributionPercentagePerGameProvider ?? {}).map(([provider, valueAsString]) => {
                             const value = parseDecimal(valueAsString, 0);
                             return (_jsxs("div", { className: "flex items-center justify-between gap-md", children: [_jsx("p", { className: "w-[11.25rem] shrink-0", children: capitalize(provider, {

package/dist/components/Bonuses/Bonuses.client.js

@@ -62,7 +62,7 @@ export function Bonuses__client(props) {
     });
     const bonuses = bonusesQuery.data ?? [];
     const cashbackBonuses = cashbackBonusesQuery.data ?? [];
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Rewards' }), _jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "font-semibold text-lg", children: props.heading ?? 'Rewards' }), _jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
                             setTab(TabSchema.parse(details.value));
                         }, className: "mt-3", children: [_jsxs(SegmentGroup.Item, { value: "all", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "active", children: [_jsx(SegmentGroup.ItemText, { children: "Active" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "cashbacks", children: [_jsx(SegmentGroup.ItemText, { children: "Cashbacks" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsx(SegmentGroup.Indicator, {})] }), _jsxs("div", { className: "mt-3xl grid gap-3xl lg:mt-lg lg:grid-cols-3", children: [tab === 'all' && _jsx(SpotBonus, {}), tab !== 'cashbacks' &&
                                 bonuses.map((bonus) => (_jsx(Bonus, { data: bonus, viewDetailsUrl: props.viewBonusDetailsUrl ?? '/rewards' }, bonus.id))), cashbackBonuses.map((cashbackBonus) => (_jsx(CashbackBonus, { data: cashbackBonus }, cashbackBonus.id)))] })] }), _jsx(ClaimSpotBonus, {})] }));
@@ -74,11 +74,11 @@ function Bonus(props) {
     const remainingTime = useRemainingTime(bonus.expiration);
     const currentTurnoverRequirementContributionPercentage = parseDecimal(bonus.currentTurnoverRequirementContributionPercentage, 0);
     const turnoverRequirement = parseDecimal(bonus.turnoverRequirement, 0);
-    return (_jsxs("div", { className: "border-border-primary bg-bg-tertiary flex flex-col overflow-hidden rounded-2xl border", children: [_jsxs("div", { className: "relative", children: [promo.banner?.url ? (_jsx(Image, { src: promo.banner.url, alt: "", width: 400, height: 200, className: "h-[11.25rem] w-full object-cover" })) : (_jsx("div", { style: {
+    return (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-2xl border border-border-primary bg-bg-tertiary", children: [_jsxs("div", { className: "relative", children: [promo.banner?.url ? (_jsx(Image, { src: promo.banner.url, alt: "", width: 400, height: 200, className: "h-[11.25rem] w-full object-cover" })) : (_jsx("div", { style: {
                             background: 'radial-gradient(75.21% 75.21% at 50% 50%, rgba(249, 163, 8, 0.3) 0%, rgba(0, 0, 0, 0) 100%), var(--color-bg-primary-alt)',
-                        }, children: _jsx(Image, { src: piggyBank, alt: "", className: "mx-auto h-[11.25rem] w-auto shrink-0 object-cover", draggable: false, width: 600, height: 600 }) })), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: remainingTime.expired ? 'danger' : 'gray', className: "absolute right-4 top-4", children: [_jsx(Badge.Icon, { children: _jsx(StopWatchIcon, {}) }), _jsx(Badge.Label, { children: remainingTime.expired ? 'Expired' : remainingTime.toString() })] })] }), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("h2", { className: "line-clamp-1 text-center text-xl font-semibold text-white", children: promo.name }), _jsx("div", { className: "mt-2 flex items-baseline justify-center gap-2", children: _jsx("p", { className: "text-3xl font-semibold leading-none", children: formatNumber(bonus.balance, {
+                        }, children: _jsx(Image, { src: piggyBank, alt: "", className: "mx-auto h-[11.25rem] w-auto shrink-0 object-cover", draggable: false, width: 600, height: 600 }) })), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: remainingTime.expired ? 'danger' : 'gray', className: "absolute top-4 right-4", children: [_jsx(Badge.Icon, { children: _jsx(StopWatchIcon, {}) }), _jsx(Badge.Label, { children: remainingTime.expired ? 'Expired' : remainingTime.toString() })] })] }), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("h2", { className: "line-clamp-1 text-center font-semibold text-white text-xl", children: promo.name }), _jsx("div", { className: "mt-2 flex items-baseline justify-center gap-2", children: _jsx("p", { className: "font-semibold text-3xl leading-none", children: formatNumber(bonus.balance, {
                                 currency: localeInfo.currency.code,
-                            }) }) }), _jsxs("div", { className: "text-text-primary-brand mt-md flex justify-between", children: [_jsxs("p", { children: ["Wagering ", currentTurnoverRequirementContributionPercentage, "%"] }), _jsxs("p", { children: [bonus.currentTurnoverRequirementContribution, "/", turnoverRequirement] })] }), _jsx(Progress.Root, { min: 0, max: 100, value: clamp(currentTurnoverRequirementContributionPercentage, 0, 100), className: "mt-2", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("div", { className: "grow" }), _jsx(Button, { size: "sm", variant: "outline", className: "mt-6", asChild: true, children: _jsx(Link, { href: `${props.viewDetailsUrl}/${bonus.id}`, children: "See More" }) })] })] }));
+                            }) }) }), _jsxs("div", { className: "mt-md flex justify-between text-text-primary-brand", children: [_jsxs("p", { children: ["Wagering ", currentTurnoverRequirementContributionPercentage, "%"] }), _jsxs("p", { children: [bonus.currentTurnoverRequirementContribution, "/", turnoverRequirement] })] }), _jsx(Progress.Root, { min: 0, max: 100, value: clamp(currentTurnoverRequirementContributionPercentage, 0, 100), className: "mt-2", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("div", { className: "grow" }), _jsx(Button, { size: "sm", variant: "outline", className: "mt-6", asChild: true, children: _jsx(Link, { href: `${props.viewDetailsUrl}/${bonus.id}`, children: "See More" }) })] })] }));
 }
 function CashbackBonus(props) {
     const bonus = props.data;
@@ -111,15 +111,15 @@ function CashbackBonus(props) {
     const disabled = hasNoCashback ||
         hasReachedOrExceededMonthlyLimit ||
         belowMinimumCashbackThreshold;
-    return (_jsxs("div", { className: "border-border-primary bg-bg-tertiary flex flex-col overflow-hidden rounded-2xl border", children: [cashback.banner?.url ? (_jsx(Image, { src: cashback.banner.url, alt: "", width: 400, height: 200, className: "h-[11.25rem] w-full object-cover" })) : (_jsx("div", { style: {
+    return (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-2xl border border-border-primary bg-bg-tertiary", children: [cashback.banner?.url ? (_jsx(Image, { src: cashback.banner.url, alt: "", width: 400, height: 200, className: "h-[11.25rem] w-full object-cover" })) : (_jsx("div", { style: {
                     background: 'radial-gradient(75.21% 75.21% at 50% 50%, rgba(249, 163, 8, 0.3) 0%, rgba(0, 0, 0, 0) 100%), var(--color-bg-primary-alt)',
-                }, children: _jsx(Image, { src: moneyOnHand, alt: "", className: "mx-auto h-[11.25rem] w-auto shrink-0 object-cover", draggable: false, width: 600, height: 600 }) })), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("p", { className: "line-clamp-1 text-center text-xl font-semibold text-white", children: cashback.name }), _jsx("h2", { className: "mt-2 text-center text-3xl font-semibold text-white", children: formatNumber(currentAccumulatedCashbackAmount, {
+                }, children: _jsx(Image, { src: moneyOnHand, alt: "", className: "mx-auto h-[11.25rem] w-auto shrink-0 object-cover", draggable: false, width: 600, height: 600 }) })), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("p", { className: "line-clamp-1 text-center font-semibold text-white text-xl", children: cashback.name }), _jsx("h2", { className: "mt-2 text-center font-semibold text-3xl text-white", children: formatNumber(currentAccumulatedCashbackAmount, {
                             currency: localeInfo.currency.code,
-                        }) }), _jsx("div", { className: "text-text-secondary-700 mt-2 line-clamp-1 text-center text-sm", dangerouslySetInnerHTML: {
+                        }) }), _jsx("div", { className: "mt-2 line-clamp-1 text-center text-sm text-text-secondary-700", dangerouslySetInnerHTML: {
                             __html: cashback.description,
                         } }), _jsx("div", { className: "grow" }), disabled ? (_jsxs(Popover.Root, { lazyMount: true, unmountOnExit: true, positioning: {
                             placement: 'top',
-                        }, children: [_jsx(Button, { size: "sm", className: "mt-6", "aria-disabled": true, asChild: true, children: _jsx(Popover.Trigger, { children: "Claim" }) }), _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "bg-bg-quaternary rounded-md px-2.5 py-2 text-sm font-medium", children: [_jsx(Popover.Arrow, { className: "arrow-bg-bg-quaternary arrow-size-3", children: _jsx(Popover.ArrowTip, {}) }), hasReachedOrExceededMonthlyLimit ? (_jsx(_Fragment, { children: "You've claimed the maximum cashback for this month." })) : (_jsxs(_Fragment, { children: ["You need", ' ', formatNumber(minimumCashback - currentAccumulatedCashbackAmount, {
+                        }, children: [_jsx(Button, { size: "sm", className: "mt-6", "aria-disabled": true, asChild: true, children: _jsx(Popover.Trigger, { children: "Claim" }) }), _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "rounded-md bg-bg-quaternary px-2.5 py-2 font-medium text-sm", children: [_jsx(Popover.Arrow, { className: "arrow-bg-bg-quaternary arrow-size-3", children: _jsx(Popover.ArrowTip, {}) }), hasReachedOrExceededMonthlyLimit ? (_jsx(_Fragment, { children: "You've claimed the maximum cashback for this month." })) : (_jsxs(_Fragment, { children: ["You need", ' ', formatNumber(minimumCashback - currentAccumulatedCashbackAmount, {
                                                     currency: localeInfo.currency.code,
                                                 }), ' ', "to claim this cashback."] }))] }) })] })) : (_jsx(Button, { size: "sm", className: "mt-6", disabled: claimCashbackBonusMutation.isPending || disabled, onClick: () => {
                             claimCashbackBonusMutation.mutate(bonus.id);
@@ -129,9 +129,9 @@ function SpotBonus() {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         spotBonus: ctx.spotBonus,
     })));
-    return (_jsxs("div", { className: "border-border-primary bg-bg-tertiary flex flex-col overflow-hidden rounded-2xl border", children: [_jsx("div", { style: {
+    return (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-2xl border border-border-primary bg-bg-tertiary", children: [_jsx("div", { style: {
                     background: 'radial-gradient(75.21% 75.21% at 50% 50%, rgba(249, 163, 8, 0.3) 0%, rgba(0, 0, 0, 0) 100%), var(--color-bg-primary-alt)',
-                }, children: _jsx(Image, { src: ribbonEnvelope, alt: "", className: "mx-auto h-[11.25rem] w-[80%] object-cover", draggable: false, width: 600, height: 341 }) }), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("p", { className: "text-center text-xl font-semibold text-white", children: "Special Rewards" }), _jsx("p", { className: "mt-2 text-center text-3xl font-semibold text-white", children: "Promo Code" }), _jsx("p", { className: "text-text-secondary-700 mt-2 text-center text-sm", children: "Have a promo code? Don\u2019t miss out, redeem it now\u00A0and\u00A0enjoy exclusive rewards!" }), _jsx("div", { className: "grow" }), _jsx(Button, { size: "sm", onClick: () => {
+                }, children: _jsx(Image, { src: ribbonEnvelope, alt: "", className: "mx-auto h-[11.25rem] w-[80%] object-cover", draggable: false, width: 600, height: 341 }) }), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("p", { className: "text-center font-semibold text-white text-xl", children: "Special Rewards" }), _jsx("p", { className: "mt-2 text-center font-semibold text-3xl text-white", children: "Promo Code" }), _jsx("p", { className: "mt-2 text-center text-sm text-text-secondary-700", children: "Have a promo code? Don\u2019t miss out, redeem it now\u00A0and\u00A0enjoy exclusive rewards!" }), _jsx("div", { className: "grow" }), _jsx(Button, { size: "sm", onClick: () => {
                             globalStore.spotBonus.setOpen(true);
                         }, className: "mt-6", children: "Enter Promo Code" })] })] }));
 }

package/dist/components/Bonuses/BonusesTrigger.js

@@ -20,5 +20,5 @@ export function BonusesTrigger({ children, className, ...props }) {
             size: 'sm',
             colorScheme: 'gray',
             className: twMerge('relative', className),
-        }), children: children ?? (_jsxs(_Fragment, { children: [totalCount > 0 && (_jsx("div", { className: "bg-brand-500 leading-4.5 text-button-primary-fg absolute -right-1.5 -top-1.5 min-w-5 rounded-full border px-1.5 text-2xs font-semibold", children: totalCount })), _jsx(Gift01Icon, {})] })) }));
+        }), children: children ?? (_jsxs(_Fragment, { children: [totalCount > 0 && (_jsx("div", { className: "-right-1.5 -top-1.5 absolute min-w-5 rounded-full border bg-brand-500 px-1.5 font-semibold text-2xs text-button-primary-fg leading-4.5", children: totalCount })), _jsx(Gift01Icon, {})] })) }));
 }

package/dist/components/Bonuses/ClaimSpotBonus.lazy.js

@@ -47,7 +47,7 @@ export function ClaimSpotBonus() {
                                     background: 'radial-gradient(75.21% 75.21% at 50% 50%, rgba(249, 163, 8, 0.3) 0%, rgba(0, 0, 0, 0) 100%), var(--color-bg-primary-alt)',
                                 }, children: _jsx(Image, { src: ribbonEnvelope, alt: "", className: "mx-auto h-[12.5rem] w-[80%] object-cover", draggable: false, width: 600, height: 341 }) }), _jsxs("form", { className: "mt-3xl", onSubmit: form.handleSubmit((data) => {
                                     claimSpotBonusMutation.mutate(data.code);
-                                }), children: [_jsx("h2", { className: "text-center text-lg font-semibold", children: "Enter Promo Code" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-center text-sm", children: "Claim your reward by entering a promo or gift code!" }), _jsxs(Field.Root, { invalid: !!form.formState.errors.code, className: "mt-2xl", children: [_jsx(Field.Input, { size: "sm", placeholder: "Enter promo code", ...form.register('code') }), _jsx(Field.ErrorText, { children: form.formState.errors.code?.message })] }), _jsxs("div", { className: "mt-4xl flex gap-lg", children: [_jsx(Button, { variant: "outline", onClick: () => {
+                                }), children: [_jsx("h2", { className: "text-center font-semibold text-lg", children: "Enter Promo Code" }), _jsx("p", { className: "mt-xs text-center text-sm text-text-tertiary-600", children: "Claim your reward by entering a promo or gift code!" }), _jsxs(Field.Root, { invalid: !!form.formState.errors.code, className: "mt-2xl", children: [_jsx(Field.Input, { size: "sm", placeholder: "Enter promo code", ...form.register('code') }), _jsx(Field.ErrorText, { children: form.formState.errors.code?.message })] }), _jsxs("div", { className: "mt-4xl flex gap-lg", children: [_jsx(Button, { variant: "outline", onClick: () => {
                                                     globalStore.spotBonus.setOpen(false);
                                                     form.reset();
                                                 }, disabled: claimSpotBonusMutation.isPending, children: "Cancel" }), _jsx(Button, { type: "submit", disabled: claimSpotBonusMutation.isPending, children: "Claim" })] })] })] }) })] }) }));

package/dist/components/Cashback/Cashback.client.js

@@ -24,10 +24,10 @@ export function Cashback__client(props) {
     })));
     if (!cashback)
         return null;
-    return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllPromosUrl ?? '/promos', className: "text-button-tertiary-fg flex w-fit items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Promotions"] }), cashback.banner?.url && (_jsx(Image, { src: cashback.banner.url, alt: "", width: 1024, height: 600, priority: true, unoptimized: true, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" })), claimable && (_jsx(Button, { className: "mt-xl lg:mt-6", onClick: () => {
+    return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllPromosUrl ?? '/promos', className: "flex w-fit items-center gap-lg font-semibold text-button-tertiary-fg text-lg", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Promotions"] }), cashback.banner?.url && (_jsx(Image, { src: cashback.banner.url, alt: "", width: 1024, height: 600, priority: true, unoptimized: true, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" })), claimable && (_jsx(Button, { className: "mt-xl lg:mt-6", onClick: () => {
                     globalStore.depositWithdrawal.setOpen(true);
                     globalStore.depositWithdrawal.setPromo(cashback.id);
-                }, children: "Deposit Now" })), _jsx("h1", { className: "mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: cashback.name }), _jsxs("p", { className: "text-text-secondary-700 mt-xl lg:mt-6", children: ["Ends", ' ', format(cashback.activationEndDateTime, 'MM/dd/yyy hh:mm:ss a', {
+                }, children: "Deposit Now" })), _jsx("h1", { className: "mt-xl font-semibold text-2xl lg:mt-6 lg:text-3xl", children: cashback.name }), _jsxs("p", { className: "mt-xl text-text-secondary-700 lg:mt-6", children: ["Ends", ' ', format(cashback.activationEndDateTime, 'MM/dd/yyy hh:mm:ss a', {
                         in: tz(localeInfo.timezone),
                     })] }), _jsx(Prose, { className: "mt-2xl lg:mt-6", dangerouslySetInnerHTML: {
                     __html: cashback.description,

package/dist/components/CustomPromo/CustomPromo.js

@@ -6,7 +6,7 @@ import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
 import { Prose } from '../../ui/Prose/index.js';
 import { stripTags } from '../../utils/stripTags.js';
 export async function CustomPromo(props) {
-    return (_jsxs(_Fragment, { children: [_jsx("meta", { name: "description", content: stripTags(props.promo.description) }), _jsx("meta", { name: "og:title", content: props.promo.name }), _jsx("meta", { name: "og:description", content: stripTags(props.promo.description) }), _jsx("meta", { name: "og:image", content: props.promo.banner }), _jsx("meta", { name: "twitter:title", content: props.promo.name }), _jsx("meta", { name: "twitter:description", content: stripTags(props.promo.description) }), _jsx("meta", { name: "twitter:image", content: props.promo.banner }), _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllPromosUrl ?? '/promos', className: "text-button-tertiary-fg flex w-fit items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Promotions"] }), _jsx(Image, { src: props.promo.banner, alt: "", width: 1024, height: 600, priority: true, unoptimized: true, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" }), _jsx("h1", { className: "mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: props.promo.name }), _jsx(Prose, { className: "mt-2xl lg:mt-6", dangerouslySetInnerHTML: {
+    return (_jsxs(_Fragment, { children: [_jsx("meta", { name: "description", content: stripTags(props.promo.description) }), _jsx("meta", { name: "og:title", content: props.promo.name }), _jsx("meta", { name: "og:description", content: stripTags(props.promo.description) }), _jsx("meta", { name: "og:image", content: props.promo.banner }), _jsx("meta", { name: "twitter:title", content: props.promo.name }), _jsx("meta", { name: "twitter:description", content: stripTags(props.promo.description) }), _jsx("meta", { name: "twitter:image", content: props.promo.banner }), _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllPromosUrl ?? '/promos', className: "flex w-fit items-center gap-lg font-semibold text-button-tertiary-fg text-lg", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Promotions"] }), _jsx(Image, { src: props.promo.banner, alt: "", width: 1024, height: 600, priority: true, unoptimized: true, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" }), _jsx("h1", { className: "mt-xl font-semibold text-2xl lg:mt-6 lg:text-3xl", children: props.promo.name }), _jsx(Prose, { className: "mt-2xl lg:mt-6", dangerouslySetInnerHTML: {
                             __html: props.promo.description,
                         } })] })] }));
 }

package/dist/components/DepositWithdrawal/Deposit/AvailablePromos.js

@@ -27,7 +27,7 @@ export function AvailablePromos(props) {
             setValue(value ?? null);
         }, className: props.className, children: [_jsx(Select.Label, { children: "Choose a bonus" }), _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, { placeholder: "Pay without bonus" }), _jsx(Select.Context, { children: (api) => (_jsx(_Fragment, { children: api.value.length ? (_jsx(Select.ClearTrigger, { asChild: true, children: _jsx("span", { onClick: (e) => {
                                         e.stopPropagation();
-                                    }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Select.Positioner, { children: _jsxs(Select.Content, { children: [collection.items.length <= 0 && (_jsxs("div", { className: "p-2", children: [_jsx(Image, { src: gift, alt: "", width: 160, height: 160, className: "mx-auto size-[8.313rem] grayscale" }), _jsx("p", { className: "text-text-tertiary-600 mx-auto mt-1 max-w-[20rem] text-center text-sm", children: "No Bonuses are available at the moment. Please check back later!" })] })), collection.items.length > 0 && (_jsx(Select.ItemGroup, { children: collection.items.map((promo) => (_jsxs(Select.Item, { item: promo, children: [_jsxs(Select.ItemText, { children: [_jsx("span", { className: "block font-medium", children: promo.name }), _jsx("span", { className: "text-text-warning-primary-600 line-clamp-1", dangerouslySetInnerHTML: {
+                                    }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Select.Positioner, { children: _jsxs(Select.Content, { children: [collection.items.length <= 0 && (_jsxs("div", { className: "p-2", children: [_jsx(Image, { src: gift, alt: "", width: 160, height: 160, className: "mx-auto size-[8.313rem] grayscale" }), _jsx("p", { className: "mx-auto mt-1 max-w-[20rem] text-center text-sm text-text-tertiary-600", children: "No Bonuses are available at the moment. Please check back later!" })] })), collection.items.length > 0 && (_jsx(Select.ItemGroup, { children: collection.items.map((promo) => (_jsxs(Select.Item, { item: promo, children: [_jsxs(Select.ItemText, { children: [_jsx("span", { className: "block font-medium", children: promo.name }), _jsx("span", { className: "line-clamp-1 text-text-warning-primary-600", dangerouslySetInnerHTML: {
                                                     __html: promo.description,
                                                 } })] }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, promo.id))) }))] }) })] }));
 }