@dynamic-labs/sdk-react-core 0.17.0-RC.11 → 0.17.0-RC.13

package/src/lib/components/Popper/Popper/Popper.js

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { usePopper } from '../PopperContext/PopperContext.js';
+import { getChildPosition } from '../utils/getChildPosition/getChildPosition.js';
+import { watchToScrollInHierarchy } from '../utils/watchToScrollInHierarchy/watchToScrollInHierarchy.js';
+import { PopperContent } from '../PopperContent/PopperContent.js';
+
+const Popper = forwardRef(({ anchorRef, isOpen, setIsOpen, anchorOrigin = 'top-left', transformOrigin = 'top-left', children, }, ref) => {
+    const { containerRef } = usePopper();
+    const [anchorPosition, setAnchorPosition] = useState();
+    const container = containerRef.current;
+    useEffect(() => {
+        if (!isOpen) {
+            return setAnchorPosition(undefined);
+        }
+        const container = containerRef.current;
+        const anchor = anchorRef.current;
+        if (!container || !anchor)
+            return;
+        setAnchorPosition(getChildPosition(container, anchor));
+        return watchToScrollInHierarchy(container, anchor, () => {
+            setIsOpen(false);
+        });
+    }, [anchorRef, containerRef, isOpen, setAnchorPosition, setIsOpen]);
+    const anchorOriginPosition = useMemo(() => {
+        var _a;
+        const anchorRect = (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!anchorPosition || !anchorRect)
+            return;
+        switch (anchorOrigin) {
+            case 'top-left':
+                return anchorPosition;
+            case 'top-right':
+                return Object.assign(Object.assign({}, anchorPosition), { left: anchorPosition.left + anchorRect.width });
+            case 'bottom-left':
+                return Object.assign(Object.assign({}, anchorPosition), { top: anchorPosition.top + anchorRect.height });
+            case 'bottom-right':
+                return Object.assign(Object.assign({}, anchorPosition), { left: anchorPosition.left + anchorRect.width, top: anchorPosition.top + anchorRect.height });
+            default:
+                return undefined;
+        }
+    }, [anchorPosition, anchorRef, anchorOrigin]);
+    if (!isOpen || !anchorOriginPosition || container === null)
+        return null;
+    return createPortal(jsx(PopperContent, Object.assign({ ref: ref, transformOrigin: transformOrigin, style: anchorOriginPosition }, { children: children })), container);
+});
+Popper.displayName = 'Popper';
+
+export { Popper };

package/src/lib/components/Popper/Popper/index.d.ts

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

package/src/lib/components/Popper/Popper.types.d.ts

@@ -0,0 +1,6 @@
+export type AnchorOrigin = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type TransformOrigin = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type Position = {
+    left: number;
+    top: number;
+};

package/src/lib/components/Popper/PopperContent/PopperContent.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var classNames = require('../../../utils/functions/classNames/classNames.cjs');
+
+const mapTransformOriginToClassName = {
+    'bottom-left': 'popper-content__transform-origin-bottom-left',
+    'bottom-right': 'popper-content__transform-origin-bottom-right',
+    'top-left': 'popper-content__transform-origin-top-left',
+    'top-right': 'popper-content__transform-origin-top-right',
+};
+const PopperContent = React.forwardRef(({ children, transformOrigin, style }, ref) => (jsxRuntime.jsx("div", Object.assign({ "data-testid": 'popper-content', ref: ref, className: classNames.classNames('popper-content', mapTransformOriginToClassName[transformOrigin]), style: style }, { children: children }))));
+PopperContent.displayName = 'PopperContent';
+
+exports.PopperContent = PopperContent;

package/src/lib/components/Popper/PopperContent/PopperContent.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+import { TransformOrigin } from '../Popper.types';
+export type PopperContentProps = {
+    style?: CSSProperties;
+    transformOrigin: TransformOrigin;
+};
+export declare const PopperContent: import("react").ForwardRefExoticComponent<PopperContentProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/src/lib/components/Popper/PopperContent/PopperContent.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { classNames } from '../../../utils/functions/classNames/classNames.js';
+
+const mapTransformOriginToClassName = {
+    'bottom-left': 'popper-content__transform-origin-bottom-left',
+    'bottom-right': 'popper-content__transform-origin-bottom-right',
+    'top-left': 'popper-content__transform-origin-top-left',
+    'top-right': 'popper-content__transform-origin-top-right',
+};
+const PopperContent = forwardRef(({ children, transformOrigin, style }, ref) => (jsx("div", Object.assign({ "data-testid": 'popper-content', ref: ref, className: classNames('popper-content', mapTransformOriginToClassName[transformOrigin]), style: style }, { children: children }))));
+PopperContent.displayName = 'PopperContent';
+
+export { PopperContent };

package/src/lib/components/Popper/PopperContent/index.d.ts

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

package/src/lib/components/Popper/PopperContext/PopperContext.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const popperContext = React.createContext(undefined);
+const PopperProvider = ({ children }) => {
+    const { Provider } = popperContext;
+    const containerRef = React.useRef(null);
+    return (jsxRuntime.jsx(Provider, Object.assign({ value: {
+            containerRef,
+        } }, { children: jsxRuntime.jsx("div", Object.assign({ ref: containerRef, style: { position: 'relative' } }, { children: children })) })));
+};
+const usePopper = () => {
+    const context = React.useContext(popperContext);
+    if (!context) {
+        throw new Error('To use popper, use the PopperProvider above in the dom hierarchy');
+    }
+    return context;
+};
+
+exports.PopperProvider = PopperProvider;
+exports.popperContext = popperContext;
+exports.usePopper = usePopper;

package/src/lib/components/Popper/PopperContext/PopperContext.d.ts

@@ -0,0 +1,8 @@
+import { FC, MutableRefObject, PropsWithChildren } from 'react';
+type PopperContext = {
+    containerRef: MutableRefObject<HTMLDivElement | null>;
+};
+export declare const popperContext: import("react").Context<PopperContext | undefined>;
+export declare const PopperProvider: FC<PropsWithChildren>;
+export declare const usePopper: () => PopperContext;
+export {};

package/src/lib/components/Popper/PopperContext/PopperContext.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useRef } from 'react';
+
+const popperContext = createContext(undefined);
+const PopperProvider = ({ children }) => {
+    const { Provider } = popperContext;
+    const containerRef = useRef(null);
+    return (jsx(Provider, Object.assign({ value: {
+            containerRef,
+        } }, { children: jsx("div", Object.assign({ ref: containerRef, style: { position: 'relative' } }, { children: children })) })));
+};
+const usePopper = () => {
+    const context = useContext(popperContext);
+    if (!context) {
+        throw new Error('To use popper, use the PopperProvider above in the dom hierarchy');
+    }
+    return context;
+};
+
+export { PopperProvider, popperContext, usePopper };

package/src/lib/components/Popper/PopperContext/index.d.ts

@@ -0,0 +1 @@
+export { PopperProvider, usePopper } from './PopperContext';

package/src/lib/components/Popper/index.d.ts

@@ -0,0 +1,2 @@
+export { Popper } from './Popper';
+export { PopperProvider } from './PopperContext';

package/src/lib/components/Popper/utils/getChildPosition/getChildPosition.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const getChildPosition = (root, element) => {
+    const rootRect = root.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+    return {
+        left: elementRect.x - rootRect.x,
+        top: elementRect.y - rootRect.y,
+    };
+};
+
+exports.getChildPosition = getChildPosition;

package/src/lib/components/Popper/utils/getChildPosition/getChildPosition.d.ts

@@ -0,0 +1,2 @@
+import { Position } from '../../Popper.types';
+export declare const getChildPosition: (root: HTMLElement, element: HTMLElement) => Position;

package/src/lib/components/Popper/utils/getChildPosition/getChildPosition.js

@@ -0,0 +1,10 @@
+const getChildPosition = (root, element) => {
+    const rootRect = root.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+    return {
+        left: elementRect.x - rootRect.x,
+        top: elementRect.y - rootRect.y,
+    };
+};
+
+export { getChildPosition };

package/src/lib/components/Popper/utils/getChildPosition/index.d.ts

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

package/src/lib/components/Popper/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './getChildPosition';
+export * from './watchToScrollInHierarchy';
+export * from './isScrollable';

package/src/lib/components/Popper/utils/isScrollable/index.d.ts

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

package/src/lib/components/Popper/utils/isScrollable/isScrollable.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const isScrollable = (element) => {
+    const hasScrollableContent = element.scrollHeight > element.clientHeight;
+    // It's not enough because the element's `overflow-y` style can be set as
+    // * `hidden`
+    // * `hidden !important`
+    // In those cases, the scrollbar isn't shown
+    const overflowYStyle = window.getComputedStyle(element).overflowY;
+    const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1;
+    return hasScrollableContent && !isOverflowHidden;
+};
+
+exports.isScrollable = isScrollable;

package/src/lib/components/Popper/utils/isScrollable/isScrollable.d.ts

@@ -0,0 +1 @@
+export declare const isScrollable: (element: HTMLElement) => boolean;

package/src/lib/components/Popper/utils/isScrollable/isScrollable.js

@@ -0,0 +1,12 @@
+const isScrollable = (element) => {
+    const hasScrollableContent = element.scrollHeight > element.clientHeight;
+    // It's not enough because the element's `overflow-y` style can be set as
+    // * `hidden`
+    // * `hidden !important`
+    // In those cases, the scrollbar isn't shown
+    const overflowYStyle = window.getComputedStyle(element).overflowY;
+    const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1;
+    return hasScrollableContent && !isOverflowHidden;
+};
+
+export { isScrollable };

package/src/lib/components/Popper/utils/watchToScrollInHierarchy/index.d.ts

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

package/src/lib/components/Popper/utils/watchToScrollInHierarchy/watchToScrollInHierarchy.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var isScrollable = require('../isScrollable/isScrollable.cjs');
+
+const watchToScrollInHierarchy = (root, element, callback) => {
+    const elementsWithListener = [];
+    let currentElement = element;
+    while (currentElement !== null) {
+        const reachedRoot = currentElement === root;
+        if (isScrollable.isScrollable(currentElement)) {
+            currentElement.addEventListener('scroll', callback);
+            elementsWithListener.push(currentElement);
+        }
+        currentElement = currentElement.parentElement;
+        if (reachedRoot) {
+            break;
+        }
+    }
+    return () => elementsWithListener.forEach((element) => element.removeEventListener('scroll', callback));
+};
+
+exports.watchToScrollInHierarchy = watchToScrollInHierarchy;

package/src/lib/components/Popper/utils/watchToScrollInHierarchy/watchToScrollInHierarchy.d.ts

@@ -0,0 +1 @@
+export declare const watchToScrollInHierarchy: (root: HTMLElement, element: HTMLElement, callback: () => void) => () => void;

package/src/lib/components/Popper/utils/watchToScrollInHierarchy/watchToScrollInHierarchy.js

@@ -0,0 +1,20 @@
+import { isScrollable } from '../isScrollable/isScrollable.js';
+
+const watchToScrollInHierarchy = (root, element, callback) => {
+    const elementsWithListener = [];
+    let currentElement = element;
+    while (currentElement !== null) {
+        const reachedRoot = currentElement === root;
+        if (isScrollable(currentElement)) {
+            currentElement.addEventListener('scroll', callback);
+            elementsWithListener.push(currentElement);
+        }
+        currentElement = currentElement.parentElement;
+        if (reachedRoot) {
+            break;
+        }
+    }
+    return () => elementsWithListener.forEach((element) => element.removeEventListener('scroll', callback));
+};
+
+export { watchToScrollInHierarchy };

package/src/lib/components/Portal/Portal.cjs

@@ -29,6 +29,8 @@ require('../../context/ThemeContext/ThemeContext.cjs');
 var useKeyboardEventListener = require('../../utils/hooks/useKeyboardEventListener/useKeyboardEventListener.cjs');
 require('../IconButton/IconButton.cjs');
 require('../Alert/Alert.cjs');
+require('../Popper/Popper/Popper.cjs');
+require('../Popper/PopperContext/PopperContext.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

package/src/lib/components/Portal/Portal.js

@@ -25,6 +25,8 @@ import '../../context/ThemeContext/ThemeContext.js';
 import { useKeyboardEventListener } from '../../utils/hooks/useKeyboardEventListener/useKeyboardEventListener.js';
 import '../IconButton/IconButton.js';
 import '../Alert/Alert.js';
+import '../Popper/Popper/Popper.js';
+import '../Popper/PopperContext/PopperContext.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/components/Tooltip/Tooltip.cjs

@@ -33,6 +33,8 @@ require('../Transition/OpacityTransition/OpacityTransition.cjs');
 var useHover = require('../../utils/hooks/useHover/useHover.cjs');
 require('../IconButton/IconButton.cjs');
 require('../Alert/Alert.cjs');
+require('../Popper/Popper/Popper.cjs');
+require('../Popper/PopperContext/PopperContext.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

package/src/lib/components/Tooltip/Tooltip.js

@@ -29,6 +29,8 @@ import '../Transition/OpacityTransition/OpacityTransition.js';
 import { useHover } from '../../utils/hooks/useHover/useHover.js';
 import '../IconButton/IconButton.js';
 import '../Alert/Alert.js';
+import '../Popper/Popper/Popper.js';
+import '../Popper/PopperContext/PopperContext.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/components/Transition/VerticalDrawerTransition/VerticalDrawerTransition.cjs

@@ -31,6 +31,8 @@ require('../SlideInUpTransition/SlideInUpTransition.cjs');
 require('../OpacityTransition/OpacityTransition.cjs');
 require('../../IconButton/IconButton.cjs');
 require('../../Alert/Alert.cjs');
+require('../../Popper/Popper/Popper.cjs');
+require('../../Popper/PopperContext/PopperContext.cjs');
 require('../../../context/MockContext/MockContext.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

package/src/lib/components/Transition/VerticalDrawerTransition/VerticalDrawerTransition.js

@@ -27,6 +27,8 @@ import '../SlideInUpTransition/SlideInUpTransition.js';
 import '../OpacityTransition/OpacityTransition.js';
 import '../../IconButton/IconButton.js';
 import '../../Alert/Alert.js';
+import '../../Popper/Popper/Popper.js';
+import '../../Popper/PopperContext/PopperContext.js';
 import '../../../context/MockContext/MockContext.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/components/UserProfile/parts/UserProfileField/UserProfileField.cjs

@@ -31,6 +31,8 @@ require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 require('../../../IconButton/IconButton.cjs');
 require('../../../Alert/Alert.cjs');
+require('../../../Popper/Popper/Popper.cjs');
+require('../../../Popper/PopperContext/PopperContext.cjs');
 var VerifiedEmailIcon = require('./components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 
 const UserProfileField = ({ name, label, value, }) => {

package/src/lib/components/UserProfile/parts/UserProfileField/UserProfileField.js

@@ -27,6 +27,8 @@ import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import '../../../IconButton/IconButton.js';
 import '../../../Alert/Alert.js';
+import '../../../Popper/Popper/Popper.js';
+import '../../../Popper/PopperContext/PopperContext.js';
 import { VerifiedEmailIcon } from './components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 
 const UserProfileField = ({ name, label, value, }) => {

package/src/lib/components/UserProfile/parts/UserProfileSection/UserProfileSection.cjs

@@ -31,6 +31,8 @@ require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 require('../../../IconButton/IconButton.cjs');
 require('../../../Alert/Alert.cjs');
+require('../../../Popper/Popper/Popper.cjs');
+require('../../../Popper/PopperContext/PopperContext.cjs');
 
 const UserProfileSection = ({ title, children, }) => (jsxRuntime.jsxs("div", Object.assign({ className: 'user-profile-section' }, { children: [title && (jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small', className: 'user-profile-section__title' }, { children: title }))), children] })));
 

package/src/lib/components/UserProfile/parts/UserProfileSection/UserProfileSection.js

@@ -27,6 +27,8 @@ import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import '../../../IconButton/IconButton.js';
 import '../../../Alert/Alert.js';
+import '../../../Popper/Popper/Popper.js';
+import '../../../Popper/PopperContext/PopperContext.js';
 
 const UserProfileSection = ({ title, children, }) => (jsxs("div", Object.assign({ className: 'user-profile-section' }, { children: [title && (jsx(Typography, Object.assign({ as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small', className: 'user-profile-section__title' }, { children: title }))), children] })));
 

package/src/lib/components/UserProfile/parts/UserProfileSocialAccount/UserProfileSocialAccount.cjs

@@ -36,6 +36,8 @@ require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs')
 var Button = require('../../../Button/Button.cjs');
 require('../../../IconButton/IconButton.cjs');
 require('../../../Alert/Alert.cjs');
+require('../../../Popper/Popper/Popper.cjs');
+require('../../../Popper/PopperContext/PopperContext.cjs');
 var helpers = require('../../../../widgets/DynamicWidget/helpers/helpers.cjs');
 var useUpdateUserProfileByJWTCallback = require('../../../../utils/hooks/useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.cjs');
 var ConnectedAccountAvatar = require('./components/ConnectedAccountAvatar/ConnectedAccountAvatar.cjs');

package/src/lib/components/UserProfile/parts/UserProfileSocialAccount/UserProfileSocialAccount.js

@@ -32,6 +32,8 @@ import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import { Button } from '../../../Button/Button.js';
 import '../../../IconButton/IconButton.js';
 import '../../../Alert/Alert.js';
+import '../../../Popper/Popper/Popper.js';
+import '../../../Popper/PopperContext/PopperContext.js';
 import { capitalize } from '../../../../widgets/DynamicWidget/helpers/helpers.js';
 import { useUpdateUserProfileByJWTCallback } from '../../../../utils/hooks/useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.js';
 import { ConnectedAccountAvatar } from './components/ConnectedAccountAvatar/ConnectedAccountAvatar.js';

package/src/lib/components/index.d.ts

@@ -34,3 +34,4 @@ export * from './ModalHeaderBanner';
 export * from './OTPVerificationView';
 export * from './IconListTile';
 export * from './Transition';
+export * from './Popper';

package/src/lib/context/DynamicContext/DynamicContext.cjs

@@ -57,6 +57,8 @@ require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../components/IconButton/IconButton.cjs');
 require('../../components/Alert/Alert.cjs');
+require('../../components/Popper/Popper/Popper.cjs');
+require('../../components/Popper/PopperContext/PopperContext.cjs');
 var useGlobalLoading = require('../../shared/utils/hooks/useGlobalLoading/useGlobalLoading.cjs');
 var FundingContext = require('../FundingContext/FundingContext.cjs');
 require('@dynamic-labs/wallet-book');

package/src/lib/context/DynamicContext/DynamicContext.js

@@ -53,6 +53,8 @@ import '../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../components/IconButton/IconButton.js';
 import '../../components/Alert/Alert.js';
+import '../../components/Popper/Popper/Popper.js';
+import '../../components/Popper/PopperContext/PopperContext.js';
 import { useGlobalLoading } from '../../shared/utils/hooks/useGlobalLoading/useGlobalLoading.js';
 import { FundingContextProvider } from '../FundingContext/FundingContext.js';
 import '@dynamic-labs/wallet-book';

package/src/lib/context/DynamicContext/useCustomerCallbacks/useCustomerAuthFlowCallbacks.cjs

@@ -28,6 +28,8 @@ require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.
 require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../components/IconButton/IconButton.cjs');
 require('../../../components/Alert/Alert.cjs');
+require('../../../components/Popper/Popper/Popper.cjs');
+require('../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../MockContext/MockContext.cjs');
 require('../../CaptchaContext/CaptchaContext.cjs');
 require('../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

package/src/lib/context/DynamicContext/useCustomerCallbacks/useCustomerAuthFlowCallbacks.js

@@ -24,6 +24,8 @@ import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.j
 import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../components/IconButton/IconButton.js';
 import '../../../components/Alert/Alert.js';
+import '../../../components/Popper/Popper/Popper.js';
+import '../../../components/Popper/PopperContext/PopperContext.js';
 import '../../MockContext/MockContext.js';
 import '../../CaptchaContext/CaptchaContext.js';
 import '../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/context/QrCodeContext/QrCodeContext.cjs

@@ -27,6 +27,8 @@ require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs
 require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../components/IconButton/IconButton.cjs');
 require('../../components/Alert/Alert.cjs');
+require('../../components/Popper/Popper/Popper.cjs');
+require('../../components/Popper/PopperContext/PopperContext.cjs');
 var useDefaultQrCode = require('../../utils/hooks/useDefaultQrCode/useDefaultQrCode.cjs');
 require('../MockContext/MockContext.cjs');
 require('../CaptchaContext/CaptchaContext.cjs');

package/src/lib/context/QrCodeContext/QrCodeContext.js

@@ -23,6 +23,8 @@ import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../components/IconButton/IconButton.js';
 import '../../components/Alert/Alert.js';
+import '../../components/Popper/Popper/Popper.js';
+import '../../components/Popper/PopperContext/PopperContext.js';
 import { useDefaultQrCode } from '../../utils/hooks/useDefaultQrCode/useDefaultQrCode.js';
 import '../MockContext/MockContext.js';
 import '../CaptchaContext/CaptchaContext.js';

package/src/lib/context/SocialRedirectContext/SocialRedirectContext.cjs

@@ -28,6 +28,8 @@ require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs
 require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../components/IconButton/IconButton.cjs');
 require('../../components/Alert/Alert.cjs');
+require('../../components/Popper/Popper/Popper.cjs');
+require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('../MockContext/MockContext.cjs');
 require('../ErrorContext/ErrorContext.cjs');
 require('../CaptchaContext/CaptchaContext.cjs');

package/src/lib/context/SocialRedirectContext/SocialRedirectContext.js

@@ -24,6 +24,8 @@ import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../components/IconButton/IconButton.js';
 import '../../components/Alert/Alert.js';
+import '../../components/Popper/Popper/Popper.js';
+import '../../components/Popper/PopperContext/PopperContext.js';
 import '../MockContext/MockContext.js';
 import '../ErrorContext/ErrorContext.js';
 import '../CaptchaContext/CaptchaContext.js';

package/src/lib/layout/DynamicAuthLayout/DynamicAuthLayout.cjs

@@ -37,6 +37,8 @@ var VerticalAccordion = require('../../components/Accordion/components/VerticalA
 var AccordionItem = require('../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 require('../../components/Alert/Alert.cjs');
 var AnimatePresence = require('../../components/AnimatePresence/AnimatePresence.cjs');
+require('../../components/Popper/Popper/Popper.cjs');
+require('../../components/Popper/PopperContext/PopperContext.cjs');
 var isUserLinkingWallet = require('../../shared/utils/functions/isUserLinkingWallet/isUserLinkingWallet.cjs');
 require('../../components/OverlayCard/OverlayCard.context.cjs');
 var OverlayCardTarget = require('../../components/OverlayCard/OverlayCardTarget.cjs');

package/src/lib/layout/DynamicAuthLayout/DynamicAuthLayout.js

@@ -33,6 +33,8 @@ import { VerticalAccordion } from '../../components/Accordion/components/Vertica
 import { AccordionItem } from '../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../components/Alert/Alert.js';
 import { AnimatePresence } from '../../components/AnimatePresence/AnimatePresence.js';
+import '../../components/Popper/Popper/Popper.js';
+import '../../components/Popper/PopperContext/PopperContext.js';
 import { isUserLinkingWallet } from '../../shared/utils/functions/isUserLinkingWallet/isUserLinkingWallet.js';
 import '../../components/OverlayCard/OverlayCard.context.js';
 import { OverlayCardTarget } from '../../components/OverlayCard/OverlayCardTarget.js';

package/src/lib/layout/DynamicAuthLayout/Footer/Footer.cjs

@@ -35,6 +35,8 @@ require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 require('../../../components/IconButton/IconButton.cjs');
 require('../../../components/Alert/Alert.cjs');
+require('../../../components/Popper/Popper/Popper.cjs');
+require('../../../components/Popper/PopperContext/PopperContext.cjs');
 
 const Footer = ({ heading, icon, projectSettings }) => {
     const { theme } = ThemeContext.useThemeContext();

package/src/lib/layout/DynamicAuthLayout/Footer/Footer.js

@@ -31,6 +31,8 @@ import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import '../../../components/IconButton/IconButton.js';
 import '../../../components/Alert/Alert.js';
+import '../../../components/Popper/Popper/Popper.js';
+import '../../../components/Popper/PopperContext/PopperContext.js';
 
 const Footer = ({ heading, icon, projectSettings }) => {
     const { theme } = useThemeContext();

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletListFooterContent/Item/Item.cjs

@@ -31,6 +31,8 @@ require('../../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 require('../../../../../components/IconButton/IconButton.cjs');
 require('../../../../../components/Alert/Alert.cjs');
+require('../../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
 
 const Item = ({ heading, StartIcon, EndIcon, message, url, }) => (jsxRuntime.jsxs("a", Object.assign({ className: 'footer-buttons-item', href: url, rel: 'noopener noreferrer', target: '_blank' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'footer-buttons-item__icon--left' }, { children: jsxRuntime.jsx(StartIcon, {}) })), jsxRuntime.jsxs("div", Object.assign({ className: 'footer-buttons-item__typography' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'h2', weight: 'regular', color: 'primary', variant: 'body_normal' }, { children: heading })), message && (jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'p', weight: 'regular', color: 'secondary' }, { children: message })))] })), EndIcon && jsxRuntime.jsx(EndIcon, { style: { height: '1.5rem', width: '1.5rem' } })] })));
 

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletListFooterContent/Item/Item.js

@@ -27,6 +27,8 @@ import '../../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import '../../../../../components/IconButton/IconButton.js';
 import '../../../../../components/Alert/Alert.js';
+import '../../../../../components/Popper/Popper/Popper.js';
+import '../../../../../components/Popper/PopperContext/PopperContext.js';
 
 const Item = ({ heading, StartIcon, EndIcon, message, url, }) => (jsxs("a", Object.assign({ className: 'footer-buttons-item', href: url, rel: 'noopener noreferrer', target: '_blank' }, { children: [jsx("div", Object.assign({ className: 'footer-buttons-item__icon--left' }, { children: jsx(StartIcon, {}) })), jsxs("div", Object.assign({ className: 'footer-buttons-item__typography' }, { children: [jsx(Typography, Object.assign({ as: 'h2', weight: 'regular', color: 'primary', variant: 'body_normal' }, { children: heading })), message && (jsx(Typography, Object.assign({ as: 'p', weight: 'regular', color: 'secondary' }, { children: message })))] })), EndIcon && jsx(EndIcon, { style: { height: '1.5rem', width: '1.5rem' } })] })));
 

package/src/lib/layout/DynamicAuthLayout/FooterContent/WalletListFooterContent/WalletExtensionOrAppContinueButton/WalletExtensionOrAppContinueButton.cjs

@@ -33,6 +33,8 @@ require('../../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 require('../../../../../components/IconButton/IconButton.cjs');
 require('../../../../../components/Alert/Alert.cjs');
+require('../../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
 var NewToWeb3WalletItem = require('../NewToWeb3WalletItem/NewToWeb3WalletItem.cjs');
 
 const WalletExtensionOrAppContinueButton = ({ wallet, selectedUrl, }) => {