@vechain/vechain-kit 2.4.2 → 3.0.0-rc.1

package/dist/BaseModal-CWAI9-Bi.js

@@ -0,0 +1,2 @@
+import{r as e}from"./VechainKitThemeProvider-Di9a04Es.js";import{createContext as t,useContext as n,useEffect as r,useRef as i,useState as a}from"react";import{Box as o,Modal as s,ModalContent as c,ModalOverlay as l,useMediaQuery as u,useToken as d}from"@chakra-ui/react";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";import{Drawer as h}from"vaul";const g=t({hasContentBelow:!1}),_=()=>n(g),v=({children:t})=>{let[n,s]=a(!1),c=i(null),l=i(null),u=i(null),d=i(!0),{tokens:f}=e(),h=f?.effects?.backdropFilter?.stickyHeader??`blur(20px)`;return r(()=>{let e=e=>{if(!e)return null;let t=e.parentElement;for(;t;){let e=window.getComputedStyle(t);if(e.overflowY===`auto`||e.overflowY===`scroll`||e.overflow===`auto`||e.overflow===`scroll`)return t;t=t.parentElement}return null},t=([e])=>{u.current&&clearTimeout(u.current),u.current=setTimeout(()=>{if(d.current){d.current=!1,s(!1);return}s(!e.isIntersecting)},50)},n=e(l.current),r={threshold:0};n&&(r.root=n,r.rootMargin=`0px`);let i=new IntersectionObserver(t,r),a=setTimeout(()=>{c.current&&i.observe(c.current)},200);return()=>{clearTimeout(a),u.current&&clearTimeout(u.current),i.disconnect()}},[]),m(g.Provider,{value:{hasContentBelow:n},children:[p(o,{ref:l,position:`sticky`,top:`0`,left:`0`,w:`full`,borderRadius:`24px 24px 0px 0px`,backdropFilter:n?h:`none`,style:{WebkitBackdropFilter:n?h:`none`},zIndex:1e3,boxShadow:n?`0px 2px 4px 1px rgb(0 0 0 / 10%)`:`none`,transition:`box-shadow 0.2s ease-in-out`,children:t}),p(`div`,{ref:c,style:{height:`1px`,width:`100%`,pointerEvents:`none`,visibility:`hidden`,marginTop:`-1px`}})]})},y=({scrollableContainerRef:t,observerRef:n})=>{let s=d(`colors`,`vechain-kit-border`),{tokens:c}=e(),l=c?.effects?.backdropFilter?.stickyHeader??`blur(20px)`,[u,f]=a(!1),m=i(null),h=i(!0);return r(()=>{let e=([e])=>{m.current&&clearTimeout(m.current),m.current=setTimeout(()=>{if(h.current){h.current=!1,f(!1);return}f(!e.isIntersecting)},50)},r={threshold:0};t.current&&(r.root=t.current,r.rootMargin=`0px`);let i=new IntersectionObserver(e,r),a=setTimeout(()=>{n.current&&i.observe(n.current)},200);return()=>{clearTimeout(a),m.current&&clearTimeout(m.current),i.disconnect()}},[t,n]),p(o,{position:`sticky`,top:`0`,w:`full`,backdropFilter:u?l:`none`,style:{WebkitBackdropFilter:u?l:`none`},zIndex:999,transition:`backdrop-filter 0.2s ease-in-out`,children:p(o,{mx:`auto`,w:`34px`,h:`5px`,bg:s,mt:4,rounded:`full`})})},b=({isOpen:t,onClose:n,children:r,ariaTitle:a,ariaDescription:s,isDismissable:c=!0,minHeight:l,maxHeight:u=`68vh`,closeThreshold:f=.5})=>{let g=d(`colors`,`vechain-kit-modal`),_=d(`colors`,`vechain-kit-overlay`),v=i(null),b=i(null),{tokens:x}=e(),S=x?.effects?.backdropFilter?.overlay,C=x?.colors?.border?.modal||`none`;return p(h.Root,{dismissible:c,shouldScaleBackground:!0,repositionInputs:!1,open:t,closeThreshold:f,onOpenChange:e=>{e||n()},children:m(h.Portal,{children:[p(h.Overlay,{style:{zIndex:100,position:`fixed`,top:0,right:0,bottom:0,left:0,backgroundColor:_,backdropFilter:S,WebkitBackdropFilter:S}}),m(h.Content,{"aria-description":s,style:{zIndex:101,backgroundColor:g,borderRadius:`24px 24px 0 0`,border:C,position:`fixed`,bottom:0,left:0,right:0,...l&&{minHeight:l},maxHeight:u,display:`flex`,flexDirection:`column`},children:[p(h.Title,{style:{position:`absolute`,width:`1px`,height:`1px`,padding:0,margin:`-1px`,overflow:`hidden`,clip:`rect(0, 0, 0, 0)`,whiteSpace:`nowrap`,borderWidth:0},children:a}),m(o,{ref:v,flex:`1`,overflowY:`auto`,children:[p(y,{scrollableContainerRef:v,observerRef:b}),p(`div`,{ref:b,style:{height:`1px`,width:`100%`,visibility:`hidden`,marginTop:`-1px`}}),r]})]})]})})},x=({isOpen:t,onClose:n,children:r,size:i=`sm`,isCentered:a=!0,motionPreset:o=`slideInBottom`,closeOnOverlayClick:h=!0,blockScrollOnMount:g=!1,allowExternalFocus:_=!1,backdropFilter:v,isCloseable:y=!0,useBottomSheetOnMobile:x,mobileMinHeight:S,mobileMaxHeight:C=`57vh`,desktopMinHeight:w,desktopMaxHeight:T})=>{let[E]=u(`(min-width: 768px)`),{portalRootRef:D,themeConfig:O,tokens:k}=e(),A=x??O?.modal?.useBottomSheetOnMobile??!1,j=d(`colors`,`vechain-kit-modal`),M=d(`colors`,`vechain-kit-overlay`),N=k?.effects?.backdropFilter?.overlay,P=k?.effects?.backdropFilter?.modal,F=v??N??`blur(3px)`,I=E?{minHeight:w,maxHeight:T}:{position:`fixed`,bottom:`0`,mb:`0`,maxW:`2xl`,borderRadius:`24px 24px 0px 0px !important`,overflowY:`auto`,overflowX:`hidden`,scrollBehavior:`smooth`,minHeight:S,maxHeight:C},L=m(s,{motionPreset:o,isOpen:t,onClose:n,isCentered:a,size:i,returnFocusOnClose:!1,blockScrollOnMount:g,closeOnOverlayClick:h&&y,preserveScrollBarGap:!0,portalProps:{containerRef:D},trapFocus:!_,autoFocus:!_,variant:`vechainKitBase`,children:[p(l,{bg:M,backdropFilter:F}),p(c,{role:`dialog`,"aria-modal":!_,bg:j,sx:{backdropFilter:P,WebkitBackdropFilter:P},...I,children:r})]});return p(f,{children:!E&&A?p(s,{isOpen:t,onClose:n,size:i,blockScrollOnMount:!1,trapFocus:!1,children:p(b,{isOpen:t,onClose:n,ariaTitle:`Dialog`,ariaDescription:`Dialog content area`,isDismissable:y,minHeight:S,maxHeight:C,children:r})}):L})};export{v as n,_ as r,x as t};
+//# sourceMappingURL=BaseModal-CWAI9-Bi.js.map

package/dist/BaseModal-CWAI9-Bi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseModal-CWAI9-Bi.js","names":["current: HTMLElement | null","observerOptions: IntersectionObserverInit","observerOptions: IntersectionObserverInit","modalContentProps: ModalContentProps"],"sources":["../src/components/common/StickyHeaderContainer.tsx","../src/components/common/BaseBottomSheet.tsx","../src/components/common/BaseModal.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react';\nimport { useEffect, useState, useRef, createContext, useContext } from 'react';\n// Direct import to avoid circular dependency through barrel exports\nimport { useVechainKitThemeConfig } from '../../providers/VechainKitThemeProvider';\n\ntype Props = {\n    children: React.ReactNode;\n};\n\n// Context to share hasContentBelow state with bottom sheet handle\nconst StickyHeaderContext = createContext<{\n    hasContentBelow: boolean;\n}>({ hasContentBelow: false });\n\nexport const useStickyHeaderContext = () => useContext(StickyHeaderContext);\n\nexport const StickyHeaderContainer = ({ children }: Props) => {\n    const [hasContentBelow, setHasContentBelow] = useState(false);\n    const observerRef = useRef<HTMLDivElement>(null);\n    const headerRef = useRef<HTMLDivElement>(null);\n    const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n    const isInitialMountRef = useRef(true);\n\n    // Use semantic tokens for sticky header\n    const { tokens } = useVechainKitThemeConfig();\n    const backdropFilter =\n        tokens?.effects?.backdropFilter?.stickyHeader ?? 'blur(20px)';\n\n    useEffect(() => {\n        // Find the scrollable container (parent with overflow-y: auto)\n        const findScrollableContainer = (\n            element: HTMLElement | null,\n        ): HTMLElement | null => {\n            if (!element) return null;\n            let current: HTMLElement | null = element.parentElement;\n            while (current) {\n                const style = window.getComputedStyle(current);\n                if (\n                    style.overflowY === 'auto' ||\n                    style.overflowY === 'scroll' ||\n                    style.overflow === 'auto' ||\n                    style.overflow === 'scroll'\n                ) {\n                    return current;\n                }\n                current = current.parentElement;\n            }\n            return null;\n        };\n\n        // Ignore intersection changes during initial mount and transitions\n        // This prevents the glitch when content is animating in\n        const handleIntersection = ([entry]: IntersectionObserverEntry[]) => {\n            // Clear any pending timeout\n            if (timeoutRef.current) {\n                clearTimeout(timeoutRef.current);\n            }\n\n            // Debounce the state update to prevent rapid changes during animations\n            timeoutRef.current = setTimeout(() => {\n                // On initial mount, always start with false to prevent glitch\n                if (isInitialMountRef.current) {\n                    isInitialMountRef.current = false;\n                    setHasContentBelow(false);\n                    return;\n                }\n                setHasContentBelow(!entry.isIntersecting);\n            }, 50); // Small debounce to let animations settle\n        };\n\n        const scrollableContainer = findScrollableContainer(headerRef.current);\n\n        const observerOptions: IntersectionObserverInit = {\n            threshold: 0,\n        };\n\n        // If we found a scrollable container, use it as the root\n        if (scrollableContainer) {\n            observerOptions.root = scrollableContainer;\n            observerOptions.rootMargin = '0px';\n        }\n\n        const observer = new IntersectionObserver(\n            handleIntersection,\n            observerOptions,\n        );\n\n        // Delay observation slightly to avoid initial glitch\n        const observeTimeout = setTimeout(() => {\n            if (observerRef.current) {\n                observer.observe(observerRef.current);\n            }\n        }, 200); // Wait for animation to complete (0.17s + small buffer)\n\n        return () => {\n            clearTimeout(observeTimeout);\n            if (timeoutRef.current) {\n                clearTimeout(timeoutRef.current);\n            }\n            observer.disconnect();\n        };\n    }, []);\n\n    return (\n        <StickyHeaderContext.Provider value={{ hasContentBelow }}>\n            <Box\n                ref={headerRef}\n                position={'sticky'}\n                top={'0'}\n                left={'0'}\n                w={'full'}\n                borderRadius={'24px 24px 0px 0px'}\n                backdropFilter={hasContentBelow ? backdropFilter : 'none'}\n                style={{\n                    WebkitBackdropFilter: hasContentBelow\n                        ? backdropFilter\n                        : 'none',\n                }}\n                zIndex={1000}\n                boxShadow={\n                    hasContentBelow\n                        ? '0px 2px 4px 1px rgb(0 0 0 / 10%)'\n                        : 'none'\n                }\n                transition=\"box-shadow 0.2s ease-in-out\"\n            >\n                {children}\n            </Box>\n            <div\n                ref={observerRef}\n                style={{\n                    height: '1px',\n                    width: '100%',\n                    pointerEvents: 'none',\n                    visibility: 'hidden',\n                    marginTop: '-1px',\n                }}\n            />\n        </StickyHeaderContext.Provider>\n    );\n};\n","import { Box, useToken } from '@chakra-ui/react';\nimport { Drawer } from 'vaul';\nimport { useEffect, useState, useRef } from 'react';\n// Direct import to avoid circular dependency through barrel exports\nimport { useVechainKitThemeConfig } from '../../providers/VechainKitThemeProvider';\n\ntype Props = {\n    isOpen: boolean;\n    onClose: () => void;\n    height?: string;\n    children: React.ReactNode;\n    ariaTitle: string;\n    ariaDescription: string;\n    isDismissable?: boolean;\n    minHeight?: string;\n    maxHeight?: string;\n    closeThreshold?: number;\n};\n\n/**\n * HandleArea component for the bottom sheet drag indicator\n *\n * PROBLEM: When content scrolls in the bottom sheet, the sticky header (from StickyHeaderContainer)\n * gets a backdrop filter effect, but the drawer handle (drag indicator) above it doesn't,\n * creating a visual inconsistency where part of the top area has the effect and part doesn't.\n *\n * SOLUTION: This component makes the handle area also sticky and applies the same backdrop filter\n * effect when content scrolls below it. It uses an IntersectionObserver to detect when content\n * has scrolled past a sentinel element, similar to how StickyHeaderContainer works.\n *\n * IMPORTANT: The handle must be rendered INSIDE the scrollable container (not as a sibling)\n * so that the IntersectionObserver can properly detect scrolling within that container's viewport.\n * If the handle were outside the scrollable container, the observer wouldn't detect scroll events.\n */\nconst HandleArea = ({\n    scrollableContainerRef,\n    observerRef,\n}: {\n    scrollableContainerRef: React.RefObject<HTMLDivElement>;\n    observerRef: React.RefObject<HTMLDivElement>;\n}) => {\n    const handleBg = useToken('colors', 'vechain-kit-border');\n    const { tokens } = useVechainKitThemeConfig();\n    const backdropFilter =\n        tokens?.effects?.backdropFilter?.stickyHeader ?? 'blur(20px)';\n    const [hasContentBelow, setHasContentBelow] = useState(false);\n    const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n    const isInitialMountRef = useRef(true);\n\n    useEffect(() => {\n        /**\n         * IntersectionObserver callback that detects when the sentinel element\n         * (observerRef) scrolls out of view. When it's not intersecting, it means\n         * content has scrolled past the handle area, so we apply the backdrop filter.\n         */\n        const handleIntersection = ([entry]: IntersectionObserverEntry[]) => {\n            if (timeoutRef.current) {\n                clearTimeout(timeoutRef.current);\n            }\n\n            // Debounce state updates to prevent rapid changes during animations\n            timeoutRef.current = setTimeout(() => {\n                // On initial mount, always start with false to prevent visual glitch\n                if (isInitialMountRef.current) {\n                    isInitialMountRef.current = false;\n                    setHasContentBelow(false);\n                    return;\n                }\n                // When sentinel is not intersecting, content has scrolled below\n                setHasContentBelow(!entry.isIntersecting);\n            }, 50);\n        };\n\n        const observerOptions: IntersectionObserverInit = {\n            threshold: 0,\n        };\n\n        // Use the scrollable container as the root for the observer\n        // This ensures we detect intersections relative to the scrollable viewport,\n        // not the document viewport\n        if (scrollableContainerRef.current) {\n            observerOptions.root = scrollableContainerRef.current;\n            observerOptions.rootMargin = '0px';\n        }\n\n        const observer = new IntersectionObserver(\n            handleIntersection,\n            observerOptions,\n        );\n\n        // Delay observation to avoid initial glitch when content is animating in\n        const observeTimeout = setTimeout(() => {\n            if (observerRef.current) {\n                observer.observe(observerRef.current);\n            }\n        }, 200);\n\n        return () => {\n            clearTimeout(observeTimeout);\n            if (timeoutRef.current) {\n                clearTimeout(timeoutRef.current);\n            }\n            observer.disconnect();\n        };\n    }, [scrollableContainerRef, observerRef]);\n\n    return (\n        <Box\n            position=\"sticky\"\n            top=\"0\"\n            w=\"full\"\n            // Apply backdrop filter when content has scrolled below the handle\n            // This matches the effect applied to StickyHeaderContainer for visual consistency\n            backdropFilter={hasContentBelow ? backdropFilter : 'none'}\n            style={{\n                WebkitBackdropFilter: hasContentBelow ? backdropFilter : 'none',\n            }}\n            zIndex={999}\n            transition=\"backdrop-filter 0.2s ease-in-out\"\n        >\n            {/* Drawer handle / drag indicator */}\n            <Box\n                mx={'auto'}\n                w={'34px'}\n                h={'5px'}\n                bg={handleBg}\n                mt={4}\n                rounded={'full'}\n            />\n        </Box>\n    );\n};\n\nexport const BaseBottomSheet = ({\n    isOpen,\n    onClose,\n    children,\n    ariaTitle,\n    ariaDescription,\n    isDismissable = true,\n    minHeight,\n    maxHeight = '68vh',\n    closeThreshold = 0.5,\n}: Props) => {\n    // Use semantic tokens for bottom sheet and overlay colors\n    const modalBg = useToken('colors', 'vechain-kit-modal');\n    const overlayBg = useToken('colors', 'vechain-kit-overlay');\n    const scrollableContainerRef = useRef<HTMLDivElement>(null);\n    const handleObserverRef = useRef<HTMLDivElement>(null);\n\n    // Get backdrop filter from tokens context\n    const { tokens } = useVechainKitThemeConfig();\n    const overlayBackdropFilter = tokens?.effects?.backdropFilter?.overlay;\n    const modalBorder = tokens?.colors?.border?.modal || 'none';\n\n    return (\n        <Drawer.Root\n            dismissible={isDismissable}\n            shouldScaleBackground\n            repositionInputs={false}\n            open={isOpen}\n            closeThreshold={closeThreshold}\n            onOpenChange={(open) => {\n                if (!open) {\n                    onClose();\n                }\n            }}\n        >\n            <Drawer.Portal>\n                <Drawer.Overlay\n                    style={{\n                        zIndex: 100,\n                        position: 'fixed',\n                        top: 0,\n                        right: 0,\n                        bottom: 0,\n                        left: 0,\n                        backgroundColor: overlayBg,\n                        backdropFilter: overlayBackdropFilter,\n                        WebkitBackdropFilter: overlayBackdropFilter,\n                    }}\n                />\n                <Drawer.Content\n                    aria-description={ariaDescription}\n                    style={{\n                        zIndex: 101,\n                        backgroundColor: modalBg,\n                        borderRadius: '24px 24px 0 0',\n                        border: modalBorder,\n                        position: 'fixed',\n                        bottom: 0,\n                        left: 0,\n                        right: 0,\n                        ...(minHeight && { minHeight }),\n                        maxHeight,\n                        display: 'flex',\n                        flexDirection: 'column',\n                    }}\n                >\n                    <Drawer.Title\n                        style={{\n                            position: 'absolute',\n                            width: '1px',\n                            height: '1px',\n                            padding: 0,\n                            margin: '-1px',\n                            overflow: 'hidden',\n                            clip: 'rect(0, 0, 0, 0)',\n                            whiteSpace: 'nowrap',\n                            borderWidth: 0,\n                        }}\n                    >\n                        {ariaTitle}\n                    </Drawer.Title>\n\n                    {/* \n                        Scrollable container that wraps all content.\n                        The handle must be INSIDE this container (not as a sibling) so that:\n                        1. The IntersectionObserver can detect scrolling within this container's viewport\n                        2. The handle can be sticky relative to this scrollable container\n                        3. The backdrop filter effect works consistently with StickyHeaderContainer\n                    */}\n                    <Box ref={scrollableContainerRef} flex=\"1\" overflowY=\"auto\">\n                        {/* \n                            Sticky handle area that gets backdrop filter when content scrolls.\n                            Positioned first so it stays at the top when scrolling.\n                        */}\n                        <HandleArea\n                            scrollableContainerRef={scrollableContainerRef}\n                            observerRef={handleObserverRef}\n                        />\n                        {/* \n                            Sentinel element for IntersectionObserver.\n                            When this invisible 1px element scrolls out of view, it means content\n                            has scrolled past the handle area, triggering the backdrop filter effect.\n                            Positioned right after the handle so it's at the boundary between\n                            handle and content.\n                        */}\n                        <div\n                            ref={handleObserverRef}\n                            style={{\n                                height: '1px',\n                                width: '100%',\n                                // pointerEvents: 'none',\n                                visibility: 'hidden',\n                                marginTop: '-1px',\n                            }}\n                        />\n                        {children}\n                    </Box>\n                </Drawer.Content>\n            </Drawer.Portal>\n        </Drawer.Root>\n    );\n};\n","import {\n    Modal,\n    ModalContent,\n    ModalContentProps,\n    ModalOverlay,\n    useMediaQuery,\n    useToken,\n} from '@chakra-ui/react';\nimport { ReactNode } from 'react';\n// Direct import to avoid circular dependency through barrel exports\nimport { useVechainKitThemeConfig } from '../../providers/VechainKitThemeProvider';\nimport { BaseBottomSheet } from './BaseBottomSheet';\n\ntype BaseModalProps = {\n    isOpen: boolean;\n    onClose: () => void;\n    children: ReactNode;\n    size?: string;\n    isCentered?: boolean;\n    motionPreset?: 'slideInBottom' | 'none';\n    trapFocus?: boolean;\n    closeOnOverlayClick?: boolean;\n    blockScrollOnMount?: boolean;\n    autoFocus?: boolean;\n    initialFocusRef?: React.RefObject<HTMLElement>;\n    allowExternalFocus?: boolean;\n    backdropFilter?: string;\n    isCloseable?: boolean;\n    /**\n     * Whether to use bottom sheet on mobile devices.\n     * When false (default), uses regular modal on all screen sizes.\n     * When true, uses bottom sheet on mobile (< 768px) and regular modal on desktop.\n     */\n    useBottomSheetOnMobile?: boolean;\n    /**\n     * Minimum and maximum height for the modal on mobile devices.\n     */\n    mobileMinHeight?: string;\n    mobileMaxHeight?: string;\n    desktopMinHeight?: string;\n    desktopMaxHeight?: string;\n};\n\nexport const BaseModal = ({\n    isOpen,\n    onClose,\n    children,\n    size = 'sm',\n    isCentered = true,\n    motionPreset = 'slideInBottom',\n    closeOnOverlayClick = true,\n    blockScrollOnMount = false,\n    allowExternalFocus = false,\n    backdropFilter,\n    isCloseable = true,\n    useBottomSheetOnMobile,\n    mobileMinHeight,\n    mobileMaxHeight = '57vh',\n    desktopMinHeight,\n    desktopMaxHeight,\n}: BaseModalProps) => {\n    const [isDesktop] = useMediaQuery('(min-width: 768px)');\n    const { portalRootRef, themeConfig, tokens } = useVechainKitThemeConfig();\n\n    // Get useBottomSheetOnMobile from theme config if not provided as prop\n    // Prop takes precedence over theme config\n    const shouldUseBottomSheetOnMobile =\n        useBottomSheetOnMobile ??\n        themeConfig?.modal?.useBottomSheetOnMobile ??\n        false;\n\n    // Use semantic tokens for modal and overlay colors\n    const modalBg = useToken('colors', 'vechain-kit-modal');\n    const overlayBg = useToken('colors', 'vechain-kit-overlay');\n\n    // Get backdrop filter from tokens context\n    const defaultBackdropFilter = tokens?.effects?.backdropFilter?.overlay;\n    const modalBackdropFilter = tokens?.effects?.backdropFilter?.modal;\n    const effectiveBackdropFilter =\n        backdropFilter ?? defaultBackdropFilter ?? 'blur(3px)';\n\n    const modalContentProps: ModalContentProps = isDesktop\n        ? {\n              minHeight: desktopMinHeight,\n              maxHeight: desktopMaxHeight,\n          }\n        : {\n              position: 'fixed',\n              bottom: '0',\n              mb: '0',\n              maxW: '2xl',\n              borderRadius: '24px 24px 0px 0px !important',\n              overflowY: 'auto',\n              overflowX: 'hidden',\n              scrollBehavior: 'smooth',\n              minHeight: mobileMinHeight,\n              maxHeight: mobileMaxHeight,\n          };\n\n    const modalContent = (\n        <Modal\n            motionPreset={motionPreset}\n            isOpen={isOpen}\n            onClose={onClose}\n            isCentered={isCentered}\n            size={size}\n            returnFocusOnClose={false}\n            blockScrollOnMount={blockScrollOnMount}\n            closeOnOverlayClick={closeOnOverlayClick && isCloseable}\n            preserveScrollBarGap={true}\n            portalProps={{ containerRef: portalRootRef }}\n            trapFocus={!allowExternalFocus}\n            autoFocus={!allowExternalFocus}\n            variant=\"vechainKitBase\"\n        >\n            <ModalOverlay\n                bg={overlayBg}\n                backdropFilter={effectiveBackdropFilter}\n            />\n            <ModalContent\n                role=\"dialog\"\n                aria-modal={!allowExternalFocus}\n                bg={modalBg}\n                sx={{\n                    backdropFilter: modalBackdropFilter,\n                    WebkitBackdropFilter: modalBackdropFilter,\n                }}\n                {...modalContentProps}\n            >\n                {children}\n            </ModalContent>\n        </Modal>\n    );\n\n    // We still wrap the bottomsheet within the modal,\n    // because we need access to the modal context (eg: setCurrentContent())\n    const bottomSheetContent = (\n        <Modal\n            isOpen={isOpen}\n            onClose={onClose}\n            size={size}\n            blockScrollOnMount={false}\n            trapFocus={false}\n        >\n            <BaseBottomSheet\n                isOpen={isOpen}\n                onClose={onClose}\n                ariaTitle={'Dialog'}\n                ariaDescription={'Dialog content area'}\n                isDismissable={isCloseable}\n                minHeight={mobileMinHeight}\n                maxHeight={mobileMaxHeight}\n            >\n                {children}\n            </BaseBottomSheet>\n        </Modal>\n    );\n\n    // Use bottom sheet only on mobile when explicitly enabled\n    // By default, use regular modal on all screen sizes\n    const shouldUseBottomSheet = !isDesktop && shouldUseBottomSheetOnMobile;\n\n    return <>{shouldUseBottomSheet ? bottomSheetContent : modalContent}</>;\n};\n"],"mappings":"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"}

package/dist/BaseModal-yevRjczw.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-DjWAcSYV.cjs`),t=require(`./VechainKitThemeProvider-BM5258oA.cjs`);let n=require(`react`),r=require(`@chakra-ui/react`),i=require(`react/jsx-runtime`),a=require(`vaul`);const o=(0,n.createContext)({hasContentBelow:!1}),s=()=>(0,n.useContext)(o),c=({children:e})=>{let[a,s]=(0,n.useState)(!1),c=(0,n.useRef)(null),l=(0,n.useRef)(null),u=(0,n.useRef)(null),d=(0,n.useRef)(!0),{tokens:f}=t.r(),p=f?.effects?.backdropFilter?.stickyHeader??`blur(20px)`;return(0,n.useEffect)(()=>{let e=e=>{if(!e)return null;let t=e.parentElement;for(;t;){let e=window.getComputedStyle(t);if(e.overflowY===`auto`||e.overflowY===`scroll`||e.overflow===`auto`||e.overflow===`scroll`)return t;t=t.parentElement}return null},t=([e])=>{u.current&&clearTimeout(u.current),u.current=setTimeout(()=>{if(d.current){d.current=!1,s(!1);return}s(!e.isIntersecting)},50)},n=e(l.current),r={threshold:0};n&&(r.root=n,r.rootMargin=`0px`);let i=new IntersectionObserver(t,r),a=setTimeout(()=>{c.current&&i.observe(c.current)},200);return()=>{clearTimeout(a),u.current&&clearTimeout(u.current),i.disconnect()}},[]),(0,i.jsxs)(o.Provider,{value:{hasContentBelow:a},children:[(0,i.jsx)(r.Box,{ref:l,position:`sticky`,top:`0`,left:`0`,w:`full`,borderRadius:`24px 24px 0px 0px`,backdropFilter:a?p:`none`,style:{WebkitBackdropFilter:a?p:`none`},zIndex:1e3,boxShadow:a?`0px 2px 4px 1px rgb(0 0 0 / 10%)`:`none`,transition:`box-shadow 0.2s ease-in-out`,children:e}),(0,i.jsx)(`div`,{ref:c,style:{height:`1px`,width:`100%`,pointerEvents:`none`,visibility:`hidden`,marginTop:`-1px`}})]})},l=({scrollableContainerRef:e,observerRef:a})=>{let o=(0,r.useToken)(`colors`,`vechain-kit-border`),{tokens:s}=t.r(),c=s?.effects?.backdropFilter?.stickyHeader??`blur(20px)`,[l,u]=(0,n.useState)(!1),d=(0,n.useRef)(null),f=(0,n.useRef)(!0);return(0,n.useEffect)(()=>{let t=([e])=>{d.current&&clearTimeout(d.current),d.current=setTimeout(()=>{if(f.current){f.current=!1,u(!1);return}u(!e.isIntersecting)},50)},n={threshold:0};e.current&&(n.root=e.current,n.rootMargin=`0px`);let r=new IntersectionObserver(t,n),i=setTimeout(()=>{a.current&&r.observe(a.current)},200);return()=>{clearTimeout(i),d.current&&clearTimeout(d.current),r.disconnect()}},[e,a]),(0,i.jsx)(r.Box,{position:`sticky`,top:`0`,w:`full`,backdropFilter:l?c:`none`,style:{WebkitBackdropFilter:l?c:`none`},zIndex:999,transition:`backdrop-filter 0.2s ease-in-out`,children:(0,i.jsx)(r.Box,{mx:`auto`,w:`34px`,h:`5px`,bg:o,mt:4,rounded:`full`})})},u=({isOpen:e,onClose:o,children:s,ariaTitle:c,ariaDescription:u,isDismissable:d=!0,minHeight:f,maxHeight:p=`68vh`,closeThreshold:m=.5})=>{let h=(0,r.useToken)(`colors`,`vechain-kit-modal`),g=(0,r.useToken)(`colors`,`vechain-kit-overlay`),_=(0,n.useRef)(null),v=(0,n.useRef)(null),{tokens:y}=t.r(),b=y?.effects?.backdropFilter?.overlay,x=y?.colors?.border?.modal||`none`;return(0,i.jsx)(a.Drawer.Root,{dismissible:d,shouldScaleBackground:!0,repositionInputs:!1,open:e,closeThreshold:m,onOpenChange:e=>{e||o()},children:(0,i.jsxs)(a.Drawer.Portal,{children:[(0,i.jsx)(a.Drawer.Overlay,{style:{zIndex:100,position:`fixed`,top:0,right:0,bottom:0,left:0,backgroundColor:g,backdropFilter:b,WebkitBackdropFilter:b}}),(0,i.jsxs)(a.Drawer.Content,{"aria-description":u,style:{zIndex:101,backgroundColor:h,borderRadius:`24px 24px 0 0`,border:x,position:`fixed`,bottom:0,left:0,right:0,...f&&{minHeight:f},maxHeight:p,display:`flex`,flexDirection:`column`},children:[(0,i.jsx)(a.Drawer.Title,{style:{position:`absolute`,width:`1px`,height:`1px`,padding:0,margin:`-1px`,overflow:`hidden`,clip:`rect(0, 0, 0, 0)`,whiteSpace:`nowrap`,borderWidth:0},children:c}),(0,i.jsxs)(r.Box,{ref:_,flex:`1`,overflowY:`auto`,children:[(0,i.jsx)(l,{scrollableContainerRef:_,observerRef:v}),(0,i.jsx)(`div`,{ref:v,style:{height:`1px`,width:`100%`,visibility:`hidden`,marginTop:`-1px`}}),s]})]})]})})},d=({isOpen:e,onClose:n,children:a,size:o=`sm`,isCentered:s=!0,motionPreset:c=`slideInBottom`,closeOnOverlayClick:l=!0,blockScrollOnMount:d=!1,allowExternalFocus:f=!1,backdropFilter:p,isCloseable:m=!0,useBottomSheetOnMobile:h,mobileMinHeight:g,mobileMaxHeight:_=`57vh`,desktopMinHeight:v,desktopMaxHeight:y})=>{let[b]=(0,r.useMediaQuery)(`(min-width: 768px)`),{portalRootRef:x,themeConfig:S,tokens:C}=t.r(),w=h??S?.modal?.useBottomSheetOnMobile??!1,T=(0,r.useToken)(`colors`,`vechain-kit-modal`),E=(0,r.useToken)(`colors`,`vechain-kit-overlay`),D=C?.effects?.backdropFilter?.overlay,O=C?.effects?.backdropFilter?.modal,k=p??D??`blur(3px)`,A=b?{minHeight:v,maxHeight:y}:{position:`fixed`,bottom:`0`,mb:`0`,maxW:`2xl`,borderRadius:`24px 24px 0px 0px !important`,overflowY:`auto`,overflowX:`hidden`,scrollBehavior:`smooth`,minHeight:g,maxHeight:_},j=(0,i.jsxs)(r.Modal,{motionPreset:c,isOpen:e,onClose:n,isCentered:s,size:o,returnFocusOnClose:!1,blockScrollOnMount:d,closeOnOverlayClick:l&&m,preserveScrollBarGap:!0,portalProps:{containerRef:x},trapFocus:!f,autoFocus:!f,variant:`vechainKitBase`,children:[(0,i.jsx)(r.ModalOverlay,{bg:E,backdropFilter:k}),(0,i.jsx)(r.ModalContent,{role:`dialog`,"aria-modal":!f,bg:T,sx:{backdropFilter:O,WebkitBackdropFilter:O},...A,children:a})]});return(0,i.jsx)(i.Fragment,{children:!b&&w?(0,i.jsx)(r.Modal,{isOpen:e,onClose:n,size:o,blockScrollOnMount:!1,trapFocus:!1,children:(0,i.jsx)(u,{isOpen:e,onClose:n,ariaTitle:`Dialog`,ariaDescription:`Dialog content area`,isDismissable:m,minHeight:g,maxHeight:_,children:a})}):j})};Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return d}});
+//# sourceMappingURL=BaseModal-yevRjczw.cjs.map

package/dist/BaseModal-yevRjczw.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseModal-yevRjczw.cjs","names":["useVechainKitThemeConfig","current: HTMLElement | null","observerOptions: IntersectionObserverInit","Box","useVechainKitThemeConfig","observerOptions: IntersectionObserverInit","Box","Drawer","useVechainKitThemeConfig","modalContentProps: ModalContentProps","Modal","ModalOverlay","ModalContent"],"sources":["../src/components/common/StickyHeaderContainer.tsx","../src/components/common/BaseBottomSheet.tsx","../src/components/common/BaseModal.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react';\nimport { useEffect, useState, useRef, createContext, useContext } from 'react';\n// Direct import to avoid circular dependency through barrel exports\nimport { useVechainKitThemeConfig } from '../../providers/VechainKitThemeProvider';\n\ntype Props = {\n    children: React.ReactNode;\n};\n\n// Context to share hasContentBelow state with bottom sheet handle\nconst StickyHeaderContext = createContext<{\n    hasContentBelow: boolean;\n}>({ hasContentBelow: false });\n\nexport const useStickyHeaderContext = () => useContext(StickyHeaderContext);\n\nexport const StickyHeaderContainer = ({ children }: Props) => {\n    const [hasContentBelow, setHasContentBelow] = useState(false);\n    const observerRef = useRef<HTMLDivElement>(null);\n    const headerRef = useRef<HTMLDivElement>(null);\n    const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n    const isInitialMountRef = useRef(true);\n\n    // Use semantic tokens for sticky header\n    const { tokens } = useVechainKitThemeConfig();\n    const backdropFilter =\n        tokens?.effects?.backdropFilter?.stickyHeader ?? 'blur(20px)';\n\n    useEffect(() => {\n        // Find the scrollable container (parent with overflow-y: auto)\n        const findScrollableContainer = (\n            element: HTMLElement | null,\n        ): HTMLElement | null => {\n            if (!element) return null;\n            let current: HTMLElement | null = element.parentElement;\n            while (current) {\n                const style = window.getComputedStyle(current);\n                if (\n                    style.overflowY === 'auto' ||\n                    style.overflowY === 'scroll' ||\n                    style.overflow === 'auto' ||\n                    style.overflow === 'scroll'\n                ) {\n                    return current;\n                }\n                current = current.parentElement;\n            }\n            return null;\n        };\n\n        // Ignore intersection changes during initial mount and transitions\n        // This prevents the glitch when content is animating in\n        const handleIntersection = ([entry]: IntersectionObserverEntry[]) => {\n            // Clear any pending timeout\n            if (timeoutRef.current) {\n                clearTimeout(timeoutRef.current);\n            }\n\n            // Debounce the state update to prevent rapid changes during animations\n            timeoutRef.current = setTimeout(() => {\n                // On initial mount, always start with false to prevent glitch\n                if (isInitialMountRef.current) {\n                    isInitialMountRef.current = false;\n                    setHasContentBelow(false);\n                    return;\n                }\n                setHasContentBelow(!entry.isIntersecting);\n            }, 50); // Small debounce to let animations settle\n        };\n\n        const scrollableContainer = findScrollableContainer(headerRef.current);\n\n        const observerOptions: IntersectionObserverInit = {\n            threshold: 0,\n        };\n\n        // If we found a scrollable container, use it as the root\n        if (scrollableContainer) {\n            observerOptions.root = scrollableContainer;\n            observerOptions.rootMargin = '0px';\n        }\n\n        const observer = new IntersectionObserver(\n            handleIntersection,\n            observerOptions,\n        );\n\n        // Delay observation slightly to avoid initial glitch\n        const observeTimeout = setTimeout(() => {\n            if (observerRef.current) {\n                observer.observe(observerRef.current);\n            }\n        }, 200); // Wait for animation to complete (0.17s + small buffer)\n\n        return () => {\n            clearTimeout(observeTimeout);\n            if (timeoutRef.current) {\n                clearTimeout(timeoutRef.current);\n            }\n            observer.disconnect();\n        };\n    }, []);\n\n    return (\n        <StickyHeaderContext.Provider value={{ hasContentBelow }}>\n            <Box\n                ref={headerRef}\n                position={'sticky'}\n                top={'0'}\n                left={'0'}\n                w={'full'}\n                borderRadius={'24px 24px 0px 0px'}\n                backdropFilter={hasContentBelow ? backdropFilter : 'none'}\n                style={{\n                    WebkitBackdropFilter: hasContentBelow\n                        ? backdropFilter\n                        : 'none',\n                }}\n                zIndex={1000}\n                boxShadow={\n                    hasContentBelow\n                        ? '0px 2px 4px 1px rgb(0 0 0 / 10%)'\n                        : 'none'\n                }\n                transition=\"box-shadow 0.2s ease-in-out\"\n            >\n                {children}\n            </Box>\n            <div\n                ref={observerRef}\n                style={{\n                    height: '1px',\n                    width: '100%',\n                    pointerEvents: 'none',\n                    visibility: 'hidden',\n                    marginTop: '-1px',\n                }}\n            />\n        </StickyHeaderContext.Provider>\n    );\n};\n","import { Box, useToken } from '@chakra-ui/react';\nimport { Drawer } from 'vaul';\nimport { useEffect, useState, useRef } from 'react';\n// Direct import to avoid circular dependency through barrel exports\nimport { useVechainKitThemeConfig } from '../../providers/VechainKitThemeProvider';\n\ntype Props = {\n    isOpen: boolean;\n    onClose: () => void;\n    height?: string;\n    children: React.ReactNode;\n    ariaTitle: string;\n    ariaDescription: string;\n    isDismissable?: boolean;\n    minHeight?: string;\n    maxHeight?: string;\n    closeThreshold?: number;\n};\n\n/**\n * HandleArea component for the bottom sheet drag indicator\n *\n * PROBLEM: When content scrolls in the bottom sheet, the sticky header (from StickyHeaderContainer)\n * gets a backdrop filter effect, but the drawer handle (drag indicator) above it doesn't,\n * creating a visual inconsistency where part of the top area has the effect and part doesn't.\n *\n * SOLUTION: This component makes the handle area also sticky and applies the same backdrop filter\n * effect when content scrolls below it. It uses an IntersectionObserver to detect when content\n * has scrolled past a sentinel element, similar to how StickyHeaderContainer works.\n *\n * IMPORTANT: The handle must be rendered INSIDE the scrollable container (not as a sibling)\n * so that the IntersectionObserver can properly detect scrolling within that container's viewport.\n * If the handle were outside the scrollable container, the observer wouldn't detect scroll events.\n */\nconst HandleArea = ({\n    scrollableContainerRef,\n    observerRef,\n}: {\n    scrollableContainerRef: React.RefObject<HTMLDivElement>;\n    observerRef: React.RefObject<HTMLDivElement>;\n}) => {\n    const handleBg = useToken('colors', 'vechain-kit-border');\n    const { tokens } = useVechainKitThemeConfig();\n    const backdropFilter =\n        tokens?.effects?.backdropFilter?.stickyHeader ?? 'blur(20px)';\n    const [hasContentBelow, setHasContentBelow] = useState(false);\n    const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n    const isInitialMountRef = useRef(true);\n\n    useEffect(() => {\n        /**\n         * IntersectionObserver callback that detects when the sentinel element\n         * (observerRef) scrolls out of view. When it's not intersecting, it means\n         * content has scrolled past the handle area, so we apply the backdrop filter.\n         */\n        const handleIntersection = ([entry]: IntersectionObserverEntry[]) => {\n            if (timeoutRef.current) {\n                clearTimeout(timeoutRef.current);\n            }\n\n            // Debounce state updates to prevent rapid changes during animations\n            timeoutRef.current = setTimeout(() => {\n                // On initial mount, always start with false to prevent visual glitch\n                if (isInitialMountRef.current) {\n                    isInitialMountRef.current = false;\n                    setHasContentBelow(false);\n                    return;\n                }\n                // When sentinel is not intersecting, content has scrolled below\n                setHasContentBelow(!entry.isIntersecting);\n            }, 50);\n        };\n\n        const observerOptions: IntersectionObserverInit = {\n            threshold: 0,\n        };\n\n        // Use the scrollable container as the root for the observer\n        // This ensures we detect intersections relative to the scrollable viewport,\n        // not the document viewport\n        if (scrollableContainerRef.current) {\n            observerOptions.root = scrollableContainerRef.current;\n            observerOptions.rootMargin = '0px';\n        }\n\n        const observer = new IntersectionObserver(\n            handleIntersection,\n            observerOptions,\n        );\n\n        // Delay observation to avoid initial glitch when content is animating in\n        const observeTimeout = setTimeout(() => {\n            if (observerRef.current) {\n                observer.observe(observerRef.current);\n            }\n        }, 200);\n\n        return () => {\n            clearTimeout(observeTimeout);\n            if (timeoutRef.current) {\n                clearTimeout(timeoutRef.current);\n            }\n            observer.disconnect();\n        };\n    }, [scrollableContainerRef, observerRef]);\n\n    return (\n        <Box\n            position=\"sticky\"\n            top=\"0\"\n            w=\"full\"\n            // Apply backdrop filter when content has scrolled below the handle\n            // This matches the effect applied to StickyHeaderContainer for visual consistency\n            backdropFilter={hasContentBelow ? backdropFilter : 'none'}\n            style={{\n                WebkitBackdropFilter: hasContentBelow ? backdropFilter : 'none',\n            }}\n            zIndex={999}\n            transition=\"backdrop-filter 0.2s ease-in-out\"\n        >\n            {/* Drawer handle / drag indicator */}\n            <Box\n                mx={'auto'}\n                w={'34px'}\n                h={'5px'}\n                bg={handleBg}\n                mt={4}\n                rounded={'full'}\n            />\n        </Box>\n    );\n};\n\nexport const BaseBottomSheet = ({\n    isOpen,\n    onClose,\n    children,\n    ariaTitle,\n    ariaDescription,\n    isDismissable = true,\n    minHeight,\n    maxHeight = '68vh',\n    closeThreshold = 0.5,\n}: Props) => {\n    // Use semantic tokens for bottom sheet and overlay colors\n    const modalBg = useToken('colors', 'vechain-kit-modal');\n    const overlayBg = useToken('colors', 'vechain-kit-overlay');\n    const scrollableContainerRef = useRef<HTMLDivElement>(null);\n    const handleObserverRef = useRef<HTMLDivElement>(null);\n\n    // Get backdrop filter from tokens context\n    const { tokens } = useVechainKitThemeConfig();\n    const overlayBackdropFilter = tokens?.effects?.backdropFilter?.overlay;\n    const modalBorder = tokens?.colors?.border?.modal || 'none';\n\n    return (\n        <Drawer.Root\n            dismissible={isDismissable}\n            shouldScaleBackground\n            repositionInputs={false}\n            open={isOpen}\n            closeThreshold={closeThreshold}\n            onOpenChange={(open) => {\n                if (!open) {\n                    onClose();\n                }\n            }}\n        >\n            <Drawer.Portal>\n                <Drawer.Overlay\n                    style={{\n                        zIndex: 100,\n                        position: 'fixed',\n                        top: 0,\n                        right: 0,\n                        bottom: 0,\n                        left: 0,\n                        backgroundColor: overlayBg,\n                        backdropFilter: overlayBackdropFilter,\n                        WebkitBackdropFilter: overlayBackdropFilter,\n                    }}\n                />\n                <Drawer.Content\n                    aria-description={ariaDescription}\n                    style={{\n                        zIndex: 101,\n                        backgroundColor: modalBg,\n                        borderRadius: '24px 24px 0 0',\n                        border: modalBorder,\n                        position: 'fixed',\n                        bottom: 0,\n                        left: 0,\n                        right: 0,\n                        ...(minHeight && { minHeight }),\n                        maxHeight,\n                        display: 'flex',\n                        flexDirection: 'column',\n                    }}\n                >\n                    <Drawer.Title\n                        style={{\n                            position: 'absolute',\n                            width: '1px',\n                            height: '1px',\n                            padding: 0,\n                            margin: '-1px',\n                            overflow: 'hidden',\n                            clip: 'rect(0, 0, 0, 0)',\n                            whiteSpace: 'nowrap',\n                            borderWidth: 0,\n                        }}\n                    >\n                        {ariaTitle}\n                    </Drawer.Title>\n\n                    {/* \n                        Scrollable container that wraps all content.\n                        The handle must be INSIDE this container (not as a sibling) so that:\n                        1. The IntersectionObserver can detect scrolling within this container's viewport\n                        2. The handle can be sticky relative to this scrollable container\n                        3. The backdrop filter effect works consistently with StickyHeaderContainer\n                    */}\n                    <Box ref={scrollableContainerRef} flex=\"1\" overflowY=\"auto\">\n                        {/* \n                            Sticky handle area that gets backdrop filter when content scrolls.\n                            Positioned first so it stays at the top when scrolling.\n                        */}\n                        <HandleArea\n                            scrollableContainerRef={scrollableContainerRef}\n                            observerRef={handleObserverRef}\n                        />\n                        {/* \n                            Sentinel element for IntersectionObserver.\n                            When this invisible 1px element scrolls out of view, it means content\n                            has scrolled past the handle area, triggering the backdrop filter effect.\n                            Positioned right after the handle so it's at the boundary between\n                            handle and content.\n                        */}\n                        <div\n                            ref={handleObserverRef}\n                            style={{\n                                height: '1px',\n                                width: '100%',\n                                // pointerEvents: 'none',\n                                visibility: 'hidden',\n                                marginTop: '-1px',\n                            }}\n                        />\n                        {children}\n                    </Box>\n                </Drawer.Content>\n            </Drawer.Portal>\n        </Drawer.Root>\n    );\n};\n","import {\n    Modal,\n    ModalContent,\n    ModalContentProps,\n    ModalOverlay,\n    useMediaQuery,\n    useToken,\n} from '@chakra-ui/react';\nimport { ReactNode } from 'react';\n// Direct import to avoid circular dependency through barrel exports\nimport { useVechainKitThemeConfig } from '../../providers/VechainKitThemeProvider';\nimport { BaseBottomSheet } from './BaseBottomSheet';\n\ntype BaseModalProps = {\n    isOpen: boolean;\n    onClose: () => void;\n    children: ReactNode;\n    size?: string;\n    isCentered?: boolean;\n    motionPreset?: 'slideInBottom' | 'none';\n    trapFocus?: boolean;\n    closeOnOverlayClick?: boolean;\n    blockScrollOnMount?: boolean;\n    autoFocus?: boolean;\n    initialFocusRef?: React.RefObject<HTMLElement>;\n    allowExternalFocus?: boolean;\n    backdropFilter?: string;\n    isCloseable?: boolean;\n    /**\n     * Whether to use bottom sheet on mobile devices.\n     * When false (default), uses regular modal on all screen sizes.\n     * When true, uses bottom sheet on mobile (< 768px) and regular modal on desktop.\n     */\n    useBottomSheetOnMobile?: boolean;\n    /**\n     * Minimum and maximum height for the modal on mobile devices.\n     */\n    mobileMinHeight?: string;\n    mobileMaxHeight?: string;\n    desktopMinHeight?: string;\n    desktopMaxHeight?: string;\n};\n\nexport const BaseModal = ({\n    isOpen,\n    onClose,\n    children,\n    size = 'sm',\n    isCentered = true,\n    motionPreset = 'slideInBottom',\n    closeOnOverlayClick = true,\n    blockScrollOnMount = false,\n    allowExternalFocus = false,\n    backdropFilter,\n    isCloseable = true,\n    useBottomSheetOnMobile,\n    mobileMinHeight,\n    mobileMaxHeight = '57vh',\n    desktopMinHeight,\n    desktopMaxHeight,\n}: BaseModalProps) => {\n    const [isDesktop] = useMediaQuery('(min-width: 768px)');\n    const { portalRootRef, themeConfig, tokens } = useVechainKitThemeConfig();\n\n    // Get useBottomSheetOnMobile from theme config if not provided as prop\n    // Prop takes precedence over theme config\n    const shouldUseBottomSheetOnMobile =\n        useBottomSheetOnMobile ??\n        themeConfig?.modal?.useBottomSheetOnMobile ??\n        false;\n\n    // Use semantic tokens for modal and overlay colors\n    const modalBg = useToken('colors', 'vechain-kit-modal');\n    const overlayBg = useToken('colors', 'vechain-kit-overlay');\n\n    // Get backdrop filter from tokens context\n    const defaultBackdropFilter = tokens?.effects?.backdropFilter?.overlay;\n    const modalBackdropFilter = tokens?.effects?.backdropFilter?.modal;\n    const effectiveBackdropFilter =\n        backdropFilter ?? defaultBackdropFilter ?? 'blur(3px)';\n\n    const modalContentProps: ModalContentProps = isDesktop\n        ? {\n              minHeight: desktopMinHeight,\n              maxHeight: desktopMaxHeight,\n          }\n        : {\n              position: 'fixed',\n              bottom: '0',\n              mb: '0',\n              maxW: '2xl',\n              borderRadius: '24px 24px 0px 0px !important',\n              overflowY: 'auto',\n              overflowX: 'hidden',\n              scrollBehavior: 'smooth',\n              minHeight: mobileMinHeight,\n              maxHeight: mobileMaxHeight,\n          };\n\n    const modalContent = (\n        <Modal\n            motionPreset={motionPreset}\n            isOpen={isOpen}\n            onClose={onClose}\n            isCentered={isCentered}\n            size={size}\n            returnFocusOnClose={false}\n            blockScrollOnMount={blockScrollOnMount}\n            closeOnOverlayClick={closeOnOverlayClick && isCloseable}\n            preserveScrollBarGap={true}\n            portalProps={{ containerRef: portalRootRef }}\n            trapFocus={!allowExternalFocus}\n            autoFocus={!allowExternalFocus}\n            variant=\"vechainKitBase\"\n        >\n            <ModalOverlay\n                bg={overlayBg}\n                backdropFilter={effectiveBackdropFilter}\n            />\n            <ModalContent\n                role=\"dialog\"\n                aria-modal={!allowExternalFocus}\n                bg={modalBg}\n                sx={{\n                    backdropFilter: modalBackdropFilter,\n                    WebkitBackdropFilter: modalBackdropFilter,\n                }}\n                {...modalContentProps}\n            >\n                {children}\n            </ModalContent>\n        </Modal>\n    );\n\n    // We still wrap the bottomsheet within the modal,\n    // because we need access to the modal context (eg: setCurrentContent())\n    const bottomSheetContent = (\n        <Modal\n            isOpen={isOpen}\n            onClose={onClose}\n            size={size}\n            blockScrollOnMount={false}\n            trapFocus={false}\n        >\n            <BaseBottomSheet\n                isOpen={isOpen}\n                onClose={onClose}\n                ariaTitle={'Dialog'}\n                ariaDescription={'Dialog content area'}\n                isDismissable={isCloseable}\n                minHeight={mobileMinHeight}\n                maxHeight={mobileMaxHeight}\n            >\n                {children}\n            </BaseBottomSheet>\n        </Modal>\n    );\n\n    // Use bottom sheet only on mobile when explicitly enabled\n    // By default, use regular modal on all screen sizes\n    const shouldUseBottomSheet = !isDesktop && shouldUseBottomSheetOnMobile;\n\n    return <>{shouldUseBottomSheet ? bottomSheetContent : modalContent}</>;\n};\n"],"mappings":"kMAUA,MAAM,GAAA,EAAA,EAAA,eAEH,CAAE,gBAAiB,GAAO,CAAC,CAEjB,OAAA,EAAA,EAAA,YAA0C,EAAoB,CAE9D,GAAyB,CAAE,cAAsB,CAC1D,GAAM,CAAC,EAAiB,IAAA,EAAA,EAAA,UAA+B,GAAM,CACvD,GAAA,EAAA,EAAA,QAAqC,KAAK,CAC1C,GAAA,EAAA,EAAA,QAAmC,KAAK,CACxC,GAAA,EAAA,EAAA,QAA2C,KAAK,CAChD,GAAA,EAAA,EAAA,QAA2B,GAAK,CAGhC,CAAE,UAAWA,EAAAA,GAA0B,CACvC,EACF,GAAQ,SAAS,gBAAgB,cAAgB,aA6ErD,OA3EA,EAAA,EAAA,eAAgB,CAEZ,IAAM,EACF,GACqB,CACrB,GAAI,CAAC,EAAS,OAAO,KACrB,IAAIC,EAA8B,EAAQ,cAC1C,KAAO,GAAS,CACZ,IAAM,EAAQ,OAAO,iBAAiB,EAAQ,CAC9C,GACI,EAAM,YAAc,QACpB,EAAM,YAAc,UACpB,EAAM,WAAa,QACnB,EAAM,WAAa,SAEnB,OAAO,EAEX,EAAU,EAAQ,cAEtB,OAAO,MAKL,GAAsB,CAAC,KAAwC,CAE7D,EAAW,SACX,aAAa,EAAW,QAAQ,CAIpC,EAAW,QAAU,eAAiB,CAElC,GAAI,EAAkB,QAAS,CAC3B,EAAkB,QAAU,GAC5B,EAAmB,GAAM,CACzB,OAEJ,EAAmB,CAAC,EAAM,eAAe,EAC1C,GAAG,EAGJ,EAAsB,EAAwB,EAAU,QAAQ,CAEhEC,EAA4C,CAC9C,UAAW,EACd,CAGG,IACA,EAAgB,KAAO,EACvB,EAAgB,WAAa,OAGjC,IAAM,EAAW,IAAI,qBACjB,EACA,EACH,CAGK,EAAiB,eAAiB,CAChC,EAAY,SACZ,EAAS,QAAQ,EAAY,QAAQ,EAE1C,IAAI,CAEP,UAAa,CACT,aAAa,EAAe,CACxB,EAAW,SACX,aAAa,EAAW,QAAQ,CAEpC,EAAS,YAAY,GAE1B,EAAE,CAAC,EAGF,EAAA,EAAA,MAAC,EAAoB,SAAA,CAAS,MAAO,CAAE,kBAAiB,YACpD,EAAA,EAAA,KAACC,EAAAA,IAAAA,CACG,IAAK,EACL,SAAU,SACV,IAAK,IACL,KAAM,IACN,EAAG,OACH,aAAc,oBACd,eAAgB,EAAkB,EAAiB,OACnD,MAAO,CACH,qBAAsB,EAChB,EACA,OACT,CACD,OAAQ,IACR,UACI,EACM,mCACA,OAEV,WAAW,8BAEV,YACC,EACN,EAAA,EAAA,KAAC,MAAA,CACG,IAAK,EACL,MAAO,CACH,OAAQ,MACR,MAAO,OACP,cAAe,OACf,WAAY,SACZ,UAAW,OACd,EACH,CAAA,EACyB,ECxGjC,GAAc,CAChB,yBACA,iBAIE,CACF,IAAM,GAAA,EAAA,EAAA,UAAoB,SAAU,qBAAqB,CACnD,CAAE,UAAWC,EAAAA,GAA0B,CACvC,EACF,GAAQ,SAAS,gBAAgB,cAAgB,aAC/C,CAAC,EAAiB,IAAA,EAAA,EAAA,UAA+B,GAAM,CACvD,GAAA,EAAA,EAAA,QAA2C,KAAK,CAChD,GAAA,EAAA,EAAA,QAA2B,GAAK,CA2DtC,OAzDA,EAAA,EAAA,eAAgB,CAMZ,IAAM,GAAsB,CAAC,KAAwC,CAC7D,EAAW,SACX,aAAa,EAAW,QAAQ,CAIpC,EAAW,QAAU,eAAiB,CAElC,GAAI,EAAkB,QAAS,CAC3B,EAAkB,QAAU,GAC5B,EAAmB,GAAM,CACzB,OAGJ,EAAmB,CAAC,EAAM,eAAe,EAC1C,GAAG,EAGJC,EAA4C,CAC9C,UAAW,EACd,CAKG,EAAuB,UACvB,EAAgB,KAAO,EAAuB,QAC9C,EAAgB,WAAa,OAGjC,IAAM,EAAW,IAAI,qBACjB,EACA,EACH,CAGK,EAAiB,eAAiB,CAChC,EAAY,SACZ,EAAS,QAAQ,EAAY,QAAQ,EAE1C,IAAI,CAEP,UAAa,CACT,aAAa,EAAe,CACxB,EAAW,SACX,aAAa,EAAW,QAAQ,CAEpC,EAAS,YAAY,GAE1B,CAAC,EAAwB,EAAY,CAAC,EAGrC,EAAA,EAAA,KAACC,EAAAA,IAAAA,CACG,SAAS,SACT,IAAI,IACJ,EAAE,OAGF,eAAgB,EAAkB,EAAiB,OACnD,MAAO,CACH,qBAAsB,EAAkB,EAAiB,OAC5D,CACD,OAAQ,IACR,WAAW,6CAGX,EAAA,EAAA,KAACA,EAAAA,IAAAA,CACG,GAAI,OACJ,EAAG,OACH,EAAG,MACH,GAAI,EACJ,GAAI,EACJ,QAAS,QACX,EACA,EAID,GAAmB,CAC5B,SACA,UACA,WACA,YACA,kBACA,gBAAgB,GAChB,YACA,YAAY,OACZ,iBAAiB,MACR,CAET,IAAM,GAAA,EAAA,EAAA,UAAmB,SAAU,oBAAoB,CACjD,GAAA,EAAA,EAAA,UAAqB,SAAU,sBAAsB,CACrD,GAAA,EAAA,EAAA,QAAgD,KAAK,CACrD,GAAA,EAAA,EAAA,QAA2C,KAAK,CAGhD,CAAE,UAAWF,EAAAA,GAA0B,CACvC,EAAwB,GAAQ,SAAS,gBAAgB,QACzD,EAAc,GAAQ,QAAQ,QAAQ,OAAS,OAErD,OACI,EAAA,EAAA,KAACG,EAAAA,OAAO,KAAA,CACJ,YAAa,EACb,sBAAA,GACA,iBAAkB,GAClB,KAAM,EACU,iBAChB,aAAe,GAAS,CACf,GACD,GAAS,YAIjB,EAAA,EAAA,MAACA,EAAAA,OAAO,OAAA,CAAA,SAAA,EACJ,EAAA,EAAA,KAACA,EAAAA,OAAO,QAAA,CACJ,MAAO,CACH,OAAQ,IACR,SAAU,QACV,IAAK,EACL,MAAO,EACP,OAAQ,EACR,KAAM,EACN,gBAAiB,EACjB,eAAgB,EAChB,qBAAsB,EACzB,CAAA,CACH,EACF,EAAA,EAAA,MAACA,EAAAA,OAAO,QAAA,CACJ,mBAAkB,EAClB,MAAO,CACH,OAAQ,IACR,gBAAiB,EACjB,aAAc,gBACd,OAAQ,EACR,SAAU,QACV,OAAQ,EACR,KAAM,EACN,MAAO,EACP,GAAI,GAAa,CAAE,YAAW,CAC9B,YACA,QAAS,OACT,cAAe,SAClB,YAED,EAAA,EAAA,KAACA,EAAAA,OAAO,MAAA,CACJ,MAAO,CACH,SAAU,WACV,MAAO,MACP,OAAQ,MACR,QAAS,EACT,OAAQ,OACR,SAAU,SACV,KAAM,mBACN,WAAY,SACZ,YAAa,EAChB,UAEA,GACU,EASf,EAAA,EAAA,MAACD,EAAAA,IAAAA,CAAI,IAAK,EAAwB,KAAK,IAAI,UAAU,kBAKjD,EAAA,EAAA,KAAC,EAAA,CAC2B,yBACxB,YAAa,GACf,EAQF,EAAA,EAAA,KAAC,MAAA,CACG,IAAK,EACL,MAAO,CACH,OAAQ,MACR,MAAO,OAEP,WAAY,SACZ,UAAW,OACd,EACH,CACD,IACC,CAAA,EACO,CAAA,CAAA,CACL,EACN,ECjNT,GAAa,CACtB,SACA,UACA,WACA,OAAO,KACP,aAAa,GACb,eAAe,gBACf,sBAAsB,GACtB,qBAAqB,GACrB,qBAAqB,GACrB,iBACA,cAAc,GACd,yBACA,kBACA,kBAAkB,OAClB,mBACA,sBACkB,CAClB,GAAM,CAAC,IAAA,EAAA,EAAA,eAA2B,qBAAqB,CACjD,CAAE,gBAAe,cAAa,UAAWE,EAAAA,GAA0B,CAInE,EACF,GACA,GAAa,OAAO,wBACpB,GAGE,GAAA,EAAA,EAAA,UAAmB,SAAU,oBAAoB,CACjD,GAAA,EAAA,EAAA,UAAqB,SAAU,sBAAsB,CAGrD,EAAwB,GAAQ,SAAS,gBAAgB,QACzD,EAAsB,GAAQ,SAAS,gBAAgB,MACvD,EACF,GAAkB,GAAyB,YAEzCC,EAAuC,EACvC,CACI,UAAW,EACX,UAAW,EACd,CACD,CACI,SAAU,QACV,OAAQ,IACR,GAAI,IACJ,KAAM,MACN,aAAc,+BACd,UAAW,OACX,UAAW,SACX,eAAgB,SAChB,UAAW,EACX,UAAW,EACd,CAED,GACF,EAAA,EAAA,MAACC,EAAAA,MAAAA,CACiB,eACN,SACC,UACG,aACN,OACN,mBAAoB,GACA,qBACpB,oBAAqB,GAAuB,EAC5C,qBAAsB,GACtB,YAAa,CAAE,aAAc,EAAe,CAC5C,UAAW,CAAC,EACZ,UAAW,CAAC,EACZ,QAAQ,4BAER,EAAA,EAAA,KAACC,EAAAA,aAAAA,CACG,GAAI,EACJ,eAAgB,GAClB,EACF,EAAA,EAAA,KAACC,EAAAA,aAAAA,CACG,KAAK,SACL,aAAY,CAAC,EACb,GAAI,EACJ,GAAI,CACA,eAAgB,EAChB,qBAAsB,EACzB,CACD,GAAI,EAEH,YACU,CAAA,EACX,CA+BZ,OAAO,EAAA,EAAA,KAAA,EAAA,SAAA,CAAA,SAFsB,CAAC,GAAa,GAvBvC,EAAA,EAAA,KAACF,EAAAA,MAAAA,CACW,SACC,UACH,OACN,mBAAoB,GACpB,UAAW,aAEX,EAAA,EAAA,KAAC,EAAA,CACW,SACC,UACT,UAAW,SACX,gBAAiB,sBACjB,cAAe,EACf,UAAW,EACX,UAAW,EAEV,YACa,EACd,CAO0C,EAAA,CAAgB"}

package/dist/ConnectModal-BXbiUwnz.js

@@ -0,0 +1 @@
+import"./VechainKitThemeProvider-Di9a04Es.js";import"./utils-B2Eg9TD3.js";import"./assets-CXk1qRDd.js";import"./ssrUtils-DSwxhTtm.js";import"./PrivyWalletProvider-DToo_u0W.js";import"./PrivyCrossAppProvider-B6oIXeWL.js";import"./hooks-DuTew9oP.js";import"./DisconnectConfirmContent-C9qLnI-m.js";import"./AccountModal-ChuVFqPc.js";import"./BaseModal-CWAI9-Bi.js";import{_ as e,a as t,c as n,d as r,f as i,g as a,h as o,i as s,l as c,m as l,n as u,o as d,r as f,s as p,t as m,u as h}from"./ConnectModal-C50EF9gE.js";import"./ShareButtons-B92JZp47.js";export{u as ConnectModal};

package/dist/ConnectModal-C50EF9gE.js

@@ -0,0 +1,2 @@
+import{u as e}from"./VechainKitThemeProvider-Di9a04Es.js";import{a as t}from"./utils-B2Eg9TD3.js";import{G as n,M as r,W as i,j as a}from"./assets-CXk1qRDd.js";import{F as o,L as s,R as c,T as l,tt as u}from"./PrivyWalletProvider-DToo_u0W.js";import{J as d,Lt as f,Rt as p,X as m,Y as h,dt as ee,mr as g}from"./hooks-DuTew9oP.js";import{n as _}from"./DisconnectConfirmContent-C9qLnI-m.js";import{h as te}from"./AccountModal-ChuVFqPc.js";import{n as v,t as y}from"./BaseModal-CWAI9-Bi.js";import ne,{useCallback as re,useEffect as b,useState as x}from"react";import{Box as ie,Button as S,Circle as C,Container as ae,Grid as oe,GridItem as w,HStack as T,Icon as E,IconButton as se,Image as D,Input as ce,InputGroup as le,InputLeftElement as ue,ModalBody as O,ModalCloseButton as k,ModalFooter as A,ModalHeader as j,PinInput as de,PinInputField as M,Popover as fe,PopoverBody as pe,PopoverContent as me,PopoverFooter as he,PopoverTrigger as ge,Spinner as N,Stack as _e,Text as P,VStack as F,useDisclosure as ve,useMediaQuery as I,useToken as L}from"@chakra-ui/react";import{Fragment as R,jsx as z,jsxs as B}from"react/jsx-runtime";import{useTranslation as V}from"react-i18next";import{useCreateWallet as ye,useLoginWithEmail as H}from"@privy-io/react-auth";import{LuArrowRight as U,LuChevronDown as be,LuCircleAlert as xe,LuCircleHelp as Se,LuEllipsis as Ce,LuFingerprint as we,LuGithub as Te,LuMail as W,LuPlus as Ee,LuRefreshCw as G,LuWallet as De}from"react-icons/lu";import{FcGoogle as K}from"react-icons/fc";import{FaDiscord as Oe,FaXTwitter as ke}from"react-icons/fa6";import{motion as Ae,useReducedMotion as je}from"framer-motion";const q=({onClick:e,...t})=>z(se,{"aria-label":`FAQ`,icon:z(E,{as:Se,fontSize:`17px`}),size:`sm`,variant:`vechainKitHeaderIconButtons`,position:`absolute`,lineHeight:`normal`,left:`10px`,top:`8px`,onClick:e,...t}),Me=({email:t,onResend:n,isLoading:r,isOpen:i,onClose:a})=>{let{t:o}=V(),{darkMode:s}=e(),c=L(`colors`,`vechain-kit-text-secondary`),[l,u]=x(``),[d,f]=x(null),{createWallet:p}=ye(),{loginWithCode:m}=H({onComplete:async({isNewUser:e})=>{e&&await p()}});return b(()=>{l.length===6&&m({code:l}).then(()=>{a()}).catch(e=>{f(e.message)})},[l]),B(y,{isOpen:i,onClose:a,trapFocus:!1,children:[B(v,{children:[z(j,{alignItems:`center`,display:`flex`,gap:2,children:o(`Enter confirmation code`)}),z(k,{})]}),B(ae,{maxW:`container.lg`,children:[z(O,{children:B(F,{spacing:2,children:[z(E,{as:W,w:`48px`,h:`48px`,color:c}),z(P,{fontSize:`xs`,color:c,textAlign:`center`,children:o(`Please check {{email}} for an email from privy.io and enter your code below.`,{email:t})}),z(T,{spacing:2,justify:`center`,mt:4,children:B(de,{value:l,onChange:u,otp:!0,size:`lg`,isInvalid:!!d,errorBorderColor:`#ef4444`,children:[z(M,{borderRadius:`12px`,border:`1px solid ${s?`#ffffff29`:`#ebebeb`}`,_hover:{border:`1px solid ${s?`#ffffff40`:`#e0e0e0`}`},_focus:{border:`1px solid ${s?`#ffffff60`:`#d0d0d0`}`,boxShadow:`none`},backgroundColor:s?`transparent`:`#ffffff`}),z(M,{borderRadius:`12px`,border:`1px solid ${s?`#ffffff29`:`#ebebeb`}`,_hover:{border:`1px solid ${s?`#ffffff40`:`#e0e0e0`}`},_focus:{border:`1px solid ${s?`#ffffff60`:`#d0d0d0`}`,boxShadow:`none`},backgroundColor:s?`transparent`:`#ffffff`}),z(M,{borderRadius:`12px`,border:`1px solid ${s?`#ffffff29`:`#ebebeb`}`,_hover:{border:`1px solid ${s?`#ffffff40`:`#e0e0e0`}`},_focus:{border:`1px solid ${s?`#ffffff60`:`#d0d0d0`}`,boxShadow:`none`},backgroundColor:s?`transparent`:`#ffffff`}),z(M,{borderRadius:`12px`,border:`1px solid ${s?`#ffffff29`:`#ebebeb`}`,_hover:{border:`1px solid ${s?`#ffffff40`:`#e0e0e0`}`},_focus:{border:`1px solid ${s?`#ffffff60`:`#d0d0d0`}`,boxShadow:`none`},backgroundColor:s?`transparent`:`#ffffff`}),z(M,{borderRadius:`12px`,border:`1px solid ${s?`#ffffff29`:`#ebebeb`}`,_hover:{border:`1px solid ${s?`#ffffff40`:`#e0e0e0`}`},_focus:{border:`1px solid ${s?`#ffffff60`:`#d0d0d0`}`,boxShadow:`none`},backgroundColor:s?`transparent`:`#ffffff`}),z(M,{borderRadius:`12px`,border:`1px solid ${s?`#ffffff29`:`#ebebeb`}`,_hover:{border:`1px solid ${s?`#ffffff40`:`#e0e0e0`}`},_focus:{border:`1px solid ${s?`#ffffff60`:`#d0d0d0`}`,boxShadow:`none`},backgroundColor:s?`transparent`:`#ffffff`})]})}),d&&z(P,{color:`#ef4444`,fontSize:`xs`,children:d})]})}),z(A,{children:B(P,{w:`100%`,textAlign:`center`,fontSize:`14px`,color:s?`whiteAlpha.700`:`gray.600`,children:[o(`Didn't get an email?`),` `,z(S,{variant:`link`,color:`blue.500`,fontSize:`14px`,onClick:n,isLoading:r,children:o(`Resend code`)})]})})]})]})},Ne=()=>{let{t}=V(),{darkMode:n}=e(),[r,i]=x(``),{sendCode:a,state:o}=H({}),s=ve(),c=async()=>{await a({email:r}),s.onOpen()};return B(R,{children:[z(w,{colSpan:4,w:`full`,children:z(F,{spacing:3,w:`full`,children:B(le,{size:`lg`,w:`full`,children:[z(ue,{pointerEvents:`none`,height:`100%`,pl:4,children:z(E,{as:W,color:n?`whiteAlpha.600`:`blackAlpha.700`,w:`20px`,h:`20px`})}),z(ce,{placeholder:t(`your@email.com`),value:r,onChange:e=>i(e.target.value),fontSize:`16px`,fontWeight:`400`,backgroundColor:n?`transparent`:`#ffffff`,border:`1px solid ${n?`#ffffff0a`:`#ebebeb`}`,p:6,borderRadius:16,w:`full`,pl:12}),z(S,{"aria-label":`Send code`,position:`absolute`,right:2,top:`50%`,transform:`translateY(-50%)`,zIndex:2,variant:`ghost`,size:`sm`,px:6,borderRadius:`full`,isLoading:o.status===`sending-code`,onClick:c,children:t(`Submit`)})]})})}),z(Me,{isOpen:s.isOpen,onClose:s.onClose,onResend:()=>a({email:r}),email:r,isLoading:o.status===`sending-code`})]})},J=({onClick:e,text:t,icon:n,customIcon:r,rightIcon:i,style:a,variant:o=`loginIn`,iconWidth:s=`25px`})=>t?t?B(S,{...a,variant:o,w:`full`,onClick:e,children:[B(T,{w:`full`,justify:`flex-start`,gap:2,children:[r||z(E,{as:n,w:s,h:s}),z(P,{opacity:.9,children:t})]}),i]}):null:z(S,{...a,variant:o,w:`full`,onClick:e,children:r||z(E,{as:n,w:`20px`,h:`20px`})}),Pe=({isDark:e,gridColumn:t})=>{let{t:n}=V(),{initOAuth:r}=h();return z(w,{colSpan:t??4,w:`full`,children:z(J,{isDark:e,onClick:async()=>{await r({provider:`google`})},icon:K,text:n(`Continue with Google`)})})},Fe=({isDark:e,gridColumn:t})=>{let{t:n}=V(),{initOAuth:r}=h();return z(w,{colSpan:t??4,w:`full`,children:z(J,{isDark:e,onClick:async()=>{await r({provider:`github`})},icon:Te,text:n(`Continue with Github`)})})},Y=()=>{let{darkMode:t}=e(),n=25/2,[r]=I(`(max-width: 280px)`),[i]=I(`(max-width: 380px)`);return B(T,{spacing:0,ml:0,children:[z(C,{size:`25px`,borderRadius:`full`,bg:`#F8F8F8`,p:2,alignItems:`center`,justifyContent:`center`,zIndex:3,children:z(E,{as:K,fontSize:`20px`})}),!r&&z(C,{ml:`-${n}px`,size:`25px`,borderRadius:`full`,bg:`black`,p:2,alignItems:`center`,justifyContent:`center`,zIndex:2,children:z(E,{as:ke,color:`white`,fontSize:`20px`})}),!r&&!i&&z(C,{ml:`-${n}px`,zIndex:1,size:`25px`,borderRadius:`full`,bg:`#5865F2`,p:2,alignItems:`center`,justifyContent:`center`,children:z(E,{as:Oe,color:`white`,fontSize:`20px`})}),z(E,{zIndex:1,as:Ee,color:t?`black`:`white`,fontSize:`15px`})]})},Ie=({isDark:e,gridColumn:t})=>{let{t:r}=V(),{login:a}=u();return z(w,{colSpan:t||4,w:`full`,children:z(J,{isDark:e,onClick:a,icon:e?i:n,text:r(`Use social login with VeChain`),variant:`loginWithVechain`,rightIcon:z(Y,{})})})},Le=({isDark:e,gridColumn:t,setCurrentContent:r})=>{let{t:a}=V(),{login:o}=d(),s=async()=>{r({type:`loading`,props:{title:a(`Connecting to VeChain`),loadingText:a(`Please approve the request in the connection request window...`),onTryAgain:s}});try{await o()}catch(e){console.error(a(`Login failed:`),e),r({type:`error`,props:{error:e instanceof Error?e.message:a(`Failed to connect with VeChain`),onTryAgain:s}})}};return z(w,{colSpan:t||4,w:`full`,children:z(J,{isDark:e,onClick:s,icon:e?i:n,text:a(`Use social login with VeChain`),variant:`loginWithVechain`,rightIcon:z(Y,{})})})},X=({isDark:e,gridColumn:t,setCurrentContent:n})=>{let{t:r}=V(),{loginWithPasskey:i}=m(),a=async()=>{n({type:`loading`,props:{title:r(`Connecting with Passkey`),loadingText:r(`Please complete the passkey authentication...`),onTryAgain:a}});try{await i()}catch(e){(e instanceof Error?e.message.toLowerCase():``).includes(`not found`)&&console.error(e),n({type:`error`,props:{error:e instanceof Error?e.message:r(`Failed to connect with Passkey`),onTryAgain:a}})}};return z(w,{colSpan:t,w:`full`,children:z(J,{isDark:e,onClick:a,icon:we,text:t&&t>=2?r(`Passkey`):void 0})})},Re=({isDark:t,gridColumn:n=2})=>{let{t:i}=V(),{open:o,onConnectionStatusChange:c}=p(),{dappKit:l}=e(),{source:u}=s(),d=l?.allowedWallets?.includes(`sync2`)?i(`Connect wallet`):i(`Connect with VeWorld wallet`);return b(()=>{c((e,t)=>{if(!e)return t?.message&&console.error(t?.message),{...u&&{source:u}}})},[c,u]),z(w,{colSpan:n||2,w:`full`,children:z(J,{isDark:t,onClick:()=>{o()},icon:l?.allowedWallets?.includes(`sync2`)?De:t?r:a,iconWidth:`27px`,text:n>=2?d:void 0,rightIcon:l?.allowedWallets?.includes(`sync2`)&&z(E,{as:U})||void 0})})},ze=({isDark:e,onViewMoreLogin:t,gridColumn:n})=>{let{t:r}=V();return z(w,{colSpan:n,w:`full`,children:z(J,{isDark:e,onClick:t,icon:Ce,text:n&&n>=2?r(`More`):void 0,rightIcon:z(E,{as:U})})})},Be=({setCurrentContent:t})=>{let{loginMethods:n,darkMode:r}=e(),{login:i}=u(),{showGoogleLogin:a,showEmailLogin:o,showPasskey:s,showVeChainLogin:c,showDappKit:l,showMoreLogin:d,showGithubLogin:f,isOfficialVeChainApp:p}=ee();return z(_e,{spacing:4,w:`full`,align:`center`,children:z(oe,{templateColumns:`repeat(4, 1fr)`,gap:2,w:`full`,children:n?.map(({method:e,gridColumn:n})=>{switch(e){case`email`:return o&&z(Ne,{},`email`);case`google`:return a&&z(Pe,{isDark:r,gridColumn:n},`google`);case`github`:return f&&z(Fe,{isDark:r,gridColumn:n},`github`);case`vechain`:return c&&(p?z(Ie,{isDark:r,gridColumn:n},`vechain`):z(Le,{isDark:r,gridColumn:n,setCurrentContent:t},`vechain`));case`passkey`:return s&&z(X,{isDark:r,gridColumn:n,setCurrentContent:t},`passkey`);case`dappkit`:return l&&z(Re,{isDark:r,gridColumn:n},`dappkit`);case`more`:return d&&z(ze,{isDark:r,onViewMoreLogin:i,gridColumn:n},`more`);default:return null}})})})},Z=({appsInfo:e,isLoading:t,setCurrentContent:n})=>{let{t:r}=V();return z(S,{fontSize:`sm`,variant:`link`,onClick:()=>n({type:`ecosystem`,props:{appsInfo:e,isLoading:t}}),children:r(`Already have an x2earn app wallet?`)})},Q=({setCurrentContent:t,onClose:n,preventAutoClose:r=!1})=>{let{t:i}=V(),{connection:a}=l(),{loginModalUI:o,darkMode:s}=e(),{loginMethods:c,privyEcosystemAppIDS:u}=e(),{data:d,isLoading:f}=g(u),p=L(`colors`,`vechain-kit-text-secondary`),m=()=>{t(`faq`)},h=c?.some(({method:e})=>e===`ecosystem`);return b(()=>{a.isConnected&&!r&&n()},[a.isConnected,n,r]),B(R,{children:[B(v,{children:[z(q,{onClick:m}),z(j,{children:i(`Log in or sign up`)}),z(k,{})]}),o?.logo&&z(T,{justify:`center`,children:z(D,{src:o.logo||`/images/favicon.png`,maxW:`180px`,maxH:`90px`,m:8,alt:`logo`})}),B(O,{children:[o?.description&&z(T,{spacing:4,w:`full`,justify:`center`,mb:`24px`,px:4,children:z(P,{color:p,fontSize:`sm`,textAlign:`center`,children:o?.description})}),z(Be,{setCurrentContent:t})]}),h?z(A,{children:z(T,{justify:`center`,w:`full`,children:z(Z,{isDark:s,appsInfo:Object.values(d||{}),isLoading:f,setCurrentContent:t})})}):z(A,{pt:0,pb:`5px`})]})},Ve=({loadingText:e,title:t,onTryAgain:n,onClose:r,onGoBack:i,showBackButton:a=!0})=>{let{t:o}=V(),[s,c]=ne.useState(!1);return ne.useEffect(()=>{let e=setTimeout(()=>{c(!0)},7e3);return()=>clearTimeout(e)},[]),B(R,{children:[z(v,{children:B(j,{children:[a&&z(_,{onClick:i}),t??o(`Connecting...`),z(k,{onClick:r})]})}),B(O,{children:[z(F,{align:`center`,p:6,gap:0,w:`full`,justifyContent:`center`,minH:`150px`,children:z(N,{size:`xl`})}),e&&!s&&z(P,{size:`sm`,textAlign:`center`,children:e}),s&&B(F,{mt:4,spacing:2,children:[z(P,{color:`orange.300`,size:`sm`,textAlign:`center`,children:o(`This is taking longer than expected.`)}),z(P,{size:`sm`,textAlign:`center`,children:o(`You may want to try establishing the connection again.`)})]})]}),z(A,{justifyContent:`center`,children:s&&B(S,{variant:`vechainKitPrimary`,onClick:n,children:[z(E,{mr:2,as:G}),o(`Try again`)]})})]})},He=({error:e,onClose:t,onTryAgain:n,onGoBack:r})=>{let{t:i}=V(),a=je();return B(R,{children:[z(v,{children:B(j,{children:[z(_,{onClick:r}),i(`Connection Failed`),z(k,{onClick:t})]})}),z(O,{children:B(F,{align:`center`,p:6,w:`full`,justifyContent:`center`,minH:`100px`,gap:4,children:[z(Ae.div,{transition:{duration:4,ease:`easeInOut`,repeat:a?0:1/0},animate:{scale:a?[1]:[1,1.1,1]},children:z(E,{as:xe,color:`#ef4444`,fontSize:`60px`,opacity:.5})}),z(P,{w:`full`,size:`sm`,textAlign:`center`,children:e})]})}),z(A,{justifyContent:`center`,children:B(S,{variant:`vechainKitPrimary`,onClick:n,children:[z(E,{mr:2,as:G}),i(`Try again`)]})})]})},$=({onClose:e,appsInfo:n,isLoading:r,setCurrentContent:i,showBackButton:a=!0})=>{let{t:s}=V(),l=L(`colors`,`vechain-kit-text-primary`),{setConnectionCache:u}=c(),{login:d}=o(),f=async(r,a)=>{i({type:`loading`,props:{title:`${s(`Connecting with`)} ${a}`,loadingText:s(`Please approve the request in the connection request window...`),onTryAgain:()=>{f(r,a)}}});try{await d(r),u({name:a,logoUrl:n.find(e=>e.id===r)?.logo_url,appId:r,website:n.find(e=>e.id===r)?.website}),e()}catch(e){let o=e?.message;if(o&&t(o)){i({type:`ecosystem`,props:{appsInfo:n,isLoading:!1}});return}i({type:`error`,props:{error:(e instanceof Error?e:Error(`An unexpected issue occurred while logging in with this app. Please try again or contact support.`)).message,onTryAgain:()=>{f(r,a)}}})}};return z(ie,{children:B(R,{children:[z(v,{children:B(j,{children:[a&&z(_,{onClick:()=>i(`main`)}),s(`Already have an x2earn app wallet?`),z(k,{onClick:e})]})}),B(O,{children:[r&&z(F,{minH:`200px`,w:`full`,justifyContent:`center`,children:z(N,{})}),!r&&n&&z(F,{spacing:4,w:`full`,pb:6,children:n.map(e=>B(S,{variant:`loginIn`,fontSize:`14px`,fontWeight:`400`,p:6,borderRadius:16,w:`full`,onClick:()=>{f(e.id,e.name)},justifyContent:`flex-start`,children:[z(D,{src:e.logo_url,alt:e.name,w:`30px`}),z(P,{ml:5,children:e.name})]},e.id))}),!r&&!n&&z(P,{textAlign:`center`,color:l,children:s(`No application from VeChain ecosystem is available to login.`)})]}),z(A,{pt:0})]})})},Ue=({isOpen:e,onClose:t,initialContent:n=`main`,preventAutoClose:r=!1})=>{let[i,a]=x(n);b(()=>{e&&a(n)},[e,n,a]);let o=(()=>{if(!i)return z(Q,{setCurrentContent:a,onClose:t,preventAutoClose:r});switch(i){case`main`:return z(Q,{setCurrentContent:a,onClose:t,preventAutoClose:r});case`faq`:return z(te,{onGoBack:()=>a(`main`)})}if(typeof i==`object`&&`type`in i)switch(i.type){case`ecosystem`:return z($,{onClose:t,appsInfo:i.props.appsInfo,isLoading:i.props.isLoading,setCurrentContent:a,showBackButton:i.props.showBackButton});case`loading`:return z(Ve,{title:i.props.title,loadingText:i.props.loadingText,onTryAgain:i.props.onTryAgain,onClose:t,onGoBack:()=>a(`main`),showBackButton:i.props.showBackButton});case`error`:return z(He,{error:i.props.error,onClose:t,onTryAgain:i.props.onTryAgain,onGoBack:()=>a(`main`)})}return null})();return o?z(y,{isOpen:e,onClose:t,allowExternalFocus:!0,blockScrollOnMount:!0,mobileMinHeight:`260px`,mobileMaxHeight:`400px`,desktopMinHeight:`250px`,desktopMaxHeight:`400px`,children:o}):z(y,{isOpen:e,onClose:t,allowExternalFocus:!0,blockScrollOnMount:!0,mobileMinHeight:`260px`,mobileMaxHeight:`400px`,desktopMinHeight:`250px`,desktopMaxHeight:`400px`,children:z(Q,{setCurrentContent:a,onClose:t})})},We=({isLoading:t,buttonStyle:n})=>{let{t:r}=V(),{loginMethods:i,darkMode:a,privyEcosystemAppIDS:o}=e(),s=i?.some(({method:e})=>e===`ecosystem`),{open:c}=f(),{data:l,isLoading:u}=g(o),d=re(e=>{let t=typeof e==`function`?e(`main`):e;typeof t==`object`&&`type`in t?t.type===`ecosystem`?c({type:`ecosystem`,props:{...t.props,showBackButton:!1}}):t.type===`loading`?c({type:`loading`,props:{...t.props,showBackButton:!1}}):c(t):c(t)},[c]);return z(fe,{placement:`bottom-start`,size:`xl`,closeOnBlur:!1,variant:`vechainKitBase`,children:({isOpen:e})=>B(R,{children:[z(ge,{children:B(S,{isLoading:t,...n,isActive:e,children:[r(`Login`),z(E,{ml:2,as:be,transform:e?`rotate(180deg)`:`rotate(0deg)`,transition:`transform 0.2s`})]})}),B(me,{children:[z(pe,{children:z(Be,{setCurrentContent:d})}),z(he,{borderTop:`none`,pb:`15px`,children:s&&z(T,{justify:`center`,w:`full`,children:z(Z,{isDark:a,appsInfo:Object.values(l||{}),isLoading:u,setCurrentContent:d})})})]})]})})};export{Ne as _,Ve as a,ze as c,Le as d,Ie as f,J as g,Pe as h,He as i,Re as l,Fe as m,Ue as n,Q as o,Y as p,$ as r,Z as s,We as t,X as u,q as v};
+//# sourceMappingURL=ConnectModal-C50EF9gE.js.map

package/dist/ConnectModal-C50EF9gE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectModal-C50EF9gE.js","names":["error","useLoginWithOAuth","useLoginWithOAuth","useLoginWithPasskey"],"sources":["../src/components/common/ModalFAQButton.tsx","../src/components/EmailCodeVerificationModal/EmailCodeVerificationModal.tsx","../src/components/ConnectModal/Components/EmailLoginButton.tsx","../src/components/ConnectModal/Components/ConnectionButton.tsx","../src/components/ConnectModal/Components/LoginWithGoogleButton.tsx","../src/components/ConnectModal/Components/LoginWithGithubButton.tsx","../src/components/WalletButton/SocialIcons.tsx","../src/components/ConnectModal/Components/VeChainWithPrivyLoginButton.tsx","../src/components/ConnectModal/Components/VeChainLoginButton.tsx","../src/components/ConnectModal/Components/PasskeyLoginButton.tsx","../src/components/ConnectModal/Components/DappKitButton.tsx","../src/components/ConnectModal/Components/PrivyButton.tsx","../src/components/ConnectModal/Components/ConnectionOptionsStack.tsx","../src/components/ConnectModal/Components/EcosystemButton.tsx","../src/components/ConnectModal/Contents/MainContent.tsx","../src/components/ConnectModal/Contents/LoadingContent.tsx","../src/components/ConnectModal/Contents/ErrorContent.tsx","../src/components/ConnectModal/Contents/EcosystemContent.tsx","../src/components/ConnectModal/ConnectModal.tsx","../src/components/ConnectModal/ConnectPopover.tsx"],"sourcesContent":["import { IconButton, IconButtonProps, Icon } from '@chakra-ui/react';\nimport { LuCircleHelp } from 'react-icons/lu';\n\ntype FAQButtonProps = {\n    onClick: () => void;\n} & Partial<IconButtonProps>;\n\nexport const ModalFAQButton = ({ onClick, ...props }: FAQButtonProps) => {\n    return (\n        <IconButton\n            aria-label=\"FAQ\"\n            icon={<Icon as={LuCircleHelp} fontSize={'17px'} />}\n            size=\"sm\"\n            variant=\"vechainKitHeaderIconButtons\"\n            position=\"absolute\"\n            lineHeight={'normal'}\n            left=\"10px\"\n            top=\"8px\"\n            onClick={onClick}\n            {...props}\n        />\n    );\n};\n","import {\n    Button,\n    VStack,\n    Text,\n    HStack,\n    PinInput,\n    PinInputField,\n    Icon,\n    ModalFooter,\n    ModalBody,\n    ModalHeader,\n    ModalCloseButton,\n    Container,\n    useToken,\n} from '@chakra-ui/react';\nimport { LuMail } from 'react-icons/lu';\nimport { BaseModal, StickyHeaderContainer } from '../common';\nimport { useEffect, useState } from 'react';\nimport { useCreateWallet, useLoginWithEmail } from '@privy-io/react-auth';\nimport { useTranslation } from 'react-i18next';\n// Direct import to avoid circular dependency through barrel exports\nimport { useVeChainKitConfig } from '../../providers/VeChainKitContext';\n\ntype Props = {\n    email: string;\n    onResend: () => void;\n    isLoading: boolean;\n    isOpen: boolean;\n    onClose: () => void;\n};\n\nexport const EmailCodeVerificationModal = ({\n    email,\n    onResend,\n    isLoading,\n    isOpen,\n    onClose,\n}: Props) => {\n    const { t } = useTranslation();\n    const { darkMode: isDark } = useVeChainKitConfig();\n    \n    const textSecondary = useToken('colors', 'vechain-kit-text-secondary');\n    const [code, setCode] = useState('');\n    const [error, setError] = useState<string | null>(null);\n\n    const { createWallet } = useCreateWallet();\n    const { loginWithCode } = useLoginWithEmail({\n        onComplete: async ({ isNewUser }) => {\n            // When using initOAuth Privy does not create an embedded wallet automatically.\n            // So we need to create a wallet manually.\n            if (isNewUser) {\n                await createWallet();\n            }\n        },\n    });\n\n    useEffect(() => {\n        if (code.length === 6) {\n            loginWithCode({ code })\n                .then(() => {\n                    onClose();\n                })\n                .catch((error) => {\n                    setError(error.message);\n                });\n        }\n    }, [code]);\n\n    return (\n        <BaseModal isOpen={isOpen} onClose={onClose} trapFocus={false}>\n            <StickyHeaderContainer>\n                <ModalHeader alignItems={'center'} display={'flex'} gap={2}>\n                    {t('Enter confirmation code')}\n                </ModalHeader>\n                <ModalCloseButton />\n            </StickyHeaderContainer>\n\n            <Container maxW={'container.lg'}>\n                <ModalBody>\n                    <VStack spacing={2}>\n                        <Icon\n                            as={LuMail}\n                            w=\"48px\"\n                            h=\"48px\"\n                            color={textSecondary}\n                        />\n\n                        <Text\n                            fontSize=\"xs\"\n                            color={textSecondary}\n                            textAlign=\"center\"\n                        >\n                            {t(\n                                'Please check {{email}} for an email from privy.io and enter your code below.',\n                                {\n                                    email,\n                                },\n                            )}\n                        </Text>\n                        <HStack spacing={2} justify=\"center\" mt={4}>\n                            <PinInput\n                                value={code}\n                                onChange={setCode}\n                                otp\n                                size=\"lg\"\n                                isInvalid={!!error}\n                                errorBorderColor=\"#ef4444\"\n                            >\n                                <PinInputField\n                                    borderRadius=\"12px\"\n                                    border={`1px solid ${\n                                        isDark ? '#ffffff29' : '#ebebeb'\n                                    }`}\n                                    _hover={{\n                                        border: `1px solid ${\n                                            isDark ? '#ffffff40' : '#e0e0e0'\n                                        }`,\n                                    }}\n                                    _focus={{\n                                        border: `1px solid ${\n                                            isDark ? '#ffffff60' : '#d0d0d0'\n                                        }`,\n                                        boxShadow: 'none',\n                                    }}\n                                    backgroundColor={\n                                        isDark ? 'transparent' : '#ffffff'\n                                    }\n                                />\n                                <PinInputField\n                                    borderRadius=\"12px\"\n                                    border={`1px solid ${\n                                        isDark ? '#ffffff29' : '#ebebeb'\n                                    }`}\n                                    _hover={{\n                                        border: `1px solid ${\n                                            isDark ? '#ffffff40' : '#e0e0e0'\n                                        }`,\n                                    }}\n                                    _focus={{\n                                        border: `1px solid ${\n                                            isDark ? '#ffffff60' : '#d0d0d0'\n                                        }`,\n                                        boxShadow: 'none',\n                                    }}\n                                    backgroundColor={\n                                        isDark ? 'transparent' : '#ffffff'\n                                    }\n                                />\n                                <PinInputField\n                                    borderRadius=\"12px\"\n                                    border={`1px solid ${\n                                        isDark ? '#ffffff29' : '#ebebeb'\n                                    }`}\n                                    _hover={{\n                                        border: `1px solid ${\n                                            isDark ? '#ffffff40' : '#e0e0e0'\n                                        }`,\n                                    }}\n                                    _focus={{\n                                        border: `1px solid ${\n                                            isDark ? '#ffffff60' : '#d0d0d0'\n                                        }`,\n                                        boxShadow: 'none',\n                                    }}\n                                    backgroundColor={\n                                        isDark ? 'transparent' : '#ffffff'\n                                    }\n                                />\n                                <PinInputField\n                                    borderRadius=\"12px\"\n                                    border={`1px solid ${\n                                        isDark ? '#ffffff29' : '#ebebeb'\n                                    }`}\n                                    _hover={{\n                                        border: `1px solid ${\n                                            isDark ? '#ffffff40' : '#e0e0e0'\n                                        }`,\n                                    }}\n                                    _focus={{\n                                        border: `1px solid ${\n                                            isDark ? '#ffffff60' : '#d0d0d0'\n                                        }`,\n                                        boxShadow: 'none',\n                                    }}\n                                    backgroundColor={\n                                        isDark ? 'transparent' : '#ffffff'\n                                    }\n                                />\n                                <PinInputField\n                                    borderRadius=\"12px\"\n                                    border={`1px solid ${\n                                        isDark ? '#ffffff29' : '#ebebeb'\n                                    }`}\n                                    _hover={{\n                                        border: `1px solid ${\n                                            isDark ? '#ffffff40' : '#e0e0e0'\n                                        }`,\n                                    }}\n                                    _focus={{\n                                        border: `1px solid ${\n                                            isDark ? '#ffffff60' : '#d0d0d0'\n                                        }`,\n                                        boxShadow: 'none',\n                                    }}\n                                    backgroundColor={\n                                        isDark ? 'transparent' : '#ffffff'\n                                    }\n                                />\n                                <PinInputField\n                                    borderRadius=\"12px\"\n                                    border={`1px solid ${\n                                        isDark ? '#ffffff29' : '#ebebeb'\n                                    }`}\n                                    _hover={{\n                                        border: `1px solid ${\n                                            isDark ? '#ffffff40' : '#e0e0e0'\n                                        }`,\n                                    }}\n                                    _focus={{\n                                        border: `1px solid ${\n                                            isDark ? '#ffffff60' : '#d0d0d0'\n                                        }`,\n                                        boxShadow: 'none',\n                                    }}\n                                    backgroundColor={\n                                        isDark ? 'transparent' : '#ffffff'\n                                    }\n                                />\n                            </PinInput>\n                        </HStack>\n                        {error && (\n                            <Text color=\"#ef4444\" fontSize=\"xs\">\n                                {error}\n                            </Text>\n                        )}\n                    </VStack>\n                </ModalBody>\n                <ModalFooter>\n                    <Text\n                        w=\"100%\"\n                        textAlign=\"center\"\n                        fontSize=\"14px\"\n                        color={isDark ? 'whiteAlpha.700' : 'gray.600'}\n                    >\n                        {t(\"Didn't get an email?\")}{' '}\n                        <Button\n                            variant=\"link\"\n                            color=\"blue.500\"\n                            fontSize=\"14px\"\n                            onClick={onResend}\n                            isLoading={isLoading}\n                        >\n                            {t('Resend code')}\n                        </Button>\n                    </Text>\n                </ModalFooter>\n            </Container>\n        </BaseModal>\n    );\n};\n","import {\n    Button,\n    GridItem,\n    Icon,\n    Input,\n    InputGroup,\n    InputLeftElement,\n    useDisclosure,\n    VStack,\n} from '@chakra-ui/react';\nimport { useLoginWithEmail } from '@privy-io/react-auth';\nimport { useState } from 'react';\nimport { LuMail } from 'react-icons/lu';\nimport { EmailCodeVerificationModal } from '../../EmailCodeVerificationModal/EmailCodeVerificationModal';\nimport { useTranslation } from 'react-i18next';\n// Direct import to avoid circular dependency through barrel exports\nimport { useVeChainKitConfig } from '../../../providers/VeChainKitContext';\n\nexport const EmailLoginButton = () => {\n    const { t } = useTranslation();\n    const { darkMode: isDark } = useVeChainKitConfig();\n\n    // Email login\n    const [email, setEmail] = useState('');\n\n    const { sendCode, state: emailState } = useLoginWithEmail({});\n\n    const emailCodeVerificationModal = useDisclosure();\n\n    const handleSendCode = async () => {\n        await sendCode({ email });\n        // onClose();\n        emailCodeVerificationModal.onOpen();\n    };\n\n    return (\n        <>\n            <GridItem colSpan={4} w={'full'}>\n                <VStack spacing={3} w=\"full\">\n                    <InputGroup size=\"lg\" w=\"full\">\n                        <InputLeftElement\n                            pointerEvents=\"none\"\n                            height=\"100%\"\n                            pl={4}\n                        >\n                            <Icon\n                                as={LuMail}\n                                color={\n                                    isDark ? 'whiteAlpha.600' : 'blackAlpha.700'\n                                }\n                                w={'20px'}\n                                h={'20px'}\n                            />\n                        </InputLeftElement>\n                        <Input\n                            placeholder={t('your@email.com')}\n                            value={email}\n                            onChange={(e) => setEmail(e.target.value)}\n                            fontSize={'16px'}\n                            fontWeight={'400'}\n                            backgroundColor={isDark ? 'transparent' : '#ffffff'}\n                            border={`1px solid ${\n                                isDark ? '#ffffff0a' : '#ebebeb'\n                            }`}\n                            p={6}\n                            borderRadius={16}\n                            w={'full'}\n                            pl={12}\n                        />\n                        <Button\n                            aria-label=\"Send code\"\n                            position=\"absolute\"\n                            right={2}\n                            top=\"50%\"\n                            transform=\"translateY(-50%)\"\n                            zIndex={2}\n                            variant=\"ghost\"\n                            size=\"sm\"\n                            px={6}\n                            borderRadius=\"full\"\n                            isLoading={emailState.status === 'sending-code'}\n                            onClick={handleSendCode}\n                        >\n                            {t('Submit')}\n                        </Button>\n                    </InputGroup>\n                </VStack>\n            </GridItem>\n\n            <EmailCodeVerificationModal\n                isOpen={emailCodeVerificationModal.isOpen}\n                onClose={emailCodeVerificationModal.onClose}\n                onResend={() => sendCode({ email })}\n                email={email}\n                isLoading={emailState.status === 'sending-code'}\n            />\n        </>\n    );\n};\n","import { Button, ButtonProps, HStack, Icon, Text } from '@chakra-ui/react';\nimport { ReactElement } from 'react';\nimport { IconType } from 'react-icons';\n\ninterface ConnectionButtonProps {\n    isDark: boolean;\n    onClick: () => void;\n    text?: string;\n    icon?: IconType;\n    customIcon?: ReactElement;\n    rightIcon?: ReactElement;\n    style?: ButtonProps;\n    variant?: string;\n    iconWidth?: string;\n}\n\nexport const ConnectionButton = ({\n    onClick,\n    text,\n    icon,\n    customIcon,\n    rightIcon,\n    style,\n    variant = 'loginIn',\n    iconWidth = '25px',\n}: ConnectionButtonProps) => {\n    // If text not provided we just show a button with an icon\n    if (!text) {\n        return (\n            <Button {...style} variant={variant} w={'full'} onClick={onClick}>\n                {customIcon ? (\n                    customIcon\n                ) : (\n                    <Icon as={icon} w={'20px'} h={'20px'} />\n                )}\n            </Button>\n        );\n    }\n\n    if (text) {\n        return (\n            <Button {...style} variant={variant} w={'full'} onClick={onClick}>\n                <HStack w={'full'} justify={'flex-start'} gap={2}>\n                    {customIcon ? (\n                        customIcon\n                    ) : (\n                        <Icon as={icon} w={iconWidth} h={iconWidth} />\n                    )}\n                    <Text opacity={0.9}>{text}</Text>\n                </HStack>\n                {rightIcon}\n            </Button>\n        );\n    }\n\n    return null;\n};\n","import { GridItem } from '@chakra-ui/react';\nimport { FcGoogle } from 'react-icons/fc';\n// Import directly to avoid circular dependency with components barrel\nimport { ConnectionButton } from './ConnectionButton';\nimport { useTranslation } from 'react-i18next';\nimport { useLoginWithOAuth } from '../../../hooks';\n\ntype Props = {\n    isDark: boolean;\n    gridColumn?: number;\n};\n\nexport const LoginWithGoogleButton = ({ isDark, gridColumn }: Props) => {\n    const { t } = useTranslation();\n    const { initOAuth } = useLoginWithOAuth();\n\n    return (\n        <GridItem colSpan={gridColumn ?? 4} w={'full'}>\n            <ConnectionButton\n                isDark={isDark}\n                onClick={async () => {\n                    await initOAuth({\n                        provider: 'google',\n                    });\n                }}\n                icon={FcGoogle}\n                text={t('Continue with Google')}\n            />\n        </GridItem>\n    );\n};\n","import { GridItem } from '@chakra-ui/react';\nimport { LuGithub } from 'react-icons/lu';\n// Import directly to avoid circular dependency with components barrel\nimport { ConnectionButton } from './ConnectionButton';\nimport { useTranslation } from 'react-i18next';\nimport { useLoginWithOAuth } from '../../../hooks';\n\ntype Props = {\n    isDark: boolean;\n    gridColumn?: number;\n};\n\nexport const LoginWithGithubButton = ({ isDark, gridColumn }: Props) => {\n    const { t } = useTranslation();\n    const { initOAuth } = useLoginWithOAuth();\n\n    return (\n        <GridItem colSpan={gridColumn ?? 4} w={'full'}>\n            <ConnectionButton\n                isDark={isDark}\n                onClick={async () => {\n                    await initOAuth({\n                        provider: 'github',\n                    });\n                }}\n                icon={LuGithub}\n                text={t('Continue with Github')}\n            />\n        </GridItem>\n    );\n};\n","import { HStack, Circle, Icon, useMediaQuery } from '@chakra-ui/react';\n// Direct import to avoid circular dependency through barrel exports\nimport { useVeChainKitConfig } from '../../providers/VeChainKitContext';\nimport { FcGoogle } from 'react-icons/fc';\nimport { FaDiscord, FaXTwitter } from 'react-icons/fa6';\nimport { LuPlus } from 'react-icons/lu';\n\nexport const SocialIcons = () => {\n    const iconSize = 25;\n    const { darkMode } = useVeChainKitConfig();\n    const marginLeft = iconSize / 2;\n    const [isSmallScreen] = useMediaQuery('(max-width: 280px)');\n    const [isMediumScreen] = useMediaQuery('(max-width: 380px)');\n\n    return (\n        <HStack spacing={0} ml={0}>\n            <Circle\n                size={`${iconSize}px`}\n                borderRadius=\"full\"\n                bg={'#F8F8F8'}\n                p={2}\n                alignItems=\"center\"\n                justifyContent=\"center\"\n                zIndex={3}\n            >\n                <Icon as={FcGoogle} fontSize={'20px'} />\n            </Circle>\n            {!isSmallScreen && (\n                <Circle\n                    ml={`-${marginLeft}px`}\n                    size={`${iconSize}px`}\n                    borderRadius=\"full\"\n                    bg={'black'}\n                    p={2}\n                    alignItems=\"center\"\n                    justifyContent=\"center\"\n                    zIndex={2}\n                >\n                    <Icon as={FaXTwitter} color={'white'} fontSize={'20px'} />\n                </Circle>\n            )}\n            {!isSmallScreen && !isMediumScreen && (\n                <Circle\n                    ml={`-${marginLeft}px`}\n                    zIndex={1}\n                    size={`${iconSize}px`}\n                    borderRadius=\"full\"\n                    bg={'#5865F2'}\n                    p={2}\n                    alignItems=\"center\"\n                    justifyContent=\"center\"\n                >\n                    <Icon as={FaDiscord} color={'white'} fontSize={'20px'} />\n                </Circle>\n            )}\n            <Icon\n                zIndex={1}\n                as={LuPlus}\n                color={darkMode ? 'black' : 'white'}\n                fontSize={'15px'}\n            />\n        </HStack>\n    );\n};\n","import { GridItem } from '@chakra-ui/react';\nimport { VechainLogoDark, VechainLogoLight } from '../../../assets';\n// Import directly to avoid circular dependency with components barrel\nimport { ConnectionButton } from './ConnectionButton';\nimport { SocialIcons } from '../../WalletButton/SocialIcons';\n// Use optional hook to handle missing PrivyProvider gracefully\nimport { useOptionalPrivy } from '../../../hooks/api/privy/useOptionalPrivy';\nimport { useTranslation } from 'react-i18next';\nimport { IconType } from 'react-icons';\n\ntype Props = {\n    isDark: boolean;\n    gridColumn?: number;\n};\n\n/// This button is used to login with VeChain using Privy on\n/// platforms like VeBetterDAO and VeChain Kit Homepage.\n/// It is a very specific scenario.\nexport const VeChainWithPrivyLoginButton = ({ isDark, gridColumn }: Props) => {\n    const { t } = useTranslation();\n    const { login: viewMoreLogin } = useOptionalPrivy();\n\n    return (\n        <GridItem colSpan={gridColumn ? gridColumn : 4} w={'full'}>\n            <ConnectionButton\n                isDark={isDark}\n                onClick={viewMoreLogin}\n                icon={\n                    isDark\n                        ? (VechainLogoLight as IconType)\n                        : (VechainLogoDark as IconType)\n                }\n                text={t('Use social login with VeChain')}\n                variant={'loginWithVechain'}\n                rightIcon={<SocialIcons />}\n            />\n        </GridItem>\n    );\n};\n","import { GridItem } from '@chakra-ui/react';\nimport { VechainLogoDark, VechainLogoLight } from '../../../assets';\n// Import directly to avoid circular dependency with components barrel\nimport { ConnectionButton } from './ConnectionButton';\nimport { SocialIcons } from '../../WalletButton/SocialIcons';\nimport { useLoginWithVeChain } from '../../../hooks';\nimport { useTranslation } from 'react-i18next';\nimport { IconType } from 'react-icons';\n// Import from types/modal to avoid circular dependency\nimport type { ConnectModalContentsTypes } from '../../../types/modal';\nimport React from 'react';\n\ntype Props = {\n    isDark: boolean;\n    gridColumn?: number;\n    setCurrentContent: React.Dispatch<\n        React.SetStateAction<ConnectModalContentsTypes>\n    >;\n};\n\nexport const VeChainLoginButton = ({\n    isDark,\n    gridColumn,\n    setCurrentContent,\n}: Props) => {\n    const { t } = useTranslation();\n    const { login: loginWithVeChain } = useLoginWithVeChain();\n\n    const handleLoginWithVeChain = async () => {\n        setCurrentContent({\n            type: 'loading',\n            props: {\n                title: t('Connecting to VeChain'),\n                loadingText: t(\n                    'Please approve the request in the connection request window...',\n                ),\n                onTryAgain: handleLoginWithVeChain,\n            },\n        });\n        try {\n            await loginWithVeChain();\n        } catch (error) {\n            console.error(t('Login failed:'), error);\n            setCurrentContent({\n                type: 'error',\n                props: {\n                    error:\n                        error instanceof Error\n                            ? error.message\n                            : t('Failed to connect with VeChain'),\n                    onTryAgain: handleLoginWithVeChain,\n                },\n            });\n        }\n    };\n\n    return (\n        <GridItem colSpan={gridColumn ? gridColumn : 4} w={'full'}>\n            <ConnectionButton\n                isDark={isDark}\n                onClick={handleLoginWithVeChain}\n                icon={\n                    isDark\n                        ? (VechainLogoLight as IconType)\n                        : (VechainLogoDark as IconType)\n                }\n                text={t('Use social login with VeChain')}\n                variant={'loginWithVechain'}\n                rightIcon={<SocialIcons />}\n            />\n        </GridItem>\n    );\n};\n","import { GridItem } from '@chakra-ui/react';\nimport { LuFingerprint } from 'react-icons/lu';\n// Import directly to avoid circular dependency with components barrel\nimport { ConnectionButton } from './ConnectionButton';\nimport { useTranslation } from 'react-i18next';\nimport { useLoginWithPasskey } from '../../../hooks';\n// Import from types/modal to avoid circular dependency\nimport type { ConnectModalContentsTypes } from '../../../types/modal';\nimport React from 'react';\n\ntype Props = {\n    isDark: boolean;\n    gridColumn?: number;\n    setCurrentContent: React.Dispatch<\n        React.SetStateAction<ConnectModalContentsTypes>\n    >;\n};\n\nexport const PasskeyLoginButton = ({\n    isDark,\n    gridColumn,\n    setCurrentContent,\n}: Props) => {\n    const { t } = useTranslation();\n    const { loginWithPasskey } = useLoginWithPasskey();\n\n    const handleLoginWithPasskey = async () => {\n        setCurrentContent({\n            type: 'loading',\n            props: {\n                title: t('Connecting with Passkey'),\n                loadingText: t('Please complete the passkey authentication...'),\n                onTryAgain: handleLoginWithPasskey,\n            },\n        });\n        try {\n            await loginWithPasskey();\n        } catch (error) {\n            const errorMsg =\n                error instanceof Error ? error.message.toLowerCase() : '';\n\n            // Log specific error types for debugging\n            if (errorMsg.includes('not found')) {\n                console.error(error);\n            }\n\n            setCurrentContent({\n                type: 'error',\n                props: {\n                    error:\n                        error instanceof Error\n                            ? error.message\n                            : t('Failed to connect with Passkey'),\n                    onTryAgain: handleLoginWithPasskey,\n                },\n            });\n        }\n    };\n\n    return (\n        <GridItem colSpan={gridColumn} w={'full'}>\n            <ConnectionButton\n                isDark={isDark}\n                onClick={handleLoginWithPasskey}\n                icon={LuFingerprint}\n                text={gridColumn && gridColumn >= 2 ? t('Passkey') : undefined}\n            />\n        </GridItem>\n    );\n};\n","import { GridItem, Icon } from '@chakra-ui/react';\n// Import directly to avoid circular dependency with components barrel\nimport { ConnectionButton } from './ConnectionButton';\nimport { useTranslation } from 'react-i18next';\nimport { LuArrowRight, LuWallet } from 'react-icons/lu';\nimport { useEffect } from 'react';\n// Use optional hooks to handle missing DAppKitProvider gracefully\nimport { useOptionalDAppKitWallet } from '../../../hooks/api/dappkit/useOptionalDAppKitWallet';\nimport { useOptionalDAppKitWalletModal } from '../../../hooks/api/dappkit/useOptionalDAppKitWalletModal';\nimport { VeWorldLogoDark, VeWorldLogoLight } from '../../../assets';\nimport { IconType } from 'react-icons';\n// Direct import to avoid circular dependency through barrel exports\nimport { useVeChainKitConfig } from '../../../providers/VeChainKitContext';\n\ntype Props = {\n    isDark: boolean;\n    gridColumn?: number;\n};\n\nexport const DappKitButton = ({ isDark, gridColumn = 2 }: Props) => {\n    const { t } = useTranslation();\n    const { open: openDappKitModal, onConnectionStatusChange } =\n        useOptionalDAppKitWalletModal();\n    const { dappKit } = useVeChainKitConfig();\n    const { source } = useOptionalDAppKitWallet();\n\n    // Determine the button text based on the source\n    const buttonText = !dappKit?.allowedWallets?.includes('sync2')\n        ? t('Connect with VeWorld wallet')\n        : t('Connect wallet');\n\n    useEffect(() => {\n        const handleConnectionChange = (\n            address: string | null,\n            error?: Error,\n        ) => {\n            if (!address) {\n                if (error?.message) {\n                    console.error(error?.message);\n                }\n                return { ...(source && { source }) };\n            }\n            // Wallet activation is now handled in useWallet.ts\n            // When a wallet connects, it will automatically be set as active\n        };\n        onConnectionStatusChange(handleConnectionChange);\n    }, [onConnectionStatusChange, source]);\n    const handleDappKitClick = () => {\n        openDappKitModal();\n    };\n\n    return (\n        <GridItem colSpan={gridColumn ? gridColumn : 2} w={'full'}>\n            <ConnectionButton\n                isDark={isDark}\n                onClick={handleDappKitClick}\n                icon={\n                    !dappKit?.allowedWallets?.includes('sync2')\n                        ? ((isDark\n                              ? VeWorldLogoLight\n                              : VeWorldLogoDark) as IconType)\n                        : (LuWallet as IconType)\n                }\n                iconWidth={'27px'}\n                text={gridColumn >= 2 ? buttonText : undefined}\n                rightIcon={\n                    (dappKit?.allowedWallets?.includes('sync2') && (\n                        <Icon as={LuArrowRight} />\n                    )) ||\n                    undefined\n                }\n            />\n        </GridItem>\n    );\n};\n","import { GridItem, Icon } from '@chakra-ui/react';\nimport { LuEllipsis, LuArrowRight } from 'react-icons/lu';\n// Import directly to avoid circular dependency with components barrel\nimport { ConnectionButton } from './ConnectionButton';\nimport { useTranslation } from 'react-i18next';\n\ntype Props = {\n    isDark: boolean;\n    onViewMoreLogin: () => void;\n    gridColumn?: number;\n};\n\nexport const PrivyButton = ({ isDark, onViewMoreLogin, gridColumn }: Props) => {\n    const { t } = useTranslation();\n    return (\n        <GridItem colSpan={gridColumn} w={'full'}>\n            <ConnectionButton\n                isDark={isDark}\n                onClick={onViewMoreLogin}\n                icon={LuEllipsis}\n                text={gridColumn && gridColumn >= 2 ? t('More') : undefined}\n                rightIcon={<Icon as={LuArrowRight} />}\n            />\n        </GridItem>\n    );\n};\n","import { Grid, Stack } from '@chakra-ui/react';\nimport { EmailLoginButton } from './EmailLoginButton';\nimport { LoginWithGoogleButton } from './LoginWithGoogleButton';\nimport { LoginWithGithubButton } from './LoginWithGithubButton';\nimport { VeChainWithPrivyLoginButton } from './VeChainWithPrivyLoginButton';\nimport { VeChainLoginButton } from './VeChainLoginButton';\nimport { PasskeyLoginButton } from './PasskeyLoginButton';\nimport { DappKitButton } from './DappKitButton';\nimport { PrivyButton } from './PrivyButton';\nimport { useLoginModalContent } from '../../../hooks';\n// Use optional hook to handle missing PrivyProvider gracefully\nimport { useOptionalPrivy } from '../../../hooks/api/privy/useOptionalPrivy';\n// Direct import to avoid circular dependency through barrel exports\nimport { useVeChainKitConfig } from '../../../providers/VeChainKitContext';\n// Import from types/modal to avoid circular dependency with ConnectModal\nimport type { ConnectModalContentsTypes } from '../../../types/modal';\nimport React from 'react';\n\ntype Props = {\n    setCurrentContent: React.Dispatch<\n        React.SetStateAction<ConnectModalContentsTypes>\n    >;\n};\n\nexport const ConnectionOptionsStack = ({ setCurrentContent }: Props) => {\n    const { loginMethods, darkMode: isDark } = useVeChainKitConfig();\n\n    // View more login - use optional hook for when Privy is not configured\n    const { login: viewMoreLogin } = useOptionalPrivy();\n\n    const {\n        showGoogleLogin,\n        showEmailLogin,\n        showPasskey,\n        showVeChainLogin,\n        showDappKit,\n        showMoreLogin,\n        showGithubLogin,\n        isOfficialVeChainApp,\n    } = useLoginModalContent();\n\n    return (\n        <Stack spacing={4} w={'full'} align={'center'}>\n            <Grid templateColumns=\"repeat(4, 1fr)\" gap={2} w={'full'}>\n                {loginMethods?.map(({ method, gridColumn }) => {\n                    switch (method) {\n                        case 'email':\n                            return (\n                                showEmailLogin && (\n                                    <EmailLoginButton key=\"email\" />\n                                )\n                            );\n                        case 'google':\n                            return (\n                                showGoogleLogin && (\n                                    <LoginWithGoogleButton\n                                        key=\"google\"\n                                        isDark={isDark}\n                                        gridColumn={gridColumn}\n                                    />\n                                )\n                            );\n                        case 'github':\n                            return (\n                                showGithubLogin && (\n                                    <LoginWithGithubButton\n                                        key=\"github\"\n                                        isDark={isDark}\n                                        gridColumn={gridColumn}\n                                    />\n                                )\n                            );\n                        case 'vechain':\n                            return (\n                                showVeChainLogin &&\n                                (isOfficialVeChainApp ? (\n                                    <VeChainWithPrivyLoginButton\n                                        key=\"vechain\"\n                                        isDark={isDark}\n                                        gridColumn={gridColumn}\n                                    />\n                                ) : (\n                                    <VeChainLoginButton\n                                        key=\"vechain\"\n                                        isDark={isDark}\n                                        gridColumn={gridColumn}\n                                        setCurrentContent={setCurrentContent}\n                                    />\n                                ))\n                            );\n                        case 'passkey':\n                            return (\n                                showPasskey && (\n                                    <PasskeyLoginButton\n                                        key=\"passkey\"\n                                        isDark={isDark}\n                                        gridColumn={gridColumn}\n                                        setCurrentContent={setCurrentContent}\n                                    />\n                                )\n                            );\n                        case 'dappkit':\n                            return (\n                                showDappKit && (\n                                    <DappKitButton\n                                        key=\"dappkit\"\n                                        isDark={isDark}\n                                        gridColumn={gridColumn}\n                                    />\n                                )\n                            );\n                        case 'more':\n                            return (\n                                showMoreLogin && (\n                                    <PrivyButton\n                                        key=\"more\"\n                                        isDark={isDark}\n                                        onViewMoreLogin={viewMoreLogin}\n                                        gridColumn={gridColumn}\n                                    />\n                                )\n                            );\n                        default:\n                            return null;\n                    }\n                })}\n            </Grid>\n        </Stack>\n    );\n};\n","import { Button } from '@chakra-ui/react';\n// Import from types/modal to avoid circular dependency with components barrel\nimport type { ConnectModalContentsTypes } from '../../../types/modal';\nimport { useTranslation } from 'react-i18next';\nimport type { PrivyAppInfo } from '../../../types';\n\ntype Props = {\n    isDark: boolean;\n    appsInfo: PrivyAppInfo[];\n    isLoading: boolean;\n    gridColumn?: number;\n    setCurrentContent: React.Dispatch<\n        React.SetStateAction<ConnectModalContentsTypes>\n    >;\n};\n\nexport const EcosystemButton = ({\n    appsInfo,\n    isLoading,\n    setCurrentContent,\n}: Props) => {\n    const { t } = useTranslation();\n\n    return (\n        <Button\n            fontSize={'sm'}\n            variant=\"link\"\n            onClick={() =>\n                setCurrentContent({\n                    type: 'ecosystem',\n                    props: { appsInfo, isLoading },\n                })\n            }\n        >\n            {t('Already have an x2earn app wallet?')}\n        </Button>\n    );\n};\n","import {\n    HStack,\n    Image,\n    ModalBody,\n    ModalCloseButton,\n    ModalFooter,\n    ModalHeader,\n    Text,\n    useToken,\n} from '@chakra-ui/react';\n// Direct import to avoid circular dependency through barrel exports\nimport { useVeChainKitConfig } from '../../../providers/VeChainKitContext';\nimport { ModalFAQButton, StickyHeaderContainer } from '../../common';\n// Import from types/modal to avoid circular dependency with ConnectModal\nimport type { ConnectModalContentsTypes } from '../../../types/modal';\nimport React, { useEffect } from 'react';\nimport { useFetchAppInfo, useWallet } from '../../../hooks';\nimport { useTranslation } from 'react-i18next';\nimport { ConnectionOptionsStack } from '../Components/ConnectionOptionsStack';\nimport { EcosystemButton } from '../Components/EcosystemButton';\n\ntype Props = {\n    setCurrentContent: React.Dispatch<\n        React.SetStateAction<ConnectModalContentsTypes>\n    >;\n    onClose: () => void;\n    preventAutoClose?: boolean;\n};\n\nexport const MainContent = ({ setCurrentContent, onClose, preventAutoClose = false }: Props) => {\n    const { t } = useTranslation();\n    const { connection } = useWallet();\n\n    const { loginModalUI, darkMode: isDark } = useVeChainKitConfig();\n    const { loginMethods, privyEcosystemAppIDS } = useVeChainKitConfig();\n    const { data: appsInfo, isLoading: isEcosystemAppsLoading } =\n        useFetchAppInfo(privyEcosystemAppIDS);\n\n    const textColor = useToken('colors', 'vechain-kit-text-secondary');\n\n    const handleFAQClick = () => {\n        setCurrentContent('faq');\n    };\n\n    const showEcosystemButton = loginMethods?.some(\n        ({ method }) => method === 'ecosystem',\n    );\n\n    useEffect(() => {\n        if (connection.isConnected && !preventAutoClose) {\n            onClose();\n        }\n    }, [connection.isConnected, onClose, preventAutoClose]);\n\n    return (\n        <>\n            <StickyHeaderContainer>\n                <ModalFAQButton onClick={handleFAQClick} />\n                <ModalHeader>{t('Log in or sign up')}</ModalHeader>\n                <ModalCloseButton />\n            </StickyHeaderContainer>\n\n            {loginModalUI?.logo && (\n                <HStack justify={'center'}>\n                    <Image\n                        src={loginModalUI.logo || '/images/favicon.png'}\n                        maxW={'180px'}\n                        maxH={'90px'}\n                        m={8}\n                        alt=\"logo\"\n                    />\n                </HStack>\n            )}\n\n            <ModalBody>\n                {loginModalUI?.description && (\n                    <HStack\n                        spacing={4}\n                        w={'full'}\n                        justify={'center'}\n                        mb={'24px'}\n                        px={4}\n                    >\n                        <Text\n                            color={textColor}\n                            fontSize={'sm'}\n                            textAlign={'center'}\n                        >\n                            {loginModalUI?.description}\n                        </Text>\n                    </HStack>\n                )}\n                <ConnectionOptionsStack setCurrentContent={setCurrentContent} />\n            </ModalBody>\n\n            {showEcosystemButton ? (\n                <ModalFooter>\n                    <HStack justify={'center'} w={'full'}>\n                        <EcosystemButton\n                            isDark={isDark}\n                            appsInfo={Object.values(appsInfo || {})}\n                            isLoading={isEcosystemAppsLoading}\n                            setCurrentContent={setCurrentContent}\n                        />\n                    </HStack>\n                </ModalFooter>\n            ) : (\n                <ModalFooter pt={0} pb={'5px'} />\n            )}\n        </>\n    );\n};\n","import {\n    ModalBody,\n    ModalHeader,\n    ModalCloseButton,\n    Spinner,\n    VStack,\n    Text,\n    ModalFooter,\n    Icon,\n    Button,\n} from '@chakra-ui/react';\nimport { StickyHeaderContainer, ModalBackButton } from '../../common';\nimport { LuRefreshCw } from 'react-icons/lu';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\ntype LoadingContentProps = {\n    loadingText?: string;\n    title?: string;\n    onTryAgain?: () => void;\n    onClose: () => void;\n    onGoBack: () => void;\n    showBackButton?: boolean;\n};\n\nexport const LoadingContent = ({\n    loadingText,\n    title,\n    onTryAgain,\n    onClose,\n    onGoBack,\n    showBackButton = true,\n}: LoadingContentProps) => {\n    const { t } = useTranslation();\n    const [showTimeout, setShowTimeout] = React.useState(false);\n\n    React.useEffect(() => {\n        const timer = setTimeout(() => {\n            setShowTimeout(true);\n        }, 7000);\n\n        return () => clearTimeout(timer);\n    }, []);\n\n    return (\n        <>\n            <StickyHeaderContainer>\n                <ModalHeader>\n                    {showBackButton && <ModalBackButton onClick={onGoBack} />}\n                    {title ?? t('Connecting...')}\n                    <ModalCloseButton onClick={onClose} />\n                </ModalHeader>\n            </StickyHeaderContainer>\n\n            <ModalBody>\n                <VStack\n                    align={'center'}\n                    p={6}\n                    gap={0}\n                    w={'full'}\n                    justifyContent={'center'}\n                    minH={'150px'}\n                >\n                    <Spinner size=\"xl\" />\n                </VStack>\n                {loadingText && !showTimeout && (\n                    <Text size=\"sm\" textAlign={'center'}>\n                        {loadingText}\n                    </Text>\n                )}\n                {showTimeout && (\n                    <VStack mt={4} spacing={2}>\n                        <Text color=\"orange.300\" size=\"sm\" textAlign={'center'}>\n                            {t('This is taking longer than expected.')}\n                        </Text>\n                        <Text size=\"sm\" textAlign={'center'}>\n                            {t(\n                                'You may want to try establishing the connection again.',\n                            )}\n                        </Text>\n                    </VStack>\n                )}\n            </ModalBody>\n            <ModalFooter justifyContent={'center'}>\n                {showTimeout && (\n                    <Button variant=\"vechainKitPrimary\" onClick={onTryAgain}>\n                        <Icon mr={2} as={LuRefreshCw} />\n                        {t('Try again')}\n                    </Button>\n                )}\n            </ModalFooter>\n        </>\n    );\n};\n","import {\n    ModalBody,\n    ModalHeader,\n    VStack,\n    ModalCloseButton,\n    Text,\n    ModalFooter,\n    Icon,\n    Button,\n} from '@chakra-ui/react';\nimport { StickyHeaderContainer, ModalBackButton } from '../../common';\nimport { LuCircleAlert, LuRefreshCw } from 'react-icons/lu';\nimport { motion, useReducedMotion } from 'framer-motion';\nimport { useTranslation } from 'react-i18next';\n\ntype ErrorContentProps = {\n    error: string;\n    onClose: () => void;\n    onTryAgain: () => void;\n    onGoBack: () => void;\n};\n\nexport const ErrorContent = ({\n    error,\n    onClose,\n    onTryAgain,\n    onGoBack,\n}: ErrorContentProps) => {\n    const { t } = useTranslation();\n    const shouldReduceMotion = useReducedMotion();\n\n    return (\n        <>\n            <StickyHeaderContainer>\n                <ModalHeader>\n                    <ModalBackButton onClick={onGoBack} />\n                    {t('Connection Failed')}\n                    <ModalCloseButton onClick={onClose} />\n                </ModalHeader>\n            </StickyHeaderContainer>\n\n            <ModalBody>\n                <VStack\n                    align={'center'}\n                    p={6}\n                    w={'full'}\n                    justifyContent={'center'}\n                    minH={'100px'}\n                    gap={4}\n                >\n                    <motion.div\n                        transition={{\n                            duration: 4,\n                            ease: 'easeInOut',\n                            repeat: shouldReduceMotion ? 0 : Infinity,\n                        }}\n                        animate={{\n                            scale: shouldReduceMotion ? [1] : [1, 1.1, 1],\n                        }}\n                    >\n                        <Icon\n                            as={LuCircleAlert}\n                            color={'#ef4444'}\n                            fontSize={'60px'}\n                            opacity={0.5}\n                        />\n                    </motion.div>\n                    <Text w={'full'} size=\"sm\" textAlign={'center'}>\n                        {error}\n                    </Text>\n                </VStack>\n            </ModalBody>\n            <ModalFooter justifyContent={'center'}>\n                <Button variant=\"vechainKitPrimary\" onClick={onTryAgain}>\n                    <Icon mr={2} as={LuRefreshCw} />\n                    {t('Try again')}\n                </Button>\n            </ModalFooter>\n        </>\n    );\n};\n","import {\n    Box,\n    Button,\n    Image,\n    ModalBody,\n    ModalCloseButton,\n    ModalFooter,\n    ModalHeader,\n    Spinner,\n    Text,\n    VStack,\n    useToken,\n} from '@chakra-ui/react';\nimport { ModalBackButton, StickyHeaderContainer } from '../../common';\nimport { useCrossAppConnectionCache, useOptionalPrivyCrossAppSdk } from '../../../hooks';\nimport { useTranslation } from 'react-i18next';\nimport type { PrivyAppInfo } from '../../../types';\nimport { isRejectionError } from '../../../utils/stringUtils';\n// Import from types/modal to avoid circular dependency with ConnectModal\nimport type { ConnectModalContentsTypes } from '../../../types/modal';\ntype Props = {\n    onClose: () => void;\n    appsInfo: PrivyAppInfo[];\n    isLoading: boolean;\n    setCurrentContent: React.Dispatch<\n        React.SetStateAction<ConnectModalContentsTypes>\n    >;\n    showBackButton?: boolean;\n};\n\nexport const EcosystemContent = ({\n    onClose,\n    appsInfo,\n    isLoading,\n    setCurrentContent,\n    showBackButton = true,\n}: Props) => {\n    const { t } = useTranslation();\n\n    // Use semantic token for text color (buttons use variants now)\n    const textColor = useToken('colors', 'vechain-kit-text-primary');\n\n    const { setConnectionCache } = useCrossAppConnectionCache();\n\n    // Login with Vechain - Cross app account login (uses optional hook for conditional provider)\n    const { login: loginWithCrossApp } = useOptionalPrivyCrossAppSdk();\n\n    const connectWithVebetterDaoApps = async (\n        appId: string,\n        appName: string,\n    ) => {\n        setCurrentContent({\n            type: 'loading',\n            props: {\n                title: `${t('Connecting with')} ${appName}`,\n                loadingText: t(\n                    'Please approve the request in the connection request window...',\n                ),\n                onTryAgain: () => {\n                    connectWithVebetterDaoApps(appId, appName);\n                },\n            },\n        });\n        try {\n            await loginWithCrossApp(appId);\n            setConnectionCache({\n                name: appName,\n                logoUrl: appsInfo.find((app) => app.id === appId)?.logo_url,\n                appId: appId,\n                website: appsInfo.find((app) => app.id === appId)?.website,\n            });\n            onClose();\n        } catch (error) {\n            const errorMsg = (error as { message?: string })?.message;\n\n            // Handle user rejection or other errors\n            if (errorMsg && isRejectionError(errorMsg)) {\n                setCurrentContent({\n                    type: 'ecosystem',\n                    props: { appsInfo, isLoading: false },\n                });\n                return;\n            }\n\n            // If it's an Error instance, return it, otherwise create new Error\n            const errorToShow =\n                error instanceof Error\n                    ? error\n                    : new Error(\n                          'An unexpected issue occurred while logging in with this app. Please try again or contact support.',\n                      );\n\n            setCurrentContent({\n                type: 'error',\n                props: {\n                    error: errorToShow.message,\n                    onTryAgain: () => {\n                        connectWithVebetterDaoApps(appId, appName);\n                    },\n                },\n            });\n        }\n    };\n\n    return (\n        <Box>\n            <>\n                <StickyHeaderContainer>\n                    <ModalHeader>\n                        {showBackButton && (\n                            <ModalBackButton\n                                onClick={() => setCurrentContent('main')}\n                            />\n                        )}\n                        {t('Already have an x2earn app wallet?')}\n                        <ModalCloseButton onClick={onClose} />\n                    </ModalHeader>\n                </StickyHeaderContainer>\n\n                <ModalBody>\n                    {isLoading && (\n                        <VStack\n                            minH={'200px'}\n                            w={'full'}\n                            justifyContent={'center'}\n                        >\n                            <Spinner />\n                        </VStack>\n                    )}\n\n                    {!isLoading && appsInfo && (\n                        <VStack spacing={4} w={'full'} pb={6}>\n                            {appsInfo.map((appInfo) => (\n                                <Button\n                                    key={appInfo.id}\n                                    variant=\"loginIn\"\n                                    fontSize={'14px'}\n                                    fontWeight={'400'}\n                                    p={6}\n                                    borderRadius={16}\n                                    w={'full'}\n                                    onClick={() => {\n                                        connectWithVebetterDaoApps(\n                                            appInfo.id,\n                                            appInfo.name,\n                                        );\n                                    }}\n                                    justifyContent={'flex-start'}\n                                >\n                                    <Image\n                                        src={appInfo.logo_url}\n                                        alt={appInfo.name}\n                                        w={'30px'}\n                                    />\n                                    <Text ml={5}>{appInfo.name}</Text>\n                                </Button>\n                            ))}\n                        </VStack>\n                    )}\n\n                    {!isLoading && !appsInfo && (\n                        <Text textAlign={'center'} color={textColor}>\n                            {t(\n                                'No application from VeChain ecosystem is available to login.',\n                            )}\n                        </Text>\n                    )}\n                </ModalBody>\n                <ModalFooter pt={0} />\n            </>\n        </Box>\n    );\n};\n","'use client';\n\nimport { useState, useEffect } from 'react';\nimport { MainContent } from './Contents/MainContent';\nimport { BaseModal } from '../common';\nimport { FAQContent } from '../AccountModal';\nimport { EcosystemContent, LoadingContent, ErrorContent } from './Contents';\n// Import type from centralized location to avoid circular dependencies\nimport type { ConnectModalContentsTypes } from '../../types/modal';\n\n// Re-export for backward compatibility - needed by internal components\nexport type { ConnectModalContentsTypes } from '../../types/modal';\n\ntype Props = {\n    isOpen: boolean;\n    onClose: () => void;\n    initialContent?: ConnectModalContentsTypes;\n    preventAutoClose?: boolean;\n};\n\nexport const ConnectModal = ({\n    isOpen,\n    onClose,\n    initialContent = 'main',\n    preventAutoClose = false,\n}: Props) => {\n    const [currentContent, setCurrentContent] =\n        useState<ConnectModalContentsTypes>(initialContent);\n\n    // Sync currentContent with initialContent when it changes (e.g., when opening from popover)\n    useEffect(() => {\n        if (isOpen) {\n            setCurrentContent(initialContent);\n        }\n    }, [isOpen, initialContent, setCurrentContent]);\n\n    const renderContent = () => {\n        // Ensure displayContent is valid\n        if (!currentContent) {\n                return (\n                    <MainContent\n                        setCurrentContent={setCurrentContent}\n                        onClose={onClose}\n                        preventAutoClose={preventAutoClose}\n                    />\n                );\n        }\n\n        switch (currentContent) {\n            case 'main':\n                return (\n                    <MainContent\n                        setCurrentContent={setCurrentContent}\n                        onClose={onClose}\n                        preventAutoClose={preventAutoClose}\n                    />\n                );\n            case 'faq':\n                return (\n                    <FAQContent onGoBack={() => setCurrentContent('main')} />\n                );\n        }\n\n        if (typeof currentContent === 'object' && 'type' in currentContent) {\n            switch (currentContent.type) {\n                case 'ecosystem':\n                    return (\n                        <EcosystemContent\n                            onClose={onClose}\n                            appsInfo={currentContent.props.appsInfo}\n                            isLoading={currentContent.props.isLoading}\n                            setCurrentContent={setCurrentContent}\n                            showBackButton={currentContent.props.showBackButton}\n                        />\n                    );\n                case 'loading':\n                    return (\n                        <LoadingContent\n                            title={currentContent.props.title}\n                            loadingText={currentContent.props.loadingText}\n                            onTryAgain={currentContent.props.onTryAgain}\n                            onClose={onClose}\n                            onGoBack={() => setCurrentContent('main')}\n                            showBackButton={currentContent.props.showBackButton}\n                        />\n                    );\n                case 'error':\n                    return (\n                        <ErrorContent\n                            error={currentContent.props.error}\n                            onClose={onClose}\n                            onTryAgain={currentContent.props.onTryAgain}\n                            onGoBack={() => setCurrentContent('main')}\n                        />\n                    );\n            }\n        }\n\n        return null;\n    };\n\n    const content = renderContent();\n\n    // Ensure we have valid content before rendering\n    if (!content) {\n        // Fallback to main content if renderContent returns null\n        const fallbackContent = (\n            <MainContent\n                setCurrentContent={setCurrentContent}\n                onClose={onClose}\n            />\n        );\n        return (\n            <BaseModal\n                isOpen={isOpen}\n                onClose={onClose}\n                allowExternalFocus={true}\n                blockScrollOnMount={true}\n                mobileMinHeight={'260px'}\n                mobileMaxHeight={'400px'}\n                desktopMinHeight={'250px'}\n                desktopMaxHeight={'400px'}\n            >\n                {fallbackContent}\n            </BaseModal>\n        );\n    }\n\n    return (\n        <BaseModal\n            isOpen={isOpen}\n            onClose={onClose}\n            allowExternalFocus={true}\n            blockScrollOnMount={true}\n            mobileMinHeight={'260px'}\n            mobileMaxHeight={'400px'}\n            desktopMinHeight={'250px'}\n            desktopMaxHeight={'400px'}\n        >\n            {content}\n        </BaseModal>\n    );\n};\n","import {\n    Button,\n    ButtonProps,\n    HStack,\n    Icon,\n    Popover,\n    PopoverBody,\n    PopoverContent,\n    PopoverFooter,\n    PopoverTrigger,\n} from '@chakra-ui/react';\nimport { ConnectionOptionsStack } from './Components/ConnectionOptionsStack';\nimport { useTranslation } from 'react-i18next';\nimport { LuChevronDown } from 'react-icons/lu';\nimport { EcosystemButton } from './Components';\n// Direct import to avoid circular dependency through barrel exports\nimport { useVeChainKitConfig } from '../../providers/VeChainKitContext';\nimport { useFetchAppInfo, useConnectModal } from '../../hooks';\nimport { ConnectModalContentsTypes } from './ConnectModal';\nimport { useCallback } from 'react';\nimport { SetStateAction } from 'react';\n\ntype ConnectPopoverProps = {\n    isLoading: boolean;\n    buttonStyle?: ButtonProps;\n};\n\nexport const ConnectPopover = ({\n    isLoading,\n    buttonStyle,\n}: ConnectPopoverProps) => {\n    const { t } = useTranslation();\n    const {\n        loginMethods,\n        darkMode: isDark,\n        privyEcosystemAppIDS,\n    } = useVeChainKitConfig();\n    const showEcosystemButton = loginMethods?.some(\n        ({ method }) => method === 'ecosystem',\n    );\n    const { open: openConnectModal } = useConnectModal();\n\n    const { data: appsInfo, isLoading: isEcosystemAppsLoading } =\n        useFetchAppInfo(privyEcosystemAppIDS);\n\n    // Function to handle content changes from popover - opens ConnectModal\n    // When opened from popover, we don't show back button\n    const handleSetContent = useCallback(\n        (\n            content:\n                | ConnectModalContentsTypes\n                | SetStateAction<ConnectModalContentsTypes>,\n        ) => {\n            // Handle function form of SetStateAction\n            const resolvedContent =\n                typeof content === 'function'\n                    ? content('main') // Use 'main' as previous state (won't be used anyway)\n                    : content;\n\n            // If content is ecosystem or loading, set showBackButton to false\n            if (\n                typeof resolvedContent === 'object' &&\n                'type' in resolvedContent\n            ) {\n                if (resolvedContent.type === 'ecosystem') {\n                    openConnectModal({\n                        type: 'ecosystem',\n                        props: {\n                            ...resolvedContent.props,\n                            showBackButton: false,\n                        },\n                    });\n                } else if (resolvedContent.type === 'loading') {\n                    openConnectModal({\n                        type: 'loading',\n                        props: {\n                            ...resolvedContent.props,\n                            showBackButton: false,\n                        },\n                    });\n                } else {\n                    // Error type or other - don't modify props\n                    openConnectModal(resolvedContent);\n                }\n            } else {\n                // String type (main, faq, etc.)\n                openConnectModal(resolvedContent);\n            }\n        },\n        [openConnectModal],\n    );\n\n    return (\n        <Popover\n            placement=\"bottom-start\"\n            size={'xl'}\n            closeOnBlur={false}\n            variant=\"vechainKitBase\"\n        >\n            {({ isOpen }) => (\n                <>\n                    <PopoverTrigger>\n                        <Button\n                            isLoading={isLoading}\n                            {...buttonStyle}\n                            isActive={isOpen}\n                        >\n                            {t('Login')}\n                            <Icon\n                                ml={2}\n                                as={LuChevronDown}\n                                transform={\n                                    isOpen ? 'rotate(180deg)' : 'rotate(0deg)'\n                                }\n                                transition=\"transform 0.2s\"\n                            />\n                        </Button>\n                    </PopoverTrigger>\n                    <PopoverContent>\n                        <PopoverBody>\n                            <ConnectionOptionsStack\n                                setCurrentContent={handleSetContent}\n                            />\n                        </PopoverBody>\n                        <PopoverFooter borderTop={'none'} pb={'15px'}>\n                            {showEcosystemButton && (\n                                <HStack justify={'center'} w={'full'}>\n                                    <EcosystemButton\n                                        isDark={isDark}\n                                        appsInfo={Object.values(appsInfo || {})}\n                                        isLoading={isEcosystemAppsLoading}\n                                        setCurrentContent={handleSetContent}\n                                    />\n                                </HStack>\n                            )}\n                        </PopoverFooter>\n                    </PopoverContent>\n                </>\n            )}\n        </Popover>\n    );\n};\n"],"mappings":"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"}

package/dist/ConnectModal-CvkkVALe.cjs

@@ -0,0 +1 @@
+require(`./VechainKitThemeProvider-BM5258oA.cjs`),require(`./utils-jW13BhAb.cjs`),require(`./assets-YPd7adzM.cjs`),require(`./ssrUtils-C_5ZY26i.cjs`),require(`./PrivyWalletProvider-BkqWSj75.cjs`),require(`./PrivyCrossAppProvider-DSuzrbqs.cjs`),require(`./hooks-C8eXQYIN.cjs`),require(`./DisconnectConfirmContent-B4qahKqQ.cjs`),require(`./AccountModal-DjAS4w6z.cjs`),require(`./BaseModal-yevRjczw.cjs`);const e=require(`./ConnectModal-DmIkWb1i.cjs`);require(`./ShareButtons-CRMNerbz.cjs`),exports.ConnectModal=e.n;

package/dist/ConnectModal-DmIkWb1i.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-DjWAcSYV.cjs`),t=require(`./VechainKitThemeProvider-BM5258oA.cjs`),n=require(`./utils-jW13BhAb.cjs`),r=require(`./assets-YPd7adzM.cjs`),i=require(`./PrivyWalletProvider-BkqWSj75.cjs`),a=require(`./hooks-C8eXQYIN.cjs`),o=require(`./DisconnectConfirmContent-B4qahKqQ.cjs`),s=require(`./AccountModal-DjAS4w6z.cjs`),c=require(`./BaseModal-yevRjczw.cjs`);let l=require(`react`);l=e.t(l);let u=require(`@chakra-ui/react`),d=require(`react/jsx-runtime`),f=require(`react-i18next`),p=require(`@privy-io/react-auth`),m=require(`react-icons/lu`),h=require(`react-icons/fc`),g=require(`react-icons/fa6`),_=require(`framer-motion`);const v=({onClick:e,...t})=>(0,d.jsx)(u.IconButton,{"aria-label":`FAQ`,icon:(0,d.jsx)(u.Icon,{as:m.LuCircleHelp,fontSize:`17px`}),size:`sm`,variant:`vechainKitHeaderIconButtons`,position:`absolute`,lineHeight:`normal`,left:`10px`,top:`8px`,onClick:e,...t}),y=({email:e,onResend:n,isLoading:r,isOpen:i,onClose:a})=>{let{t:o}=(0,f.useTranslation)(),{darkMode:s}=t.u(),h=(0,u.useToken)(`colors`,`vechain-kit-text-secondary`),[g,_]=(0,l.useState)(``),[v,y]=(0,l.useState)(null),{createWallet:b}=(0,p.useCreateWallet)(),{loginWithCode:x}=(0,p.useLoginWithEmail)({onComplete:async({isNewUser:e})=>{e&&await b()}});return(0,l.useEffect)(()=>{g.length===6&&x({code:g}).then(()=>{a()}).catch(e=>{y(e.message)})},[g]),(0,d.jsxs)(c.t,{isOpen:i,onClose:a,trapFocus:!1,children:[(0,d.jsxs)(c.n,{children:[(0,d.jsx)(u.ModalHeader,{alignItems:`center`,display:`flex`,gap:2,children:o(`Enter confirmation code`)}),(0,d.jsx)(u.ModalCloseButton,{})]}),(0,d.jsxs)(u.Container,{maxW:`container.lg`,children:[(0,d.jsx)(u.ModalBody,{children:(0,d.jsxs)(u.VStack,{spacing:2,children:[(0,d.jsx)(u.Icon,{as:m.LuMail,w:`48px`,h:`48px`,color:h}),(0,d.jsx)(u.Text,{fontSize:`xs`,color:h,textAlign:`center`,children:o(`Please check {{email}} for an email from privy.io and enter your code below.`,{email:e})}),(0,d.jsx)(u.HStack,{spacing:2,justify:`center`,mt:4,children:(0,d.jsxs)(u.PinInput,{value:g,onChange:_,otp:!0,size:`lg`,isInvalid:!!v,errorBorderColor:`#ef4444`,children:[(0,d.jsx)(u.PinInputField,{borderRadius:`12px`,border:`1px solid ${s?`#ffffff29`:`#ebebeb`}`,_hover:{border:`1px solid ${s?`#ffffff40`:`#e0e0e0`}`},_focus:{border:`1px solid ${s?`#ffffff60`:`#d0d0d0`}`,boxShadow:`none`},backgroundColor:s?`transparent`:`#ffffff`}),(0,d.jsx)(u.PinInputField,{borderRadius:`12px`,border:`1px solid ${s?`#ffffff29`:`#ebebeb`}`,_hover:{border:`1px solid ${s?`#ffffff40`:`#e0e0e0`}`},_focus:{border:`1px solid ${s?`#ffffff60`:`#d0d0d0`}`,boxShadow:`none`},backgroundColor:s?`transparent`:`#ffffff`}),(0,d.jsx)(u.PinInputField,{borderRadius:`12px`,border:`1px solid ${s?`#ffffff29`:`#ebebeb`}`,_hover:{border:`1px solid ${s?`#ffffff40`:`#e0e0e0`}`},_focus:{border:`1px solid ${s?`#ffffff60`:`#d0d0d0`}`,boxShadow:`none`},backgroundColor:s?`transparent`:`#ffffff`}),(0,d.jsx)(u.PinInputField,{borderRadius:`12px`,border:`1px solid ${s?`#ffffff29`:`#ebebeb`}`,_hover:{border:`1px solid ${s?`#ffffff40`:`#e0e0e0`}`},_focus:{border:`1px solid ${s?`#ffffff60`:`#d0d0d0`}`,boxShadow:`none`},backgroundColor:s?`transparent`:`#ffffff`}),(0,d.jsx)(u.PinInputField,{borderRadius:`12px`,border:`1px solid ${s?`#ffffff29`:`#ebebeb`}`,_hover:{border:`1px solid ${s?`#ffffff40`:`#e0e0e0`}`},_focus:{border:`1px solid ${s?`#ffffff60`:`#d0d0d0`}`,boxShadow:`none`},backgroundColor:s?`transparent`:`#ffffff`}),(0,d.jsx)(u.PinInputField,{borderRadius:`12px`,border:`1px solid ${s?`#ffffff29`:`#ebebeb`}`,_hover:{border:`1px solid ${s?`#ffffff40`:`#e0e0e0`}`},_focus:{border:`1px solid ${s?`#ffffff60`:`#d0d0d0`}`,boxShadow:`none`},backgroundColor:s?`transparent`:`#ffffff`})]})}),v&&(0,d.jsx)(u.Text,{color:`#ef4444`,fontSize:`xs`,children:v})]})}),(0,d.jsx)(u.ModalFooter,{children:(0,d.jsxs)(u.Text,{w:`100%`,textAlign:`center`,fontSize:`14px`,color:s?`whiteAlpha.700`:`gray.600`,children:[o(`Didn't get an email?`),` `,(0,d.jsx)(u.Button,{variant:`link`,color:`blue.500`,fontSize:`14px`,onClick:n,isLoading:r,children:o(`Resend code`)})]})})]})]})},b=()=>{let{t:e}=(0,f.useTranslation)(),{darkMode:n}=t.u(),[r,i]=(0,l.useState)(``),{sendCode:a,state:o}=(0,p.useLoginWithEmail)({}),s=(0,u.useDisclosure)(),c=async()=>{await a({email:r}),s.onOpen()};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(u.GridItem,{colSpan:4,w:`full`,children:(0,d.jsx)(u.VStack,{spacing:3,w:`full`,children:(0,d.jsxs)(u.InputGroup,{size:`lg`,w:`full`,children:[(0,d.jsx)(u.InputLeftElement,{pointerEvents:`none`,height:`100%`,pl:4,children:(0,d.jsx)(u.Icon,{as:m.LuMail,color:n?`whiteAlpha.600`:`blackAlpha.700`,w:`20px`,h:`20px`})}),(0,d.jsx)(u.Input,{placeholder:e(`your@email.com`),value:r,onChange:e=>i(e.target.value),fontSize:`16px`,fontWeight:`400`,backgroundColor:n?`transparent`:`#ffffff`,border:`1px solid ${n?`#ffffff0a`:`#ebebeb`}`,p:6,borderRadius:16,w:`full`,pl:12}),(0,d.jsx)(u.Button,{"aria-label":`Send code`,position:`absolute`,right:2,top:`50%`,transform:`translateY(-50%)`,zIndex:2,variant:`ghost`,size:`sm`,px:6,borderRadius:`full`,isLoading:o.status===`sending-code`,onClick:c,children:e(`Submit`)})]})})}),(0,d.jsx)(y,{isOpen:s.isOpen,onClose:s.onClose,onResend:()=>a({email:r}),email:r,isLoading:o.status===`sending-code`})]})},x=({onClick:e,text:t,icon:n,customIcon:r,rightIcon:i,style:a,variant:o=`loginIn`,iconWidth:s=`25px`})=>t?t?(0,d.jsxs)(u.Button,{...a,variant:o,w:`full`,onClick:e,children:[(0,d.jsxs)(u.HStack,{w:`full`,justify:`flex-start`,gap:2,children:[r||(0,d.jsx)(u.Icon,{as:n,w:s,h:s}),(0,d.jsx)(u.Text,{opacity:.9,children:t})]}),i]}):null:(0,d.jsx)(u.Button,{...a,variant:o,w:`full`,onClick:e,children:r||(0,d.jsx)(u.Icon,{as:n,w:`20px`,h:`20px`})}),S=({isDark:e,gridColumn:t})=>{let{t:n}=(0,f.useTranslation)(),{initOAuth:r}=a.H();return(0,d.jsx)(u.GridItem,{colSpan:t??4,w:`full`,children:(0,d.jsx)(x,{isDark:e,onClick:async()=>{await r({provider:`google`})},icon:h.FcGoogle,text:n(`Continue with Google`)})})},C=({isDark:e,gridColumn:t})=>{let{t:n}=(0,f.useTranslation)(),{initOAuth:r}=a.H();return(0,d.jsx)(u.GridItem,{colSpan:t??4,w:`full`,children:(0,d.jsx)(x,{isDark:e,onClick:async()=>{await r({provider:`github`})},icon:m.LuGithub,text:n(`Continue with Github`)})})},w=()=>{let{darkMode:e}=t.u(),n=25/2,[r]=(0,u.useMediaQuery)(`(max-width: 280px)`),[i]=(0,u.useMediaQuery)(`(max-width: 380px)`);return(0,d.jsxs)(u.HStack,{spacing:0,ml:0,children:[(0,d.jsx)(u.Circle,{size:`25px`,borderRadius:`full`,bg:`#F8F8F8`,p:2,alignItems:`center`,justifyContent:`center`,zIndex:3,children:(0,d.jsx)(u.Icon,{as:h.FcGoogle,fontSize:`20px`})}),!r&&(0,d.jsx)(u.Circle,{ml:`-${n}px`,size:`25px`,borderRadius:`full`,bg:`black`,p:2,alignItems:`center`,justifyContent:`center`,zIndex:2,children:(0,d.jsx)(u.Icon,{as:g.FaXTwitter,color:`white`,fontSize:`20px`})}),!r&&!i&&(0,d.jsx)(u.Circle,{ml:`-${n}px`,zIndex:1,size:`25px`,borderRadius:`full`,bg:`#5865F2`,p:2,alignItems:`center`,justifyContent:`center`,children:(0,d.jsx)(u.Icon,{as:g.FaDiscord,color:`white`,fontSize:`20px`})}),(0,d.jsx)(u.Icon,{zIndex:1,as:m.LuPlus,color:e?`black`:`white`,fontSize:`15px`})]})},T=({isDark:e,gridColumn:t})=>{let{t:n}=(0,f.useTranslation)(),{login:a}=i.tt();return(0,d.jsx)(u.GridItem,{colSpan:t||4,w:`full`,children:(0,d.jsx)(x,{isDark:e,onClick:a,icon:e?r.W:r.G,text:n(`Use social login with VeChain`),variant:`loginWithVechain`,rightIcon:(0,d.jsx)(w,{})})})},E=({isDark:e,gridColumn:t,setCurrentContent:n})=>{let{t:i}=(0,f.useTranslation)(),{login:o}=a.V(),s=async()=>{n({type:`loading`,props:{title:i(`Connecting to VeChain`),loadingText:i(`Please approve the request in the connection request window...`),onTryAgain:s}});try{await o()}catch(e){console.error(i(`Login failed:`),e),n({type:`error`,props:{error:e instanceof Error?e.message:i(`Failed to connect with VeChain`),onTryAgain:s}})}};return(0,d.jsx)(u.GridItem,{colSpan:t||4,w:`full`,children:(0,d.jsx)(x,{isDark:e,onClick:s,icon:e?r.W:r.G,text:i(`Use social login with VeChain`),variant:`loginWithVechain`,rightIcon:(0,d.jsx)(w,{})})})},D=({isDark:e,gridColumn:t,setCurrentContent:n})=>{let{t:r}=(0,f.useTranslation)(),{loginWithPasskey:i}=a.U(),o=async()=>{n({type:`loading`,props:{title:r(`Connecting with Passkey`),loadingText:r(`Please complete the passkey authentication...`),onTryAgain:o}});try{await i()}catch(e){(e instanceof Error?e.message.toLowerCase():``).includes(`not found`)&&console.error(e),n({type:`error`,props:{error:e instanceof Error?e.message:r(`Failed to connect with Passkey`),onTryAgain:o}})}};return(0,d.jsx)(u.GridItem,{colSpan:t,w:`full`,children:(0,d.jsx)(x,{isDark:e,onClick:o,icon:m.LuFingerprint,text:t&&t>=2?r(`Passkey`):void 0})})},O=({isDark:e,gridColumn:n=2})=>{let{t:o}=(0,f.useTranslation)(),{open:s,onConnectionStatusChange:c}=a.jt(),{dappKit:p}=t.u(),{source:h}=i.L(),g=p?.allowedWallets?.includes(`sync2`)?o(`Connect wallet`):o(`Connect with VeWorld wallet`);return(0,l.useEffect)(()=>{c((e,t)=>{if(!e)return t?.message&&console.error(t?.message),{...h&&{source:h}}})},[c,h]),(0,d.jsx)(u.GridItem,{colSpan:n||2,w:`full`,children:(0,d.jsx)(x,{isDark:e,onClick:()=>{s()},icon:p?.allowedWallets?.includes(`sync2`)?m.LuWallet:e?r.M:r.j,iconWidth:`27px`,text:n>=2?g:void 0,rightIcon:p?.allowedWallets?.includes(`sync2`)&&(0,d.jsx)(u.Icon,{as:m.LuArrowRight})||void 0})})},k=({isDark:e,onViewMoreLogin:t,gridColumn:n})=>{let{t:r}=(0,f.useTranslation)();return(0,d.jsx)(u.GridItem,{colSpan:n,w:`full`,children:(0,d.jsx)(x,{isDark:e,onClick:t,icon:m.LuEllipsis,text:n&&n>=2?r(`More`):void 0,rightIcon:(0,d.jsx)(u.Icon,{as:m.LuArrowRight})})})},A=({setCurrentContent:e})=>{let{loginMethods:n,darkMode:r}=t.u(),{login:o}=i.tt(),{showGoogleLogin:s,showEmailLogin:c,showPasskey:l,showVeChainLogin:f,showDappKit:p,showMoreLogin:m,showGithubLogin:h,isOfficialVeChainApp:g}=a.it();return(0,d.jsx)(u.Stack,{spacing:4,w:`full`,align:`center`,children:(0,d.jsx)(u.Grid,{templateColumns:`repeat(4, 1fr)`,gap:2,w:`full`,children:n?.map(({method:t,gridColumn:n})=>{switch(t){case`email`:return c&&(0,d.jsx)(b,{},`email`);case`google`:return s&&(0,d.jsx)(S,{isDark:r,gridColumn:n},`google`);case`github`:return h&&(0,d.jsx)(C,{isDark:r,gridColumn:n},`github`);case`vechain`:return f&&(g?(0,d.jsx)(T,{isDark:r,gridColumn:n},`vechain`):(0,d.jsx)(E,{isDark:r,gridColumn:n,setCurrentContent:e},`vechain`));case`passkey`:return l&&(0,d.jsx)(D,{isDark:r,gridColumn:n,setCurrentContent:e},`passkey`);case`dappkit`:return p&&(0,d.jsx)(O,{isDark:r,gridColumn:n},`dappkit`);case`more`:return m&&(0,d.jsx)(k,{isDark:r,onViewMoreLogin:o,gridColumn:n},`more`);default:return null}})})})},j=({appsInfo:e,isLoading:t,setCurrentContent:n})=>{let{t:r}=(0,f.useTranslation)();return(0,d.jsx)(u.Button,{fontSize:`sm`,variant:`link`,onClick:()=>n({type:`ecosystem`,props:{appsInfo:e,isLoading:t}}),children:r(`Already have an x2earn app wallet?`)})},M=({setCurrentContent:e,onClose:n,preventAutoClose:r=!1})=>{let{t:o}=(0,f.useTranslation)(),{connection:s}=i.T(),{loginModalUI:p,darkMode:m}=t.u(),{loginMethods:h,privyEcosystemAppIDS:g}=t.u(),{data:_,isLoading:y}=a.sr(g),b=(0,u.useToken)(`colors`,`vechain-kit-text-secondary`),x=()=>{e(`faq`)},S=h?.some(({method:e})=>e===`ecosystem`);return(0,l.useEffect)(()=>{s.isConnected&&!r&&n()},[s.isConnected,n,r]),(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(c.n,{children:[(0,d.jsx)(v,{onClick:x}),(0,d.jsx)(u.ModalHeader,{children:o(`Log in or sign up`)}),(0,d.jsx)(u.ModalCloseButton,{})]}),p?.logo&&(0,d.jsx)(u.HStack,{justify:`center`,children:(0,d.jsx)(u.Image,{src:p.logo||`/images/favicon.png`,maxW:`180px`,maxH:`90px`,m:8,alt:`logo`})}),(0,d.jsxs)(u.ModalBody,{children:[p?.description&&(0,d.jsx)(u.HStack,{spacing:4,w:`full`,justify:`center`,mb:`24px`,px:4,children:(0,d.jsx)(u.Text,{color:b,fontSize:`sm`,textAlign:`center`,children:p?.description})}),(0,d.jsx)(A,{setCurrentContent:e})]}),S?(0,d.jsx)(u.ModalFooter,{children:(0,d.jsx)(u.HStack,{justify:`center`,w:`full`,children:(0,d.jsx)(j,{isDark:m,appsInfo:Object.values(_||{}),isLoading:y,setCurrentContent:e})})}):(0,d.jsx)(u.ModalFooter,{pt:0,pb:`5px`})]})},N=({loadingText:e,title:t,onTryAgain:n,onClose:r,onGoBack:i,showBackButton:a=!0})=>{let{t:s}=(0,f.useTranslation)(),[p,h]=l.default.useState(!1);return l.default.useEffect(()=>{let e=setTimeout(()=>{h(!0)},7e3);return()=>clearTimeout(e)},[]),(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(c.n,{children:(0,d.jsxs)(u.ModalHeader,{children:[a&&(0,d.jsx)(o.n,{onClick:i}),t??s(`Connecting...`),(0,d.jsx)(u.ModalCloseButton,{onClick:r})]})}),(0,d.jsxs)(u.ModalBody,{children:[(0,d.jsx)(u.VStack,{align:`center`,p:6,gap:0,w:`full`,justifyContent:`center`,minH:`150px`,children:(0,d.jsx)(u.Spinner,{size:`xl`})}),e&&!p&&(0,d.jsx)(u.Text,{size:`sm`,textAlign:`center`,children:e}),p&&(0,d.jsxs)(u.VStack,{mt:4,spacing:2,children:[(0,d.jsx)(u.Text,{color:`orange.300`,size:`sm`,textAlign:`center`,children:s(`This is taking longer than expected.`)}),(0,d.jsx)(u.Text,{size:`sm`,textAlign:`center`,children:s(`You may want to try establishing the connection again.`)})]})]}),(0,d.jsx)(u.ModalFooter,{justifyContent:`center`,children:p&&(0,d.jsxs)(u.Button,{variant:`vechainKitPrimary`,onClick:n,children:[(0,d.jsx)(u.Icon,{mr:2,as:m.LuRefreshCw}),s(`Try again`)]})})]})},P=({error:e,onClose:t,onTryAgain:n,onGoBack:r})=>{let{t:i}=(0,f.useTranslation)(),a=(0,_.useReducedMotion)();return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(c.n,{children:(0,d.jsxs)(u.ModalHeader,{children:[(0,d.jsx)(o.n,{onClick:r}),i(`Connection Failed`),(0,d.jsx)(u.ModalCloseButton,{onClick:t})]})}),(0,d.jsx)(u.ModalBody,{children:(0,d.jsxs)(u.VStack,{align:`center`,p:6,w:`full`,justifyContent:`center`,minH:`100px`,gap:4,children:[(0,d.jsx)(_.motion.div,{transition:{duration:4,ease:`easeInOut`,repeat:a?0:1/0},animate:{scale:a?[1]:[1,1.1,1]},children:(0,d.jsx)(u.Icon,{as:m.LuCircleAlert,color:`#ef4444`,fontSize:`60px`,opacity:.5})}),(0,d.jsx)(u.Text,{w:`full`,size:`sm`,textAlign:`center`,children:e})]})}),(0,d.jsx)(u.ModalFooter,{justifyContent:`center`,children:(0,d.jsxs)(u.Button,{variant:`vechainKitPrimary`,onClick:n,children:[(0,d.jsx)(u.Icon,{mr:2,as:m.LuRefreshCw}),i(`Try again`)]})})]})},F=({onClose:e,appsInfo:t,isLoading:r,setCurrentContent:a,showBackButton:s=!0})=>{let{t:l}=(0,f.useTranslation)(),p=(0,u.useToken)(`colors`,`vechain-kit-text-primary`),{setConnectionCache:m}=i.R(),{login:h}=i.F(),g=async(r,i)=>{a({type:`loading`,props:{title:`${l(`Connecting with`)} ${i}`,loadingText:l(`Please approve the request in the connection request window...`),onTryAgain:()=>{g(r,i)}}});try{await h(r),m({name:i,logoUrl:t.find(e=>e.id===r)?.logo_url,appId:r,website:t.find(e=>e.id===r)?.website}),e()}catch(e){let o=e?.message;if(o&&n.a(o)){a({type:`ecosystem`,props:{appsInfo:t,isLoading:!1}});return}a({type:`error`,props:{error:(e instanceof Error?e:Error(`An unexpected issue occurred while logging in with this app. Please try again or contact support.`)).message,onTryAgain:()=>{g(r,i)}}})}};return(0,d.jsx)(u.Box,{children:(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(c.n,{children:(0,d.jsxs)(u.ModalHeader,{children:[s&&(0,d.jsx)(o.n,{onClick:()=>a(`main`)}),l(`Already have an x2earn app wallet?`),(0,d.jsx)(u.ModalCloseButton,{onClick:e})]})}),(0,d.jsxs)(u.ModalBody,{children:[r&&(0,d.jsx)(u.VStack,{minH:`200px`,w:`full`,justifyContent:`center`,children:(0,d.jsx)(u.Spinner,{})}),!r&&t&&(0,d.jsx)(u.VStack,{spacing:4,w:`full`,pb:6,children:t.map(e=>(0,d.jsxs)(u.Button,{variant:`loginIn`,fontSize:`14px`,fontWeight:`400`,p:6,borderRadius:16,w:`full`,onClick:()=>{g(e.id,e.name)},justifyContent:`flex-start`,children:[(0,d.jsx)(u.Image,{src:e.logo_url,alt:e.name,w:`30px`}),(0,d.jsx)(u.Text,{ml:5,children:e.name})]},e.id))}),!r&&!t&&(0,d.jsx)(u.Text,{textAlign:`center`,color:p,children:l(`No application from VeChain ecosystem is available to login.`)})]}),(0,d.jsx)(u.ModalFooter,{pt:0})]})})},I=({isOpen:e,onClose:t,initialContent:n=`main`,preventAutoClose:r=!1})=>{let[i,a]=(0,l.useState)(n);(0,l.useEffect)(()=>{e&&a(n)},[e,n,a]);let o=(()=>{if(!i)return(0,d.jsx)(M,{setCurrentContent:a,onClose:t,preventAutoClose:r});switch(i){case`main`:return(0,d.jsx)(M,{setCurrentContent:a,onClose:t,preventAutoClose:r});case`faq`:return(0,d.jsx)(s.h,{onGoBack:()=>a(`main`)})}if(typeof i==`object`&&`type`in i)switch(i.type){case`ecosystem`:return(0,d.jsx)(F,{onClose:t,appsInfo:i.props.appsInfo,isLoading:i.props.isLoading,setCurrentContent:a,showBackButton:i.props.showBackButton});case`loading`:return(0,d.jsx)(N,{title:i.props.title,loadingText:i.props.loadingText,onTryAgain:i.props.onTryAgain,onClose:t,onGoBack:()=>a(`main`),showBackButton:i.props.showBackButton});case`error`:return(0,d.jsx)(P,{error:i.props.error,onClose:t,onTryAgain:i.props.onTryAgain,onGoBack:()=>a(`main`)})}return null})();return o?(0,d.jsx)(c.t,{isOpen:e,onClose:t,allowExternalFocus:!0,blockScrollOnMount:!0,mobileMinHeight:`260px`,mobileMaxHeight:`400px`,desktopMinHeight:`250px`,desktopMaxHeight:`400px`,children:o}):(0,d.jsx)(c.t,{isOpen:e,onClose:t,allowExternalFocus:!0,blockScrollOnMount:!0,mobileMinHeight:`260px`,mobileMaxHeight:`400px`,desktopMinHeight:`250px`,desktopMaxHeight:`400px`,children:(0,d.jsx)(M,{setCurrentContent:a,onClose:t})})},L=({isLoading:e,buttonStyle:n})=>{let{t:r}=(0,f.useTranslation)(),{loginMethods:i,darkMode:o,privyEcosystemAppIDS:s}=t.u(),c=i?.some(({method:e})=>e===`ecosystem`),{open:p}=a.At(),{data:h,isLoading:g}=a.sr(s),_=(0,l.useCallback)(e=>{let t=typeof e==`function`?e(`main`):e;typeof t==`object`&&`type`in t?t.type===`ecosystem`?p({type:`ecosystem`,props:{...t.props,showBackButton:!1}}):t.type===`loading`?p({type:`loading`,props:{...t.props,showBackButton:!1}}):p(t):p(t)},[p]);return(0,d.jsx)(u.Popover,{placement:`bottom-start`,size:`xl`,closeOnBlur:!1,variant:`vechainKitBase`,children:({isOpen:t})=>(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(u.PopoverTrigger,{children:(0,d.jsxs)(u.Button,{isLoading:e,...n,isActive:t,children:[r(`Login`),(0,d.jsx)(u.Icon,{ml:2,as:m.LuChevronDown,transform:t?`rotate(180deg)`:`rotate(0deg)`,transition:`transform 0.2s`})]})}),(0,d.jsxs)(u.PopoverContent,{children:[(0,d.jsx)(u.PopoverBody,{children:(0,d.jsx)(A,{setCurrentContent:_})}),(0,d.jsx)(u.PopoverFooter,{borderTop:`none`,pb:`15px`,children:c&&(0,d.jsx)(u.HStack,{justify:`center`,w:`full`,children:(0,d.jsx)(j,{isDark:o,appsInfo:Object.values(h||{}),isLoading:g,setCurrentContent:_})})})]})]})})};Object.defineProperty(exports,`_`,{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return N}}),Object.defineProperty(exports,`c`,{enumerable:!0,get:function(){return k}}),Object.defineProperty(exports,`d`,{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,`f`,{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,`g`,{enumerable:!0,get:function(){return x}}),Object.defineProperty(exports,`h`,{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return P}}),Object.defineProperty(exports,`l`,{enumerable:!0,get:function(){return O}}),Object.defineProperty(exports,`m`,{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return I}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return M}}),Object.defineProperty(exports,`p`,{enumerable:!0,get:function(){return w}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return F}}),Object.defineProperty(exports,`s`,{enumerable:!0,get:function(){return j}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return L}}),Object.defineProperty(exports,`u`,{enumerable:!0,get:function(){return D}}),Object.defineProperty(exports,`v`,{enumerable:!0,get:function(){return v}});
+//# sourceMappingURL=ConnectModal-DmIkWb1i.cjs.map