@opexa/portal-components 0.0.899 → 0.0.900

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__next/useQRPHDeposit.d.ts

@@ -1,13 +0,0 @@
-import type { Deposit } from '../../../../types';
-export type UseQRPHDepositReturn = ReturnType<typeof useQRPHDeposit>;
-export interface GenerateQRCodeInput {
-    amount: string;
-    promo?: string | null;
-}
-export declare function useQRPHDeposit(): {
-    status: "idle" | "confirmed" | "failed" | "generating-qr-code" | "qr-code-generated";
-    deposit: Deposit | null;
-    generateQRCode: (input: GenerateQRCodeInput) => Promise<void>;
-    regenerateQRCode: () => Promise<void>;
-    reset: () => void;
-};

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__next/useQRPHDeposit.js

@@ -1,91 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import invariant from 'tiny-invariant';
-import { useShallow } from 'zustand/shallow';
-import { useCreateQRPHDepositMutation } from '../../../../client/hooks/useCreateQRPHDepositMutation.js';
-import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
-import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
-import { useMemberVerificationQuery } from '../../../../client/hooks/useMemberVerificationQuery.js';
-export function useQRPHDeposit() {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        kycVerificationStatus: ctx.kycVerificationStatus,
-    })));
-    const inputRef = useRef(null);
-    const [deposit, setDeposit] = useState(null);
-    const [status, setStatus] = useState('idle');
-    const verificationQuery = useMemberVerificationQuery();
-    const verificationStatus = verificationQuery.data?.status ?? 'UNVERIFIED';
-    const mutation = useCreateQRPHDepositMutation({
-        onMutate() {
-            setStatus('generating-qr-code');
-        },
-        onSuccess(data) {
-            invariant(data.qrCode);
-            setStatus('qr-code-generated');
-            setDeposit(data);
-        },
-        onError() {
-            setStatus('failed');
-        },
-    });
-    const query = useDepositQuery(deposit?.id, {
-        enabled: !!deposit && status === 'qr-code-generated',
-        refetchInterval: (ctx) => {
-            if (ctx.state.data?.status === 'APPROVED' ||
-                ctx.state.data?.status === 'CONFIRMED' ||
-                ctx.state.data?.status === 'CANCELLED' ||
-                ctx.state.data?.status === 'REJECTED' ||
-                ctx.state.data?.status === 'FAILED') {
-                return false;
-            }
-            return 2000;
-        },
-    });
-    useEffect(() => {
-        if (query.data?.status === 'APPROVED' ||
-            query.data?.status === 'CONFIRMED') {
-            setStatus('confirmed');
-            return;
-        }
-        if (query.data?.status === 'CANCELLED' ||
-            query.data?.status === 'REJECTED' ||
-            query.data?.status === 'FAILED') {
-            setStatus('failed');
-            return;
-        }
-    }, [query.data?.status]);
-    const generateQRCode = async (input) => {
-        if (verificationStatus === 'PENDING' ||
-            verificationStatus === 'UNVERIFIED' ||
-            verificationStatus === 'REJECTED' ||
-            verificationStatus === 'CREATED') {
-            globalStore.kycVerificationStatus.setOpen(true);
-            return;
-        }
-        inputRef.current = input;
-        mutation.mutate({
-            amount: input.amount,
-            promo: input.promo ?? undefined,
-        });
-    };
-    const regenerateQRCode = async () => {
-        invariant(inputRef.current);
-        mutation.reset();
-        await new Promise((resolve) => setTimeout(resolve, 1));
-        mutation.mutate({
-            amount: inputRef.current.amount,
-            promo: inputRef.current.promo ?? undefined,
-        });
-    };
-    const reset = () => {
-        setStatus('idle');
-        setDeposit(null);
-        inputRef.current = null;
-    };
-    return {
-        status,
-        deposit,
-        generateQRCode,
-        regenerateQRCode,
-        reset,
-    };
-}

package/dist/components/Disclaimer/ResponsibleGaming.d.ts

@@ -1,10 +0,0 @@
-import { type ImageProps } from 'next/image';
-import type { ReactNode } from 'react';
-export interface ResponsibleGamingProps {
-    responsibleGamingContent: string | ReactNode;
-    logo: ImageProps['src'];
-    open: boolean;
-    onCloseAction: () => void;
-    responsibleGamingLogo?: ImageProps['src'];
-}
-export declare function ResponsibleGaming({ logo, open, responsibleGamingContent, onCloseAction, ...props }: ResponsibleGamingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Disclaimer/ResponsibleGaming.js

@@ -1,13 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image, {} from 'next/image';
-import pagcorLogo from '../../images/pagcor.png';
-import responsibleGamingLogo from '../../images/responsible-gaming.png';
-import { Button } from '../../ui/Button/index.js';
-import { Dialog } from '../../ui/Dialog/index.js';
-import { Portal } from '../../ui/Portal/index.js';
-export function ResponsibleGaming({ logo, open, responsibleGamingContent, onCloseAction, ...props }) {
-    return (_jsx(Dialog.Root, { open: open, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start overflow-y-auto p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsx(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: "Responsible Gaming" }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: responsibleGamingContent }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx("div", { className: "w-full", children: _jsx(Button, { type: "button", className: "mt-3", onClick: () => {
-                                        onCloseAction();
-                                    }, children: "I Agree" }) })] }) })] }) }));
-}

package/dist/components/Disclaimer/TermsOfUse.d.ts

@@ -1,11 +0,0 @@
-import { type ImageProps } from 'next/image';
-import type { ReactNode } from 'react';
-export interface TermsOfUseProps {
-    logo: ImageProps['src'];
-    open: boolean;
-    onCloseAction: () => void;
-    termsOfUseContent: string | ReactNode;
-    siteName: string;
-    responsibleGamingLogo?: ImageProps['src'];
-}
-export declare function TermsOfUse({ logo, open, onCloseAction, siteName, termsOfUseContent, ...props }: TermsOfUseProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Disclaimer/TermsOfUse.js

@@ -1,13 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image, {} from 'next/image';
-import pagcorLogo from '../../images/pagcor.png';
-import responsibleGamingLogo from '../../images/responsible-gaming.png';
-import { Button } from '../../ui/Button/index.js';
-import { Dialog } from '../../ui/Dialog/index.js';
-import { Portal } from '../../ui/Portal/index.js';
-export function TermsOfUse({ logo, open, onCloseAction, siteName, termsOfUseContent, ...props }) {
-    return (_jsx(Dialog.Root, { open: open, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start overflow-y-auto p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsxs(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: [siteName, " Terms of Use"] }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: termsOfUseContent }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx("div", { className: "w-full", children: _jsx(Button, { type: "button", className: "mt-3", onClick: () => {
-                                        onCloseAction();
-                                    }, children: "I Agree" }) })] }) })] }) }));
-}

package/dist/components/FeatureFlag/FeatureFlag.d.ts

@@ -1 +0,0 @@
-export declare function FeatureFlag(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/FeatureFlag/FeatureFlag.js

@@ -1,29 +0,0 @@
-'use client';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useEffect } from 'react';
-import { FEATURE_FLAG_KEY, useFeatureFlag, } from '../../client/hooks/useFeatureFlag.js';
-export function FeatureFlag() {
-    const { featureFlagEnabled, setFeatureFlagEnabled } = useFeatureFlag();
-    const searchParams = useSearchParams();
-    const router = useRouter();
-    useEffect(() => {
-        const futureFlagParam = searchParams.get('future');
-        if (futureFlagParam !== null) {
-            const isEnabled = futureFlagParam === 'true';
-            setFeatureFlagEnabled(isEnabled);
-            localStorage.setItem(FEATURE_FLAG_KEY, isEnabled.toString());
-        }
-    }, [searchParams, setFeatureFlagEnabled]);
-    function disableFeatureFlag() {
-        setFeatureFlagEnabled(false);
-        localStorage.removeItem(FEATURE_FLAG_KEY);
-        const params = new URLSearchParams(searchParams.toString());
-        params.delete('future');
-        router.replace(`?${params.toString()}`, { scroll: false });
-    }
-    if (!featureFlagEnabled) {
-        return null;
-    }
-    return (_jsx("div", { className: "fixed bottom-3 flex w-full flex-col items-center justify-center", children: _jsxs("div", { className: "bg-black/70 p-1", children: ["Experimental features are enabled.", ' ', _jsxs("button", { onClick: () => disableFeatureFlag(), className: "cursor-pointer underline", children: [' ', "Disable"] })] }) }));
-}

package/dist/components/FeatureFlag/index.d.ts

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

package/dist/components/FeatureFlag/index.js

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

package/dist/components/KYC/AutoOpen.d.ts

@@ -1 +0,0 @@
-export declare function AutoOpen(): null;

package/dist/components/KYC/AutoOpen.js

@@ -1,40 +0,0 @@
-import { useEffect } from 'react';
-import { useShallow } from 'zustand/shallow';
-import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
-import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
-import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
-import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
-import { KYC_PROMPT_LOCALSTORAGE_KEY } from '../../constants/index.js';
-export function AutoOpen() {
-    const kycStore = useGlobalStore(useShallow((ctx) => ctx.kyc));
-    const { data: session } = useSessionQuery();
-    const { data: account } = useAccountQuery();
-    const { data: verification } = useMemberVerificationQuery();
-    const isBasicInfoCompleted = account?.realName !== null && account?.birthDay !== null;
-    const isUploadCompleted = verification &&
-        verification.idFrontImage !== null &&
-        verification.selfieImage !== null;
-    const isRejected = Boolean(verification?.status === 'REJECTED');
-    const step = !isBasicInfoCompleted
-        ? 1
-        : isRejected
-            ? 2
-            : isUploadCompleted
-                ? 3
-                : 2;
-    const shouldOpen = !isBasicInfoCompleted || !isUploadCompleted || isRejected;
-    useEffect(() => {
-        if (session?.status == 'authenticated' &&
-            shouldOpen &&
-            localStorage.getItem(KYC_PROMPT_LOCALSTORAGE_KEY) === null) {
-            kycStore.setKycReminder(true);
-            return;
-        }
-    }, [kycStore, session?.status, shouldOpen]);
-    useEffect(() => {
-        if (step) {
-            kycStore.setStep(step);
-        }
-    }, [kycStore, step]);
-    return null;
-}

package/dist/components/KYC/CaptureIdDocument.d.ts

@@ -1 +0,0 @@
-export declare function CaptureIdDocument(): import("react/jsx-runtime").JSX.Element;

package/dist/components/KYC/CaptureIdDocument.js

@@ -1,219 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { useUploadImageFileMutation } from '../../client/hooks/useUploadImageFileMutation.js';
-import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
-import { Camera01Icon } from '../../icons/Camera01Icon.js';
-import { CheckCircleIcon } from '../../icons/CheckCircleIcon.js';
-import { XIcon } from '../../icons/XIcon.js';
-import { Button } from '../../ui/Button/index.js';
-import { Dialog } from '../../ui/Dialog/index.js';
-import { useKYCContext } from './KYCContext.js';
-import NoCameraError from './NoCameraError.js';
-import { cameraErrorDescriptions, dataURLtoBlob, resizeFile, showPermissionInstructions, } from './utils.js';
-export function CaptureIdDocument() {
-    const kyc = useKYCContext();
-    const { mutate, isPending } = useUploadImageFileMutation();
-    const [videoStream, setVideoStream] = useState(null);
-    const [cameraError, setCameraError] = useState(null);
-    const [isLoading, setIsLoading] = useState(false);
-    const [selectedImage, setSelectedImage] = useState(null);
-    const [captureInProgress, setCaptureInProgress] = useState(false);
-    const [proccessImageCanvas, setProccessImageCanvas] = useState(null);
-    const videoElement = useRef(null);
-    const containerRef = useRef(null);
-    function stopCamera() {
-        if (videoStream) {
-            videoStream.getTracks().forEach((track) => track.stop());
-            setVideoStream(null);
-        }
-    }
-    useEffect(() => {
-        return () => {
-            stopCamera();
-        };
-    }, [videoStream]);
-    async function startCamera() {
-        try {
-            setIsLoading(true);
-            setCameraError(null);
-            setCaptureInProgress(true);
-            console.log('Starting camera...');
-            const stream = await navigator.mediaDevices.getUserMedia({
-                video: {
-                    facingMode: 'environment',
-                    aspectRatio: 16 / 9,
-                    width: { ideal: 1920, max: 1920 },
-                    height: { ideal: 1080, max: 1080 },
-                    frameRate: {
-                        ideal: 30,
-                        max: 60,
-                    },
-                },
-                audio: false,
-            });
-            // Set the stream directly to the video element
-            if (videoElement.current) {
-                videoElement.current.srcObject = stream;
-                videoElement.current.onloadedmetadata = () => {
-                    console.log('Video metadata loaded, starting playback...');
-                    videoElement.current
-                        ?.play()
-                        .then(() => {
-                        setVideoStream(stream);
-                        setIsLoading(false);
-                    })
-                        .catch(() => {
-                        setCameraError('Failed to start camera stream. Please try again.');
-                        setIsLoading(false);
-                        // Stop the stream if playback fails
-                        stream.getTracks().forEach((track) => track.stop());
-                    });
-                };
-                videoElement.current.onerror = (err) => {
-                    console.error('Video element error:', err);
-                    setCameraError('Video playback error. Please try again.');
-                    setIsLoading(false);
-                    stream.getTracks().forEach((track) => track.stop());
-                };
-            }
-            else {
-                console.error('Video element not available');
-                setCameraError('Camera initialization failed. Please try again.');
-                setCaptureInProgress(false);
-                setIsLoading(false);
-                stream.getTracks().forEach((track) => track.stop());
-            }
-        }
-        catch (error) {
-            setIsLoading(false);
-            if (error instanceof DOMException) {
-                console.error('Error accessing camera:', error.message);
-                setCameraError(error.name);
-            }
-            else {
-                console.error('Unknown error accessing camera:', error);
-                setCameraError('An unknown error occurred. Please check permissions and try again.');
-            }
-            setCaptureInProgress(false);
-        }
-    }
-    function captureAndProcessImage() {
-        if (!videoElement.current || !videoStream) {
-            console.error('Video element or stream not available for capture');
-            return;
-        }
-        try {
-            const canvas = document.createElement('canvas');
-            const parentDiv = document.getElementById('parent');
-            canvas.width = parentDiv?.clientWidth || videoElement.current.width;
-            canvas.height = parentDiv?.clientHeight || videoElement.current.height;
-            const ctx = canvas.getContext('2d');
-            if (!ctx) {
-                console.error('Could not get 2D context for canvas');
-                setCameraError('Failed to process image. Please try again.');
-                setCaptureInProgress(false);
-                return;
-            }
-            ctx.drawImage(videoElement.current, 0, 0, canvas.width, canvas.height);
-            const imageSrc = canvas.toDataURL('image/png', 1.0);
-            setSelectedImage({ src: imageSrc });
-            setCaptureInProgress(false);
-            stopCamera();
-            const newImg = document.createElement('img');
-            newImg.src = imageSrc;
-            //@ts-expect-error jscanify is not typed
-            const scanner = new jscanify();
-            newImg.onload = () => {
-                try {
-                    if (containerRef.current) {
-                        // containerRef.current.innerHTML = '';
-                        const paperWidth = parentDiv?.clientWidth || videoElement.current?.videoWidth;
-                        const paperHeight = parentDiv?.clientHeight || videoElement.current?.videoHeight;
-                        //@ts-expect-error jscanify is not typed
-                        const contour = scanner.findPaperContour(cv.imread(newImg));
-                        const cornerPoints = scanner.getCornerPoints(contour);
-                        const resultCanvas = scanner.extractPaper(newImg, paperWidth, paperHeight, cornerPoints);
-                        newImg.className =
-                            'absolute inset-0 m-auto w-full h-auto md:max-h-[333px] md:max-w-[643px] aspect-video rounded-lg object-contain';
-                        setProccessImageCanvas(resultCanvas);
-                        containerRef.current.appendChild(resultCanvas);
-                        setCaptureInProgress(false);
-                        setSelectedImage({ src: resultCanvas.toDataURL('image/png') });
-                    }
-                }
-                catch (error) {
-                    console.error('Error processing image:', error);
-                    setCameraError('Failed to process image. Please try again.');
-                }
-            };
-            newImg.onerror = () => {
-                console.error('Error loading image');
-                setCameraError('NoIdDetectedError');
-            };
-        }
-        catch (error) {
-            console.error('Error capturing image:', error);
-            setCameraError('NoIdDetectedError');
-            setCaptureInProgress(false);
-        }
-    }
-    async function uploadPhoto() {
-        if (!proccessImageCanvas) {
-            console.error('Failed to process the image. Please try again.');
-            return;
-        }
-        const blob = proccessImageCanvas.toDataURL('image/png', 1.0);
-        const processedBlob = dataURLtoBlob(blob);
-        const img = new File([processedBlob], 'frontImage', { type: 'image/jpeg' });
-        const resizedImage = (await resizeFile(img));
-        if (resizedImage) {
-            await mutate({
-                file: resizedImage,
-            }, {
-                onSuccess: (data) => {
-                    kyc.setFrontImageId(data);
-                    kyc.setCapturing(null);
-                },
-            });
-        }
-    }
-    function retakePhoto() {
-        setSelectedImage(null);
-        setCaptureInProgress(true);
-        setCameraError(null);
-        if (containerRef.current) {
-            const canvas = containerRef.current.querySelector('canvas');
-            if (canvas) {
-                canvas.width = canvas.width;
-            }
-            containerRef.current.innerHTML = '';
-        }
-        if (videoElement.current) {
-            videoElement.current.play();
-        }
-        startCamera();
-    }
-    function checkCameraPermission() {
-        const constraints = { video: true };
-        navigator.mediaDevices
-            .getUserMedia(constraints)
-            .then(() => {
-            setCameraError(null);
-            startCamera();
-        })
-            .catch(() => {
-            showPermissionInstructions();
-        });
-    }
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full p-4 lg:w-[640px] lg:px-12 lg:py-4xl", children: [_jsxs("button", { type: "button", className: "flex items-center gap-lg lg:absolute lg:right-5 lg:top-5 lg:p-md", onClick: () => {
-                        stopCamera();
-                        kyc.setCapturing(null);
-                    }, children: [_jsx(XIcon, { className: "text-text-senary-300 hidden size-5 lg:block" }), _jsx(ArrowLeftIcon, { className: "text-text-senary-300 size-5 lg:hidden" }), _jsx("span", { className: "text-lg font-semibold lg:hidden", children: "Back" })] }), _jsx(Dialog.Title, { className: "mt-6 text-center text-lg font-semibold lg:mt-0", children: "Take a Picture of Your Front ID" }), _jsxs(Dialog.Description, { className: "lg:max-w-auto text-text-tertiary-600 mx-auto mt-sm max-w-[19rem] text-center text-sm lg:max-w-full", 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 the frame."] }), _jsx("div", { id: "parent", className: "border-border-disabled mt-6 aspect-video rounded-xl border bg-black lg:mt-8", children: [
-                        'NotAllowedError',
-                        'NotReadableError',
-                        'NotFoundError',
-                        'NoIdDetectedError',
-                    ].includes(cameraError) ? (_jsx(NoCameraError, { onRetry: checkCameraPermission, title: "Camera Access Required", description: cameraErrorDescriptions[cameraError] })) : captureInProgress ? (_jsxs("div", { className: "relative flex h-fit w-full flex-col items-center justify-center", children: [_jsx("video", { ref: videoElement, autoPlay: true, muted: true, playsInline: true, className: "relative h-[50vh] w-full rounded-lg object-cover md:aspect-video md:max-h-[333px]", width: "100%", height: "100%" }), _jsxs("div", { className: "pointer-events-none absolute inset-0 z-50", children: [_jsx("div", { className: twMerge('absolute inset-0 w-full bg-black/60 backdrop-blur-sm [clip-path:polygon(0%_0%,0%_100%,calc(50%-158px)_100%,calc(50%-158px)_calc(50%-100px),calc(50%+158px)_calc(50%-100px),calc(50%+158px)_calc(50%+100px),calc(50%-158px)_calc(50%+100px),calc(50%-158px)_100%,100%_100%,100%_0%)] md:[clip-path:polygon(0%_0%,0%_100%,calc(50%-225px)_100%,calc(50%-225px)_calc(50%-142px),calc(50%+225px)_calc(50%-142px),calc(50%+225px)_calc(50%+142px),calc(50%-225px)_calc(50%+142px),calc(50%-225px)_100%,100%_100%,100%_0%)]') }), _jsx("div", { className: "absolute inset-0 z-[60] mx-auto flex items-center justify-center", children: _jsx("div", { className: "relative aspect-[1011/638] h-[200px] md:h-[295px] md:w-[450px]", children: _jsx("div", { className: "h-full w-full rounded-lg border-4 border-dashed border-[#B54708]" }) }) })] })] })) : (_jsx("div", { ref: containerRef, className: "relative grid h-full w-full place-items-center rounded-lg object-contain md:max-h-[333px]" })) }), captureInProgress ? (_jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-6 px-xl disabled:opacity-100 lg:mt-8 lg:w-fit", onClick: captureAndProcessImage, children: ["Capture Image", _jsx(Camera01Icon, { className: "size-5" })] })) : selectedImage && selectedImage.src ? (_jsxs("div", { className: "mt-4 flex flex-col items-center justify-center gap-2 md:flex-row", children: [_jsxs(Button, { className: "lg:w-fit", type: "button", onClick: retakePhoto, children: ["Retake Photo ", _jsx(Camera01Icon, { className: "ml-1" })] }), _jsxs(Button, { className: "lg:w-fit", type: "button", onClick: uploadPhoto, disabled: isPending, children: ["Use Photo ", _jsx(CheckCircleIcon, { className: "ml-1" })] })] })) : (_jsxs(Button, { className: twMerge('disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-6 px-xl disabled:opacity-100 lg:mt-8 lg:w-fit', cameraError && 'hidden'), onClick: startCamera, disabled: isLoading || !!videoStream, children: [isLoading ? 'Starting Camera...' : 'Start Camera', _jsx(Camera01Icon, { className: "size-5" })] }))] }) }));
-}

package/dist/components/KYC/CaptureSelfie.d.ts

@@ -1 +0,0 @@
-export declare function CaptureSelfie(): import("react/jsx-runtime").JSX.Element;