@opexa/portal-components 0.0.294 → 0.0.296

package/dist/client/hooks/useCheckInDailyCheckInQuestMutation.js

@@ -29,6 +29,9 @@ export const useCheckInDailyCheckInQuestMutation = (config) => {
                             status: progressPercentage >= 100 ? 'COMPLETED' : quest.status,
                             lastCheckInDate: new Date().toISOString(),
                             progressPercentage: progressPercentage.toFixed(2),
+                            checkInStreak: quest.checkInStreak
+                                ? quest.checkInStreak + 1
+                                : 1,
                         };
                     }
                     return quest;

package/dist/components/SignUp/SignUpDefault/SignUpDefault.lazy.d.ts

@@ -5,7 +5,7 @@ export interface SignUpDefaultProps {
     layout: 'default';
     logo: ImageProps['src'];
     siteName?: string;
-    branches?: Branch[];
+    branches: Branch[];
     termsAndConditionsUrl?: string;
     responsibleGamingUrl?: string;
     className?: string;

package/dist/components/SignUp/SignUpDefault/SignUpDefaultForm.js

@@ -20,7 +20,6 @@ import { useSignInMutation } from '../../../client/hooks/useSignInMutation.js';
 import { useSignUpMutation } from '../../../client/hooks/useSignUpMutation.js';
 import { useUpdateAccountMutation } from '../../../client/hooks/useUpdateAccountMutation.js';
 import { toaster } from '../../../client/utils/toaster.js';
-import { BRANCHES } from '../../../constants/index.js';
 import { ArrowLeftIcon } from '../../../icons/ArrowLeftIcon.js';
 import { CalendarIcon } from '../../../icons/CalendarIcon.js';
 import { CheckIcon } from '../../../icons/CheckIcon.js';
@@ -41,7 +40,7 @@ import { useSignUpDefaultPropsContext } from './SignUpDefaultContext.js';
 export function SignUpDefaultForm() {
     const signUpProps = useSignUpDefaultPropsContext();
     const branchCollection = createListCollection({
-        items: signUpProps.branches ?? BRANCHES,
+        items: signUpProps.branches,
         itemToValue: (item) => item.code,
         itemToString: (item) => `${item.code} - ${item.name}`,
     });
@@ -123,7 +122,9 @@ export function SignUpDefaultForm() {
         defaultValues: {
             realName: '',
             mobileNumber: '',
-            branchCode: signUpProps?.branches?.[0]?.code ?? BRANCHES[0].code,
+            branchCode: signUpProps?.branches?.length
+                ? signUpProps.branches[0]?.code
+                : '',
             termsAccepted: globalStore.responsibleGaming.accepted &&
                 globalStore.termsAndConditions.accepted
                 ? true
@@ -159,7 +160,7 @@ export function SignUpDefaultForm() {
                                         : 'Failed to send verification code',
                                 });
                             }
-                        }), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "absolute left-3.5 top-1/2 flex shrink-0 -translate-y-1/2 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, { style: {
+                        }), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "gap-md absolute left-3.5 top-1/2 flex shrink-0 -translate-y-1/2 items-center", children: [_jsx(localeInfo.country.flag, { className: "size-5" }), _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode })] }), _jsx(Field.Input, { style: {
                                                     paddingLeft: `calc(2.75rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
                                                 }, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.realName, className: "mt-xl", children: [_jsx(Field.Label, { children: "Real Name" }), _jsx(Field.Input, { placeholder: "Enter your real name", ...step1Form.register('realName') }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.birthDay, className: "mt-xl", children: [_jsx(DateOfBirthField, { value: birthDay, onChange: (value) => {
                                             if (!value)
@@ -172,9 +173,7 @@ export function SignUpDefaultForm() {
                                         }, onBlur: () => {
                                             step1Form.trigger('birthDay');
                                         } }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.birthDay?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.branchCode, className: "mt-xl", children: [_jsxs(Select.Root, { value: [branchCode], onValueChange: (details) => {
-                                            step1Form.setValue('branchCode', details.value.at(0) ??
-                                                signUpProps?.branches?.[0]?.code ??
-                                                BRANCHES[0].code, {
+                                            step1Form.setValue('branchCode', details.value?.[0], {
                                                 shouldDirty: true,
                                                 shouldTouch: true,
                                                 shouldValidate: true,
@@ -213,7 +212,7 @@ export function SignUpDefaultForm() {
                                                                     globalStore.responsibleGaming.setNext('SIGN_UP');
                                                                     globalStore.signUp.setOpen(false);
                                                                 }
-                                                            }, children: "Responsible Gaming" }), ' ', "guidelines."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Create Account" })] }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Already have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
+                                                            }, children: "Responsible Gaming" }), ' ', "guidelines."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Create Account" })] }), _jsxs("div", { className: "gap-xs mt-6 flex w-full items-center justify-center text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Already have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
                                     globalStore.signUp.setOpen(false);
                                     globalStore.signIn.setOpen(true);
                                 }, children: "Log In" })] })] })), step === 2 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Check your Phone" }), _jsxs("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: form2Ref, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
@@ -287,7 +286,7 @@ export function SignUpDefaultForm() {
                                                 o.field.onChange(details.value);
                                             }, onValueComplete: () => {
                                                 form2Ref.current?.requestSubmit();
-                                            }, blurOnComplete: true, readOnly: step2Form.formState.isSubmitting, type: "numeric", children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "text-text-placeholder-subtle text-2xl font-medium", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.formState.errors.verificationCode?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }), _jsx("button", { type: "button", className: "text-button-secondary-fg font-semibold disabled:cursor-not-allowed disabled:opacity-75", disabled: cooldown.cooling, onClick: async () => {
+                                            }, blurOnComplete: true, readOnly: step2Form.formState.isSubmitting, type: "numeric", children: [_jsxs(PinInput.Control, { className: "gap-md grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "text-text-placeholder-subtle text-2xl font-medium", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.formState.errors.verificationCode?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "gap-xs mt-3 flex w-full items-center justify-center text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }), _jsx("button", { type: "button", className: "text-button-secondary-fg font-semibold disabled:cursor-not-allowed disabled:opacity-75", disabled: cooldown.cooling, onClick: async () => {
                                             await sendVerificationCodeMutation.mutateAsync({
                                                 channel: 'SMS',
                                                 recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
@@ -295,7 +294,7 @@ export function SignUpDefaultForm() {
                                             cooldown.start();
                                         }, children: cooldown.cooling
                                             ? `Resend in ${cooldown.countdown}s`
-                                            : 'Resend' })] }), _jsxs("button", { type: "button", className: "text-text-tertiary-600 mx-auto mt-3xl flex w-fit items-center gap-1 text-sm font-semibold", onClick: () => {
+                                            : 'Resend' })] }), _jsxs("button", { type: "button", className: "text-text-tertiary-600 mt-3xl mx-auto flex w-fit items-center gap-1 text-sm font-semibold", onClick: () => {
                                     setStep(1);
                                     step2Form.reset();
                                     cooldown.stop();

package/dist/components/SignUp/SignUpKYC/SignUpKYC.lazy.d.ts

@@ -5,7 +5,7 @@ export interface SignUpKYCProps {
     layout: 'kyc';
     logo: ImageProps['src'];
     siteName?: string;
-    branches?: Branch[];
+    branches: Branch[];
     termsAndConditionsUrl?: string;
     responsibleGamingUrl?: string;
     className?: string;

package/dist/components/SignUp/SignUpKYC/SignUpKYCForm.js

@@ -26,7 +26,6 @@ import { useUpdateAccountMutation } from '../../../client/hooks/useUpdateAccount
 import { useUpdateMemberVerificationMutation } from '../../../client/hooks/useUpdateMemberVerificationMutation.js';
 import { useUploadImageFileMutation } from '../../../client/hooks/useUploadImageFileMutation.js';
 import { toaster } from '../../../client/utils/toaster.js';
-import { BRANCHES } from '../../../constants/index.js';
 import { ArrowLeftIcon } from '../../../icons/ArrowLeftIcon.js';
 import { CalendarIcon } from '../../../icons/CalendarIcon.js';
 import { CheckIcon } from '../../../icons/CheckIcon.js';
@@ -54,7 +53,7 @@ import { useSignUpKYCPropsContext } from './SignUpKYCContext.js';
 export function SignUpKYCForm() {
     const props = useSignUpKYCPropsContext();
     const branchCollection = createListCollection({
-        items: props.branches ?? BRANCHES,
+        items: props.branches,
         itemToValue: (item) => item.code,
         itemToString: (item) => `${item.code} - ${item.name}`,
     });
@@ -171,7 +170,7 @@ export function SignUpKYCForm() {
             firstName: '',
             middleName: '',
             lastName: '',
-            branchCode: props?.branches?.[0]?.code ?? BRANCHES[0].code,
+            branchCode: props?.branches?.length ? props.branches[0]?.code : '',
             frontImage: undefined,
             selfieImage: undefined,
             termsAccepted: globalStore.responsibleGaming.accepted &&
@@ -239,7 +238,7 @@ export function SignUpKYCForm() {
                                         : 'Failed to send verification code',
                                 });
                             }
-                        }), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.name, className: "mt-xl", children: [_jsx(Field.Label, { children: "Account Username" }), _jsx(Field.Input, { placeholder: "Enter Username", ...step1Form.register('name') }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.name?.message })] }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.password, className: "mt-xl", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter your password", ...step1Form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.password?.message })] }) }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, className: "mt-xl", children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "absolute left-3.5 top-1/2 flex shrink-0 -translate-y-1/2 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, { style: {
+                        }), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.name, className: "mt-xl", children: [_jsx(Field.Label, { children: "Account Username" }), _jsx(Field.Input, { placeholder: "Enter Username", ...step1Form.register('name') }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.name?.message })] }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.password, className: "mt-xl", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter your password", ...step1Form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.password?.message })] }) }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, className: "mt-xl", children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "gap-md absolute left-3.5 top-1/2 flex shrink-0 -translate-y-1/2 items-center", children: [_jsx(localeInfo.country.flag, { className: "size-5" }), _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode })] }), _jsx(Field.Input, { style: {
                                                     paddingLeft: `calc(2.75rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
                                                 }, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.firstName, className: "mt-xl", children: [_jsx(Field.Label, { children: "First Name" }), _jsx(Field.Input, { placeholder: "Enter your First Name", ...step1Form.register('firstName') }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.firstName?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.middleName, className: "mt-xl", children: [_jsx(Field.Label, { children: "Middle Name" }), _jsx(Field.Input, { placeholder: "Enter your Middle Name", ...step1Form.register('middleName') }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.middleName?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.lastName, className: "mt-xl", children: [_jsx(Field.Label, { children: "Last Name" }), _jsx(Field.Input, { placeholder: "Enter your Last Name", ...step1Form.register('lastName') }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.lastName?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.birthDay, className: "mt-xl", children: [_jsx(DateOfBirthField, { value: birthDay, onChange: (value) => {
                                             if (!value)
@@ -252,9 +251,7 @@ export function SignUpKYCForm() {
                                         }, onBlur: () => {
                                             step1Form.trigger('birthDay');
                                         } }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.birthDay?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.branchCode, className: "mt-xl", children: [_jsxs(Select.Root, { value: [branchCode], onValueChange: (details) => {
-                                            step1Form.setValue('branchCode', details.value.at(0) ??
-                                                props?.branches?.[0]?.code ??
-                                                BRANCHES[0].code, {
+                                            step1Form.setValue('branchCode', details.value?.[0], {
                                                 shouldDirty: true,
                                                 shouldTouch: true,
                                                 shouldValidate: true,
@@ -277,7 +274,7 @@ export function SignUpKYCForm() {
                                                     type: 'validate',
                                                     message: error.message,
                                                 });
-                                            } }), _jsx(Field.ErrorText, { children: o.fieldState.error?.message })] })) }), _jsxs("div", { className: "mt-xl text-center text-sm", children: ["Prohibition to play in open and public places", _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx("div", { className: "flex size-5xl items-center justify-center overflow-hidden rounded-full bg-white", children: _jsx(Image, { src: pagcorLogo, alt: "", draggable: false, height: 62, width: 186, className: "h-9.5 w-auto object-contain" }) }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-10 w-auto", draggable: false })] })] }), _jsx(Controller, { control: step1Form.control, name: "termsAccepted", render: (o) => (_jsxs(Field.Root, { className: "mt-2xl", invalid: o.fieldState.invalid, children: [_jsxs(Checkbox.Root, { checked: o.field.value, onCheckedChange: (details) => {
+                                            } }), _jsx(Field.ErrorText, { children: o.fieldState.error?.message })] })) }), _jsxs("div", { className: "mt-xl text-center text-sm", children: ["Prohibition to play in open and public places", _jsxs("div", { className: "gap-3xl mt-5 flex items-center justify-center", children: [_jsx("div", { className: "size-5xl flex items-center justify-center overflow-hidden rounded-full bg-white", children: _jsx(Image, { src: pagcorLogo, alt: "", draggable: false, height: 62, width: 186, className: "h-9.5 w-auto object-contain" }) }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-10 w-auto", draggable: false })] })] }), _jsx(Controller, { control: step1Form.control, name: "termsAccepted", render: (o) => (_jsxs(Field.Root, { className: "mt-2xl", invalid: o.fieldState.invalid, children: [_jsxs(Checkbox.Root, { checked: o.field.value, onCheckedChange: (details) => {
                                                 if (details.checked === 'indeterminate')
                                                     return;
                                                 o.field.onChange(details.checked);
@@ -303,7 +300,7 @@ export function SignUpKYCForm() {
                                                                     globalStore.responsibleGaming.setNext('SIGN_UP');
                                                                     globalStore.signUp.setOpen(false);
                                                                 }
-                                                            }, children: "Responsible Gaming" }), ' ', "guidelines."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Create Account" })] }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Already have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
+                                                            }, children: "Responsible Gaming" }), ' ', "guidelines."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Create Account" })] }), _jsxs("div", { className: "gap-xs mt-6 flex w-full items-center justify-center text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Already have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
                                     dialog.setOpen(false);
                                     globalStore.signIn.setOpen(true);
                                 }, children: "Log In" })] })] })), step === 2 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Check your Phone" }), _jsxs("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: form2Ref, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
@@ -438,7 +435,7 @@ export function SignUpKYCForm() {
                                                 o.field.onChange(details.value);
                                             }, onValueComplete: () => {
                                                 form2Ref.current?.requestSubmit();
-                                            }, children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "text-text-placeholder-subtle text-2xl font-medium", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.formState.errors.verificationCode?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }), _jsx("button", { type: "button", className: "text-button-secondary-fg font-semibold disabled:cursor-not-allowed disabled:opacity-75", disabled: cooldown.cooling, onClick: async () => {
+                                            }, children: [_jsxs(PinInput.Control, { className: "gap-md grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "text-text-placeholder-subtle text-2xl font-medium", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.formState.errors.verificationCode?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "gap-xs mt-3 flex w-full items-center justify-center text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }), _jsx("button", { type: "button", className: "text-button-secondary-fg font-semibold disabled:cursor-not-allowed disabled:opacity-75", disabled: cooldown.cooling, onClick: async () => {
                                             await sendVerificationCodeMutation.mutateAsync({
                                                 channel: 'SMS',
                                                 recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
@@ -446,7 +443,7 @@ export function SignUpKYCForm() {
                                             cooldown.start();
                                         }, children: cooldown.cooling
                                             ? `Resend in ${cooldown.countdown}s`
-                                            : 'Resend' })] }), _jsxs("button", { type: "button", className: "text-text-tertiary-600 mx-auto mt-3xl flex w-fit items-center gap-1 text-sm font-semibold", onClick: () => {
+                                            : 'Resend' })] }), _jsxs("button", { type: "button", className: "text-text-tertiary-600 mt-3xl mx-auto flex w-fit items-center gap-1 text-sm font-semibold", onClick: () => {
                                     setStep(1);
                                     step2Form.reset();
                                     cooldown.stop();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.0.294",
+  "version": "0.0.296",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",