@dynamic-labs/sdk-react-core 0.18.0-RC.15 → 0.18.0-RC.17

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

@@ -5,28 +5,28 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactDom = require('react-dom');
+var PopperContent = require('../PopperContent/PopperContent.cjs');
 var PopperContext = require('../PopperContext/PopperContext.cjs');
 var getChildPosition = require('../utils/getChildPosition/getChildPosition.cjs');
-var watchToScrollInHierarchy = require('../utils/watchToScrollInHierarchy/watchToScrollInHierarchy.cjs');
-var PopperContent = require('../PopperContent/PopperContent.cjs');
 
-const Popper = React.forwardRef(({ anchorRef, isOpen, setIsOpen, anchorOrigin = 'top-left', transformOrigin = 'top-left', children, }, ref) => {
+// eslint-disable-next-line multiline-comment-style
+/** Allows to render content outside of the current DOM parent and specify a reference position
+ * To allow for opening and closing of menus, see MenuList and Dropdown components
+ */
+const Popper = React.forwardRef(({ anchorRef, anchorOrigin = 'top-left', transformOrigin = 'top-left', children, style, className, }, ref) => {
     const { containerRef } = PopperContext.usePopper();
     const [anchorPosition, setAnchorPosition] = React.useState();
     const container = containerRef.current;
+    // Calculates anchor position based on anchorOrigin's relative position to popper's container
+    // and sets up scroll listener to close popper
     React.useEffect(() => {
-        if (!isOpen) {
-            return setAnchorPosition(undefined);
-        }
         const container = containerRef.current;
         const anchor = anchorRef.current;
         if (!container || !anchor)
             return;
         setAnchorPosition(getChildPosition.getChildPosition(container, anchor));
-        return watchToScrollInHierarchy.watchToScrollInHierarchy(container, anchor, () => {
-            setIsOpen(false);
-        });
-    }, [anchorRef, containerRef, isOpen, setAnchorPosition, setIsOpen]);
+    }, [anchorRef, containerRef, setAnchorPosition]);
+    /** Position of the anchor's vertex that was selected by anchorOrigin  */
     const anchorOriginPosition = React.useMemo(() => {
         var _a;
         const anchorRect = (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
@@ -45,9 +45,9 @@ const Popper = React.forwardRef(({ anchorRef, isOpen, setIsOpen, anchorOrigin =
                 return undefined;
         }
     }, [anchorPosition, anchorRef, anchorOrigin]);
-    if (!isOpen || !anchorOriginPosition || container === null)
+    if (!anchorOriginPosition || container === null)
         return null;
-    return reactDom.createPortal(jsxRuntime.jsx(PopperContent.PopperContent, Object.assign({ ref: ref, transformOrigin: transformOrigin, style: anchorOriginPosition }, { children: children })), container);
+    return reactDom.createPortal(jsxRuntime.jsx(PopperContent.PopperContent, Object.assign({ ref: ref, transformOrigin: transformOrigin, style: Object.assign(Object.assign({}, anchorOriginPosition), style), className: className }, { children: children })), container);
 });
 Popper.displayName = 'Popper';
 

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

@@ -1,12 +1,15 @@
-import { MutableRefObject } from 'react';
+import { CSSProperties, MutableRefObject } from 'react';
 import { AnchorOrigin, TransformOrigin } from '../Popper.types';
 export type PopperProps = {
-    anchorOrigin?: AnchorOrigin;
     anchorRef: MutableRefObject<HTMLElement | null>;
-    isOpen: boolean;
-    setIsOpen: (isOpen: boolean) => void;
+    anchorOrigin?: AnchorOrigin;
     transformOrigin?: TransformOrigin;
+    className?: string;
+    style?: CSSProperties;
 };
+/** Allows to render content outside of the current DOM parent and specify a reference position
+ * To allow for opening and closing of menus, see MenuList and Dropdown components
+ */
 export declare const Popper: import("react").ForwardRefExoticComponent<PopperProps & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,28 +1,28 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
+import { PopperContent } from '../PopperContent/PopperContent.js';
 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) => {
+// eslint-disable-next-line multiline-comment-style
+/** Allows to render content outside of the current DOM parent and specify a reference position
+ * To allow for opening and closing of menus, see MenuList and Dropdown components
+ */
+const Popper = forwardRef(({ anchorRef, anchorOrigin = 'top-left', transformOrigin = 'top-left', children, style, className, }, ref) => {
     const { containerRef } = usePopper();
     const [anchorPosition, setAnchorPosition] = useState();
     const container = containerRef.current;
+    // Calculates anchor position based on anchorOrigin's relative position to popper's container
+    // and sets up scroll listener to close popper
     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]);
+    }, [anchorRef, containerRef, setAnchorPosition]);
+    /** Position of the anchor's vertex that was selected by anchorOrigin  */
     const anchorOriginPosition = useMemo(() => {
         var _a;
         const anchorRect = (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
@@ -41,9 +41,9 @@ const Popper = forwardRef(({ anchorRef, isOpen, setIsOpen, anchorOrigin = 'top-l
                 return undefined;
         }
     }, [anchorPosition, anchorRef, anchorOrigin]);
-    if (!isOpen || !anchorOriginPosition || container === null)
+    if (!anchorOriginPosition || container === null)
         return null;
-    return createPortal(jsx(PopperContent, Object.assign({ ref: ref, transformOrigin: transformOrigin, style: anchorOriginPosition }, { children: children })), container);
+    return createPortal(jsx(PopperContent, Object.assign({ ref: ref, transformOrigin: transformOrigin, style: Object.assign(Object.assign({}, anchorOriginPosition), style), className: className }, { children: children })), container);
 });
 Popper.displayName = 'Popper';
 

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

@@ -12,7 +12,7 @@ const mapTransformOriginToClassName = {
     '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 }))));
+const PopperContent = React.forwardRef(({ children, transformOrigin, style, className }, ref) => (jsxRuntime.jsx("div", Object.assign({ "data-testid": 'popper-content', ref: ref, className: classNames.classNames('popper-content', mapTransformOriginToClassName[transformOrigin], className), style: style }, { children: children }))));
 PopperContent.displayName = 'PopperContent';
 
 exports.PopperContent = PopperContent;

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

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

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

@@ -8,7 +8,7 @@ const mapTransformOriginToClassName = {
     '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 }))));
+const PopperContent = forwardRef(({ children, transformOrigin, style, className }, ref) => (jsx("div", Object.assign({ "data-testid": 'popper-content', ref: ref, className: classNames('popper-content', mapTransformOriginToClassName[transformOrigin], className), style: style }, { children: children }))));
 PopperContent.displayName = 'PopperContent';
 
 export { PopperContent };

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+/** Return element's top-left position relative to root */
 const getChildPosition = (root, element) => {
     const rootRect = root.getBoundingClientRect();
     const elementRect = element.getBoundingClientRect();

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

@@ -1,2 +1,3 @@
 import { Position } from '../../Popper.types';
+/** Return element's top-left position relative to root */
 export declare const getChildPosition: (root: HTMLElement, element: HTMLElement) => Position;

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

@@ -1,3 +1,4 @@
+/** Return element's top-left position relative to root */
 const getChildPosition = (root, element) => {
     const rootRect = root.getBoundingClientRect();
     const elementRect = element.getBoundingClientRect();

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

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

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

@@ -38,6 +38,7 @@ require('../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../InlineWidget/InlineWidget.cjs');
+require('../MenuList/Dropdown/Dropdown.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
@@ -69,11 +70,11 @@ const ModalComponent = ({ children, handleClose, withBackdrop = true, zIndex, wh
         inputKey: 'Escape',
         onKeyPressed: handleClose,
     });
-    return (jsxRuntime.jsxs(ReactFocusLock__default["default"], Object.assign({ className: 'modal__container', whiteList: whiteList }, { children: [withBackdrop && (jsxRuntime.jsx("div", { "data-testid": 'portal-backdrop', role: 'button', onClick: (e) => {
+    return (jsxRuntime.jsxs(ReactFocusLock__default["default"], Object.assign({ className: 'portal__container', whiteList: whiteList }, { children: [withBackdrop && (jsxRuntime.jsx("div", { "data-testid": 'portal-backdrop', role: 'button', onClick: (e) => {
                     onBackdropClick(e);
                 }, onKeyDown: handleKeyClose, tabIndex: 0, "aria-label": 'Close modal', 
                 // z-index - 2 to ensure that the backdrop is always behind the content
-                style: { zIndex: zIndex ? zIndex - 2 : undefined }, className: 'modal__backdrop' })), jsxRuntime.jsx("div", Object.assign({ style: { zIndex } }, { children: children }))] })));
+                style: { zIndex: zIndex ? zIndex - 2 : undefined }, className: 'portal__backdrop' })), jsxRuntime.jsx("div", Object.assign({ style: { zIndex } }, { children: children }))] })));
 };
 const Portal = ({ children, isShown, handleClose, withBackdrop, zIndex, transitionEvents, elementId = 'dynamic-modal', }) => {
     const modalRootElementRef = useElementById.useElementById(elementId);

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

@@ -34,6 +34,7 @@ import '../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../InlineWidget/InlineWidget.js';
+import '../MenuList/Dropdown/Dropdown.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
@@ -61,11 +62,11 @@ const ModalComponent = ({ children, handleClose, withBackdrop = true, zIndex, wh
         inputKey: 'Escape',
         onKeyPressed: handleClose,
     });
-    return (jsxs(ReactFocusLock, Object.assign({ className: 'modal__container', whiteList: whiteList }, { children: [withBackdrop && (jsx("div", { "data-testid": 'portal-backdrop', role: 'button', onClick: (e) => {
+    return (jsxs(ReactFocusLock, Object.assign({ className: 'portal__container', whiteList: whiteList }, { children: [withBackdrop && (jsx("div", { "data-testid": 'portal-backdrop', role: 'button', onClick: (e) => {
                     onBackdropClick(e);
                 }, onKeyDown: handleKeyClose, tabIndex: 0, "aria-label": 'Close modal', 
                 // z-index - 2 to ensure that the backdrop is always behind the content
-                style: { zIndex: zIndex ? zIndex - 2 : undefined }, className: 'modal__backdrop' })), jsx("div", Object.assign({ style: { zIndex } }, { children: children }))] })));
+                style: { zIndex: zIndex ? zIndex - 2 : undefined }, className: 'portal__backdrop' })), jsx("div", Object.assign({ style: { zIndex } }, { children: children }))] })));
 };
 const Portal = ({ children, isShown, handleClose, withBackdrop, zIndex, transitionEvents, elementId = 'dynamic-modal', }) => {
     const modalRootElementRef = useElementById(elementId);

package/src/lib/components/PoweredByDynamic/PoweredByDynamic.cjs

@@ -15,8 +15,9 @@ const alignClassNames = {
     right: 'powered-by-dynamic--right',
 };
 const PoweredByDynamic = ({ align = 'center', classNameLogo, classNameRoot, classNameText, }) => {
+    var _a;
     const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
-    if ((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.displayDynamicMessaging) === false) {
+    if (((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.displayDynamicMessaging) === false) {
         return null;
     }
     return (jsxRuntime.jsxs("a", Object.assign({ target: '_blank', href: URL, className: classNames.classNames('powered-by-dynamic', alignClassNames[align], classNameRoot), rel: 'noreferrer' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular', variant: 'body_mini', className: classNames.classNames('powered-by-dynamic__text', classNameText) }, { children: "Powered by" })), jsxRuntime.jsx(dynamicLogo.ReactComponent, { className: classNames.classNames('powered-by-dynamic__logo', classNameLogo) })] })));

package/src/lib/components/PoweredByDynamic/PoweredByDynamic.js

@@ -11,8 +11,9 @@ const alignClassNames = {
     right: 'powered-by-dynamic--right',
 };
 const PoweredByDynamic = ({ align = 'center', classNameLogo, classNameRoot, classNameText, }) => {
+    var _a;
     const { projectSettings } = useInternalDynamicContext();
-    if ((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.displayDynamicMessaging) === false) {
+    if (((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.displayDynamicMessaging) === false) {
         return null;
     }
     return (jsxs("a", Object.assign({ target: '_blank', href: URL, className: classNames('powered-by-dynamic', alignClassNames[align], classNameRoot), rel: 'noreferrer' }, { children: [jsx(Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular', variant: 'body_mini', className: classNames('powered-by-dynamic__text', classNameText) }, { children: "Powered by" })), jsx(SvgDynamicLogo, { className: classNames('powered-by-dynamic__logo', classNameLogo) })] })));

package/src/lib/components/ShadowDOM/ShadowDOM.cjs

@@ -5,9 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactDom = require('react-dom');
+var utils$1 = require('@dynamic-labs/utils');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 var index_shadow = require('../../styles/index.shadow.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
+var LegacySafariCssOverrides = require('../LegacySafariCssOverrides/LegacySafariCssOverrides.cjs');
 var utils = require('./utils.cjs');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -47,10 +49,10 @@ const ShadowDOM = ({ mode = 'open', id, className, children, dataTestId, zIndex,
     }, [shadowDOMEnabled, nodeRef, mode]);
     const shouldRenderStyles = Boolean(Object.keys(index_shadow).length);
     if (!shadowDOMEnabled) {
-        return (jsxRuntime.jsxs("div", Object.assign({ "data-testid": dataTestId, ref: nodeRef, id: id, className: classNames.classNames('dynamic-shadow-dom', className), style: { zIndex } }, { children: [children, shouldRenderStyles && jsxRuntime.jsx(ShadowDOMStyle, {}), CssOverridesElement && jsxRuntime.jsx(CssOverridesElement, {})] })));
+        return (jsxRuntime.jsxs("div", Object.assign({ "data-testid": dataTestId, ref: nodeRef, id: id, className: classNames.classNames('dynamic-shadow-dom', className), style: { zIndex } }, { children: [children, shouldRenderStyles && jsxRuntime.jsx(ShadowDOMStyle, {}), utils$1.isLegacySafari() && jsxRuntime.jsx(LegacySafariCssOverrides.LegacySafariCssOverrides, {}), CssOverridesElement && jsxRuntime.jsx(CssOverridesElement, {})] })));
     }
     return (jsxRuntime.jsx(ShadowDOMContext.Provider, Object.assign({ value: { shadowRoot } }, { children: jsxRuntime.jsx("div", Object.assign({ "data-testid": dataTestId, ref: nodeRef, id: id, className: classNames.classNames('dynamic-shadow-dom', className), style: { zIndex } }, { children: shadowRoot &&
-                reactDom.createPortal(jsxRuntime.jsxs("div", Object.assign({ className: 'dynamic-shadow-dom-content' }, { children: [children, shouldRenderStyles && jsxRuntime.jsx(ShadowDOMStyle, {}), CssOverridesElement && jsxRuntime.jsx(CssOverridesElement, {})] })), shadowRoot) })) })));
+                reactDom.createPortal(jsxRuntime.jsxs("div", Object.assign({ className: 'dynamic-shadow-dom-content' }, { children: [children, shouldRenderStyles && jsxRuntime.jsx(ShadowDOMStyle, {}), utils$1.isLegacySafari() && jsxRuntime.jsx(LegacySafariCssOverrides.LegacySafariCssOverrides, {}), CssOverridesElement && jsxRuntime.jsx(CssOverridesElement, {})] })), shadowRoot) })) })));
 };
 
 exports.ShadowDOM = ShadowDOM;

package/src/lib/components/ShadowDOM/ShadowDOM.js

@@ -1,9 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useRef, useState, useMemo, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
+import { isLegacySafari } from '@dynamic-labs/utils';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import css_248z from '../../styles/index.shadow.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
+import { LegacySafariCssOverrides } from '../LegacySafariCssOverrides/LegacySafariCssOverrides.js';
 import { isShadowDOMFlagEnabled } from './utils.js';
 
 const ShadowDOMContext = React__default.createContext({});
@@ -39,10 +41,10 @@ const ShadowDOM = ({ mode = 'open', id, className, children, dataTestId, zIndex,
     }, [shadowDOMEnabled, nodeRef, mode]);
     const shouldRenderStyles = Boolean(Object.keys(css_248z).length);
     if (!shadowDOMEnabled) {
-        return (jsxs("div", Object.assign({ "data-testid": dataTestId, ref: nodeRef, id: id, className: classNames('dynamic-shadow-dom', className), style: { zIndex } }, { children: [children, shouldRenderStyles && jsx(ShadowDOMStyle, {}), CssOverridesElement && jsx(CssOverridesElement, {})] })));
+        return (jsxs("div", Object.assign({ "data-testid": dataTestId, ref: nodeRef, id: id, className: classNames('dynamic-shadow-dom', className), style: { zIndex } }, { children: [children, shouldRenderStyles && jsx(ShadowDOMStyle, {}), isLegacySafari() && jsx(LegacySafariCssOverrides, {}), CssOverridesElement && jsx(CssOverridesElement, {})] })));
     }
     return (jsx(ShadowDOMContext.Provider, Object.assign({ value: { shadowRoot } }, { children: jsx("div", Object.assign({ "data-testid": dataTestId, ref: nodeRef, id: id, className: classNames('dynamic-shadow-dom', className), style: { zIndex } }, { children: shadowRoot &&
-                createPortal(jsxs("div", Object.assign({ className: 'dynamic-shadow-dom-content' }, { children: [children, shouldRenderStyles && jsx(ShadowDOMStyle, {}), CssOverridesElement && jsx(CssOverridesElement, {})] })), shadowRoot) })) })));
+                createPortal(jsxs("div", Object.assign({ className: 'dynamic-shadow-dom-content' }, { children: [children, shouldRenderStyles && jsx(ShadowDOMStyle, {}), isLegacySafari() && jsx(LegacySafariCssOverrides, {}), CssOverridesElement && jsx(CssOverridesElement, {})] })), shadowRoot) })) })));
 };
 
 export { ShadowDOM, ShadowDOMContext, ShadowDOMStyle };

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

@@ -42,6 +42,7 @@ require('../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../InlineWidget/InlineWidget.cjs');
+require('../MenuList/Dropdown/Dropdown.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

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

@@ -38,6 +38,7 @@ import '../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../InlineWidget/InlineWidget.js';
+import '../MenuList/Dropdown/Dropdown.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.cjs

@@ -45,6 +45,7 @@ require('../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../InlineWidget/InlineWidget.cjs');
+require('../MenuList/Dropdown/Dropdown.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.js

@@ -41,6 +41,7 @@ import '../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../InlineWidget/InlineWidget.js';
+import '../MenuList/Dropdown/Dropdown.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

@@ -40,6 +40,7 @@ require('../../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../../InlineWidget/InlineWidget.cjs');
+require('../../MenuList/Dropdown/Dropdown.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

@@ -36,6 +36,7 @@ import '../../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../../InlineWidget/InlineWidget.js';
+import '../../MenuList/Dropdown/Dropdown.js';
 import '../../../context/MockContext/MockContext.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/components/UserAddress/UserAddress.cjs

@@ -40,6 +40,7 @@ require('../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../InlineWidget/InlineWidget.cjs');
+require('../MenuList/Dropdown/Dropdown.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 var usePromise = require('../../utils/hooks/usePromise/usePromise.cjs');

package/src/lib/components/UserAddress/UserAddress.js

@@ -36,6 +36,7 @@ import '../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../InlineWidget/InlineWidget.js';
+import '../MenuList/Dropdown/Dropdown.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import { usePromise } from '../../utils/hooks/usePromise/usePromise.js';

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

@@ -40,6 +40,7 @@ require('../../../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../../../InlineWidget/InlineWidget.cjs');
+require('../../../MenuList/Dropdown/Dropdown.cjs');
 var VerifiedEmailIcon = require('./components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 
 const UserProfileField = ({ name, label, value, }) => {

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

@@ -36,6 +36,7 @@ import '../../../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../../../InlineWidget/InlineWidget.js';
+import '../../../MenuList/Dropdown/Dropdown.js';
 import { VerifiedEmailIcon } from './components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 
 const UserProfileField = ({ name, label, value, }) => {

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

@@ -40,6 +40,7 @@ require('../../../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../../../InlineWidget/InlineWidget.cjs');
+require('../../../MenuList/Dropdown/Dropdown.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: 'medium', variant: 'body_small', className: 'user-profile-section__title' }, { children: title }))), children] })));
 

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

@@ -36,6 +36,7 @@ import '../../../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../../../InlineWidget/InlineWidget.js';
+import '../../../MenuList/Dropdown/Dropdown.js';
 
 const UserProfileSection = ({ title, children, }) => (jsxs("div", Object.assign({ className: 'user-profile-section' }, { children: [title && (jsx(Typography, Object.assign({ as: 'h6', color: 'secondary', weight: 'medium', variant: 'body_small', className: 'user-profile-section__title' }, { children: title }))), children] })));
 

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

@@ -46,6 +46,7 @@ require('../../../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 require('../../../InlineWidget/InlineWidget.cjs');
+require('../../../MenuList/Dropdown/Dropdown.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

@@ -42,6 +42,7 @@ import '../../../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import '../../../InlineWidget/InlineWidget.js';
+import '../../../MenuList/Dropdown/Dropdown.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

@@ -45,3 +45,4 @@ export * from './Modal';
 export * from './ModalCard';
 export * from './InlineWidget';
 export * from './WalletInformationCard';
+export * from './MenuList';