@opexa/portal-components 0.0.932 → 0.0.933

package/dist/components/shared/IdDocumentField.client.js

@@ -1,204 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useFieldContext } from '@ark-ui/react';
-import Image from 'next/image';
-import { useEffect, useId, useRef, useState, } from 'react';
-import { twMerge } from 'tailwind-merge';
-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';
-import { useFileQuery } from '../../client/hooks/useFileQuery.js';
-import { useUploadImageFileMutation } from '../../client/hooks/useUploadImageFileMutation.js';
-import { createContext } from '../../client/utils/createContext.js';
-import { toaster } from '../../client/utils/toaster.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 { validateFile } from '../../utils/validateFile.js';
-export function IdDocumentField__client(props) {
-    const context = useIdDocumentField(props);
-    return (_jsxs(IdDocumentFieldProvider, { value: context, children: [_jsxs("div", { ref: props.ref, id: props.id, style: props.style, className: twMerge('border-border-primary bg-bg-primary group relative aspect-[352/180] w-full shrink-0 rounded-xl border p-xl', props.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 props.onError?.(error);
-                    context.mutation.mutate({ 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 props.onError?.(error);
-                            context.mutation.mutate({ file });
-                        }, disabled: context.field?.disabled ||
-                            context.query.isLoading ||
-                            context.mutation.isPending ||
-                            props.disabled, readOnly: context.field?.readOnly || props.readOnly, required: context.field?.required || props.required, className: "sr-only" }), !context.query.data?.url && (_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 ||
-                                                    context.query.isLoading ||
-                                                    context.mutation.isPending ||
-                                                    props.disabled ||
-                                                    props.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 ||
-                                    context.query.isLoading ||
-                                    context.mutation.isPending ||
-                                    props.disabled ||
-                                    props.readOnly, children: "Take a photo" })] })), context.query.data?.url && (_jsxs("div", { className: "relative", children: [_jsx(Image, { src: context.query.data.url, 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('');
-                                }, children: _jsx(XIcon, { className: "size-5" }) })] }))] }), _jsx(Camera, {})] }));
-}
-/**
- * -------------------------------------
- *  Camera
- * -------------------------------------
- */
-function Camera() {
-    const context = useIdDocumentFieldContext();
-    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({
-                                            crop: context.guideRef.current?.getBoundingClientRect(),
-                                        });
-                                    }, 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.mutation.mutate({ 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 id = useId();
-    const context = useIdDocumentFieldContext();
-    const [maskBox, setMaskBox] = useState({
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0,
-    });
-    useEffect(() => {
-        const update = () => {
-            const guide = context.guideRef.current;
-            const mask = context.maskRef.current;
-            if (!guide || !mask)
-                return;
-            const guideRect = guide.getBoundingClientRect();
-            const maskRect = mask.getBoundingClientRect();
-            const x = guideRect.left - maskRect.left;
-            const y = guideRect.top - maskRect.top;
-            const width = guideRect.width;
-            const height = guideRect.height;
-            if (width && height) {
-                setMaskBox({
-                    x,
-                    y,
-                    width,
-                    height,
-                });
-            }
-        };
-        const observer = new ResizeObserver(update);
-        if (context.guideRef.current)
-            observer.observe(context.guideRef.current);
-        if (context.maskRef.current)
-            observer.observe(context.maskRef.current);
-        requestAnimationFrame(update);
-        return () => observer.disconnect();
-    }, [context.guideRef, context.maskRef]);
-    return (_jsxs("div", { 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("svg", { className: "pointer-events-none absolute -inset-4 size-[200%]", children: _jsx("defs", { children: _jsxs("mask", { id: id, maskUnits: "userSpaceOnUse", children: [_jsx("rect", { x: "0", y: "0", width: "200%", height: "200%", fill: "white" }), _jsx("rect", { x: maskBox.x, y: maskBox.y, width: maskBox.width, height: maskBox.height, fill: "black", rx: "8", ry: "8" })] }) }) }), _jsx("div", { ref: context.maskRef, className: "absolute -inset-4 size-[200%] bg-black/60 backdrop-blur-sm", style: {
-                    mask: `url(#${id})`,
-                    WebkitMask: `url(#${id})`,
-                    maskRepeat: 'no-repeat',
-                    WebkitMaskRepeat: 'no-repeat',
-                } }), _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 rounded-md border-2 border-dashed transition-all duration-200" })] }));
-}
-function useIdDocumentField(props) {
-    const field = useFieldContext();
-    const [value, setValue] = useControllableState({
-        value: props.value,
-        defaultValue: props.defaultValue ?? '',
-        onChange: props.onChange,
-    });
-    const query = useFileQuery(value, {
-        refetchInterval({ state }) {
-            return !state.data || state.data.status === 'UPLOADING' ? 1000 : false;
-        },
-    });
-    const mutation = useUploadImageFileMutation({
-        onSuccess(id) {
-            setValue(id);
-        },
-        onMutate() {
-            setValue('');
-        },
-        onError(error) {
-            toaster.error({
-                title: 'Upload Failed',
-                description: error.message,
-            });
-        },
-        onSettled() {
-            if (inputRef.current) {
-                inputRef.current.value = '';
-            }
-        },
-    });
-    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',
-        },
-    });
-    const disclosure = useDisclosure({
-        onOpenChange(open) {
-            if (open) {
-                camera.open();
-            }
-        },
-    });
-    return {
-        field,
-        value,
-        setValue,
-        query,
-        mutation,
-        camera,
-        disclosure,
-        inputRef,
-        guideRef,
-        maskRef,
-    };
-}
-const [IdDocumentFieldProvider, useIdDocumentFieldContext] = createContext();

package/dist/components/shared/IdDocumentField.d.ts

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

package/dist/components/shared/IdDocumentField.js

@@ -1,11 +0,0 @@
-'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('./IdDocumentField.client.js').then((mod) => mod.IdDocumentField__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 IdDocumentField(props) {
-    return _jsx(Component, { ...props });
-}

package/dist/components/shared/SelfieField.client.d.ts

@@ -1,20 +0,0 @@
-import { type CSSProperties, type RefObject } from 'react';
-import { type ValidateFileError } from '../../utils/validateFile';
-export interface SelfieFieldProps extends UseSelfieFieldProps {
-    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 SelfieField__client(props: SelfieFieldProps): import("react/jsx-runtime").JSX.Element;
-interface UseSelfieFieldProps {
-    value?: string;
-    onChange?: (value: string) => void;
-    defaultValue?: string;
-}
-export {};

package/dist/components/shared/SelfieField.client.js

@@ -1,327 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useFieldContext } from '@ark-ui/react';
-import { FaceDetector, FilesetResolver } from '@mediapipe/tasks-vision';
-import Image from 'next/image';
-import { useEffect, useId, useRef, useState, } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { useInterval } from 'usehooks-ts';
-import { useCamera } from '../../client/hooks/useCamera.js';
-import { useControllableState } from '../../client/hooks/useControllableState.js';
-import { useDisclosure } from '../../client/hooks/useDisclosure.js';
-import { useFileQuery } from '../../client/hooks/useFileQuery.js';
-import { useUploadImageFileMutation } from '../../client/hooks/useUploadImageFileMutation.js';
-import { createContext } from '../../client/utils/createContext.js';
-import { toaster } from '../../client/utils/toaster.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 { validateFile } from '../../utils/validateFile.js';
-export function SelfieField__client(props) {
-    const context = useSelfieField(props);
-    return (_jsxs(SelfieFieldProvider, { value: context, children: [_jsxs("div", { ref: props.ref, id: props.id, style: props.style, className: twMerge('group', 'border', 'border-border-primary', 'bg-bg-primary', 'relative', 'w-full', 'aspect-[352/180]', 'shrink-0', 'rounded-xl', 'p-xl', props.className), onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => e.preventDefault(), onDragLeave: (e) => e.preventDefault(), onDrop: async (e) => {
-                    e.preventDefault();
-                    const file = e.dataTransfer.files?.[0];
-                    if (!file)
-                        return;
-                    const error = validateFile(file);
-                    if (error)
-                        return props.onError?.(error);
-                    context.mutation.mutate({ 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: async (e) => {
-                            const file = e.target.files?.[0];
-                            if (!file)
-                                return;
-                            const error = validateFile(file);
-                            if (error)
-                                return props.onError?.(error);
-                            context.mutation.mutate({ file });
-                        }, disabled: context.field?.disabled ||
-                            context.query.isLoading ||
-                            context.mutation.isPending ||
-                            props.disabled, readOnly: context.field?.readOnly || props.readOnly, required: context.field?.required || props.required, className: "sr-only" }), !context.query.data?.url && (_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 ||
-                                                    context.query.isLoading ||
-                                                    context.mutation.isPending ||
-                                                    props.disabled ||
-                                                    props.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 ||
-                                    context.query.isLoading ||
-                                    context.mutation.isPending ||
-                                    props.disabled ||
-                                    props.readOnly, children: "Take a photo" })] })), context.query.data?.url && (_jsxs("div", { className: "relative", children: [_jsx(Image, { src: context.query.data.url, alt: "", width: 600, height: 600, 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('');
-                                }, children: _jsx(XIcon, { className: "size-5" }) })] }))] }), _jsx(Camera, {})] }));
-}
-/**
- * -------------------------------------
- *  Camera
- * -------------------------------------
- */
-function Camera() {
-    const context = useSelfieFieldContext();
-    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 Selfie Holding Your ID" }), _jsx(Dialog.Description, { className: "text-text-tertiary-600 mt-md text-center text-xs lg:text-base", children: "Make sure your face and ID are clearly visible, with no glare\u00A0or\u00A0blur." }), _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: 600, 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({
-                                            crop: context.guideRef.current?.getBoundingClientRect(),
-                                        });
-                                    }, disabled: !context.faceFound ||
-                                        context.camera.loading ||
-                                        context.camera.snapping ||
-                                        !!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.mutation.mutate({ 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 id = useId();
-    const context = useSelfieFieldContext();
-    const [maskBox, setMaskBox] = useState({
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0,
-    });
-    useEffect(() => {
-        const update = () => {
-            const guide = context.guideRef.current;
-            const mask = context.maskRef.current;
-            if (!guide || !mask)
-                return;
-            const guideRect = guide.getBoundingClientRect();
-            const maskRect = mask.getBoundingClientRect();
-            const x = guideRect.left - maskRect.left;
-            const y = guideRect.top - maskRect.top;
-            const width = guideRect.width;
-            const height = guideRect.height;
-            if (width && height) {
-                setMaskBox({
-                    x,
-                    y,
-                    width,
-                    height,
-                });
-            }
-        };
-        const observer = new ResizeObserver(update);
-        if (context.guideRef.current)
-            observer.observe(context.guideRef.current);
-        if (context.maskRef.current)
-            observer.observe(context.maskRef.current);
-        requestAnimationFrame(update);
-        return () => observer.disconnect();
-    }, [context.guideRef, context.maskRef]);
-    const [videoSize, setVideoSize] = useState({
-        width: 0,
-        height: 0,
-    });
-    useEffect(() => {
-        const video = context.camera.videoRef.current;
-        if (!video)
-            return;
-        const updateVideoWidth = () => {
-            const rect = video.getBoundingClientRect();
-            setVideoSize({
-                width: rect.width,
-                height: rect.height,
-            });
-        };
-        video.addEventListener('loadedmetadata', updateVideoWidth);
-        video.addEventListener('resize', updateVideoWidth);
-        return () => {
-            video.removeEventListener('loadedmetadata', updateVideoWidth);
-            video.removeEventListener('resize', updateVideoWidth);
-        };
-    }, [context.camera.videoRef]);
-    const guideWidth = videoSize.width <= 0 || videoSize.height <= 0
-        ? 0
-        : videoSize.width > videoSize.height
-            ? videoSize.height
-            : videoSize.width;
-    return (_jsxs("div", { 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("svg", { className: "pointer-events-none absolute -inset-4 size-[200%]", children: _jsx("defs", { children: _jsxs("mask", { id: id, maskUnits: "userSpaceOnUse", children: [_jsx("rect", { x: "0", y: "0", width: "200%", height: "200%", fill: "white" }), _jsx("rect", { x: maskBox.x, y: maskBox.y, width: maskBox.width, height: maskBox.height, fill: "black", rx: "8", ry: "8" })] }) }) }), _jsx("div", { ref: context.maskRef, className: "absolute -inset-4 size-[200%] bg-black/60 backdrop-blur-sm", style: {
-                    mask: `url(#${id})`,
-                    WebkitMask: `url(#${id})`,
-                    maskRepeat: 'no-repeat',
-                    WebkitMaskRepeat: 'no-repeat',
-                } }), _jsx("div", { ref: context.guideRef, className: twMerge('border-utility-warning-700 absolute left-1/2 top-1/2 z-20 aspect-square -translate-x-1/2 -translate-y-1/2 rounded-md border-2 border-dashed', context.faceFound && 'border-utility-success-700', guideWidth <= 0 ? 'hidden' : 'block'), style: {
-                    width: `calc(${guideWidth}px - 2rem)`,
-                } })] }));
-}
-function useSelfieField(props) {
-    const field = useFieldContext();
-    const [value, setValue] = useControllableState({
-        value: props.value,
-        defaultValue: props.defaultValue ?? '',
-        onChange: props.onChange,
-    });
-    const query = useFileQuery(value, {
-        refetchInterval({ state }) {
-            return !state.data || state.data.status === 'UPLOADING' ? 1000 : false;
-        },
-    });
-    const mutation = useUploadImageFileMutation({
-        onSuccess(id) {
-            setValue(id);
-        },
-        onMutate() {
-            setValue('');
-        },
-        onError(error) {
-            toaster.error({
-                title: 'Upload Failed',
-                description: error.message,
-            });
-        },
-        onSettled() {
-            if (inputRef.current) {
-                inputRef.current.value = '';
-            }
-        },
-    });
-    const inputRef = useRef(null);
-    const maskRef = useRef(null);
-    const guideRef = useRef(null);
-    const camera = useCamera({
-        async validate(data) {
-            /*
-             * 💁‍♂️
-             * Check if we still have the face.
-             * User could have moved away from the camera
-             */
-            const ok = await validateFaceFromImage(data.image);
-            if (!ok) {
-                return {
-                    name: 'FaceNotFoundError',
-                    message: 'Please ensure your face is clearly visible in the photo.',
-                };
-            }
-        },
-    });
-    const disclosure = useDisclosure({
-        onOpenChange(open) {
-            if (open) {
-                camera.open();
-            }
-        },
-    });
-    const [faceFound, setFaceFound] = useState(false);
-    useInterval(async () => {
-        if (!camera.videoRef.current || !guideRef.current) {
-            return setFaceFound(false);
-        }
-        setFaceFound(await validateFace(camera.videoRef.current, guideRef.current));
-    }, disclosure.open && !camera.data && !camera.error && !camera.loading
-        ? 1000
-        : null);
-    return {
-        field,
-        value,
-        setValue,
-        query,
-        mutation,
-        camera,
-        disclosure,
-        inputRef,
-        guideRef,
-        maskRef,
-        faceFound,
-    };
-}
-const [SelfieFieldProvider, useSelfieFieldContext] = createContext();
-/*
- * -------------------------------------
- *  Utils
- * -------------------------------------
- */
-let __video_detector__;
-let __image_detector__;
-async function getDetector(mode) {
-    if (mode === 'VIDEO' && __video_detector__)
-        return __video_detector__;
-    if (mode === 'IMAGE' && __image_detector__)
-        return __image_detector__;
-    const vision = await FilesetResolver.forVisionTasks('https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm');
-    if (mode === 'VIDEO') {
-        __video_detector__ = await FaceDetector.createFromOptions(vision, {
-            baseOptions: {
-                modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/face_detector/blaze_face_short_range/float16/1/blaze_face_short_range.tflite',
-                delegate: 'GPU',
-            },
-            runningMode: 'VIDEO',
-        });
-        return __video_detector__;
-    }
-    else {
-        __image_detector__ = await FaceDetector.createFromOptions(vision, {
-            baseOptions: {
-                modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/face_detector/blaze_face_short_range/float16/1/blaze_face_short_range.tflite',
-                delegate: 'GPU',
-            },
-            runningMode: 'IMAGE',
-        });
-        return __image_detector__;
-    }
-}
-async function validateFace(video, guide) {
-    if (video.readyState < 2)
-        return false;
-    const detector = await getDetector('VIDEO');
-    const result = detector.detectForVideo(video, performance.now());
-    const detection = result.detections.at(0);
-    if (!detection)
-        return false;
-    const category = detection.categories.at(0);
-    if (!category || category.score < 0.75)
-        return false;
-    const videoRect = video.getBoundingClientRect(); // DOM position & size
-    const guideRect = guide.getBoundingClientRect();
-    if (!detection.boundingBox)
-        return false;
-    const faceLeft = videoRect.left +
-        (detection.boundingBox.originX / video.videoWidth) * videoRect.width;
-    const faceTop = videoRect.top +
-        (detection.boundingBox.originY / video.videoHeight) * videoRect.height;
-    const faceRight = faceLeft +
-        (detection.boundingBox.width / video.videoWidth) * videoRect.width;
-    const faceBottom = faceTop +
-        (detection.boundingBox.height / video.videoHeight) * videoRect.height;
-    const isInside = faceLeft >= guideRect.left &&
-        faceTop >= guideRect.top &&
-        faceRight <= guideRect.right &&
-        faceBottom <= guideRect.bottom;
-    return isInside;
-}
-async function validateFaceFromImage(image) {
-    const detector = await getDetector('IMAGE');
-    const result = detector.detect(image);
-    const detection = result.detections.at(0);
-    if (!detection)
-        return false;
-    const category = detection.categories.at(0);
-    return !category || category.score < 0.75 ? false : true;
-}

package/dist/components/shared/SelfieField.d.ts

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

package/dist/components/shared/SelfieField.js

@@ -1,11 +0,0 @@
-'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('./SelfieField.client.js').then((mod) => mod.SelfieField__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 SelfieField(props) {
-    return _jsx(Component, { ...props });
-}

package/dist/constants/BranchCode.d.ts

@@ -1,4 +0,0 @@
-export declare const BRANCH_CODES: {
-    code: string;
-    name: string;
-}[];

package/dist/constants/BranchCode.js

@@ -1,42 +0,0 @@
-export const BRANCH_CODES = [
-    {
-        code: 'BRCAL',
-        name: 'Bingo Republic 2nd floor Primark Center Deparo St., Caloocan City',
-    },
-    {
-        code: 'BRNAG',
-        name: 'Bingo Republic 3rd floor Robinsons Mall, Naga City, Camarines Sur',
-    },
-    {
-        code: 'BRANT',
-        name: 'Bingo Republic 2nd floor Robinsons Mall, San Vicente,Antique',
-    },
-    {
-        code: 'BRCLA',
-        name: 'Clark',
-    },
-    {
-        code: 'BRLAG',
-        name: 'Laguna',
-    },
-    {
-        code: 'BREAS',
-        name: 'Eastwood City, Quezon City',
-    },
-    {
-        code: 'BRMAR',
-        name: 'Bingo ng Bayan 4th floor Marikina Public Market, Marikina City',
-    },
-    {
-        code: 'BRILO',
-        name: 'Iloilo',
-    },
-    {
-        code: 'BRFIM',
-        name: 'Fisher Mall,Quezon City',
-    },
-    {
-        code: 'BRCAC',
-        name: 'Villa Caceres Hotel, Naga City,Camsur',
-    },
-];

package/dist/constants/Branches.d.ts

@@ -1,2 +0,0 @@
-import type { Branch } from '../types';
-export declare const BRANCHES: Branch[];