@arthur2079/internal-profile 4.1.2-next.5 → 5.1.2-next.6

package/dist/components/ProfileWallets/ConnectedWallets.js

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,30 @@
+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

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

package/dist/components/ProfileWallets/ConnectedWalletsEmptyState.js

@@ -0,0 +1,9 @@
+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

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

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,14 @@
+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

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

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

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

package/dist/components/ProfileWallets/index.js

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

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

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

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

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

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

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

package/dist/components/ProfileWalletsModal/ProfileWalletsModal.js

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,23 @@
+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

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

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

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

package/dist/components/ProfileWalletsModal/index.js

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

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

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

package/dist/components/SocialWalletIntroModal/SocialWalletIntroModal.js

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,49 @@
+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

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

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

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

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

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

package/dist/components/SocialWalletIntroModal/index.js

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

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,33 @@
+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

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

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

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

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

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

package/dist/components/StackModal/StackModal.js

@@ -0,0 +1,90 @@
+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

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

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

@@ -0,0 +1,77 @@
+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

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

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

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

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

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