@ringcentral/spring-ui 1.7.0

package/ListItem.js

@@ -0,0 +1,22 @@
+export { H as HoverActions, L as ListItem } from './chunks/ListItem.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+import './chunks/Divider.js';
+import './ListNavigation.js';
+import './chunks/useListNavigation.js';
+import 'tabbable';
+import './VirtualizedList.js';
+import 'react-virtuoso';
+import './chunks/List.js';
+import 'framer-motion';
+import './chunks/Icon.js';
+import './chunks/useMotionSafeTransition.js';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/SlideIn.js';
+import './chunks/getSlideIn.js';
+
+var ListItem = {"sui-list-item-root":"sui-list-item-root","sui-list-item-content":"sui-list-item-content","sui-list-item-text":"sui-list-item-text","sui-list-item-divider":"sui-list-item-divider","sui-list-item-container":"sui-list-item-container","sui-list-item-hover-actions":"sui-list-item-hover-actions","sui-list-item-small":"sui-list-item-small","sui-list-item-large":"sui-list-item-large","sui-list-item-auto":"sui-list-item-auto","sui-focus-visible":"sui-focus-visible","sui-focused":"sui-focused","sui-list-item-hoverable":"sui-list-item-hoverable","sui-focus-visible-within":"sui-focus-visible-within","sui-list-item-clickable":"sui-list-item-clickable","sui-selected":"sui-selected","sui-list-item-highlighted":"sui-list-item-highlighted","sui-dragged":"sui-dragged","sui-active":"sui-active"};
+
+export { ListItem as listItemStyle };

package/ListItemText.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+
+var ListItemText$1 = {"sui-list-item-text-root":"sui-list-item-text-root","sui-list-item-text-primary-text":"sui-list-item-text-primary-text","sui-list-item-text-secondary-text":"sui-list-item-text-secondary-text","sui-list-item-text-primary":"sui-list-item-text-primary","sui-list-item-text-primary-primary-text":"sui-list-item-text-primary-primary-text","sui-list-item-text-secondary":"sui-list-item-text-secondary","sui-list-item-text-secondary-primary-text":"sui-list-item-text-secondary-primary-text"};
+
+const ListItemText = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'ListItemText' });
+    const { classes, className, primary, secondary, primaryText, secondaryText, variant = 'primary', children, ...rest } = props;
+    const cls = useClasses('list-item-text', classes, className);
+    const primaryContent = primary || primaryText || children;
+    const secondaryContent = secondary || secondaryText;
+    return (jsxs("div", { className: cls('root', variant), ...rest, ref: ref, children: [jsx("span", { className: cls('primary-text', `${variant}-primary-text`), children: primaryContent }), secondaryContent && (jsx("span", { className: cls('secondary-text', `${variant}-secondary-text`), children: secondaryContent }))] }));
+});
+ListItemText.displayName = 'SuiListItemText';
+
+export { ListItemText, ListItemText$1 as listItemTextStyle };

package/ListNavigation.js

@@ -0,0 +1,57 @@
+import { u as useListNavigationContext } from './chunks/useListNavigation.js';
+export { L as ListNavigationContext, a as useListNavigation } from './chunks/useListNavigation.js';
+import { useRef } from 'react';
+import { tabbable } from 'tabbable';
+import 'react/jsx-runtime';
+import '@ringcentral/spring-base';
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+const useItemNavigation = () => {
+    const itemRef = useRef(null);
+    const navContextValue = useListNavigationContext();
+    if (navContextValue) {
+        return {
+            keyboardNavHandlers: {
+                onKeyDown: (e) => {
+                    // There some problems if `itemRef.current` is null.
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    const itemEl = itemRef.current;
+                    // All tabbable element in item. No include item self.
+                    const allTabbable = tabbable(itemEl);
+                    const { key, shiftKey, target, currentTarget } = e;
+                    if (key === 'Tab') {
+                        if (shiftKey) {
+                            if (currentTarget === target) {
+                                navContextValue.onShiftTab();
+                            }
+                            else if (allTabbable.at(0) === target) {
+                                // prevent default focus logic
+                                e.preventDefault();
+                                // focus item manual, because tabindex of item is -1
+                                itemEl.focus();
+                            }
+                        }
+                        else {
+                            if (allTabbable.at(-1) === target || !allTabbable.length) {
+                                navContextValue.onTab();
+                            }
+                        }
+                    }
+                },
+                onFocus: (e) => {
+                    navContextValue.updateFocusedItem(e.currentTarget);
+                },
+                onBlur: (e) => {
+                    if (e.relatedTarget &&
+                        !e.currentTarget.contains(e.relatedTarget)) {
+                        navContextValue.updateFocusedItem(null);
+                    }
+                },
+            },
+            itemRef,
+        };
+    }
+    return null;
+};
+
+export { useItemNavigation, useListNavigationContext };

package/Menu.js

@@ -0,0 +1,23 @@
+export { M as Menu, a as MenuContext, u as useMenuContext } from './chunks/Menu.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+import './chunks/useNestedParentMenu.js';
+import './chunks/Popover.js';
+import '@floating-ui/react-dom';
+import 'framer-motion';
+import './chunks/Icon.js';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getGrow.js';
+import './chunks/Modal.js';
+import '@mui/base';
+import './chunks/getFade.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './Popper.js';
+import './chunks/PopperPaper.js';
+
+var Menu = {"sui-menu-paper":"sui-menu-paper"};
+
+export { Menu as menuStyle };

package/MenuActions.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+
+var MenuActions$1 = {"sui-menu-actions-root":"sui-menu-actions-root","sui-menu-actions-group-root":"sui-menu-actions-group-root"};
+
+const MenuActions = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'MenuActions' });
+    const { classes, className, children, ...rest } = props;
+    const cls = useClasses('menu-actions', classes, className);
+    return (jsx("div", { className: cls('root'), ...rest, ref: ref, children: children }));
+});
+MenuActions.displayName = 'SuiMenuActions';
+const MenuActionsGroup = ({ className, ...rest }) => {
+    const cls = useClasses('menu-actions-group', undefined, className);
+    return jsx("div", { className: cls('root'), ...rest });
+};
+MenuActionsGroup.displayName = 'SuiMenuActionsGroup';
+
+export { MenuActions, MenuActionsGroup, MenuActions$1 as menuActionsStyle };

package/MenuDivider.js

@@ -0,0 +1,10 @@
+export { M as MenuDivider } from './chunks/MenuDivider.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+import './chunks/Divider.js';
+
+var MenuDivider = {"sui-menu-divider-root":"sui-menu-divider-root"};
+
+export { MenuDivider as menuDividerStyle };

package/MenuFooter.js

@@ -0,0 +1,18 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { M as MenuDivider } from './chunks/MenuDivider.js';
+import './chunks/Divider.js';
+
+var MenuFooter$1 = {"sui-menu-footer-root":"sui-menu-footer-root"};
+
+const MenuFooter = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'MenuFooter' });
+    const { classes, className, children, divider = true, ...rest } = props;
+    const cls = useClasses('menu-footer', classes, className);
+    return (jsxs(Fragment, { children: [divider && jsx(MenuDivider, {}), jsx("div", { className: cls('root'), ...rest, ref: ref, children: children })] }));
+});
+MenuFooter.displayName = 'SuiMenuFooter';
+
+export { MenuFooter, MenuFooter$1 as menuFooterStyle };

package/MenuHeader.js

@@ -0,0 +1,18 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { M as MenuDivider } from './chunks/MenuDivider.js';
+import './chunks/Divider.js';
+
+var MenuHeader$1 = {"sui-menu-header-root":"sui-menu-header-root","sui-menu-header-title":"sui-menu-header-title","sui-menu-header-start":"sui-menu-header-start","sui-menu-header-end":"sui-menu-header-end"};
+
+const MenuHeader = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'MenuHeader' });
+    const { classes, className, children, start, end, divider = true, ...rest } = props;
+    const cls = useClasses('menu-header', classes, className);
+    return (jsxs(Fragment, { children: [jsxs("div", { className: cls('root'), ...rest, ref: ref, children: [start && jsx("div", { className: cls('start'), children: start }), end && jsx("div", { className: cls('end'), children: end }), typeof children === 'string' ? (jsx("span", { className: cls('title'), title: children, children: children })) : (children)] }), divider && jsx(MenuDivider, {})] }));
+});
+MenuHeader.displayName = 'SuiMenuHeader';
+
+export { MenuHeader, MenuHeader$1 as menuHeaderStyle };

package/MenuItem.js

@@ -0,0 +1,32 @@
+export { A as Action, M as MenuItem, a as MenuItemSelectContext, b as useMenuItem, c as useMenuItemSelect, u as useMenuItemSelectContext, d as useVirtualizedMenuItem } from './chunks/useMenuItemSelect.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-icon';
+import '@ringcentral/spring-theme';
+import './chunks/Icon.js';
+import './chunks/useNestedParentMenu.js';
+import './chunks/useNestedMenuItem.js';
+import './VirtualizedList.js';
+import 'react-virtuoso';
+import './chunks/List.js';
+import './chunks/useListNavigation.js';
+import 'tabbable';
+import './ListNavigation.js';
+import './chunks/Menu.js';
+import './chunks/Popover.js';
+import '@floating-ui/react-dom';
+import 'framer-motion';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getGrow.js';
+import './chunks/Modal.js';
+import '@mui/base';
+import './chunks/getFade.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './Popper.js';
+import './chunks/PopperPaper.js';
+
+var MenuItem = {"sui-menu-item-container":"sui-menu-item-container","sui-menu-item-select-indicator":"sui-menu-item-select-indicator","sui-menu-item-select-dot":"sui-menu-item-select-dot","sui-menu-item-root":"sui-menu-item-root","sui-selected":"sui-selected","sui-disabled":"sui-disabled","sui-spruno":"sui-spruno","sui-list-item-text":"sui-list-item-text","sui-focus-visible":"sui-focus-visible","sui-focused":"sui-focused","sui-active":"sui-active","sui-menu-item-nowrap":"sui-menu-item-nowrap","sui-menu-item-text":"sui-menu-item-text","sui-menu-item-selectable":"sui-menu-item-selectable","sui-menu-item-highlighted":"sui-menu-item-highlighted"};
+
+export { MenuItem as menuItemStyle };

package/MenuItemText.js

@@ -0,0 +1,9 @@
+export { M as MenuItemText } from './chunks/MenuItemText.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+
+var MenuItemText = {"sui-menu-item-text-root":"sui-menu-item-text-root","sui-menu-item-text-primary-text":"sui-menu-item-text-primary-text","sui-menu-item-text-info-text":"sui-menu-item-text-info-text"};
+
+export { MenuItemText as menuItemTextStyle };

package/MenuList.js

@@ -0,0 +1,33 @@
+export { M as MenuList } from './chunks/MenuList.js';
+export { e as MenuListContext, f as useMenuListContext } from './chunks/useMenuItemSelect.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+import './chunks/List.js';
+import './chunks/useListNavigation.js';
+import 'tabbable';
+import './chunks/Menu.js';
+import './chunks/useNestedParentMenu.js';
+import './chunks/Popover.js';
+import '@floating-ui/react-dom';
+import 'framer-motion';
+import './chunks/Icon.js';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getGrow.js';
+import './chunks/Modal.js';
+import '@mui/base';
+import './chunks/getFade.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './Popper.js';
+import './chunks/PopperPaper.js';
+import './VirtualizedList.js';
+import 'react-virtuoso';
+import '@ringcentral/spring-icon';
+import './chunks/useNestedMenuItem.js';
+import './ListNavigation.js';
+
+var MenuList = {"sui-menu-list-root":"sui-menu-list-root"};
+
+export { MenuList as menuListStyle };

package/Modal.js

@@ -0,0 +1,16 @@
+export { I as InnerModal, M as Modal, a as ModalContext, u as useModalContext } from './chunks/Modal.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+import '@mui/base';
+import 'framer-motion';
+import './chunks/Icon.js';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getFade.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+
+var Modal = {"sui-modal-root":"sui-modal-root"};
+
+export { Modal as modalStyles };

package/NestedMenuContext.js

@@ -0,0 +1,23 @@
+import { u as useNestedMenuContext } from './chunks/useNestedParentMenu.js';
+export { N as NestedMenuContext, a as useNestedParentMenu } from './chunks/useNestedParentMenu.js';
+import { useEventCallback } from '@ringcentral/spring-base';
+import { useEffect } from 'react';
+export { u as useNestedMenuItem } from './chunks/useNestedMenuItem.js';
+
+const useNestedChildMenu = (props) => {
+    const { open, closeMenu, id } = props;
+    const context = useNestedMenuContext();
+    const { registOpenedSubMenu } = context ?? {};
+    const closeMenuMemo = useEventCallback(() => closeMenu());
+    useEffect(() => {
+        if (open) {
+            return registOpenedSubMenu?.({
+                anchorId: id,
+                closeSubMenu: closeMenuMemo,
+            });
+        }
+        return undefined;
+    }, [closeMenuMemo, id, open, registOpenedSubMenu]);
+};
+
+export { useNestedChildMenu, useNestedMenuContext };

package/Option.js

@@ -0,0 +1,46 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { u as useMenuItemSelectContext, M as MenuItem } from './chunks/useMenuItemSelect.js';
+import '@ringcentral/spring-base';
+import 'tabbable';
+import './chunks/useListNavigation.js';
+import './chunks/Menu.js';
+import './VirtualizedList.js';
+import '@ringcentral/spring-icon';
+import './chunks/Icon.js';
+import './chunks/useNestedParentMenu.js';
+import './chunks/useNestedMenuItem.js';
+import './ListNavigation.js';
+import './chunks/Popover.js';
+import '@floating-ui/react-dom';
+import 'framer-motion';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getGrow.js';
+import './chunks/Modal.js';
+import '@mui/base';
+import './chunks/getFade.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './Popper.js';
+import './chunks/PopperPaper.js';
+import 'react-virtuoso';
+import './chunks/List.js';
+
+const Option = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Option' });
+    const { children, value, onClick: onClickProp, autoClose: autoCloseProp, ...rest } = props;
+    const selectContextValue = useMenuItemSelectContext();
+    if (selectContextValue === null) {
+        throw Error('SPRING [Option]: Option component must be child of Dropdown/Select/MenuList');
+    }
+    const { handleSelect, getMenuItemProps } = selectContextValue;
+    const autoClose = autoCloseProp ?? selectContextValue.selectMode === 'single';
+    return (jsx(MenuItem, { ...getMenuItemProps(value), ...rest, onClick: (e) => {
+            onClickProp?.(e);
+            handleSelect(value);
+        }, ref: ref, autoClose: autoClose, children: children }));
+});
+Option.displayName = 'SuiOption';
+
+export { Option };

package/Overlap.js

@@ -0,0 +1,9 @@
+export { O as Overlap } from './chunks/Overlap.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+
+var Overlap = {"sui-overlap-root":"sui-overlap-root","sui-overlap-floater":"sui-overlap-floater","sui-overlap-top-left":"sui-overlap-top-left","sui-overlap-top-right":"sui-overlap-top-right","sui-overlap-bottom-left":"sui-overlap-bottom-left","sui-overlap-bottom-right":"sui-overlap-bottom-right","sui-overlap-show-floater-on-hover-only":"sui-overlap-show-floater-on-hover-only"};
+
+export { Overlap as overlapStyle };

package/PageHeader.js

@@ -0,0 +1,56 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+
+var PageHeader$1 = {"sui-page-header-root":"sui-page-header-root","sui-page-header-left-root":"sui-page-header-left-root","sui-page-header-right-root":"sui-page-header-right-root","sui-page-header-center-root":"sui-page-header-center-root","sui-page-header-title-root":"sui-page-header-title-root","sui-page-header-integrated":"sui-page-header-integrated","sui-page-header-detached":"sui-page-header-detached"};
+
+const PageHeader = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'PageHeader' });
+    const { classes, className, children, variant = 'integrated', ...rest } = props;
+    const cls = useClasses('page-header', classes, className);
+    return (jsx("header", { className: cls('root', variant), ...rest, ref: ref, children: children }));
+});
+PageHeader.displayName = 'SuiPageHeader';
+const PageHeaderLeft = forwardRef((inProps, ref) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: 'PageHeaderLeft',
+    });
+    const { className, ...rest } = props;
+    const cls = useClasses('page-header-left', undefined, className);
+    return jsx("div", { className: cls('root'), ...rest, ref: ref });
+});
+PageHeaderLeft.displayName = 'SuiPageHeaderLeft';
+const PageHeaderCenter = forwardRef((inProps, ref) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: 'PageHeaderCenter',
+    });
+    const { className, ...rest } = props;
+    const cls = useClasses('page-header-center', undefined, className);
+    return jsx("div", { className: cls('root'), ...rest, ref: ref });
+});
+PageHeaderCenter.displayName = 'SuiPageHeaderCenter';
+const PageHeaderTitle = forwardRef((inProps, ref) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: 'PageHeaderTitle',
+    });
+    const { className, ...rest } = props;
+    const cls = useClasses('page-header-title', undefined, className);
+    return jsx("div", { className: cls('root'), ...rest, ref: ref });
+});
+PageHeaderTitle.displayName = 'SuiPageHeaderTitle';
+const PageHeaderRight = forwardRef((inProps, ref) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: 'PageHeaderRight',
+    });
+    const { className, ...rest } = props;
+    const cls = useClasses('page-header-right', undefined, className);
+    return jsx("div", { className: cls('root'), ...rest, ref: ref });
+});
+PageHeaderRight.displayName = 'SuiPageHeaderRight';
+
+export { PageHeader, PageHeaderCenter, PageHeaderLeft, PageHeaderRight, PageHeaderTitle, PageHeader$1 as pageHeaderStyle };

package/PickerTextField.js

@@ -0,0 +1,33 @@
+export { P as PickerTextField } from './chunks/PickerTextField.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import './chunks/Icon.js';
+import '@ringcentral/spring-theme';
+import './chunks/Popover.js';
+import '@floating-ui/react-dom';
+import 'framer-motion';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getGrow.js';
+import './chunks/Modal.js';
+import '@mui/base';
+import './chunks/getFade.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './Popper.js';
+import './chunks/PopperPaper.js';
+import './chunks/TextField.js';
+import '@ringcentral/spring-icon';
+import './chunks/ShowHideEye.js';
+import './chunks/useMotionSafeTransition.js';
+import './chunks/useHelperTextId.js';
+import 'clsx';
+import './chunks/IconButtonLabel.js';
+import './chunks/Squircle.js';
+import './chunks/withTooltip.js';
+import './chunks/Tooltip.js';
+import './chunks/VisuallyHidden.js';
+
+var PickerTextField = {"sui-picker-text-field-form-field-content":"sui-picker-text-field-form-field-content","sui-picker-text-field-input":"sui-picker-text-field-input","sui-picker-text-field-has-value":"sui-picker-text-field-has-value","sui-picker-text-field-end-icon":"sui-picker-text-field-end-icon","sui-focused":"sui-focused"};
+
+export { PickerTextField as pickerTextFieldStyle };

package/Popover.js

@@ -0,0 +1,21 @@
+export { P as Popover } from './chunks/Popover.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@floating-ui/react-dom';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+import 'framer-motion';
+import './chunks/Icon.js';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getGrow.js';
+import './chunks/Modal.js';
+import '@mui/base';
+import './chunks/getFade.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './Popper.js';
+import './chunks/PopperPaper.js';
+
+var Popover = {"sui-popover-popper":"sui-popover-popper","sui-popover-paper":"sui-popover-paper","sui-popover-widget":"sui-popover-widget","sui-popover-bordered":"sui-popover-bordered","sui-popover-shadow":"sui-popover-shadow"};
+
+export { Popover as popoverStyle };

package/Popper.js

@@ -0,0 +1,127 @@
+import { jsx } from 'react/jsx-runtime';
+import { flip, shift, limitShift, arrow, offset, size, useFloating, autoUpdate } from '@floating-ui/react-dom';
+import { useWindowContext, useForkRef } from '@ringcentral/spring-base';
+import { useThemeProps, useTheme } from '@ringcentral/spring-theme';
+import { forwardRef, useRef, useImperativeHandle, useLayoutEffect } from 'react';
+import { u as useModalContext } from './chunks/Modal.js';
+import { Portal } from '@mui/base';
+import 'framer-motion';
+import './chunks/Icon.js';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getFade.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+
+const getArrowSide = (placement) => ({
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right',
+}[placement.split('-')[0]]);
+const Popper = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Popper' });
+    const { children: childrenProp, middlewares: middlewaresProp = [], placement: placementProp, anchorEl, arrowHeight = 0, offset: offset$1 = 0, padding = 0, arrowPadding = 0, style, actions, autoUpdate: autoUpdate$1 = true, whileElementsMounted, matchAnchorWidth, container: containerProp, disablePortal, ...rest } = props;
+    const { externalWindow, document } = useWindowContext();
+    const container = containerProp ?? document?.body;
+    const { scopeProps } = useTheme();
+    const modalContext = useModalContext();
+    const finalDisablePortal = disablePortal ?? (modalContext?.ariaHideEnabled ? true : false);
+    const arrowRef = useRef(null);
+    const presetMiddlewares = [
+        flip({ padding }),
+        shift({
+            limiter: limitShift(),
+            padding,
+        }),
+        arrow({
+            element: arrowRef,
+            padding: arrowPadding,
+        }),
+        offset(offset$1 + arrowHeight),
+    ];
+    if (matchAnchorWidth) {
+        presetMiddlewares.push(size({
+            apply({ rects, elements, }) {
+                Object.assign(elements.floating.style, {
+                    width: `${rects.reference.width}px`,
+                });
+            },
+        }));
+    }
+    const middlewares = typeof middlewaresProp === 'function'
+        ? middlewaresProp(presetMiddlewares)
+        : [...presetMiddlewares, ...middlewaresProp];
+    const { x, y, refs: { setReference, setFloating }, strategy, placement, update, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, } = useFloating({
+        placement: placementProp,
+        middleware: middlewares,
+        whileElementsMounted: (reference, floating, update) => {
+            const dispose = whileElementsMounted?.(reference, floating, update);
+            const disposeAutoUpdate = (() => {
+                if (autoUpdate$1 === false) {
+                    return;
+                }
+                if (autoUpdate$1 === true) {
+                    return autoUpdate(reference, floating, update, {
+                        ancestorResize: true,
+                        ancestorScroll: true,
+                        animationFrame: false,
+                        elementResize: Boolean(matchAnchorWidth),
+                    });
+                }
+                return autoUpdate(reference, floating, update, autoUpdate$1);
+            })();
+            return () => {
+                disposeAutoUpdate?.();
+                dispose?.();
+            };
+        },
+    });
+    useImperativeHandle(actions, () => ({ update }), [update]);
+    const handleRootRef = useForkRef(ref, setFloating);
+    useLayoutEffect(() => {
+        if (anchorEl) {
+            const anchor = typeof anchorEl === 'function' ? anchorEl() : anchorEl;
+            setReference(anchor);
+        }
+        else {
+            setReference(null);
+        }
+    }, [setReference, anchorEl]);
+    const arrowSide = getArrowSide(placement);
+    const children = (() => {
+        if (typeof childrenProp !== 'function')
+            return childrenProp;
+        if (!arrowHeight)
+            childrenProp({ placement, arrowRef, arrowStyle: {} });
+        const squareSideLength = Math.round(((arrowHeight * 2) ** 2 / 2) ** (1 / 2));
+        return childrenProp({
+            placement,
+            arrowRef,
+            arrowStyle: {
+                width: squareSideLength,
+                height: squareSideLength,
+                top: arrowY,
+                left: arrowX,
+                [arrowSide]: -squareSideLength / 2,
+            },
+        });
+    })();
+    const dpr = externalWindow?.devicePixelRatio ?? 1;
+    const fixedX = Math.round(Number(x ?? 0) * dpr) / dpr;
+    const fixedY = Math.round(Number(y ?? 0) * dpr) / dpr;
+    return (jsx(Portal, { container: container, disablePortal: finalDisablePortal, children: jsx("div", { ...scopeProps, style: { display: 'contents' }, children: jsx("div", { ...rest, "data-sui-popper-placement": placement, ref: handleRootRef, style: {
+                    /* prevent arrow overflow when content too small */
+                    ...(arrowHeight
+                        ? { minWidth: (arrowHeight + arrowPadding) * 2 }
+                        : undefined),
+                    ...style,
+                    position: strategy,
+                    top: '0',
+                    left: '0',
+                    transform: `translate3d(${fixedX}px,${fixedY}px,0)`,
+                    width: 'max-content',
+                }, children: children }) }) }));
+});
+Popper.displayName = 'SuiPopper';
+
+export { Popper };

package/PopperPaper.js

@@ -0,0 +1,10 @@
+export { P as PopperPaper } from './chunks/PopperPaper.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'framer-motion';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+
+var PopperPaper = {"sui-popper-paper-root":"sui-popper-paper-root","sui-popper-paper-arrow":"sui-popper-paper-arrow","sui-popper":"sui-popper","sui-popper-paper-content":"sui-popper-paper-content"};
+
+export { PopperPaper as popperPaperStyle };

package/Portal.js

@@ -0,0 +1 @@
+export { Portal } from '@mui/base';