@arthur2079/internal-profile 0.1.2-next.3 → 0.1.2-next.4

package/dist/components/ProfileWallets/ConnectedWallets.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useStackModal } from '@arthur2079/internal-profile/hooks';
-import { Button } from '@rango-dev/ui';
-import { useTranslation } from 'react-i18next';
-import { CONNECT_WALLETS_MODAL_ID, STATEFUL_CONNECT_MODAL_ID } from '../../constants/mod';
-import { ProfileWallet } from '../ProfileWallet';
-import { EmptyStateContainer, WalletList } from './ConnectedWallets.styles';
-import { ConnectedWalletsEmptyState } from './ConnectedWalletsEmptyState';
-export function ConnectedWallets(props) {
-    const { accounts, styles, setShouldOpenConnectWalletsModal, data, onLogin, onMerge, onError } = props;
-    const { pop, stack } = useStackModal();
-    const { t } = useTranslation();
-    const connectedAccounts = accounts.filter((account) => account.walletType !== null);
-    const handleOpenConnectWalletsModal = () => {
-        setShouldOpenConnectWalletsModal?.(!stack.some((item) => item.id === CONNECT_WALLETS_MODAL_ID));
-        pop(stack.some((item) => item.id === STATEFUL_CONNECT_MODAL_ID) ? 2 : 1);
-    };
-    return (_jsxs(_Fragment, { children: [connectedAccounts.length ? (_jsx(WalletList, { css: styles, children: accounts.map((account) => {
-                    const { walletType } = account;
-                    if (!walletType) {
-                        return null;
-                    }
-                    return (_jsx(ProfileWallet, { account: account, data: data, onLogin: onLogin, onMerge: onMerge, onError: onError }, account.address + account.blockchain + account.walletType));
-                }) })) : (_jsx(EmptyStateContainer, { children: _jsx(ConnectedWalletsEmptyState, { isDarkMode: props.isDarkMode }) })), _jsx(Button, { id: "connect-wallets-button", onClick: handleOpenConnectWalletsModal, variant: "outlined", type: "primary", fullWidth: true, size: "large", children: t('Connect more wallets') })] }));
-}

package/dist/components/ProfileWallets/ConnectedWallets.styles.d.ts

@@ -1,4 +0,0 @@
-export declare const WalletList: any;
-export declare const EmptyStateContainer: any;
-export declare const StyledButton: any;
-export declare const StyledTypography: any;

package/dist/components/ProfileWallets/ConnectedWallets.styles.js

@@ -1,30 +0,0 @@
-import { Button, darkTheme, styled, Typography } from '@rango-dev/ui';
-export const WalletList = styled('ul', {
-    flex: 1,
-});
-export const EmptyStateContainer = styled('div', {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flex: 1,
-});
-export const StyledButton = styled(Button, {
-    variants: {
-        isMobile: {
-            false: {
-                height: '$26',
-            },
-        },
-    },
-    fontWeight: '$medium',
-    '@sm': {
-        [`.${darkTheme} &`]: {
-            '&:not(:hover):not(:focus)': {
-                color: '$neutral900',
-            },
-        },
-    },
-});
-export const StyledTypography = styled(Typography, {
-    color: 'inherit !important',
-});

package/dist/components/ProfileWallets/ConnectedWalletsEmptyState.d.ts

@@ -1,5 +0,0 @@
-interface PropTypes {
-    isDarkMode: boolean;
-}
-export declare function ConnectedWalletsEmptyState(props: PropTypes): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/ProfileWallets/ConnectedWalletsEmptyState.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Divider, Typography } from '@rango-dev/ui';
-import { useTranslation } from 'react-i18next';
-import { Container } from './ConnectedWalletsEmptyState.styles';
-export function ConnectedWalletsEmptyState(props) {
-    const { t } = useTranslation();
-    const { isDarkMode } = props;
-    return (_jsxs(Container, { children: [_jsx("img", { src: isDarkMode ? '/imgs/profile/no-wallet-dark.svg' : '/imgs/profile/no-wallet-light.svg', alt: "No campaign found.", width: 112, height: 94 }), _jsx(Divider, { size: 10, direction: "vertical" }), _jsx(Typography, { variant: "body", size: "medium", color: isDarkMode ? 'neutral900' : 'neutral700', children: t('All connected wallets are already linked to your profile.') })] }));
-}

package/dist/components/ProfileWallets/ConnectedWalletsEmptyState.styles.d.ts

@@ -1 +0,0 @@
-export declare const Container: any;

package/dist/components/ProfileWallets/ConnectedWalletsEmptyState.styles.js

@@ -1,8 +0,0 @@
-import { styled } from '@rango-dev/ui';
-export const Container = styled('div', {
-    padding: '43px 0 38px 0',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-});

package/dist/components/ProfileWallets/ProfileWallets.d.ts

@@ -1,4 +0,0 @@
-import type { ProfileWalletsModalProps } from '../ProfileWalletsModal';
-type PropTypes = Pick<ProfileWalletsModalProps, 'data' | 'isDarkMode' | 'onLogin' | 'onMerge' | 'onError' | 'setShouldOpenConnectWalletsModal'>;
-export declare function ProfileWallets(props: PropTypes): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/ProfileWallets/ProfileWallets.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useProfile } from '../../hooks/useProfile';
-import { getAddedAccountsToProfile } from '../../utils/mod';
-import { ProfileWallet } from '../ProfileWallet/ProfileWallet';
-import { ConnectedWallets } from './ConnectedWallets';
-import { AddedWallets, profileWalletsStyles, StyledTabs, tabsStyles, } from './ProfileWallets.styles';
-export function ProfileWallets(props) {
-    const { setShouldOpenConnectWalletsModal, data, onLogin, onMerge, onError } = props;
-    const { isUserLoggedIn, profileSummary } = props.data;
-    const { t } = useTranslation();
-    const addedAccountsToProfile = profileSummary ? getAddedAccountsToProfile(profileSummary) : [];
-    const { compatibleAccounts } = useProfile({
-        addedAccounts: addedAccountsToProfile,
-    });
-    const tabs = {
-        addedWallets: { id: 'added-wallets', title: t('Linked Wallets') },
-        connectedWallets: { id: 'connected-wallets', title: t('Unlinked Wallets') },
-    };
-    const [selectedTab, setSelectedTab] = useState(tabs.addedWallets.id);
-    const showConnectedWallets = !isUserLoggedIn || selectedTab === tabs.connectedWallets.id;
-    const addedWallets = (_jsx(_Fragment, { children: _jsx(AddedWallets, { css: { ...profileWalletsStyles }, children: [...compatibleAccounts, ...addedAccountsToProfile].map((account) => {
-                const { walletType } = account;
-                if (walletType) {
-                    return null;
-                }
-                return (_jsx(ProfileWallet, { account: account, data: data, onLogin: onLogin, onMerge: onMerge, onError: onError }, account.address + account.blockchain + account.walletType));
-            }) }) }));
-    return (_jsxs(_Fragment, { children: [_jsx(StyledTabs, { type: "bordered", items: Object.values(tabs), value: selectedTab, className: tabsStyles(), 
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                onChange: (item) => {
-                    if (typeof item.id === 'string') {
-                        setSelectedTab(item.id);
-                    }
-                } }), showConnectedWallets ? (_jsx(_Fragment, { children: _jsx(ConnectedWallets, { styles: { ...profileWalletsStyles }, accounts: [...compatibleAccounts, ...addedAccountsToProfile], setShouldOpenConnectWalletsModal: setShouldOpenConnectWalletsModal, data: props.data, isDarkMode: props.isDarkMode, onLogin: props.onLogin, onMerge: props.onMerge, onError: props.onError }) })) : (_jsx(_Fragment, { children: addedWallets }))] }));
-}

package/dist/components/ProfileWallets/ProfileWallets.styles.d.ts

@@ -1,5 +0,0 @@
-import { CSS } from '@rango-dev/ui';
-export declare const profileWalletsStyles: CSS;
-export declare const tabsStyles: any;
-export declare const AddedWallets: any;
-export declare const StyledTabs: any;

package/dist/components/ProfileWallets/ProfileWallets.styles.js

@@ -1,17 +0,0 @@
-import { css, styled, Tabs, theme } from '@rango-dev/ui';
-export const profileWalletsStyles = {
-    paddingTop: '$25',
-};
-export const tabsStyles = css({
-    height: 'auto',
-});
-export const AddedWallets = styled('ul', {
-    overflowY: 'auto',
-});
-export const StyledTabs = styled(Tabs, {
-    '& ._tab': {
-        '&[data-active="false"]': {
-            color: theme.colors.neutral600,
-        },
-    },
-});

package/dist/components/ProfileWallets/ProfileWallets.types.d.ts

@@ -1,14 +0,0 @@
-import type { ProfileWallet } from '../ProfileWallet/ProfileWallet';
-import type { ProfileWalletsModalProps } from '../ProfileWalletsModal';
-import type { CSS } from '@rango-dev/ui';
-import type { ComponentProps } from 'react';
-export type PropTypes = {
-    accounts: ComponentProps<typeof ProfileWallet>['account'][];
-    styles?: CSS;
-    setShouldOpenConnectWalletsModal?: (shouldOpenConnectWalletsModal?: boolean) => void;
-    data: ProfileWalletsModalProps['data'];
-    onLogin: ProfileWalletsModalProps['onLogin'];
-    onMerge: ProfileWalletsModalProps['onMerge'];
-    onError?: ProfileWalletsModalProps['onError'];
-    isDarkMode: boolean;
-};

package/dist/components/ProfileWallets/ProfileWallets.types.js

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

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

@@ -1 +0,0 @@
-export { ProfileWallets } from './ProfileWallets';

package/dist/components/ProfileWallets/index.js

@@ -1 +0,0 @@
-export { ProfileWallets } from './ProfileWallets';

package/dist/components/ProfileWalletsModal/ProfileWalletsModal.constants.d.ts

@@ -1,3 +0,0 @@
-export declare const supportedBlockchainsDisplayName: {
-    [key: string]: string;
-};

package/dist/components/ProfileWalletsModal/ProfileWalletsModal.constants.js

@@ -1,2 +0,0 @@
-import { Networks } from '@rango-dev/wallets-shared';
-export const supportedBlockchainsDisplayName = { [Networks.ETHEREUM]: 'EVM' };

package/dist/components/ProfileWalletsModal/ProfileWalletsModal.d.ts

@@ -1,3 +0,0 @@
-import type { PropTypes } from './ProfileWalletsModal.types';
-import type { ReactElement } from 'react';
-export declare function ProfileWalletsModal(props: PropTypes): ReactElement;

package/dist/components/ProfileWalletsModal/ProfileWalletsModal.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useStackModal } from '@arthur2079/internal-profile/hooks';
-import { Divider } from '@rango-dev/ui';
-import { useTranslation } from 'react-i18next';
-import { useProfile } from '../../hooks/useProfile';
-import { ProfileWallets } from '../ProfileWallets';
-import { ConnectedWallets } from '../ProfileWallets/ConnectedWallets';
-import { Description, ModalContent } from './ProfileWalletsModal.styles';
-export function ProfileWalletsModal(props) {
-    const { indexInStack = 0, setShouldOpenConnectWalletsModal, onLogin, onMerge, onError } = props;
-    const { isMobile, isDarkMode, data, renderHeader } = props;
-    const { t } = useTranslation();
-    const { compatibleAccounts } = useProfile();
-    const { pop } = useStackModal();
-    return (_jsxs(ModalContent, { children: [renderHeader({
-                showBackButton: indexInStack > 0,
-                handleClose: () => {
-                    pop();
-                },
-            }), _jsx(Divider, { size: isMobile ? '40' : '24' }), _jsx(Description, { variant: "body", size: "medium", children: data.isUserLoggedIn
-                    ? t('Link your wallets to your profile to increase your score.')
-                    : t('Use your wallet to login into your profile.') }), _jsx(Divider, { size: "8" }), data.isUserLoggedIn ? (_jsx(ProfileWallets, { data: data, isDarkMode: isDarkMode, onLogin: onLogin, onMerge: onMerge, onError: onError, setShouldOpenConnectWalletsModal: setShouldOpenConnectWalletsModal })) : (_jsx(ConnectedWallets, { accounts: compatibleAccounts, setShouldOpenConnectWalletsModal: setShouldOpenConnectWalletsModal, isDarkMode: isDarkMode, data: data, onLogin: onLogin, onMerge: onMerge, onError: onError }))] }));
-}

package/dist/components/ProfileWalletsModal/ProfileWalletsModal.styles.d.ts

@@ -1,4 +0,0 @@
-export declare const Container: any;
-export declare const ModalContent: any;
-export declare const WalletList: any;
-export declare const Description: any;

package/dist/components/ProfileWalletsModal/ProfileWalletsModal.styles.js

@@ -1,23 +0,0 @@
-import { darkTheme, styled, Typography } from '@rango-dev/ui';
-export const Container = styled('div', {});
-export const ModalContent = styled('div', {
-    display: 'flex',
-    flexDirection: 'column',
-    padding: '$20',
-    height: '100%',
-    overflow: 'clip',
-    '@md': {
-        padding: '$24',
-    },
-});
-export const WalletList = styled('ul', {
-    overflowY: 'auto',
-});
-export const Description = styled(Typography, {
-    padding: '0 $10',
-    textAlign: 'start',
-    color: '$neutral700 !important',
-    [`.${darkTheme} &`]: {
-        color: '$neutral900 !important',
-    },
-});

package/dist/components/ProfileWalletsModal/ProfileWalletsModal.types.d.ts

@@ -1,23 +0,0 @@
-import type { ProfileAccount, ProfileSummary } from '../../api/mod';
-import type { ReactNode } from 'react';
-type HeaderProps = {
-    showBackButton: boolean;
-    handleClose: () => void;
-};
-export type PropTypes = {
-    indexInStack?: number;
-    showAddedAccounts?: boolean;
-    setShouldOpenConnectWalletsModal?: (shouldOpenConnectWalletsModal?: boolean) => void;
-    renderHeader: (props: HeaderProps) => ReactNode;
-    isMobile: boolean;
-    isDarkMode: boolean;
-    onLogin?: (profileSummary: ProfileSummary) => void;
-    onMerge?: (profileSummary: ProfileSummary) => void;
-    onError?: (error: unknown) => void;
-    data: {
-        isUserLoggedIn: boolean;
-        profileSummary: ProfileSummary | null;
-        selectedAccount: ProfileAccount | null;
-    };
-};
-export {};

package/dist/components/ProfileWalletsModal/ProfileWalletsModal.types.js

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

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

@@ -1,2 +0,0 @@
-export { ProfileWalletsModal } from './ProfileWalletsModal';
-export type { PropTypes as ProfileWalletsModalProps } from './ProfileWalletsModal.types';

package/dist/components/ProfileWalletsModal/index.js

@@ -1 +0,0 @@
-export { ProfileWalletsModal } from './ProfileWalletsModal';

package/dist/components/SocialWalletIntroModal/SocialWalletIntroModal.d.ts

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

package/dist/components/SocialWalletIntroModal/SocialWalletIntroModal.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, CloseIcon, Divider, IconButton, Modal, Typography } from '@rango-dev/ui';
-import { useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ModalContent, ModalHeader, modalStyles } from './SocialWalletIntroModal.styles';
-export function SocialWalletIntroModal(props) {
-    const { isDarkMode, isMobile, open, onClose, onConfirm } = props;
-    const { t } = useTranslation();
-    const confirmedRef = useRef(false);
-    const handleConfirm = () => {
-        confirmedRef.current = true;
-        onClose();
-    };
-    const handleExit = () => {
-        if (confirmedRef.current) {
-            confirmedRef.current = false;
-            onConfirm();
-        }
-    };
-    return (_jsx(Modal, { open: open, onClose: onClose, onExit: handleExit, dismissible: true, hasWatermark: false, header: _jsxs(ModalHeader, { children: [_jsx(Typography, { variant: "body", size: "medium", children: t('Connect via Social account') }), _jsx(IconButton, { className: "close-button", id: "social-wallet-intro-modal-close-btn", variant: "ghost", onClick: onClose, children: _jsx(CloseIcon, { size: 12, color: "black" }) })] }), anchor: isMobile ? 'bottom' : 'center', styles: modalStyles, container: document.getElementById('rango-container'), footer: _jsx(Button, { id: "social-wallet-intro-modal-continue-btn", variant: "contained", type: "primary", size: "large", fullWidth: true, onClick: handleConfirm, children: t('Continue') }), children: _jsxs(ModalContent, { children: [_jsx("img", { src: `/imgs/wallets/social-wallet-intro-banner-${isDarkMode ? 'dark' : 'light'}.svg`, width: 250, height: 250 }), _jsx(Divider, { size: "20" }), _jsxs("div", { className: "info", children: [_jsxs("div", { className: "title", children: [_jsx("img", { src: "/imgs/wallets/zap.svg", width: "20", height: "20" }), _jsx(Typography, { variant: "title", size: "xmedium", children: t('Effortless & Instant') })] }), _jsx(Typography, { variant: "body", size: "medium", color: "neutral700", className: "description", children: t('Access your wallet in seconds. No apps, no browser extensions, no signing transactions. Just log in and go.') })] }), _jsx(Divider, { size: 16 }), _jsxs("div", { className: "info", children: [_jsxs("div", { className: "title", children: [_jsx("img", { src: "/imgs/wallets/secure-key.svg", width: "20", height: "20" }), _jsx(Typography, { variant: "title", size: "xmedium", children: t('Secure & Non-Custodial') })] }), _jsx(Typography, { variant: "body", size: "medium", color: "neutral700", className: "description", children: t('Only you can access your wallet via your social account or exported private key. Rango never stores your keys or controls your funds.') })] })] }) }));
-}

package/dist/components/SocialWalletIntroModal/SocialWalletIntroModal.styles.d.ts

@@ -1,4 +0,0 @@
-import type { ModalPropTypes } from '@rango-dev/ui';
-export declare const modalStyles: ModalPropTypes['styles'];
-export declare const ModalHeader: any;
-export declare const ModalContent: any;

package/dist/components/SocialWalletIntroModal/SocialWalletIntroModal.styles.js

@@ -1,49 +0,0 @@
-import { darkTheme, styled } from '@rango-dev/ui';
-export const modalStyles = {
-    container: {
-        '@sm': {
-            maxWidth: '360px',
-        },
-    },
-    footer: { paddingTop: '22px', paddingBottom: '$20' },
-};
-export const ModalHeader = styled('div', {
-    textAlign: 'center',
-    paddingBottom: '22px',
-    paddingTop: '18px',
-    position: 'relative',
-    '& .close-button': {
-        position: 'absolute',
-        right: '$16',
-        top: '$16',
-        '& svg': {
-            [`.${darkTheme} &`]: {
-                color: '$foreground',
-            },
-        },
-    },
-});
-export const ModalContent = styled('div', {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    textAlign: 'left',
-    '& .info': {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'start',
-    },
-    '& .title': {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        gap: '$8',
-        paddingBottom: '$8',
-    },
-    '& .description': {
-        [`.${darkTheme} &`]: {
-            color: '$neutral900',
-        },
-    },
-});

package/dist/components/SocialWalletIntroModal/SocialWalletIntroModal.types.d.ts

@@ -1,7 +0,0 @@
-export type PropTypes = {
-    isDarkMode: boolean;
-    isMobile: boolean;
-    open: boolean;
-    onClose: () => void;
-    onConfirm: () => void;
-};

package/dist/components/SocialWalletIntroModal/SocialWalletIntroModal.types.js

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

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

@@ -1 +0,0 @@
-export { SocialWalletIntroModal } from './SocialWalletIntroModal';

package/dist/components/SocialWalletIntroModal/index.js

@@ -1 +0,0 @@
-export { SocialWalletIntroModal } from './SocialWalletIntroModal';

package/dist/components/StackModal/ModalContainer.d.ts

@@ -1,4 +0,0 @@
-import type { PropTypes } from './ModalContainer.types';
-import React from 'react';
-declare const ModalContainer: React.NamedExoticComponent<PropTypes>;
-export default ModalContainer;

package/dist/components/StackModal/ModalContainer.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo, useEffect, useRef, useState } from 'react';
-import { Container } from './StackModal.styles';
-const ModalContainer = memo(function ModalContainer(props) {
-    const { isRemoved, onExit } = props;
-    const containerRef = useRef(null);
-    const [active, setActive] = useState(false);
-    // This ref is added to prevent the onExit function from being called twice in result of useEffect being called twice in dev mode because of strict mode
-    const hasRunOnExit = useRef(false);
-    useEffect(() => {
-        // ensure DOM is ready
-        requestAnimationFrame(() => {
-            setActive(true);
-        });
-    }, []);
-    useEffect(() => {
-        const callback = () => {
-            if (isRemoved && !hasRunOnExit.current) {
-                onExit();
-                hasRunOnExit.current = true;
-            }
-        };
-        containerRef.current?.addEventListener('transitionend', callback);
-        if (isRemoved) {
-            setActive(false);
-        }
-        return () => {
-            containerRef.current?.removeEventListener('transitionend', callback);
-        };
-    }, [isRemoved]);
-    return (_jsx(Container, { ref: containerRef, active: active, topDownIndex: props.topDownIndex.toString(), children: props.children }));
-});
-export default ModalContainer;

package/dist/components/StackModal/ModalContainer.types.d.ts

@@ -1,6 +0,0 @@
-export type PropTypes = {
-    children: React.ReactNode;
-    topDownIndex: number;
-    isRemoved: boolean;
-    onExit: () => void;
-};

package/dist/components/StackModal/ModalContainer.types.js

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

package/dist/components/StackModal/StackModal.d.ts

@@ -1,3 +0,0 @@
-import type { PropTypes } from './StackModal.types';
-import React from 'react';
-export declare const StackModal: React.NamedExoticComponent<PropTypes>;

package/dist/components/StackModal/StackModal.js

@@ -1,90 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useStackModal } from '@arthur2079/internal-profile/hooks';
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import ModalContainer from './ModalContainer';
-import { BackDrop } from './StackModal.styles';
-const BACKDROP_ANIMATION_DURATION = 350;
-/*
- * This component operates based on the value of stack from `useStackModal`.
- * When the length of the stack gets bigger than zero, `open` turns true.
- * When open turns true, status changes to mounted and it gets rendered in dom.
- * When rendered in dom, animations should get activated so status changes to activated.
- * When the length of stack decrease to zero, if it is active, it gets deactivated.
- * After getting deactivated when transition ends, it gets unmounted.
- */
-export const StackModal = memo(function StackModal(props) {
-    const { stack, clear } = useStackModal();
-    const [visibleStack, setVisibleStack] = useState([]);
-    const [status, setStatus] = useState('unmounted');
-    const backDropRef = useRef(null);
-    const open = visibleStack.length > 0;
-    useEffect(() => {
-        if (status === 'mounted') {
-            document.body.style.overflow = 'hidden';
-            backDropRef.current?.focus();
-            setStatus('activated');
-        }
-    }, [status]);
-    useEffect(() => {
-        const callback = () => {
-            if ((status === 'deactivated' || status === 'activated') && visibleStack.length === 0) {
-                setStatus('unmounted');
-                document.body.style.removeProperty('overflow');
-            }
-        };
-        const element = backDropRef.current;
-        element?.addEventListener('transitionend', callback);
-        // Fallback timeout for animation
-        const timeoutId = setTimeout(callback, BACKDROP_ANIMATION_DURATION);
-        if (open) {
-            setStatus('mounted');
-        }
-        else {
-            if (status === 'activated') {
-                setStatus('deactivated');
-            }
-            else {
-                setStatus('unmounted');
-            }
-        }
-        return () => {
-            element?.removeEventListener('transitionend', callback);
-            clearTimeout(timeoutId);
-        };
-    }, [open]);
-    useEffect(() => {
-        // Ensure that visibleStack is always up to date with stack
-        if (!stack.every((stackItem) => visibleStack.some((visibleItem) => visibleItem.id === stackItem.id))) {
-            setVisibleStack(stack);
-        }
-    }, [stack, visibleStack]);
-    const handleBackDropClick = (event) => {
-        event.stopPropagation();
-        if (event.target === event.currentTarget) {
-            clear();
-        }
-    };
-    const handleKeyDown = (event) => {
-        if (event.key === 'Escape') {
-            clear();
-        }
-    };
-    const renderModalContent = useCallback((item, index) => {
-        try {
-            return item.renderContent(index);
-        }
-        catch (error) {
-            console.error(`Error rendering modal content for ${item.id}:`, error);
-            return _jsx("div", { children: "Error loading modal content" });
-        }
-    }, []);
-    const onModalContainerExit = useCallback((item) => {
-        setVisibleStack((stack) => stack.filter((stackItem) => stackItem.id !== item.id));
-        item.onExit?.();
-    }, [setVisibleStack]);
-    if (status === 'unmounted') {
-        return null;
-    }
-    return createPortal(_jsx(BackDrop, { active: status === 'activated', onClick: handleBackDropClick, ref: backDropRef, onKeyDown: handleKeyDown, tabIndex: open ? 0 : -1, children: visibleStack.map((item, index, array) => (_jsx(ModalContainer, { topDownIndex: array.length - index - 1, isRemoved: !stack.some((stackItem) => stackItem.id === item.id), onExit: () => onModalContainerExit(item), children: renderModalContent(item, index) }, item.id))) }), props.getContainer());
-});

package/dist/components/StackModal/StackModal.styles.d.ts

@@ -1,2 +0,0 @@
-export declare const BackDrop: any;
-export declare const Container: any;

package/dist/components/StackModal/StackModal.styles.js

@@ -1,77 +0,0 @@
-import { MAX_STACK_SIZE } from '@arthur2079/internal-profile/hooks';
-import { styled } from '@rango-dev/ui';
-export const BackDrop = styled('div', {
-    position: 'fixed',
-    top: '0',
-    left: '0',
-    right: '0',
-    bottom: '0',
-    width: '100%',
-    height: '100%',
-    backgroundColor: 'transparent',
-    zIndex: 10,
-    overflow: 'hidden',
-    transition: 'background 0.35s',
-    variants: {
-        active: {
-            true: {
-                backgroundColor: 'color-mix(in srgb, $neutral500 70%, transparent)',
-            },
-        },
-    },
-});
-const CONTAINER_OFFSET = 10;
-const CONTAINER_HEIGHT_REDUCTION = 20;
-const generateTopDownVariants = (maxIndex) => {
-    const variants = {};
-    for (let i = 0; i <= maxIndex; i++) {
-        variants[i.toString()] = {};
-    }
-    return variants;
-};
-const generateCompoundVariants = (maxIndex) => {
-    const compoundVariants = [];
-    for (let i = 0; i <= maxIndex; i++) {
-        compoundVariants.push({
-            active: true,
-            topDownIndex: i.toString(),
-            css: {
-                '@md': {
-                    transform: `translate(calc(-100% - ${i * CONTAINER_OFFSET}px), -50%)`,
-                    height: `calc(100% - ${i * CONTAINER_HEIGHT_REDUCTION}px)`,
-                },
-            },
-        });
-    }
-    return compoundVariants;
-};
-export const Container = styled('div', {
-    backgroundColor: '$background',
-    position: 'absolute',
-    transition: 'transform .35s ease-in-out, height .35s ease-in-out',
-    boxShadow: '-10px 10px 30px 0px rgba(0, 0, 0, 0.05)',
-    top: '100%',
-    height: '100%',
-    width: '100%',
-    '@md': {
-        top: '50%',
-        left: '100%',
-        width: '450px',
-        height: 'calc(100% - 20px)',
-        borderRadius: '20px',
-        transform: 'translate(0, -50%)',
-    },
-    variants: {
-        active: {
-            true: {
-                transform: 'translate(0, -100%)',
-                '@md': {
-                    transform: 'translate(-100%, -50%)',
-                },
-            },
-            false: {},
-        },
-        topDownIndex: generateTopDownVariants(MAX_STACK_SIZE),
-    },
-    compoundVariants: generateCompoundVariants(MAX_STACK_SIZE),
-});

package/dist/components/StackModal/StackModal.types.d.ts

@@ -1,3 +0,0 @@
-export interface PropTypes {
-    getContainer: () => HTMLElement;
-}

package/dist/components/StackModal/StackModal.types.js

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

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

@@ -1 +0,0 @@
-export { StackModal } from './StackModal';