@opexa/portal-components 0.0.959 → 0.0.960

package/dist/components/Disclaimer/DisclaimerV3.js

@@ -8,6 +8,7 @@ import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
+import { useSignOutMutation } from '../../client/hooks/useSignOutMutation.js';
 import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
 import { CheckIcon } from '../../icons/CheckIcon.js';
 import pagcorLogo from '../../images/pagcor2.png';
@@ -30,12 +31,26 @@ export function DisclaimerV3(props) {
     const isAuthenticated = sessionQuery.data?.status === 'authenticated';
     const checked = globalStore.termsOfUse.accepted && globalStore.responsibleGaming.accepted;
     const [showWarning, setShowWarning] = useState(false);
-    return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { "aria-label": `${props.siteName} Player Disclaimer`, "aria-labelledby": "disclaimer-title", "aria-describedby": "disclaimer-description", className: twMerge('flex h-full scrollbar:h-2 scrollbar:w-2 w-full flex-col items-start overflow-y-auto scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent p-3xl lg:mx-auto lg:h-auto lg:max-h-[85vh] lg:w-[500px] lg:rounded-xl'), children: [_jsx("div", { className: "mx-auto h-auto max-w-[120px]", children: _jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, width: 200, height: 100, className: "h-full w-full object-cover", draggable: false, unoptimized: true }) }), _jsxs("div", { className: "my-4 grid w-full grid-cols-2 items-center justify-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo ?? pagcorLogo, alt: "PAGCOR logo", height: 50, width: 186, className: "mx-auto h-[43px] w-auto shrink-0 object-contain", draggable: false, unoptimized: true }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "Responsible Gaming logo", height: 50, width: 186, className: "mx-auto h-[50px] w-auto shrink-0", draggable: false, unoptimized: true })] }), _jsx("div", { className: "w-full text-center font-semibold text-2xl uppercase", id: "disclaimer-title", children: "Notice" }), _jsx("div", { className: "mb-1 text-sm text-text-secondary-700", id: "disclaimer-description", children: "By entering this website, you acknowledge and confirm:" }), _jsx("div", { className: "w-full grow", children: _jsxs(Dialog.Description, { className: "space-y-4 text-sm", children: [_jsxs("ul", { className: "space-y-1.5 text-left", "aria-label": "Restricted persons list", children: [_jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are 21 years old and above."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are not a government official, or employee connected directly with the operation of the Government or any of its agencies, member of the Armed Forces of the Philippines including the Army, Navy, Air Force, or the Philippine Nationa Police."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are not included in the PAGCOR's National Database Restricted Persons (NDRP)."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "Funds or credits in the account of player who is found ineligible to play shall mean forfeiture of said funds/credits in favor of the Government."] }), _jsxs(Checkbox.Root, { checked: checked, onCheckedChange: (e) => {
+    const signOutMutation = useSignOutMutation();
+    const handleExit = () => {
+        if (props.redirectUrlOnNoConsent) {
+            if (Capacitor.isNativePlatform()) {
+                App.exitApp();
+            }
+            else {
+                window.location.href = props.redirectUrlOnNoConsent;
+            }
+        }
+        else {
+            disclaimer.close();
+        }
+    };
+    return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { "aria-label": `${props.siteName} Player Disclaimer`, "aria-labelledby": "disclaimer-title", "aria-describedby": "disclaimer-description", className: twMerge('flex h-full scrollbar:h-2 scrollbar:w-2 w-full flex-col items-start overflow-y-auto scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent p-3xl lg:mx-auto lg:h-auto lg:max-h-[85vh] lg:w-[500px] lg:rounded-xl'), children: [_jsx("div", { className: "mx-auto h-auto max-w-[120px]", children: _jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, width: 200, height: 100, className: "h-full w-full object-cover", draggable: false, unoptimized: true }) }), _jsxs("div", { className: "my-4 grid w-full grid-cols-2 items-center justify-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo ?? pagcorLogo, alt: "PAGCOR logo", height: 50, width: 186, className: "mx-auto h-[43px] w-auto shrink-0 object-contain", draggable: false, unoptimized: true }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "Responsible Gaming logo", height: 50, width: 186, className: "mx-auto h-[50px] w-auto shrink-0", draggable: false, unoptimized: true })] }), _jsx("div", { className: "w-full text-center font-semibold text-2xl uppercase", id: "disclaimer-title", children: "Notice" }), _jsx("div", { className: "mt-2 mb-1 text-sm text-text-secondary-700", id: "disclaimer-description", children: "By entering this website, you acknowledge and confirm:" }), _jsx("div", { className: "mt-4 w-full grow", children: _jsxs(Dialog.Description, { className: "space-y-4 text-sm", children: [_jsxs("ul", { className: "space-y-1.5 text-left", "aria-label": "Restricted persons list", children: [_jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are 21 years old and above."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are not a government official, or employee connected directly with the operation of the Government or any of its agencies, member of the Armed Forces of the Philippines including the Army, Navy, Air Force, or the Philippine Nationa Police."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are not included in the PAGCOR's National Database Restricted Persons (NDRP)."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "Funds or credits in the account of player who is found ineligible to play shall mean forfeiture of said funds/credits in favor of the Government."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are prohibited from playing in open and public places."] }), _jsxs(Checkbox.Root, { checked: checked, onCheckedChange: (e) => {
                                                         if (e.checked === 'indeterminate')
                                                             return;
                                                         globalStore.termsOfUse.setAccepted(e.checked);
                                                         globalStore.responsibleGaming.setAccepted(e.checked);
-                                                    }, className: "pt-2.5 pb-2 text-sm", children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["You agree and read the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
+                                                    }, className: "pt-2.5 pb-2 text-sm", colorScheme: "neutral", children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["You agree and read the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
                                                                         globalStore.termsOfUse.setOpen(true);
                                                                         globalStore.termsOfUse.setNext('DISCLAIMER');
                                                                         disclaimer.close();
@@ -58,17 +73,11 @@ export function DisclaimerV3(props) {
                                                 globalStore.onboarding.setOpen(true);
                                             }
                                         }, children: "I Agree" }), _jsx(Button, { type: "button", onClick: () => {
-                                            if (props.redirectUrlOnNoConsent) {
-                                                if (Capacitor.isNativePlatform()) {
-                                                    App.exitApp();
-                                                }
-                                                else {
-                                                    window.location.href = props.redirectUrlOnNoConsent;
-                                                }
-                                            }
-                                            else {
-                                                disclaimer.close();
+                                            if (isAuthenticated && !checked) {
+                                                signOutMutation.mutate();
+                                                handleExit();
                                             }
+                                            handleExit();
                                         }, variant: "outline", children: "Exit" })] })] }) })] }) }));
 }
 const Circle = () => (_jsx("div", { children: _jsx("div", { className: "flex h-4.5 w-4.5 items-center justify-center rounded-full border-[5px] border-brand-400", children: _jsx("div", { className: "h-2 w-2 rounded-full bg-bg-disabled" }) }) }));

package/dist/components/ForgotPassword/Crazywin/CWForgotPassword.js

@@ -6,6 +6,6 @@ import { Dialog } from '../../../ui/Dialog/index.js';
 import CWForgotPasswordForm from './CWForgotPasswordForm.js';
 import styles from './ForgotPassword.module.css';
 const ForgotPassword = ({ logo }) => {
-    return (_jsx(Dialog.Content, { className: "bg-transparent h-full w-full overflow-y-invisible left-0 top-0 flex items-center", children: _jsxs("div", { className: "flex h-[90dvh] w-full flex-col justify-center scroll-smooth", children: [_jsxs("div", { className: "relative mx-auto w-full max-w-[22.5rem]", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto mt-8 h-auto w-[12.04544rem]", draggable: false }), _jsx(Dialog.CloseTrigger, { className: 'w-fit h-fit text-[#6C5200] rounded-md bg-gradient-to-t from-[#FFE5AF] to-[#EAC467] p-0.5', children: _jsx(XIcon, {}) })] }), _jsx("h2", { className: "mx-auto mt-10 w-fit bg-[linear-gradient(50deg,#c7802d_-5.1%,#ffe585_44.95%,#c7802d_109.05%)] bg-clip-text text-2xl font-bold uppercase text-transparent", children: "Forgot Password" }), _jsx("div", { className: twMerge('mx-auto mt-7.5 max-w-[20.6875rem] p-7.5', styles.card), children: _jsx(CWForgotPasswordForm, {}) })] }) }));
+    return (_jsx(Dialog.Content, { className: "overflow-y-invisible top-0 left-0 flex h-full w-full items-center bg-transparent", children: _jsxs("div", { className: "flex h-[90dvh] w-full flex-col justify-center scroll-smooth", children: [_jsxs("div", { className: "relative mx-auto w-full max-w-[22.5rem]", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto mt-8 h-auto w-[12.04544rem]", draggable: false }), _jsx(Dialog.CloseTrigger, { className: 'h-fit w-fit rounded-md bg-gradient-to-t from-[#FFE5AF] to-[#EAC467] p-0.5 text-[#6C5200]', children: _jsx(XIcon, {}) })] }), _jsx("h2", { className: "mx-auto mt-10 w-fit bg-[linear-gradient(50deg,#c7802d_-5.1%,#ffe585_44.95%,#c7802d_109.05%)] bg-clip-text font-bold text-2xl text-transparent uppercase", children: "Forgot Password" }), _jsx("div", { className: twMerge('mx-auto mt-7.5 max-w-[20.6875rem] p-7.5', styles.card), children: _jsx(CWForgotPasswordForm, {}) })] }) }));
 };
 export default ForgotPassword;

package/dist/components/ForgotPassword/Crazywin/CWForgotPasswordForm.js

@@ -59,7 +59,7 @@ const CWForgotPasswordForm = () => {
             verificationCode: data.verificationCode,
         });
     };
-    return (_jsx("form", { autoComplete: 'off', onSubmit: handleSubmit(onSubmit), children: _jsxs("div", { className: "space-y-4", children: [_jsxs(Field.Root, { invalid: !!errors.mobileNumber, children: [_jsx(Field.Label, { className: "text-xs", children: "Phone Number" }), _jsxs("div", { className: "relative flex h-10 gap-3", children: [_jsxs("div", { className: "flex h-full items-center gap-2 rounded-full bg-black/40 px-3.5 text-xs", children: [_jsx(localeInfo.country.flag, { className: "size-5" }), _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode })] }), _jsx(Field.Input, { className: commonInputClass, placeholder: "Enter Phone Number", ...register('mobileNumber') })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.mobileNumber?.message })] }), _jsx(Field.Root, { invalid: !!errors.password, children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: "text-xs", children: "Password" }), _jsxs("div", { children: [_jsxs(PasswordInput.Control, { className: "relative flex h-10 items-center rounded-full text-xs bg-black/40 border-0", children: [_jsx(Image, { src: lockIcon, alt: "lock icon", width: 20, height: 20, className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3 h-5 w-5" }), _jsx(PasswordInput.Input, { className: "pl-10", placeholder: "8 - 20 characters", ...register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, { className: "text-white/50" }), asChild: true, children: _jsx(EyeIcon, { className: "text-white/50" }) }) })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.password?.message })] })] }) }), _jsx(Field.Root, { invalid: !!errors.confirmPassword, children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: "text-xs", children: "Confirm Password" }), _jsxs("div", { children: [_jsxs(PasswordInput.Control, { className: "relative flex h-10 items-center rounded-full text-xs bg-black/40 border-0", children: [_jsx(Image, { src: lockIcon, alt: "lock icon", width: 20, height: 20, className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3 h-5 w-5" }), _jsx(PasswordInput.Input, { className: "pl-10", placeholder: "8 - 20 characters", ...register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, { className: "text-white/50" }), asChild: true, children: _jsx(EyeIcon, { className: "text-white/50" }) }) })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.confirmPassword?.message })] })] }) }), _jsxs(Field.Root, { invalid: !!errors.verificationCode, children: [_jsx(Field.Label, { className: "text-xs", children: "OTP Code" }), _jsxs("div", { className: "relative", children: [_jsx(Field.Input, { className: twMerge(commonInputClass, 'pr-[5.75rem]'), placeholder: "Enter OTP Code", ...register('verificationCode') }), _jsx(Button, { type: "button", className: "absolute right-1 top-1/2 h-fit w-fit -translate-y-1/2 rounded-full py-[0.375rem] text-sm shadow-[inset_0px_-1px_2px_1px_#fff7e1] bg-[linear-gradient(89deg,#c7802d_-15.91%,#ffe585_28.75%,#ffeca6_49.46%,#c7802d_112.69%)]", disabled: !mobileNumberValue || !!errors.mobileNumber || cooldown.cooling, onClick: async () => {
+    return (_jsx("form", { autoComplete: 'off', onSubmit: handleSubmit(onSubmit), children: _jsxs("div", { className: "space-y-4", children: [_jsxs(Field.Root, { invalid: !!errors.mobileNumber, children: [_jsx(Field.Label, { className: "text-xs", children: "Phone Number" }), _jsxs("div", { className: "relative flex h-10 gap-3", children: [_jsxs("div", { className: "flex h-full items-center gap-2 rounded-full bg-black/40 px-3.5 text-xs", children: [_jsx(localeInfo.country.flag, { className: "size-5" }), _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode })] }), _jsx(Field.Input, { className: commonInputClass, placeholder: "Enter Phone Number", ...register('mobileNumber') })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.mobileNumber?.message })] }), _jsx(Field.Root, { invalid: !!errors.password, children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: "text-xs", children: "Password" }), _jsxs("div", { children: [_jsxs(PasswordInput.Control, { className: "relative flex h-10 items-center rounded-full border-0 bg-black/40 text-xs", children: [_jsx(Image, { src: lockIcon, alt: "lock icon", width: 20, height: 20, className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3 h-5 w-5" }), _jsx(PasswordInput.Input, { className: "pl-10", placeholder: "8 - 20 characters", ...register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, { className: "text-white/50" }), asChild: true, children: _jsx(EyeIcon, { className: "text-white/50" }) }) })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.password?.message })] })] }) }), _jsx(Field.Root, { invalid: !!errors.confirmPassword, children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: "text-xs", children: "Confirm Password" }), _jsxs("div", { children: [_jsxs(PasswordInput.Control, { className: "relative flex h-10 items-center rounded-full border-0 bg-black/40 text-xs", children: [_jsx(Image, { src: lockIcon, alt: "lock icon", width: 20, height: 20, className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3 h-5 w-5" }), _jsx(PasswordInput.Input, { className: "pl-10", placeholder: "8 - 20 characters", ...register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, { className: "text-white/50" }), asChild: true, children: _jsx(EyeIcon, { className: "text-white/50" }) }) })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.confirmPassword?.message })] })] }) }), _jsxs(Field.Root, { invalid: !!errors.verificationCode, children: [_jsx(Field.Label, { className: "text-xs", children: "OTP Code" }), _jsxs("div", { className: "relative", children: [_jsx(Field.Input, { className: twMerge(commonInputClass, 'pr-[5.75rem]'), placeholder: "Enter OTP Code", ...register('verificationCode') }), _jsx(Button, { type: "button", className: "-translate-y-1/2 absolute top-1/2 right-1 h-fit w-fit rounded-full bg-[linear-gradient(89deg,#c7802d_-15.91%,#ffe585_28.75%,#ffeca6_49.46%,#c7802d_112.69%)] py-[0.375rem] text-sm shadow-[inset_0px_-1px_2px_1px_#fff7e1]", disabled: !mobileNumberValue || !!errors.mobileNumber || cooldown.cooling, onClick: async () => {
                                         if (!cooldown.cooling) {
                                             await sendVerificationCodeMutation.mutateAsync({
                                                 channel: 'SMS',
@@ -70,6 +70,6 @@ const CWForgotPasswordForm = () => {
                                                 description: `OTP sent to ${getValues('mobileNumber')}`
                                             });
                                         }
-                                    }, children: cooldown.cooling ? cooldown.countdown : 'Get OTP' })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.verificationCode?.message })] }), _jsx(Button, { type: "submit", className: "mt-7.5 text-sm rounded-full shadow-[inset_0px_-1px_2px_1px_#fff7e1] bg-[linear-gradient(89deg,#c7802d_-15.91%,#ffe585_28.75%,#ffeca6_49.46%,#c7802d_112.69%)]", fullWidth: true, disabled: !isValid || !isDirty, children: "Change Password" })] }) }));
+                                    }, children: cooldown.cooling ? cooldown.countdown : 'Get OTP' })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.verificationCode?.message })] }), _jsx(Button, { type: "submit", className: "mt-7.5 rounded-full bg-[linear-gradient(89deg,#c7802d_-15.91%,#ffe585_28.75%,#ffeca6_49.46%,#c7802d_112.69%)] text-sm shadow-[inset_0px_-1px_2px_1px_#fff7e1]", fullWidth: true, disabled: !isValid || !isDirty, children: "Change Password" })] }) }));
 };
 export default CWForgotPasswordForm;

package/dist/components/ForgotPassword/ForgotPasswordForm.js

@@ -113,9 +113,9 @@ export function ForgotPasswordForm({ layout }) {
                             newPassword: step1Form.getValues('newPassword'),
                             verificationCode: step1Form.getValues('verificationCode'),
                         });
-                    }), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "-translate-y-1/2 absolute top-1/2 left-3.5 flex shrink-0 items-center gap-md", children: [_jsx(localeInfo.country.flag, { className: "size-5" }), _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode })] }), _jsx(Field.Input, { className: 'bg-transparent border-[#D0D5DD] dark:border-[#333741]', style: {
+                    }), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "-translate-y-1/2 absolute top-1/2 left-3.5 flex shrink-0 items-center gap-md", children: [_jsx(localeInfo.country.flag, { className: "size-5" }), _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode })] }), _jsx(Field.Input, { className: 'border-[#D0D5DD] bg-transparent dark:border-[#333741]', style: {
                                                 paddingLeft: `calc(2.75rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
-                                            }, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.newPassword, className: "mt-xl", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', children: "New Password" }), _jsxs(PasswordInput.Control, { className: 'bg-transparent border-[#D0D5DD] dark:border-[#333741]', children: [_jsx(PasswordInput.Input, { placeholder: "Enter your new password", ...step1Form.register('newPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.newPassword?.message })] }) }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.confirmPassword, className: "mt-xl bg-transparent", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', children: "Confirm Password" }), _jsxs(PasswordInput.Control, { className: 'bg-transparent border-[#D0D5DD] dark:border-[#333741]', children: [_jsx(PasswordInput.Input, { placeholder: "Confirm new password", ...step1Form.register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.confirmPassword?.message })] }) }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.verificationCode, className: "mt-xl bg-transparent", children: [_jsx(Field.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', children: "OTP Code" }), _jsxs("div", { className: "grid grid-cols-[1fr_104px] gap-2", children: [_jsx(Field.Input, { placeholder: "Enter OTP Code", ...step1Form.register('verificationCode'), className: 'bg-transparent border-[#D0D5DD] dark:border-[#333741]' }), _jsx(Button, { variant: 'outline', className: 'bg-transparent', type: 'button', disabled: !mobileNumberValue || !!step1Form.formState.errors.mobileNumber || cooldown.cooling, onClick: async () => {
+                                            }, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.newPassword, className: "mt-xl", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', children: "New Password" }), _jsxs(PasswordInput.Control, { className: 'border-[#D0D5DD] bg-transparent dark:border-[#333741]', children: [_jsx(PasswordInput.Input, { placeholder: "Enter your new password", ...step1Form.register('newPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.newPassword?.message })] }) }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.confirmPassword, className: "mt-xl bg-transparent", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', children: "Confirm Password" }), _jsxs(PasswordInput.Control, { className: 'border-[#D0D5DD] bg-transparent dark:border-[#333741]', children: [_jsx(PasswordInput.Input, { placeholder: "Confirm new password", ...step1Form.register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.confirmPassword?.message })] }) }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.verificationCode, className: "mt-xl bg-transparent", children: [_jsx(Field.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', children: "OTP Code" }), _jsxs("div", { className: "grid grid-cols-[1fr_104px] gap-2", children: [_jsx(Field.Input, { placeholder: "Enter OTP Code", ...step1Form.register('verificationCode'), className: 'border-[#D0D5DD] bg-transparent dark:border-[#333741]' }), _jsx(Button, { variant: 'outline', className: 'bg-transparent', type: 'button', disabled: !mobileNumberValue || !!step1Form.formState.errors.mobileNumber || cooldown.cooling, onClick: async () => {
                                                 if (!cooldown.cooling) {
                                                     try {
                                                         await sendVerificationCodeMutation.mutateAsync({
@@ -132,7 +132,7 @@ export function ForgotPasswordForm({ layout }) {
                                                         });
                                                     }
                                                 }
-                                            }, children: cooldown.cooling ? cooldown.countdown + ' sec' : 'Get OTP' })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: step1Form.formState.errors.verificationCode?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting || !step1Form.formState.isValid || !step1Form.formState.isDirty, children: "Set up New Password" })] })] }));
+                                            }, children: cooldown.cooling ? `${cooldown.countdown} sec` : 'Get OTP' })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: step1Form.formState.errors.verificationCode?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting || !step1Form.formState.isValid || !step1Form.formState.isDirty, children: "Set up New Password" })] })] }));
     }
     return (_jsxs(_Fragment, { children: [step === 1 && (_jsxs(_Fragment, { children: [Header[step], _jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
                             try {

package/dist/components/GameProviders/GameProvidersCarousel.d.ts

@@ -8,10 +8,18 @@ export interface ClassNameEntries {
     thumbnailContainer?: string;
     thumbnailRootContainer?: string;
 }
+export interface ActiveProvider {
+    activeProvider?: GameProvider | string;
+    jump?: boolean;
+}
 export interface GameProvidersCarouselProps {
     layout: 'carousel';
     gameProviders: GameProvider[];
     heading?: string | ReactNode;
+    /**
+     * Scrolls the carousel to the matching provider id or slug on load.
+     */
+    scrollProvider?: ActiveProvider;
     /**
      * @default '/providers'
      */

package/dist/components/GameProviders/GameProvidersCarousel.js

@@ -56,9 +56,41 @@ export function GameProvidersCarousel({ hasSeeAll = true, ...props }) {
         ? [...props.gameProviders, ...(props.futureGameProviders ?? [])]
         : props.gameProviders, [enabled, props.gameProviders, props.futureGameProviders]);
     const gameProviders = useMemo(() => combinedProviders.map((provider) => GAME_PROVIDER_DATA[provider]), [combinedProviders]);
+    const resolvedActiveProvider = props.scrollProvider?.activeProvider;
+    const shouldJump = props.scrollProvider?.jump ?? false;
+    const activeProviderIndex = useMemo(() => {
+        if (!resolvedActiveProvider)
+            return -1;
+        return gameProviders.findIndex((provider) => provider.id === resolvedActiveProvider ||
+            provider.slug === resolvedActiveProvider);
+    }, [gameProviders, resolvedActiveProvider]);
     const classNames = useMemo(() => isString(props.className)
         ? { root: props.className }
         : (props.className ?? {}), [props.className]);
+    const getSlidesToScroll = useCallback(() => {
+        const desktopSlidesToScroll = props.carouselOptions?.breakpoints[1024]?.slidesToScroll ?? 6;
+        if (typeof window === 'undefined')
+            return 3;
+        return window.matchMedia('(min-width: 1024px)').matches
+            ? desktopSlidesToScroll
+            : 3;
+    }, [props.carouselOptions?.breakpoints]);
+    const scrollToActiveProvider = useCallback(() => {
+        if (!emblaApi || activeProviderIndex < 0)
+            return;
+        const slidesToScroll = Math.max(1, getSlidesToScroll());
+        const snapIndex = Math.floor(activeProviderIndex / slidesToScroll);
+        emblaApi.scrollTo(snapIndex, shouldJump);
+    }, [emblaApi, activeProviderIndex, getSlidesToScroll, shouldJump]);
+    useEffect(() => {
+        if (!emblaApi || activeProviderIndex < 0)
+            return;
+        scrollToActiveProvider();
+        emblaApi.on('reInit', scrollToActiveProvider);
+        return () => {
+            emblaApi.off('reInit', scrollToActiveProvider);
+        };
+    }, [emblaApi, activeProviderIndex, scrollToActiveProvider]);
     return (_jsxs("div", { className: classNames.root, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "font-semibold text-lg", children: props.heading ?? 'Providers' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [hasSeeAll && (_jsxs(Link, { href: viewAllUrl, className: "flex gap-sm font-semibold text-button-tertiary-fg text-sm", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] })), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] })] })] }), _jsx("div", { ref: emblaRef, className: twMerge('relative mt-lg overflow-hidden', classNames.thumbnailRootContainer), children: _jsx("div", { className: twMerge('grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col grid-rows-1 gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md', classNames.thumbnailContainer), children: gameProviders.map((provider) => {
                         const url = props.providerUrlMappings
                             ? (props.providerUrlMappings

package/dist/components/Games/Game.js

@@ -11,6 +11,7 @@ import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 import { useUnmarkGameAsFavoriteMutation } from '../../client/hooks/useUnmarkGameAsFavoriteMutation.js';
 import { toaster } from '../../client/utils/toaster.js';
 import { Star01Icon } from '../../icons/Star01Icon.js';
+import RainbowballImg from '../../images/rainbow-ball-online.webp';
 import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
 import { GameLaunchTrigger } from '../GameLaunch/index.js';
 import { BadgeNew } from './BadgeNew.js';
@@ -88,7 +89,11 @@ function GameImage({ priority }) {
         image: game.image,
     }), [game.reference, game.provider, game.image]);
     const [imgSrc, setImgSrc] = useState(initialImageUrl);
-    return (_jsx(Image, { src: imgSrc, alt: game.name, width: 200, height: 200, loading: priority ? undefined : 'lazy', priority: priority, unoptimized: true, sizes: "(max-width: 768px) 33vw, 200px", className: "aspect-square w-full rounded-t-md object-contain", onError: () => {
+    return (_jsx(Image, { src: game.name === 'Rainbow Ball' && game.id === '22wQ1YcMwrBaZH3Mx7'
+            ? RainbowballImg
+            : imgSrc, alt: game.name, width: 200, height: 200, loading: priority ? undefined : 'lazy', priority: priority, unoptimized: true, sizes: "(max-width: 768px) 33vw, 200px", className: twMerge('aspect-square w-full rounded-t-md object-contain', game.name === 'Rainbow Ball' &&
+            game.id === '22wQ1YcMwrBaZH3Mx7' &&
+            'object-cover'), onError: () => {
             const fallbackThumbnail = props.fallbackThumbnails?.[game.provider];
             if (fallbackThumbnail) {
                 setImgSrc(fallbackThumbnail);

package/dist/components/Jackpots/JackpotsCarouselNext/JackpotsCarouselStageItem.js

@@ -25,7 +25,7 @@ import { maskFirstLast } from '../../../utils/mask.js';
 import styles from '../Jackpots.module.css';
 import { useJackpotsCarouselItemContext } from './JackpotsCarouselContext.js';
 export function JackpotsCarouselStageItem({ style, className, viewAllUrl, animate = true, customJackpotStageChest, medalImage, jackpotProfileShape = 'oval', }) {
-    const [ref, inView] = useIntersectionObserver({
+    const [ref, _inView] = useIntersectionObserver({
         threshold: 0.75,
     });
     const jackpot = useJackpotsCarouselItemContext();

package/dist/components/Quests/Crazywin/components/Countdown.js

@@ -20,7 +20,7 @@ const Countdown = ({ endDate, onEnd, type }) => {
             else {
                 end = endOfDayTime.getTime();
             }
-            const now = new Date().getTime();
+            const now = Date.now();
             const distance = end - now;
             if (distance < 0) {
                 setTime({

package/dist/components/SignUp/SignUpKYC/SelfieImageField/useSelfieImageField.js

@@ -58,7 +58,6 @@ export function useSelfieImageField(props) {
                 invariant(blob);
                 resolve(new File([blob], `front-image-${Date.now()}.jpeg`, {
                     type: 'image/jpeg',
-                    endings: 'native',
                     lastModified: Date.now(),
                 }));
             }, 'image/jpeg', 1.0));

package/dist/components/TermsOfUse/TermsOfUseV2.lazy.d.ts

@@ -6,4 +6,4 @@ export interface TermsOfUseV2Props {
     siteName: string;
     responsibleGamingLogo?: ImageProps['src'];
 }
-export declare function TermsOfUseV2({ logo, siteName, content, ...props }: TermsOfUseV2Props): import("react/jsx-runtime").JSX.Element;
+export declare function TermsOfUseV2({ logo, content }: TermsOfUseV2Props): import("react/jsx-runtime").JSX.Element;

package/dist/components/TermsOfUse/TermsOfUseV2.lazy.js

@@ -9,7 +9,7 @@ import { ScrollToTopIcon } from '../../icons/ScrollToTopIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-export function TermsOfUseV2({ logo, siteName, content, ...props }) {
+export function TermsOfUseV2({ logo, content }) {
     const scrollableContentRef = useRef(null);
     const [hasReachedBottom, setHasReachedBottom] = useState(false);
     const [isAtBottom, setIsAtBottom] = useState(false);

package/dist/components/TermsOfUse/TermsOfUseV3.lazy.d.ts

@@ -6,4 +6,4 @@ export interface TermsOfUseV3Props {
     siteName: string;
     responsibleGamingLogo?: ImageProps['src'];
 }
-export declare function TermsOfUseV3({ logo, siteName, content, ...props }: TermsOfUseV3Props): import("react/jsx-runtime").JSX.Element;
+export declare function TermsOfUseV3({ logo, content }: TermsOfUseV3Props): import("react/jsx-runtime").JSX.Element;

package/dist/components/TermsOfUse/TermsOfUseV3.lazy.js

@@ -10,7 +10,7 @@ import decorativebackground from '../../images/decorative-patern.png';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-export function TermsOfUseV3({ logo, siteName, content, ...props }) {
+export function TermsOfUseV3({ logo, content }) {
     const scrollableContentRef = useRef(null);
     const [hasReachedBottom, setHasReachedBottom] = useState(false);
     const [isAtBottom, setIsAtBottom] = useState(false);

package/dist/components/shared/SelfieImageField/useSelfieImageField.js

@@ -2,7 +2,7 @@ import { useFieldContext } from '@ark-ui/react';
 import { FaceDetector, FilesetResolver } from '@mediapipe/tasks-vision';
 import { useRef, useState } from 'react';
 import invariant from 'tiny-invariant';
-import { useInterval, useMediaQuery } from 'usehooks-ts';
+import { useInterval } from 'usehooks-ts';
 import { useCamera } from '../../../client/hooks/useCamera.js';
 import { useControllableState } from '../../../client/hooks/useControllableState.js';
 import { useDisclosure } from '../../../client/hooks/useDisclosure.js';
@@ -11,7 +11,6 @@ import { useUploadPrivateImageFileMutation } from '../../../client/hooks/useUplo
 import { toaster } from '../../../client/utils/toaster.js';
 export function useSelfieImageField(props) {
     const field = useFieldContext();
-    const desktop = useMediaQuery('(min-width: 1024px)');
     const [value, setValue] = useControllableState({
         value: props.value,
         defaultValue: props.defaultValue ?? '',
@@ -88,7 +87,6 @@ export function useSelfieImageField(props) {
                 invariant(blob);
                 resolve(new File([blob], `front-image-${Date.now()}.jpeg`, {
                     type: 'image/jpeg',
-                    endings: 'native',
                     lastModified: Date.now(),
                 }));
             }, 'image/jpeg', 1.0));

package/dist/handlers/index.d.ts

@@ -18,14 +18,14 @@ export declare const GET: (req: NextRequest, { params }: Context) => Promise<Nex
     __error?: unknown;
 } | {
     ok: true;
-    data: import("../types").Session;
+    data: Record<string, unknown>;
 }> | NextResponse<{
     ok: false;
     message: string;
     __error?: unknown;
 } | {
     ok: true;
-    data: Record<string, unknown>;
+    data: import("../types").Session;
 }>>;
 export declare const DELETE: (req: NextRequest, { params }: Context) => Promise<NextResponse<{
     ok: true;

package/dist/lib/components/Banner/Banner.test.js

@@ -52,7 +52,7 @@ describe('Banner', () => {
         expect(link2).toHaveAttribute('href', '/link2');
     });
     it('renders plain div for banners without redirectUrl', () => {
-        const { container } = render(_jsx(Banner, { banners: mockBanners }));
+        render(_jsx(Banner, { banners: mockBanners }));
         // The 3rd banner image (index 2) should be present
         const image3 = screen.getByTestId('banner-image-2');
         expect(image3).toBeInTheDocument();

package/dist/lib/components/Disclaimer/Disclaimer.test.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { screen, waitFor, fireEvent } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { createMockGlobalStore, createMockSessionQuery, createMockSignOutMutation, createMockUseDisclaimer, } from '../../../__tests__/utils/mocks.js';
@@ -49,16 +49,19 @@ vi.mock('../../images/responsible-gaming-new.png', () => ({
 }));
 vi.mock('../../ui/Checkbox', () => {
     const React = require('react');
-    const CheckboxContext = React.createContext({ onCheckedChange: (_) => { } });
+    const CheckboxContext = React.createContext({
+        onCheckedChange: (_) => { },
+    });
     return {
         Checkbox: {
             Root: ({ children, onCheckedChange }) => (_jsx(CheckboxContext.Provider, { value: { onCheckedChange }, children: _jsx("div", { children: children }) })),
             Control: ({ children }) => _jsx("div", { children: children }),
-            Label: ({ children }) => _jsx("label", { children: children }),
+            Label: ({ children, htmlFor, ...props }) => (_jsx("label", { htmlFor: htmlFor ?? 'checkbox-input', ...props, children: children })),
             Indicator: ({ children }) => _jsx("div", { children: children }),
             HiddenInput: React.forwardRef((props, ref) => {
                 const { onCheckedChange } = React.useContext(CheckboxContext);
-                return (_jsx("input", { type: "checkbox", "data-testid": "checkbox-input", ref: ref, ...props, onChange: (e) => {
+                const id = props.id ?? 'checkbox-input';
+                return (_jsx("input", { type: "checkbox", "data-testid": "checkbox-input", id: id, ref: ref, ...props, onChange: (e) => {
                         if (onCheckedChange)
                             onCheckedChange({ checked: e.target.checked });
                     } }));
@@ -106,7 +109,6 @@ describe('DisclaimerV1', () => {
         expect(acceptButton).not.toBeDisabled();
     });
     it('checkbox toggles when clicked', async () => {
-        const user = userEvent.setup();
         render(_jsx(DisclaimerV1, { ...defaultProps }));
         const checkbox = screen.getByTestId('checkbox-input');
         fireEvent.click(checkbox);
@@ -164,7 +166,6 @@ describe('DisclaimerV2', () => {
         expect(list.querySelectorAll('li').length).toBeGreaterThan(0);
     });
     it('checkbox controls both termsOfUse and responsibleGaming', async () => {
-        const user = userEvent.setup();
         render(_jsx(DisclaimerV2, { ...defaultProps }));
         const checkbox = screen.getByTestId('checkbox-input');
         fireEvent.click(checkbox);
@@ -228,7 +229,6 @@ describe('DisclaimerV3', () => {
         expect(list.querySelectorAll('li').length).toBeGreaterThan(0);
     });
     it('checkbox controls both termsOfUse and responsibleGaming', async () => {
-        const user = userEvent.setup();
         render(_jsx(DisclaimerV3, { ...defaultProps }));
         const checkbox = screen.getByTestId('checkbox-input');
         fireEvent.click(checkbox);

package/dist/lib/components/Games/Game.js

@@ -89,11 +89,7 @@ function GameImage({ priority }) {
         image: game.image,
     }), [game.reference, game.provider, game.image]);
     const [imgSrc, setImgSrc] = useState(initialImageUrl);
-    return (_jsx(Image, { src: game.name === 'Rainbow Ball' && game.id === '22wQ1YcMwrBaZH3Mx7'
-            ? RainbowballImg
-            : imgSrc, alt: game.name, width: 200, height: 200, loading: priority ? undefined : 'lazy', priority: priority, unoptimized: true, sizes: "(max-width: 768px) 33vw, 200px", className: twMerge('aspect-square w-full rounded-t-md object-contain', game.name === 'Rainbow Ball' &&
-            game.id === '22wQ1YcMwrBaZH3Mx7' &&
-            'object-cover'), onError: () => {
+    return (_jsx(Image, { src: game.name === 'Rainbow Ball' ? RainbowballImg : imgSrc, alt: game.name, width: 200, height: 200, loading: priority ? undefined : 'lazy', priority: priority, unoptimized: true, sizes: "(max-width: 768px) 33vw, 200px", className: twMerge('aspect-square w-full rounded-t-md object-contain', game.name === 'Rainbow Ball' && 'object-cover'), onError: () => {
             const fallbackThumbnail = props.fallbackThumbnails?.[game.provider];
             if (fallbackThumbnail) {
                 setImgSrc(fallbackThumbnail);

package/dist/lib/components/SignIn/MobileNumberSignIn.test.js

@@ -42,10 +42,10 @@ vi.mock('next/navigation', () => ({
 }));
 // Mock external components
 vi.mock('./GoogleSignInTrigger', () => ({
-    GoogleSignInTrigger: () => _jsx("button", { children: "Google Sign In" }),
+    GoogleSignInTrigger: () => _jsx("button", { type: "button", children: "Google Sign In" }),
 }));
 vi.mock('../../FacebookSignInTrigger', () => ({
-    FacebookSignInTrigger: () => _jsx("button", { children: "Facebook Sign In" }),
+    FacebookSignInTrigger: () => _jsx("button", { type: "button", children: "Facebook Sign In" }),
 }));
 vi.mock('../../ui/Checkbox', () => {
     const React = require('react');
@@ -54,11 +54,12 @@ vi.mock('../../ui/Checkbox', () => {
         Checkbox: {
             Root: ({ children, onCheckedChange }) => (_jsx(CheckboxContext.Provider, { value: { onCheckedChange }, children: _jsx("div", { children: children }) })),
             Control: ({ children }) => _jsx("div", { children: children }),
-            Label: ({ children }) => _jsx("label", { children: children }),
+            Label: ({ children, htmlFor, ...props }) => (_jsx("label", { htmlFor: htmlFor ?? 'checkbox-input', ...props, children: children })),
             Indicator: ({ children }) => _jsx("div", { children: children }),
             HiddenInput: React.forwardRef((props, ref) => {
                 const { onCheckedChange } = React.useContext(CheckboxContext);
-                return (_jsx("input", { type: "checkbox", "data-testid": "input-terms", ref: ref, ...props, onChange: (e) => {
+                const id = props.id ?? 'checkbox-input';
+                return (_jsx("input", { type: "checkbox", "data-testid": "input-terms", id: id, ref: ref, ...props, onChange: (e) => {
                         if (onCheckedChange)
                             onCheckedChange({ checked: e.target.checked });
                     } }));
@@ -73,8 +74,8 @@ vi.mock('../../ui/Field', () => {
     return {
         Field: {
             Root: ({ children }) => _jsx("div", { children: children }),
-            Label: ({ children }) => _jsx("label", { children: children }),
-            Input: React.forwardRef((props, ref) => _jsx("input", { "data-testid": `input-${props.name || 'field'}`, ref: ref, ...props })),
+            Label: ({ children, htmlFor, ...props }) => (_jsx("label", { htmlFor: htmlFor ?? props.name ?? 'field', ...props, children: children })),
+            Input: React.forwardRef((props, ref) => (_jsx("input", { "data-testid": `input-${props.name || 'field'}`, id: props.id ?? props.name ?? 'field', ref: ref, ...props }))),
             ErrorText: ({ children }) => _jsx("div", { children: children }),
         },
     };
@@ -84,8 +85,8 @@ vi.mock('../../ui/PinInput', () => {
     return {
         PinInput: {
             Root: ({ children }) => _jsx("div", { children: children }),
-            Label: ({ children }) => _jsx("label", { children: children }),
-            Input: React.forwardRef((props, ref) => _jsx("input", { "data-testid": "input-otp", ref: ref, ...props })),
+            Label: ({ children, htmlFor, ...props }) => (_jsx("label", { htmlFor: htmlFor ?? 'pin-input', ...props, children: children })),
+            Input: React.forwardRef((props, ref) => (_jsx("input", { "data-testid": "input-otp", id: props.id ?? 'pin-input', ref: ref, ...props }))),
             Control: ({ children }) => _jsx("div", { children: children }),
             HiddenInput: () => null,
         },

package/dist/lib/components/SignIn/NameAndPasswordSignIn.test.js

@@ -36,10 +36,10 @@ vi.mock('@ark-ui/react/dialog', () => ({
 }));
 // Mock external components
 vi.mock('./GoogleSignInTrigger', () => ({
-    GoogleSignInTrigger: () => _jsx("button", { children: "Google Sign In" }),
+    GoogleSignInTrigger: () => _jsx("button", { type: "button", children: "Google Sign In" }),
 }));
 vi.mock('./FacebookSignInTrigger', () => ({
-    FacebookSignInTrigger: () => _jsx("button", { children: "Facebook Sign In" }),
+    FacebookSignInTrigger: () => _jsx("button", { type: "button", children: "Facebook Sign In" }),
 }));
 vi.mock('../../ui/Checkbox', () => {
     const React = require('react');
@@ -48,11 +48,12 @@ vi.mock('../../ui/Checkbox', () => {
         Checkbox: {
             Root: ({ children, onCheckedChange }) => (_jsx(CheckboxContext.Provider, { value: { onCheckedChange }, children: _jsx("div", { children: children }) })),
             Control: ({ children }) => _jsx("div", { children: children }),
-            Label: ({ children }) => _jsx("label", { children: children }),
+            Label: ({ children, htmlFor, ...props }) => (_jsx("label", { htmlFor: htmlFor ?? 'checkbox-input', ...props, children: children })),
             Indicator: ({ children }) => _jsx("div", { children: children }),
             HiddenInput: React.forwardRef((props, ref) => {
                 const { onCheckedChange } = React.useContext(CheckboxContext);
-                return (_jsx("input", { type: "checkbox", "data-testid": "input-terms", ref: ref, ...props, onChange: (e) => {
+                const id = props.id ?? 'checkbox-input';
+                return (_jsx("input", { type: "checkbox", "data-testid": "input-terms", id: id, ref: ref, ...props, onChange: (e) => {
                         if (onCheckedChange)
                             onCheckedChange({ checked: e.target.checked });
                     } }));
@@ -69,8 +70,8 @@ vi.mock('../../ui/Field', () => {
     return {
         Field: {
             Root: ({ children }) => _jsx("div", { children: children }),
-            Label: ({ children }) => _jsx("label", { children: children }),
-            Input: React.forwardRef((props, ref) => _jsx("input", { "data-testid": `input-${props.name}`, ref: ref, ...props })),
+            Label: ({ children, htmlFor, ...props }) => (_jsx("label", { htmlFor: htmlFor ?? props.name ?? 'field', ...props, children: children })),
+            Input: React.forwardRef((props, ref) => (_jsx("input", { "data-testid": `input-${props.name}`, id: props.id ?? props.name ?? 'field', ref: ref, ...props }))),
             HelperText: ({ children }) => _jsx("div", { children: children }),
             ErrorText: ({ children }) => _jsx("div", { children: children }),
         },
@@ -79,18 +80,21 @@ vi.mock('../../ui/Field', () => {
 vi.mock('../../ui/PasswordInput', () => {
     const React = require('react');
     const { useState, useContext, createContext } = React;
-    const VisibilityContext = createContext({ visible: false, setVisible: (v) => { } });
+    const VisibilityContext = createContext({
+        visible: false,
+        setVisible: (_v) => { },
+    });
     return {
         PasswordInput: {
             Root: ({ children }) => {
                 const [visible, setVisible] = useState(false);
                 return (_jsx(VisibilityContext.Provider, { value: { visible, setVisible }, children: _jsx("div", { children: children }) }));
             },
-            Label: ({ children }) => _jsx("label", { children: children }),
+            Label: ({ children, htmlFor, ...props }) => (_jsx("label", { htmlFor: htmlFor ?? 'password', ...props, children: children })),
             Input: React.forwardRef((props, ref) => {
                 const { visible } = useContext(VisibilityContext);
                 // Ensure type is passed correctly if not overridden
-                return _jsx("input", { "data-testid": `input-${props.name || 'password'}`, ref: ref, type: visible ? 'text' : 'password', ...props });
+                return (_jsx("input", { "data-testid": `input-${props.name || 'password'}`, id: props.id ?? props.name ?? 'password', ref: ref, type: visible ? 'text' : 'password', ...props }));
             }),
             Control: ({ children }) => _jsx("div", { children: children }),
             VisibilityTrigger: ({ children }) => {
@@ -197,7 +201,7 @@ describe('NameAndPasswordSignIn', () => {
         expect(passwordInput).toHaveAttribute('type', 'password');
     });
     it('handles security question flow', async () => {
-        const user = userEvent.setup();
+        const _user = userEvent.setup();
         // Mock SignInMutation returning a security question challenge
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         mockSignInMutation.data = {

package/dist/lib/components/SignIn/SignIn.test.js

@@ -26,7 +26,10 @@ vi.mock('./HappyBingo/SignInForm', () => ({
 }));
 // Mock Next.js Image since it's used in the wrapper
 vi.mock('next/image', () => ({
-    default: (props) => _jsx("img", { ...props, alt: props.alt || '' }),
+    default: (props) => {
+        // biome-ignore lint/performance/noImgElement: mock Next/Image with plain img in tests
+        return _jsx("img", { ...props, alt: props.alt || '' });
+    },
 }));
 const mockLogo = '/mock-logo.png';
 describe('SignIn Wrapper', () => {
@@ -60,7 +63,6 @@ describe('SignIn Wrapper', () => {
         expect(screen.getByTestId('mock-hb-sign-in-form')).toBeInTheDocument();
     });
     it('closes dialog when close trigger is clicked', async () => {
-        const user = require('@testing-library/user-event').default.setup();
         render(_jsx(SignIn, { ...defaultProps }));
         // Find close button (usually checking for label or class, assuming standard Dialog CloseTrigger)
         // Our Dialog mock or real Dialog implementation needs to be checked.
@@ -74,7 +76,6 @@ describe('SignIn Wrapper', () => {
         </Dialog.CloseTrigger>
         */
         // Ark UI CloseTrigger usually renders a button.
-        const closeButtons = screen.getAllByRole('button');
         // Assuming the first one or finding by icon logic? 
         // Actually, let's just use fireEvent on the overlay or trigger if finding it is hard without testId.
         // But let's try finding by role.

package/dist/schemas/forgotPasswordSchema.d.ts

@@ -8,23 +8,23 @@ export declare const createForgotPasswordSchema: (mobileNumberParser: MobileNumb
     mobileNumber: z.ZodEffects<z.ZodString, string, string>;
     verificationCode: z.ZodEffects<z.ZodString, string, string>;
 }, "strip", z.ZodTypeAny, {
-    verificationCode: string;
     password: string;
+    verificationCode: string;
     mobileNumber: string;
     confirmPassword: string;
 }, {
-    verificationCode: string;
     password: string;
+    verificationCode: string;
     mobileNumber: string;
     confirmPassword: string;
 }>, {
-    verificationCode: string;
     password: string;
+    verificationCode: string;
     mobileNumber: string;
     confirmPassword: string;
 }, {
-    verificationCode: string;
     password: string;
+    verificationCode: string;
     mobileNumber: string;
     confirmPassword: string;
 }>;