@opexa/portal-components 0.0.270 → 0.0.273

package/dist/client/hooks/useCamera.d.ts

@@ -12,7 +12,7 @@ export interface CameraData {
 export interface UseCameraReturn<T extends string = never> {
     open(): Promise<void>;
     close(): Promise<void>;
-    snap(): Promise<void>;
+    snap(): Promise<CameraData | null>;
     reopen(): Promise<void>;
     reset(): Promise<void>;
     data: CameraData | null;

package/dist/client/hooks/useCamera.js

@@ -115,52 +115,60 @@ export function useCamera(options = {}) {
             context.scale(-1, 1);
         }
         context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
-        canvas.toBlob(async (blob) => {
-            if (!blob) {
-                setSnapping(false);
-                return setError({
-                    name: 'CameraError',
-                    message: "'canvas.toBlob' failed to create blob",
+        return new Promise((resolve) => {
+            canvas.toBlob(async (blob) => {
+                if (!blob) {
+                    setSnapping(false);
+                    resolve(null);
+                    return setError({
+                        name: 'CameraError',
+                        message: "'canvas.toBlob' failed to create blob",
+                    });
+                }
+                const url = canvas.toDataURL('image/jpeg', 1);
+                const file = new File([blob], `${crypto.randomUUID()}.jpeg`, {
+                    type: 'image/jpeg',
+                    endings: 'native',
+                    lastModified: Date.now(),
                 });
-            }
-            const url = canvas.toDataURL('image/jpeg', 1);
-            const file = new File([blob], `${crypto.randomUUID()}.jpeg`, {
-                type: 'image/jpeg',
-                endings: 'native',
-                lastModified: Date.now(),
-            });
-            const image = new Image();
-            image.src = url;
-            image.alt = '';
-            image.width = canvas.width;
-            image.height = canvas.height;
-            if (!image.complete || image.naturalWidth === 0) {
-                await new Promise((resolve, reject) => {
-                    image.onload = () => resolve();
-                    image.onerror = () => reject();
+                const image = new Image();
+                image.src = url;
+                image.alt = '';
+                image.width = canvas.width;
+                image.height = canvas.height;
+                if (!image.complete || image.naturalWidth === 0) {
+                    await new Promise((resolve, reject) => {
+                        image.onload = () => resolve();
+                        image.onerror = () => reject();
+                    });
+                }
+                const data = {
+                    url,
+                    file,
+                    image,
+                };
+                if (!options.transform) {
+                    setData(data);
+                    setSnapping(false);
+                    resolve(data);
+                    return;
+                }
+                const transformResult = await options.transform({
+                    ...data,
+                    video,
+                    canvas,
                 });
-            }
-            const data = {
-                url,
-                file,
-                image,
-            };
-            if (!options.transform) {
-                setData(data);
+                if (transformResult.ok) {
+                    setData(transformResult.data);
+                    resolve(transformResult.data);
+                }
+                else {
+                    setError(transformResult.error);
+                    resolve(null);
+                }
                 setSnapping(false);
-                return;
-            }
-            const transformResult = await options.transform({
-                ...data,
-                video,
-                canvas,
-            });
-            if (transformResult.ok)
-                setData(transformResult.data);
-            else
-                setError(transformResult.error);
-            setSnapping(false);
-        }, 'image/jpeg', 1);
+            }, 'image/jpeg', 1);
+        });
     }, [mirror, options]);
     const reset = useCallback(() => {
         setData(null);

package/dist/client/hooks/usePxToRemConverter.d.ts

@@ -0,0 +1,2 @@
+export type PxToRemConverter = (px: number) => number;
+export declare function usePxToRemConverter(): PxToRemConverter;

package/dist/client/hooks/usePxToRemConverter.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+export function usePxToRemConverter() {
+    const [rootFontSize, setRootFontSize] = useState(16);
+    useEffect(() => {
+        const updateRootFontSize = () => {
+            const root = document.documentElement;
+            setRootFontSize(parseFloat(getComputedStyle(root).fontSize));
+        };
+        updateRootFontSize();
+        window.addEventListener('resize', updateRootFontSize);
+        return () => {
+            window.removeEventListener('resize', updateRootFontSize);
+        };
+    }, []);
+    return function convert(px) {
+        return px / rootFontSize;
+    };
+}

package/dist/client/hooks/useRect.d.ts

@@ -0,0 +1,5 @@
+import { type RefObject } from 'react';
+export interface UseRectOptions {
+    enabled?: boolean;
+}
+export declare function useRect<T extends HTMLElement>(ref: RefObject<T | null>, options?: UseRectOptions): DOMRect;

package/dist/client/hooks/useRect.js

@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+const FALLBACK_RECT = {
+    x: 0,
+    y: 0,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: 0,
+    height: 0,
+    toJSON() {
+        return {
+            x: 0,
+            y: 0,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: 0,
+            height: 0,
+        };
+    },
+};
+export function useRect(ref, options) {
+    const [rect, setRect] = useState(FALLBACK_RECT);
+    useEffect(() => {
+        if (options?.enabled === false)
+            return;
+        function updateRect() {
+            if (!ref.current)
+                return;
+            setRect(ref.current.getBoundingClientRect());
+        }
+        const observer = new ResizeObserver(updateRect);
+        if (ref.current)
+            observer.observe(ref.current);
+        requestAnimationFrame(updateRect);
+        window.addEventListener('resize', updateRect);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('resize', updateRect);
+        };
+    }, [options?.enabled, ref]);
+    return rect;
+}

package/dist/components/DepositWithdrawal/Withdrawal/GCashWithdrawal/GCashWithdrawal.js

@@ -118,7 +118,7 @@ export function GCashWithdrawal() {
                         shouldDirty: true,
                         shouldValidate: true,
                     });
-                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Transaction Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...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 })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["Upon withdrawing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
+                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Transaction Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...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 })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["Upon withdrawing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.privacyPolicyUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
                     if (!details.open) {
                         setStatus('waiting');
                     }

package/dist/components/DepositWithdrawal/Withdrawal/InstapayWithdrawal/InstapayWithdrawal.js

@@ -142,7 +142,7 @@ export function InstapayWithdrawal() {
                         shouldDirty: true,
                         shouldValidate: true,
                     });
-                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Transaction Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...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 })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["Upon withdrawing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
+                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Transaction Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...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 })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["Upon withdrawing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.privacyPolicyUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
                     if (!details.open) {
                         setStatus('waiting');
                     }

package/dist/components/DepositWithdrawal/Withdrawal/MayaAppWithdrawal/MayaAppWithdrawal.js

@@ -108,7 +108,7 @@ export function MayaAppWithdrawal() {
                         shouldDirty: true,
                         shouldValidate: true,
                     });
-                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Transaction Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...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 })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["Upon withdrawing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
+                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Transaction Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...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 })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["Upon withdrawing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.privacyPolicyUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
                     if (!details.open) {
                         setStatus('waiting');
                     }

package/dist/components/DepositWithdrawal/Withdrawal/MayaWithdrawal/MayaWithdrawal.js

@@ -118,7 +118,7 @@ export function MayaWithdrawal() {
                         shouldDirty: true,
                         shouldValidate: true,
                     });
-                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Transaction Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...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 })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["Upon withdrawing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
+                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Transaction Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...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 })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["Upon withdrawing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.privacyPolicyUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
                     if (!details.open) {
                         setStatus('waiting');
                     }

package/dist/components/DepositWithdrawal/Withdrawal/PisoPayWithdrawal/PisoPayWithdrawal.js

@@ -142,7 +142,7 @@ export function PisoPayWithdrawal() {
                         shouldDirty: true,
                         shouldValidate: true,
                     });
-                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Transaction Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...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 })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["Upon withdrawing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
+                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Transaction Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...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 })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["Upon withdrawing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.privacyPolicyUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
                     if (!details.open) {
                         setStatus('waiting');
                     }

package/dist/components/DepositWithdrawal/Withdrawal/VentajaWithdrawal/VentajaWithdrawal.js

@@ -142,7 +142,7 @@ export function VentajaWithdrawal() {
                         shouldDirty: true,
                         shouldValidate: true,
                     });
-                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Transaction Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...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 })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["Upon withdrawing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
+                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Transaction Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...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 })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["Upon withdrawing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.privacyPolicyUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
                     if (!details.open) {
                         setStatus('waiting');
                     }

package/dist/components/SignUp/SignUpKYC/IdFrontImageField/IdFrontImageField.client.d.ts

@@ -0,0 +1,15 @@
+import { type CSSProperties, type RefObject } from 'react';
+import { type ValidateFileError } from '../../../../utils/validateFile';
+import { type UseIdFrontImageFieldProps } from './useIdFrontImageField';
+export interface IdFrontImageFieldProps extends UseIdFrontImageFieldProps {
+    ref?: RefObject<HTMLDivElement | null>;
+    id?: string;
+    style?: CSSProperties;
+    className?: string;
+    invalid?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    onError?: (error: ValidateFileError) => void;
+}
+export declare function IdFrontImageField__client(props: IdFrontImageFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SignUp/SignUpKYC/IdFrontImageField/IdFrontImageField.client.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { useRef } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { usePxToRemConverter } from '../../../../client/hooks/usePxToRemConverter.js';
+import { useRect } from '../../../../client/hooks/useRect.js';
+import { Camera01Icon } from '../../../../icons/Camera01Icon.js';
+import { CameraOffIcon } from '../../../../icons/CameraOffIcon.js';
+import { CheckCircleIcon } from '../../../../icons/CheckCircleIcon.js';
+import { RefreshCcw01Icon } from '../../../../icons/RefreshCcw01Icon.js';
+import { Spinner02Icon } from '../../../../icons/Spinner02Icon.js';
+import { UploadCloud02Icon } from '../../../../icons/UploadCloud02Icon.js';
+import { XIcon } from '../../../../icons/XIcon.js';
+import { Button } from '../../../../ui/Button/index.js';
+import { Dialog } from '../../../../ui/Dialog/index.js';
+import { Portal } from '../../../../ui/Portal/index.js';
+import { createSplitProps } from '../../../../utils/createSplitProps.js';
+import { validateFile, } from '../../../../utils/validateFile.js';
+import { IdFrontImageFieldProvider, useIdFrontImageFieldContext, } from './IdFrontImageFieldContext.js';
+import { useIdFrontImageField, } from './useIdFrontImageField.js';
+export function IdFrontImageField__client(props) {
+    const [useIdFrontImageFieldProps, localProps] = createSplitProps([
+        'value',
+        'onChange',
+        'defaultValue',
+    ])(props);
+    const context = useIdFrontImageField(useIdFrontImageFieldProps);
+    return (_jsxs(IdFrontImageFieldProvider, { value: context, children: [_jsxs("div", { ref: localProps.ref, id: localProps.id, style: localProps.style, className: twMerge('border-border-primary bg-bg-primary group relative aspect-[352/180] w-full shrink-0 rounded-xl border p-xl', localProps.className), onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => e.preventDefault(), onDragLeave: (e) => e.preventDefault(), onDrop: (e) => {
+                    e.preventDefault();
+                    const file = e.dataTransfer.files?.[0];
+                    if (!file)
+                        return;
+                    const error = validateFile(file);
+                    if (error)
+                        return localProps.onError?.(error);
+                    context.setValue(file);
+                }, "aria-describedby": context.field?.ariaDescribedby, children: [_jsx("input", { id: context.field?.ids?.control, ref: context.inputRef, type: "file", accept: "image/png, image/jpeg", onChange: (e) => {
+                            const file = e.target.files?.[0];
+                            if (!file)
+                                return;
+                            const error = validateFile(file);
+                            if (error)
+                                return localProps.onError?.(error);
+                            context.setValue(file);
+                        }, disabled: context.field?.disabled || localProps.disabled, readOnly: context.field?.readOnly || localProps.readOnly, required: context.field?.required || localProps.required, className: "sr-only" }), !context.value && (_jsxs("div", { className: "flex size-full flex-col justify-center", children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: _jsx(UploadCloud02Icon, { className: "text-text-placeholder-subtle size-4" }) }), _jsxs("h2", { className: "text-text-tertiary-600 mt-lg", children: [_jsxs("span", { className: "block text-center text-sm", children: [_jsx("button", { type: "button", onClick: () => {
+                                                    context.inputRef.current?.click();
+                                                }, disabled: context.field?.disabled ||
+                                                    context.field?.readOnly ||
+                                                    localProps.disabled ||
+                                                    localProps.readOnly, className: "text-button-secondary-fg font-semibold disabled:opacity-60", children: "Click to upload" }), ' ', "or drag and drop"] }), _jsx("span", { className: "mt-xs block text-center text-xs", children: "PNG, JPG or JPEG (max. 10mb)" }), _jsx("span", { className: "m-txs block text-center text-xs", children: "or" })] }), _jsx(Button, { size: "sm", variant: "outline", className: "mx-auto mt-md w-auto", onClick: () => {
+                                    context.disclosure.setOpen(true);
+                                }, disabled: context.field?.disabled ||
+                                    context.field?.readOnly ||
+                                    localProps.disabled ||
+                                    localProps.readOnly, children: "Take a photo" })] })), context.valueAsUrl && (_jsxs("div", { className: "relative", children: [_jsx(Image, { src: context.valueAsUrl, alt: "", width: 600, height: 378.08, unoptimized: true, className: "h-auto w-full rounded-md" }), _jsx("button", { type: "button", className: "backdrop-blur-xs absolute right-2 top-2 rounded-full bg-white/10 p-1", onClick: () => {
+                                    context.setValue(null);
+                                }, children: _jsx(XIcon, { className: "size-5" }) })] }))] }), _jsx(Camera, {})] }));
+}
+/**
+ * -------------------------------------
+ *  Camera
+ * -------------------------------------
+ */
+function Camera() {
+    const context = useIdFrontImageFieldContext();
+    return (_jsx(Dialog.Root, { open: context.disclosure.open, onOpenChange: (details) => {
+            context.disclosure.setOpen(details.open);
+        }, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: context.camera.close, children: _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 overflow-y-auto py-4", children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto w-[calc(100dvw-1rem)] max-w-[calc(100dvw-1rem)] overflow-y-auto rounded-lg px-4 py-5 lg:w-[747px] lg:max-w-[747px] lg:px-3xl lg:py-4xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Dialog.Title, { className: "text-center font-semibold lg:text-xl", children: "Take a Picture of Your Front ID" }), _jsxs(Dialog.Description, { className: "text-text-tertiary-600 mt-md text-center text-xs lg:text-base", children: ["Make sure your ID is clearly visible, well-lit, and not blurry.", ' ', _jsx("br", { className: "hidden lg:block" }), "Avoid glare or reflections, and ensure all corners are within\u00A0the\u00A0frame."] }), _jsxs("div", { className: "relative mt-5 lg:mt-10 lg:px-3xl", children: [_jsx(Video, {}), context.camera.error && (_jsxs("div", { className: "border-border-disabled flex aspect-[4/3] flex-col items-center justify-center rounded-md border bg-black px-4 lg:aspect-video", children: [_jsx(CameraOffIcon, { className: "text-text-placeholder-subtle size-10 text-center lg:size-12" }), _jsx("h2", { className: "mt-3 text-sm font-semibold lg:mt-4 lg:text-base", children: context.camera.error.name }), _jsx("p", { className: "text-text-tertiary-600 mt-0.5 text-center text-xs lg:mt-1 lg:text-sm", children: context.camera.error.message }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fullWidth: false, className: "mt-4 lg:mt-5", onClick: () => {
+                                                    context.camera.reopen();
+                                                }, children: "Try again" })] })), context.camera.loading && (_jsx("div", { className: "border-border-disabled flex aspect-[4/3] flex-col items-center justify-center rounded-md border bg-black px-4 lg:aspect-video", children: _jsx(Spinner02Icon, { className: "text-text-placeholder size-8" }) })), context.camera.data && (_jsx("div", { className: "border-border-disabled aspect-[4/3] w-full overflow-hidden rounded-md border bg-black lg:aspect-video", children: _jsx(Image, { src: context.camera.data.url, alt: "", width: 600, height: 378.08, unoptimized: true, className: "mx-auto mt-2 block h-[calc(100%-1rem)] w-auto" }) }))] }), !context.camera.data && (_jsx("div", { className: "mt-5 lg:mt-10", children: _jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto w-full px-xl py-lg lg:w-[10rem]", onClick: () => {
+                                        context.camera.snap();
+                                    }, disabled: context.camera.snapping ||
+                                        context.camera.loading ||
+                                        !!context.camera.error, children: [context.camera.snapping ? (_jsx(Spinner02Icon, { className: "size-5" })) : (_jsx(Camera01Icon, { className: "size-5" })), "Capture"] }) })), context.camera.data && (_jsxs("div", { className: "mt-5 flex gap-3 lg:mt-10 lg:justify-center", children: [_jsxs(Button, { onClick: () => {
+                                            const file = context.camera.data?.file;
+                                            if (!file)
+                                                return;
+                                            context.setValue(file);
+                                            context.disclosure.setOpen(false);
+                                        }, className: "w-full lg:w-[10rem]", children: [_jsx(CheckCircleIcon, { className: "size-5" }), "Use Photo"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
+                                            context.camera.reset();
+                                        }, className: "w-full lg:w-[10rem]", children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) }));
+}
+/**
+ * -------------------------------------
+ *  Video
+ * -------------------------------------
+ */
+function Video() {
+    const context = useIdFrontImageFieldContext();
+    const pxToRem = usePxToRemConverter();
+    const rootRef = useRef(null);
+    const rootRect = useRect(rootRef);
+    const guideRect = useRect(context.guideRef);
+    const x = (rootRect.width - guideRect.width) / 2;
+    const y = (rootRect.height - guideRect.height) / 2;
+    return (_jsxs("div", { ref: rootRef, className: twMerge('relative h-auto w-full overflow-hidden', !context.camera.data && !context.camera.error && !context.camera.loading
+            ? 'block'
+            : 'hidden'), children: [_jsx("video", { ...context.camera.videoProps }), _jsx("div", { className: "pointer-events-none absolute left-0 right-0 top-0 z-20 bg-black/60 backdrop-blur-sm", style: { height: `${pxToRem(y)}rem` } }), _jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 z-20 bg-black/60 backdrop-blur-sm", style: { height: `${pxToRem(y)}rem` } }), _jsx("div", { className: "pointer-events-none absolute left-0 z-20 bg-black/60 backdrop-blur-sm", style: { top: y, bottom: y, width: `${pxToRem(x)}rem` } }), _jsx("div", { className: "pointer-events-none absolute right-0 z-20 bg-black/60 backdrop-blur-sm", style: { top: y, bottom: y, width: `${pxToRem(x)}rem` } }), _jsx("div", { ref: context.guideRef, className: "border-utility-warning-700 pointer-events-none absolute left-1/2 top-1/2 z-10 aspect-[85.6/53.98] w-[calc(100%-1rem)] max-w-[24.688rem] -translate-x-1/2 -translate-y-1/2 border-4 border-dashed transition-all duration-200" })] }));
+}

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

@@ -0,0 +1,2 @@
+import type { IdFrontImageFieldProps } from './IdFrontImageField.client';
+export declare function IdFrontImageField(props: IdFrontImageFieldProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
+import { Spinner02Icon } from '../../../../icons/Spinner02Icon.js';
+const Component = dynamic(() => import('./IdFrontImageField.client.js').then((mod) => mod.IdFrontImageField__client), {
+    ssr: false,
+    loading: () => (_jsx("div", { className: "border-border-primary bg-bg-primary flex aspect-[352/180] w-full shrink-0 items-center justify-center rounded-xl border", children: _jsx(Spinner02Icon, { className: "text-text-quinary size-8" }) })),
+});
+export function IdFrontImageField(props) {
+    return _jsx(Component, { ...props });
+}

package/dist/components/SignUp/SignUpKYC/IdFrontImageField/IdFrontImageFieldContext.d.ts

@@ -0,0 +1,6 @@
+import type { UseIdFrontImageFieldReturn } from './useIdFrontImageField';
+export declare const IdFrontImageFieldProvider: (props: {
+    value: UseIdFrontImageFieldReturn;
+} & {
+    children?: import("react").ReactNode | undefined;
+}) => React.ReactNode, useIdFrontImageFieldContext: () => UseIdFrontImageFieldReturn;

package/dist/components/SignUp/SignUpKYC/IdFrontImageField/IdFrontImageFieldContext.js

@@ -0,0 +1,2 @@
+import { createContext } from '../../../../client/utils/createContext.js';
+export const [IdFrontImageFieldProvider, useIdFrontImageFieldContext] = createContext();

package/dist/components/SignUp/SignUpKYC/IdFrontImageField/index.d.ts

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

package/dist/components/SignUp/SignUpKYC/IdFrontImageField/index.js

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

package/dist/components/SignUp/SignUpKYC/IdFrontImageField/useIdFrontImageField.d.ts

@@ -0,0 +1,18 @@
+export interface UseIdFrontImageFieldProps {
+    value?: File | null;
+    onChange?: (value: File | null) => void;
+    defaultValue?: File | null;
+}
+export interface UseIdFrontImageFieldReturn extends ReturnType<typeof useIdFrontImageField> {
+}
+export declare function useIdFrontImageField(props: UseIdFrontImageFieldProps): {
+    field: import("@ark-ui/react").UseFieldContext;
+    value: File | null;
+    valueAsUrl: string | null;
+    setValue: import("react").Dispatch<import("react").SetStateAction<File | null>>;
+    camera: import("../../../../client/hooks/useCamera").UseCameraReturn<never>;
+    disclosure: import("../../../../client/hooks/useDisclosure").UseDisclosureReturn;
+    inputRef: import("react").RefObject<HTMLInputElement | null>;
+    guideRef: import("react").RefObject<HTMLDivElement | null>;
+    maskRef: import("react").RefObject<HTMLDivElement | null>;
+};

package/dist/components/SignUp/SignUpKYC/IdFrontImageField/useIdFrontImageField.js

@@ -0,0 +1,88 @@
+import { useFieldContext } from '@ark-ui/react';
+import { useRef } from 'react';
+import invariant from 'tiny-invariant';
+import { useMediaQuery } from 'usehooks-ts';
+import { useCamera } from '../../../../client/hooks/useCamera.js';
+import { useControllableState } from '../../../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../../../client/hooks/useDisclosure.js';
+export function useIdFrontImageField(props) {
+    const field = useFieldContext();
+    const [value, setValue] = useControllableState({
+        value: props.value,
+        defaultValue: props.defaultValue ?? null,
+        onChange: props.onChange,
+    });
+    const valueAsUrl = value ? URL.createObjectURL(value) : null;
+    const inputRef = useRef(null);
+    const maskRef = useRef(null);
+    const guideRef = useRef(null);
+    const desktop = useMediaQuery('(min-width: 1024px)');
+    const camera = useCamera({
+        video: {
+            facingMode: desktop ? 'user' : 'environment',
+        },
+        async transform(data) {
+            const guideRect = guideRef.current?.getBoundingClientRect();
+            const videoRect = data.video.getBoundingClientRect();
+            invariant(guideRect, "'guideRef.getBoundingClientRect()' fails");
+            const scaleX = data.image.width / videoRect.width;
+            const scaleY = data.image.height / videoRect.height;
+            const cropTop = (guideRect.top - videoRect.top) * scaleY;
+            const cropLeft = (guideRect.left - videoRect.left) * scaleX;
+            const cropWidth = guideRect.width * scaleX;
+            const cropHeight = guideRect.height * scaleY;
+            const targetWidth = 1200;
+            const targetHeight = 757;
+            const canvas = document.createElement('canvas');
+            const context = canvas.getContext('2d');
+            invariant(context, "'canvas.getContext' failed");
+            canvas.width = targetWidth;
+            canvas.height = targetHeight;
+            context.imageSmoothingEnabled = true;
+            context.imageSmoothingQuality = 'high';
+            context.filter = 'brightness(1.05) contrast(1.1) saturate(1.1)';
+            context.drawImage(data.image, cropLeft, cropTop, cropWidth, cropHeight, 0, 0, targetWidth, targetHeight);
+            const file = await new Promise((resolve) => canvas.toBlob((blob) => {
+                invariant(blob);
+                resolve(new File([blob], `front-image-${Date.now()}.jpeg`, {
+                    type: 'image/jpeg',
+                    endings: 'native',
+                    lastModified: Date.now(),
+                }));
+            }, 'image/jpeg', 1.0));
+            const url = URL.createObjectURL(file);
+            const image = new Image();
+            image.src = url;
+            image.alt = '';
+            image.width = targetWidth;
+            image.height = targetHeight;
+            context.filter = 'brightness(1.05)';
+            return {
+                ok: true,
+                data: {
+                    url,
+                    file,
+                    image,
+                },
+            };
+        },
+    });
+    const disclosure = useDisclosure({
+        onOpenChange(open) {
+            if (open) {
+                camera.open();
+            }
+        },
+    });
+    return {
+        field,
+        value,
+        valueAsUrl,
+        setValue,
+        camera,
+        disclosure,
+        inputRef,
+        guideRef,
+        maskRef,
+    };
+}

package/dist/components/SignUp/SignUpKYC/SelfieImageField/SelfieImageField.client.d.ts

@@ -0,0 +1,15 @@
+import { type CSSProperties, type RefObject } from 'react';
+import { type ValidateFileError } from '../../../../utils/validateFile';
+import { type UseSelfieImageFieldProps } from './useSelfieImageField';
+export interface SelfieImageFieldProps extends UseSelfieImageFieldProps {
+    ref?: RefObject<HTMLDivElement | null>;
+    id?: string;
+    style?: CSSProperties;
+    className?: string;
+    invalid?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    onError?: (error: ValidateFileError<'FaceNotFoundError'>) => void;
+}
+export declare function SelfieImageField__client(props: SelfieImageFieldProps): import("react/jsx-runtime").JSX.Element;