@opexa/portal-components 0.0.957 → 0.0.958

package/dist/lib/components/AccountInfo/AccountInfo.js

@@ -0,0 +1,320 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ark } from '@ark-ui/react/factory';
+import FacebookLogin from '@greatsumini/react-facebook-login';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { GoogleOAuthProvider, useGoogleLogin } from '@react-oauth/google';
+import { differenceInYears, format } from 'date-fns';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { twMerge } from 'tailwind-merge';
+import { z } from 'zod';
+import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useFacebookClientQuery } from '../../client/hooks/useFacebookClientQuery.js';
+import { useGoogleClientIdQuery } from '../../client/hooks/useGoogleClientIdQuery.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useMobileNumberParser } from '../../client/hooks/useMobileNumberParser.js';
+import { useProfileCompletionQuery } from '../../client/hooks/useProfileCompletionQuery.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
+import { useUnlinkFacebookMutation } from '../../client/hooks/useUnlinkFacebookMutation.js';
+import { useUnlinkGoogleMutation } from '../../client/hooks/useUnlinkGoogleMutation.js';
+import { useUpdateAccountMutation } from '../../client/hooks/useUpdateAccountMutation.js';
+import { toaster } from '../../client/utils/toaster.js';
+import { AUTH_ENDPOINT, PLATFORM_CODE } from '../../constants/index.js';
+import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
+import { CheckVerified02Icon } from '../../icons/CheckVerified02Icon.js';
+import { FacebookIcon } from '../../icons/FacebookIcon.js';
+import { GoogleIcon } from '../../icons/GoogleIcon.js';
+import { LinkBroken02Icon } from '../../icons/LinkBroken02Icon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import AlertCircleIconImage from '../../images/alert-circle-icon.png';
+import avatarPlaceholder from '../../images/placeholder-avatar.png';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Field } from '../../ui/Field/index.js';
+import { IconButton } from '../../ui/IconButton/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getAccountQueryKey, getProfileCompletionQueryKey, } from '../../utils/queryKeys.js';
+import PhoneIcon from './icons/PhoneIcon.js';
+const accountSchema = z.object({
+    name: z
+        .string()
+        .min(1, 'Name is required')
+        .max(50, 'Name is too long')
+        .regex(/^[a-zA-Z0-9]+$/, 'Username can only contain letters and numbers'),
+});
+export function AccountInfo(props) {
+    return (_jsxs("div", { className: twMerge('space-y-3xl', props.className), children: [_jsx(ProfileInfo, { avatar: props.avatar }), _jsx(ContactInfo, { variant: props.variant }), _jsx(PersonalInfo, { shouldShowBranchCode: props.shouldShowBranchCode, branchCodes: props.branchCodes }), _jsx(SSO, { google: props.googleSso, facebook: props.facebookSso })] }));
+}
+function ProfileInfo({ avatar }) {
+    const [edit, setEdit] = useState(false);
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const { mutate, isPending } = useUpdateAccountMutation({
+        onSuccess() {
+            const queryClient = getQueryClient();
+            queryClient.setQueryData(getAccountQueryKey(), (prev) => {
+                if (!prev || !account)
+                    return prev;
+                return {
+                    ...prev,
+                    name: form.getValues('name'),
+                };
+            });
+            toaster.success({
+                description: 'Changes saved!',
+            });
+        },
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const form = useForm({
+        defaultValues: {
+            name: account?.name || '',
+        },
+        resolver: zodResolver(accountSchema),
+    });
+    return (_jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Profile Info" }), _jsx("div", { className: "mt-5 rounded-xl border border-border-secondary bg-bg-primary-alt", children: _jsx("div", { className: "border-border-secondary px-4 py-5", children: _jsxs("div", { className: "flex items-start gap-xl", children: [_jsx(Image, { src: avatar || avatarPlaceholder, alt: "", width: 80, height: 80, className: "mt-2 size-14 shrink-0 rounded-md object-cover" }), edit ? (_jsxs("form", { onSubmit: form.handleSubmit((data) => {
+                                    mutate({
+                                        name: data.name,
+                                    });
+                                    setEdit(false);
+                                }), children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.name, children: [_jsx(Field.Label, { children: "Username" }), _jsx(Field.Input, { ...form.register('name'), placeholder: "Enter your username", size: "sm" }), _jsx(Field.ErrorText, { children: form.formState.errors.name?.message })] }), _jsxs("div", { className: "mt-2 flex justify-end gap-lg", children: [_jsx(Button, { variant: "outline", size: "sm", fullWidth: false, onClick: () => {
+                                                    setEdit(false);
+                                                    form.reset();
+                                                }, children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: !form.formState.isValid || isPending, children: "Save Changes" })] })] })) : (_jsxs("div", { className: "mt-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "font-semibold text-lg text-text-secondary-700 leading-tight", children: account?.name }), _jsx("button", { type: "button", onClick: () => setEdit(true), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", fill: "none", viewBox: "0 0 24 24", stroke: "#cecfd2", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M11 4H6.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C2 6.28 2 7.12 2 8.8v8.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C4.28 22 5.12 22 6.8 22h8.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C20 19.72 20 18.88 20 17.2V13M8 16h1.675c.489 0 .733 0 .963-.055.204-.05.4-.13.579-.24.201-.123.374-.296.72-.642L21.5 5.5a2.121 2.121 0 0 0-3-3l-9.563 9.563c-.346.346-.519.519-.642.72a2 2 0 0 0-.24.579c-.055.23-.055.474-.055.963z" }) }) })] }), _jsx("p", { className: "text-text-tertiary-600 leading-tight", children: account?.id })] }))] }) }) })] }));
+}
+function PersonalInfo(props) {
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const updateAccountMutation = useUpdateAccountMutation({
+        onSuccess() {
+            toaster.success({
+                description: 'Changes saved!',
+            });
+        },
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const schema = z.object({
+        realName: z.string().min(4).max(50).optional().or(z.literal('')),
+        birthDay: z
+            .string()
+            .optional()
+            .or(z.literal(''))
+            .superRefine((val, ctx) => {
+            if (!val)
+                return;
+            const date = new Date(val);
+            const age = differenceInYears(new Date(), date);
+            if (age < 21) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: 'You must be at least 21 years old',
+                });
+            }
+        }),
+    });
+    const form = useForm({
+        mode: 'all',
+        resolver: zodResolver(schema),
+        defaultValues: {
+            birthDay: '',
+            realName: '',
+        },
+    });
+    useEffect(() => {
+        if (account) {
+            form.reset({
+                realName: account.realName ?? '',
+                birthDay: account.birthDay
+                    ? format(account.birthDay, 'yyyy-MM-dd')
+                    : '',
+            });
+        }
+    }, [account, form]);
+    const branchName = props.branchCodes?.find((branch) => branch.code === account?.branchCode);
+    const displayBranchName = branchName
+        ? `${branchName?.code} - ${branchName?.name}`
+        : null;
+    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
+                            : undefined,
+                        birthDay: data.birthDay && account?.birthDay !== data.birthDay
+                            ? 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'), className: twMerge('h-full py-2.5', account?.birthDay && 'pointer-events-none') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] }), props.shouldShowBranchCode && (_jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.birthDay, readOnly: !!account?.birthDay, children: [_jsx(Field.Label, { children: "Branch Code" }), _jsx(Field.Input, { type: "text", disabled: true, value: displayBranchName ?? account?.branchCode ?? '' })] }))] }), 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({ variant }) {
+    const localeInfo = useLocaleInfo();
+    const accountQuery = useAccountQuery();
+    const profileCompletionQuery = useProfileCompletionQuery();
+    const profileCompletion = profileCompletionQuery.data;
+    const account = accountQuery.data;
+    const { parse, format, equals } = useMobileNumberParser();
+    const updateAccountMutation = useUpdateAccountMutation({
+        onSuccess() {
+            toaster.success({
+                description: 'Changes saved!',
+            });
+            getQueryClient().invalidateQueries({
+                queryKey: getProfileCompletionQueryKey(),
+            });
+        },
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const schema = z.object({
+        emailAddress: z.string().email().optional().or(z.literal('')),
+        mobileNumber: z
+            .string()
+            .regex(localeInfo.mobileNumber.pattern, 'Invalid mobile number')
+            .optional()
+            .or(z.literal('')),
+    });
+    const form = useForm({
+        mode: 'all',
+        resolver: zodResolver(schema),
+        defaultValues: {
+            mobileNumber: '',
+            emailAddress: '',
+        },
+    });
+    useEffect(() => {
+        if (account) {
+            form.reset({
+                emailAddress: account.emailAddress ?? '',
+                mobileNumber: account.mobileNumber
+                    ? parse(account.mobileNumber).mobileNumber
+                    : '',
+            });
+        }
+    }, [account, form, parse]);
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "grow font-semibold text-sm text-text-secondary-700", children: "Contact Info" }), profileCompletion?.personalInformation ? (_jsx(ark.svg, { asChild: true, className: "size-6 text-text-success-primary", children: _jsx(CheckVerified02Icon, {}) })) : (_jsxs("div", { className: "flex items-center gap-1 rounded-sm border border-[#93370d] bg-[#4e1d09] px-sm py-xs", children: [_jsx(AlertCircleIcon, { className: "h-5 w-5 text-[#FEC84B]" }), _jsx("span", { className: "m-0 text-[#FEC84B] text-xs", children: "Not Set" })] }))] }), !profileCompletion?.personalInformation && (_jsx(AlertWarning, { title: "Please add an email address to your account to receive important notifications.", className: "my-3" })), _jsxs("form", { className: "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
+                            : undefined,
+                        mobileNumber: data.mobileNumber &&
+                            !equals(account?.mobileNumber, data.mobileNumber)
+                            ? 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: [variant === 'ofwin' ? (_jsx(PhoneIcon, {})) : (_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({ google, facebook }) {
+    const googleClientIdQuery = useGoogleClientIdQuery({ enabled: !!google });
+    const googleClientId = googleClientIdQuery.data;
+    if (!facebook && !google)
+        return null;
+    return (_jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Account Connections" }), _jsxs("div", { className: "mt-5 flex flex-col gap-2 rounded-xl border border-border-secondary bg-bg-primary-alt px-4 py-5 shadow-xs", children: [googleClientId && google && (_jsx(GoogleOAuthProvider, { clientId: googleClientId, children: _jsx(LinkGoogleAccount, {}) })), facebook && _jsx(LinkFacebookAccount, {})] })] }));
+}
+const LinkFacebookAccount = () => {
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const sessionQuery = useSessionQuery();
+    const session = sessionQuery.data;
+    const facebookClientIdQuery = useFacebookClientQuery();
+    const facebookClientId = facebookClientIdQuery.data;
+    if (!account || !facebookClientId)
+        return null;
+    return (_jsxs("div", { className: "flex items-center gap-sm", 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: twMerge('mt-xs text-xs leading-tight', account.facebookId
+                                    ? 'text-text-success-primary-600'
+                                    : 'text-text-secondary-700'), children: account.facebookId ? 'Connected' : 'Not Connected' })] })] }), account.facebookId ? (_jsx(UnlinkFacebookAccount, {})) : (_jsx(FacebookLogin, { appId: facebookClientId, useRedirect: true, dialogParams: {
+                    state: encodeURIComponent(`${window.location.origin},${PLATFORM_CODE},${session?.token}`),
+                    redirect_uri: `${AUTH_ENDPOINT}/facebook/link`,
+                }, onFail: () => {
+                    toaster.error({
+                        title: 'Facebook Sign In Failed',
+                        description: 'Failed to sign in with Facebook. Please try again.',
+                    });
+                }, render: ({ onClick }) => {
+                    return (_jsx(Button, { onClick: onClick, fullWidth: false, children: "Connect" }));
+                } }))] }));
+};
+function UnlinkFacebookAccount() {
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const disclosure = useDisclosure();
+    const unlinkFacebookMutation = useUnlinkFacebookMutation({
+        onSuccess() {
+            toaster.success({
+                title: 'Successfully Disconnected Facebook Account',
+                description: 'Your Facebook account has been disconnected. You can reconnect anytime from your account settings.',
+            });
+            disclosure.setOpen(false);
+        },
+        onError() {
+            toaster.error({
+                title: 'Error',
+                description: 'An error occurred while disconnecting your Facebook account. Please try again later.',
+            });
+        },
+    });
+    if (!account)
+        return null;
+    return (_jsxs(Dialog.Root, { open: disclosure.open, onOpenChange: (details) => disclosure.setOpen(details.open), lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsx(Dialog.Trigger, { className: "font-semibold text-button-tertiary-error-fg text-sm", children: "Disconnect" }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto min-h-auto max-w-[25rem] overflow-y-auto rounded-xl p-6", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-brand", children: _jsx(LinkBroken02Icon, {}) }), _jsx(Dialog.Title, { className: "mt-4 mb-1 text-center font-semibold text-lg xl:mt-xl", children: "Disconnect Facebook Account" }), _jsx(Dialog.Description, { className: "text-center text-sm text-text-tertiary-600 leading-2xl", children: "Are you sure you want to disconnect your Facebook account? This may affect your ability to log in or sync data." })] }), _jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "flex justify-between gap-2 pt-6", children: [_jsx(Button, { variant: "outline", disabled: unlinkFacebookMutation.isPending, onClick: () => api.setOpen(false), children: "Cancel" }), _jsx(Button, { variant: "solid", disabled: unlinkFacebookMutation.isPending, onClick: () => {
+                                                    unlinkFacebookMutation.mutate(account.id);
+                                                }, children: "Disconnect" })] })) })] }) })] })] }));
+}
+const LinkGoogleAccount = () => {
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const sessionQuery = useSessionQuery();
+    const session = sessionQuery.data;
+    const loginGoogle = useGoogleLogin({
+        flow: 'auth-code',
+        state: encodeURIComponent(`${window.location.origin},${PLATFORM_CODE},${session?.token}`),
+        ux_mode: 'redirect',
+        redirect_uri: `${AUTH_ENDPOINT}/google/link`,
+        scope: 'openid profile email phone',
+    });
+    if (!account)
+        return null;
+    return (_jsxs("div", { className: "flex items-center gap-sm", 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: twMerge('mt-xs text-xs leading-tight', account.googleId
+                                    ? 'text-text-success-primary-600'
+                                    : 'text-text-secondary-700'), children: account.googleId ? 'Connected' : 'Not Connected' })] })] }), account.googleId ? (_jsx(UnlinkGoogleAccount, {})) : (_jsx(Button, { onClick: () => loginGoogle(), fullWidth: false, children: "Connect" }))] }));
+};
+function UnlinkGoogleAccount() {
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const disclosure = useDisclosure();
+    const unlinkGoogleMutation = useUnlinkGoogleMutation({
+        onSuccess() {
+            toaster.success({
+                title: 'Successfully Disconnected Google Account',
+                description: 'Your Google account has been disconnected. You can reconnect anytime from your account settings.',
+            });
+            disclosure.setOpen(false);
+        },
+        onError() {
+            toaster.error({
+                title: 'Error',
+                description: 'An error occurred while disconnecting your Google account. Please try again later.',
+            });
+        },
+    });
+    if (!account)
+        return null;
+    return (_jsxs(Dialog.Root, { open: disclosure.open, onOpenChange: (details) => disclosure.setOpen(details.open), lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsx(Dialog.Trigger, { className: "font-semibold text-button-tertiary-error-fg text-sm", children: "Disconnect" }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto min-h-auto max-w-[25rem] overflow-y-auto rounded-xl p-6", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-brand", children: _jsx(LinkBroken02Icon, {}) }), _jsx(Dialog.Title, { className: "mt-4 mb-1 text-center font-semibold text-lg xl:mt-xl", children: "Disconnect Google Account" }), _jsx(Dialog.Description, { className: "text-center text-sm text-text-tertiary-600 leading-2xl", children: "Are you sure you want to disconnect your Google account? This may affect your ability to log in or sync data." })] }), _jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "flex justify-between gap-2 pt-6", children: [_jsx(Button, { variant: "outline", disabled: unlinkGoogleMutation.isPending, onClick: () => api.setOpen(false), children: "Cancel" }), _jsx(Button, { variant: "solid", disabled: unlinkGoogleMutation.isPending, onClick: () => {
+                                                    unlinkGoogleMutation.mutate(account.id);
+                                                }, children: "Disconnect" })] })) })] }) })] })] }));
+}
+function AlertWarning({ title, className, }) {
+    return (_jsxs("div", { className: twMerge('flex items-center gap-2 rounded-xl border border-border-secondary bg-bg-primary-alt p-xl', className), children: [_jsx(Image, { src: AlertCircleIconImage, alt: "Alert", className: "w-10 object-contain", draggable: false, width: 40, height: 40 }), _jsx("p", { className: "font-semibold text-sm text-text-tertiary-600", children: title })] }));
+}

package/dist/lib/components/AccountInfo/icons/PhoneIcon.d.ts

@@ -0,0 +1,2 @@
+declare const PhoneIcon: () => import("react/jsx-runtime").JSX.Element;
+export default PhoneIcon;

package/dist/lib/components/AccountInfo/icons/PhoneIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const PhoneIcon = () => {
+    return (_jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3.5 size-5", children: _jsx("path", { d: "M12 17.5H12.01M8.2 22H15.8C16.9201 22 17.4802 22 17.908 21.782C18.2843 21.5903 18.5903 21.2843 18.782 20.908C19 20.4802 19 19.9201 19 18.8V5.2C19 4.07989 19 3.51984 18.782 3.09202C18.5903 2.71569 18.2843 2.40973 17.908 2.21799C17.4802 2 16.9201 2 15.8 2H8.2C7.0799 2 6.51984 2 6.09202 2.21799C5.71569 2.40973 5.40973 2.71569 5.21799 3.09202C5 3.51984 5 4.0799 5 5.2V18.8C5 19.9201 5 20.4802 5.21799 20.908C5.40973 21.2843 5.71569 21.5903 6.09202 21.782C6.51984 22 7.07989 22 8.2 22ZM12.5 17.5C12.5 17.7761 12.2761 18 12 18C11.7239 18 11.5 17.7761 11.5 17.5C11.5 17.2239 11.7239 17 12 17C12.2761 17 12.5 17.2239 12.5 17.5Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+};
+export default PhoneIcon;

package/dist/lib/components/AccountInfo/index.d.ts

@@ -0,0 +1 @@
+export * from './AccountInfo';

package/dist/lib/components/AccountInfo/index.js

@@ -0,0 +1 @@
+export * from './AccountInfo.js';

package/dist/lib/components/AccountSecurity/AccountSecurity.d.ts

@@ -0,0 +1,4 @@
+export interface AccountSecurityProps {
+    className?: string;
+}
+export declare function AccountSecurity(props: AccountSecurityProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/AccountSecurity/AccountSecurity.js

@@ -0,0 +1,176 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createListCollection } from '@ark-ui/react/collection';
+import { ark } from '@ark-ui/react/factory';
+import { zodResolver } from '@hookform/resolvers/zod';
+import Image from 'next/image';
+import { useForm } from 'react-hook-form';
+import { twMerge } from 'tailwind-merge';
+import { z } from 'zod';
+import { useProfileCompletionQuery } from '../../client/hooks/useProfileCompletionQuery.js';
+import { useUpdateAccountMutation } from '../../client/hooks/useUpdateAccountMutation.js';
+import { toaster } from '../../client/utils/toaster.js';
+import { SECRET_QUESTIONS, SECRET_QUESTIONS_MAP } from '../../constants/index.js';
+import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import { CheckVerified02Icon } from '../../icons/CheckVerified02Icon.js';
+import { ChevronDownIcon } from '../../icons/ChevronDownIcon.js';
+import { EyeIcon } from '../../icons/EyeIcon.js';
+import { EyeOffIcon } from '../../icons/EyeOffIcon.js';
+import AlertCircleIconImage from '../../images/alert-circle-icon.png';
+import { Button } from '../../ui/Button/index.js';
+import { Field } from '../../ui/Field/index.js';
+import { PasswordInput } from '../../ui/PasswordInput/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+import { Select } from '../../ui/Select/index.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getProfileCompletionQueryKey } from '../../utils/queryKeys.js';
+export function AccountSecurity(props) {
+    return (_jsxs("div", { className: twMerge('space-y-3xl', props.className), children: [_jsx(LoginPassword, {}), _jsx(TransactionPassword, {})] }));
+}
+function LoginPassword() {
+    const profileCompletionQuery = useProfileCompletionQuery();
+    const profileCompletion = profileCompletionQuery.data;
+    const updateAccountMutation = useUpdateAccountMutation({
+        onSuccess() {
+            form.reset();
+            toaster.success({
+                description: 'Changes saved!',
+            });
+            getQueryClient().invalidateQueries({
+                queryKey: getProfileCompletionQueryKey(),
+            });
+        },
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const schema = z
+        .object({
+        password: z
+            .string()
+            .min(8, 'Password must be at least 8 characters')
+            .max(150, 'Password must be at most 150 characters'),
+        confirmPassword: z.string().min(1, 'Please confirm your password'),
+        secretQuestion: z.enum(SECRET_QUESTIONS).nullable().optional(),
+        secretAnswer: z
+            .string()
+            .min(2, 'Answer is too short')
+            .optional()
+            .or(z.literal('')),
+    })
+        .superRefine((data, ctx) => {
+        if (data.password !== data.confirmPassword) {
+            ctx.addIssue({
+                path: ['confirmPassword'],
+                code: z.ZodIssueCode.custom,
+                message: 'Passwords do not match',
+            });
+        }
+        if (data.secretAnswer && !data.secretQuestion) {
+            ctx.addIssue({
+                path: ['secretQuestion'],
+                code: z.ZodIssueCode.custom,
+                message: 'Please select a security question',
+            });
+        }
+        if (data.secretQuestion && !data.secretAnswer) {
+            ctx.addIssue({
+                path: ['secretAnswer'],
+                code: z.ZodIssueCode.custom,
+                message: 'Please provide an answer to the security question',
+            });
+        }
+    });
+    const form = useForm({
+        mode: 'all',
+        resolver: zodResolver(schema),
+        defaultValues: {
+            password: '',
+            confirmPassword: '',
+            secretAnswer: '',
+            secretQuestion: null,
+        },
+    });
+    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: "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: "mt-5 rounded-xl border border-border-secondary bg-bg-primary-alt shadow-xs", onSubmit: form.handleSubmit((data) => {
+                    updateAccountMutation.mutate({
+                        password: data.password,
+                        secretAnswer: data.secretAnswer ? data.secretAnswer : undefined,
+                        secretQuestion: data.secretQuestion
+                            ? data.secretQuestion
+                            : 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 })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.secretQuestion, children: [_jsxs(Select.Root, { deselectable: true, collection: secretQuestionCollection, lazyMount: true, positioning: {
+                                            sameWidth: true,
+                                        }, value: secretQuestion ? [secretQuestion] : [], onValueChange: (details) => {
+                                            form.setValue('secretQuestion', z.enum(SECRET_QUESTIONS).safeParse(details.value.at(0))
+                                                .data ?? null, {
+                                                shouldDirty: true,
+                                                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: "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();
+    const profileCompletion = profileCompletionQuery.data;
+    const updateAccountMutation = useUpdateAccountMutation({
+        onSuccess() {
+            form.reset();
+            toaster.success({
+                description: 'Changes saved!',
+            });
+            getQueryClient().invalidateQueries({
+                queryKey: getProfileCompletionQueryKey(),
+            });
+        },
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const schema = z
+        .object({
+        password: z
+            .string()
+            .min(8, 'Password must be at least 8 characters')
+            .max(150, 'Password must be at most 150 characters'),
+        confirmPassword: z.string().min(1, 'Please confirm your password'),
+    })
+        .superRefine((data, ctx) => {
+        if (data.password !== data.confirmPassword) {
+            ctx.addIssue({
+                path: ['confirmPassword'],
+                code: z.ZodIssueCode.custom,
+                message: 'Passwords do not match',
+            });
+        }
+    });
+    const form = useForm({
+        mode: 'all',
+        resolver: zodResolver(schema),
+        defaultValues: {
+            password: '',
+            confirmPassword: '',
+        },
+    });
+    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." })] }), profileCompletion?.transactionPassword ? (_jsx(ark.svg, { asChild: true, className: "size-6 text-text-success-primary", children: _jsx(CheckVerified02Icon, {}) })) : (_jsxs("div", { className: "flex items-center gap-1 rounded-sm border border-[#93370d] bg-[#4e1d09] px-sm py-xs", children: [_jsx(AlertCircleIcon, { className: "h-5 w-5 text-[#FEC84B]" }), _jsx("span", { className: "m-0 text-nowrap text-[#FEC84B] text-xs", children: "Not Set" })] }))] }), !profileCompletion?.transactionPassword && (_jsx(AlertWarning, { title: "Please set your transaction password. This is required when making withdrawals and helps secure your account.", className: "my-3" })), _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,
+                    });
+                }), 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" })] }))] })] }));
+}
+function AlertWarning({ title, className, }) {
+    return (_jsxs("div", { className: twMerge('flex items-center gap-2 rounded-xl border border-border-secondary bg-bg-primary-alt p-xl', className), children: [_jsx(Image, { src: AlertCircleIconImage, alt: "Alert", className: "w-10 object-contain", draggable: false, width: 40, height: 40 }), _jsx("p", { className: "font-semibold text-sm text-text-tertiary-600", children: title })] }));
+}
+const secretQuestionCollection = createListCollection({
+    items: SECRET_QUESTIONS,
+    itemToValue: (item) => item,
+    itemToString: (item) => SECRET_QUESTIONS_MAP[item],
+});

package/dist/lib/components/AccountSecurity/index.d.ts

@@ -0,0 +1 @@
+export * from './AccountSecurity';

package/dist/lib/components/AccountSecurity/index.js

@@ -0,0 +1 @@
+export * from './AccountSecurity.js';

package/dist/lib/components/AccountVerification/AccountVerification.d.ts

@@ -0,0 +1,4 @@
+export interface AccountVerificationProps {
+    className?: string;
+}
+export declare function AccountVerification(props: AccountVerificationProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/AccountVerification/AccountVerification.js

@@ -0,0 +1,63 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ark } from '@ark-ui/react/factory';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
+import { useProfileCompletionQuery } from '../../client/hooks/useProfileCompletionQuery.js';
+import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
+import { CheckVerified02Icon } from '../../icons/CheckVerified02Icon.js';
+import { CreditCard02Icon } from '../../icons/CreditCard02Icon.js';
+import { FaceIdIcon } from '../../icons/FaceIdIcon.js';
+import { FileCheck02Icon } from '../../icons/FileCheck02Icon.js';
+import { FileSearch02Icon } from '../../icons/FileSearch02Icon.js';
+import { FileX02Icon } from '../../icons/FileX02Icon.js';
+import { Button } from '../../ui/Button/index.js';
+export function AccountVerification(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
+    })));
+    const memberVerificationQuery = useMemberVerificationQuery();
+    const completed = memberVerificationQuery.data?.status === 'VERIFIED' ||
+        memberVerificationQuery.data?.status === 'PENDING' ||
+        memberVerificationQuery.data?.status === 'APPROVED';
+    return (_jsxs("div", { className: props.className, children: [_jsx(Header, {}), _jsxs("div", { className: "mt-5 rounded-xl border border-border-secondary bg-bg-primary-alt shadow-xs", children: [_jsx(Requirements, {}), !memberVerificationQuery.isLoading && !completed && (_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" }) }))] }), _jsx(Status, {})] }));
+}
+function Header() {
+    const query = useProfileCompletionQuery();
+    return (_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', query.data?.accountVerification
+                    ? 'text-text-success-primary'
+                    : 'text-text-warning-primary'), children: query.data?.accountVerification ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }));
+}
+function Requirements() {
+    return (_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"] })] }) }));
+}
+function Status() {
+    const query = useMemberVerificationQuery();
+    if (query.isLoading)
+        return null;
+    switch (query.data?.status) {
+        case 'PENDING':
+            return _jsx(Status__Pending, {});
+        case 'REJECTED':
+            return _jsx(Status__Failed, {});
+        case 'VERIFIED':
+        case 'APPROVED':
+            return _jsx(Status__Success, {});
+        default:
+            return _jsx(Status__Missing, {});
+    }
+}
+function Status__Missing() {
+    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 Status__Pending() {
+    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: "Your documents have been successfully submitted and are currently under review. This process may take some time. You will be notified once verification is complete." })] })] }));
+}
+function Status__Success() {
+    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 Status__Failed() {
+    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/lib/components/AccountVerification/AccountVerification.test.d.ts

@@ -0,0 +1 @@
+export {};