@sproutsocial/seeds-react-menu 1.0.0 → 1.1.1

package/dist/index.js

@@ -106,7 +106,10 @@ __export(index_exports, {
   ActionMenu: () => ActionMenu,
   Autocomplete: () => Autocomplete,
   AutocompleteInput: () => AutocompleteInput,
+  AutocompleteTokenInput: () => AutocompleteTokenInput,
+  CustomPopoutContent: () => CustomPopoutContent,
   INPUT_TYPES: () => INPUT_TYPES,
+  ListboxToggleButton: () => ListboxToggleButton,
   MenuContent: () => MenuContent,
   MenuContentContext: () => MenuContentContext,
   MenuContentProvider: () => MenuContentProvider,
@@ -121,7 +124,9 @@ __export(index_exports, {
   MenuItemRow: () => MenuItemRow,
   MenuItemText: () => MenuItemText,
   MenuLabel: () => MenuLabel,
+  MenuPopout: () => MenuPopout,
   MenuRoot: () => MenuRoot,
+  MenuRootNoPopout: () => MenuRootNoPopout,
   MenuSearchInput: () => MenuSearchInput,
   MenuSearchTokenInput: () => MenuSearchTokenInput,
   MenuToggleButton: () => MenuToggleButton,
@@ -136,6 +141,7 @@ __export(index_exports, {
   NestedMenuItem: () => NestedMenuItem,
   NestedMenuProvider: () => NestedMenuProvider,
   SingleSelectMenu: () => SingleSelectMenu,
+  StyledListboxToggleButton: () => StyledListboxToggleButton,
   StyledMenuGroup: () => StyledMenuGroup,
   StyledMenuGroupUl: () => StyledMenuGroupUl,
   StyledMenuItem: () => StyledMenuItem,
@@ -2173,14 +2179,14 @@ var MenuHeader = ({
 
 // src/MenuContent/styles.tsx
 var import_styled_components5 = __toESM(require("styled-components"));
-var import_react4 = require("motion/react");
-var StyledMenuContent = (0, import_styled_components5.default)(import_react4.motion.ul)`
+var StyledMenuContent = import_styled_components5.default.ul`
   margin: 0;
   padding: 0;
+  outline: none;
 `;
 
 // src/hooks/useMenuChildren.tsx
-var import_react5 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var walkAllChildren = (children, callback) => {
   const walk = (element, parents2) => {
@@ -2188,12 +2194,12 @@ var walkAllChildren = (children, callback) => {
     callback(element, parents2);
     const newParents = [...parents2, element];
     const children2 = element.props?.children;
-    import_react5.default.Children.toArray(children2).forEach((child) => {
+    import_react4.default.Children.toArray(children2).forEach((child) => {
       walk(child, newParents);
     });
   };
   const parents = [];
-  import_react5.default.Children.toArray(children).forEach((child) => {
+  import_react4.default.Children.toArray(children).forEach((child) => {
     walk(child, parents);
   });
 };
@@ -2328,7 +2334,7 @@ var useMenuChildren = ({
   menuItems,
   MenuItemComponent
 }) => {
-  const { allMenuItems, menuItemsMap, children } = (0, import_react5.useMemo)(() => {
+  const { allMenuItems, menuItemsMap, children } = (0, import_react4.useMemo)(() => {
     let children2 = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {});
     const menuItemsMap2 = {};
     const allMenuItems2 = [];
@@ -2351,7 +2357,7 @@ var useMenuChildren = ({
 };
 
 // src/MenuContent/MenuContent.tsx
-var import_react6 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var MenuContent = ({
   id = "menu_content",
@@ -2368,7 +2374,7 @@ var MenuContent = ({
   if (!children) {
     return null;
   }
-  const handleKeyDown = (0, import_react6.useCallback)(
+  const handleKeyDown = (0, import_react5.useCallback)(
     (e) => {
       toggleButtonProps?.["onKeyDown"]?.(e);
       onKeyDown?.(e);
@@ -2398,7 +2404,7 @@ var MenuContent = ({
 MenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 
 // src/MenuFooter/MenuFooter.tsx
-var import_react7 = require("react");
+var import_react6 = require("react");
 
 // src/MenuFooter/styles.tsx
 var import_styled_components6 = __toESM(require("styled-components"));
@@ -2415,18 +2421,18 @@ var MenuFooter = ({ children, ...rest }) => {
 };
 
 // src/MenuGroup/MenuGroup.tsx
-var import_react10 = require("react");
+var import_react9 = require("react");
 
 // src/MenuGroup/styles.tsx
 var import_styled_components9 = __toESM(require("styled-components"));
 
 // ../seeds-react-text/dist/esm/index.js
-var import_react8 = require("react");
+var import_react7 = require("react");
 var import_styled_components7 = __toESM(require("styled-components"));
 var import_styled_components8 = __toESM(require("styled-components"));
 var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var import_react9 = require("react");
+var import_react8 = require("react");
 var Container = import_styled_components8.default.span`
   margin: 0;
   padding-left: 0;
@@ -2592,15 +2598,81 @@ var MenuGroup = ({
 MenuGroup.__MENU_PRIMITIVE_TYPE = "MenuGroup";
 
 // src/MenuRoot/MenuRoot.tsx
-var import_react11 = require("react");
+var import_react10 = require("react");
 var import_styled_components10 = __toESM(require("styled-components"));
 var import_seeds_react_popout = require("@sproutsocial/seeds-react-popout");
+
+// ../../seeds-design-tokens/seeds-motion/dist/seeds-motion-unitless.esm.js
+var MOTION_DURATION_FAST = 0.15;
+
+// src/MenuRoot/MenuRoot.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var CustomPopoutContent = (0, import_styled_components10.default)(import_seeds_react_popout.Popout.Content)`
   padding: 0;
   margin-left: 0;
   margin-right: 0;
 `;
+var menuAnimationConfig = {
+  initial: {
+    scale: 0,
+    opacity: 0,
+    originX: 0,
+    originY: 0
+  },
+  animate: {
+    opacity: 1,
+    scale: 1,
+    originX: 0,
+    originY: 0,
+    transition: {
+      type: "tween",
+      duration: MOTION_DURATION_FAST,
+      ease: "circOut"
+    }
+  },
+  exit: {
+    opacity: 0,
+    scale: 1,
+    transition: {
+      type: "tween",
+      duration: MOTION_DURATION_FAST,
+      ease: "circIn"
+    }
+  }
+};
+var MenuPopout = ({
+  content,
+  width: width2 = "300px",
+  isOpen,
+  openMenu,
+  closeMenu,
+  focusLockProps,
+  ...popoutProps
+}) => {
+  const setIsOpen = (0, import_react10.useCallback)(
+    (newIsOpen) => {
+      newIsOpen ? openMenu?.() : closeMenu?.();
+    },
+    [openMenu, closeMenu]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_seeds_react_popout.Popout,
+    {
+      isOpen: !!isOpen,
+      setIsOpen,
+      content: (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CustomPopoutContent, { width: popoutProps.fullWidth ? "initial" : width2, children: typeof content === "function" ? content(props) : content }),
+      focusLockProps: {
+        // correct jerking motion when scrolling while the Popout is open
+        // returnFocus: false,
+        crossFrame: false,
+        ...focusLockProps
+      },
+      disableWrapperAria: true,
+      animationConfig: menuAnimationConfig,
+      ...popoutProps
+    }
+  );
+};
 var MenuRoot = ({
   children,
   menuToggleElement,
@@ -2616,13 +2688,13 @@ var MenuRoot = ({
     hiddenItemsCount = 0,
     items
   } = contextProps;
-  const setIsOpen = (0, import_react11.useCallback)(
+  const setIsOpen = (0, import_react10.useCallback)(
     (newIsOpen) => {
       newIsOpen ? openMenu?.() : closeMenu?.();
     },
     [openMenu, closeMenu]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!inputValue) return;
     if (items && hiddenItemsCount >= items.length && isOpen) {
       closeMenu?.();
@@ -2630,28 +2702,29 @@ var MenuRoot = ({
   }, [hiddenItemsCount, items?.length, isOpen, inputValue]);
   const menuContext = useMenu(contextProps);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_seeds_react_popout.Popout,
+    MenuPopout,
     {
-      menuPopout: true,
       placement,
       isOpen: !!isOpen,
-      setIsOpen,
-      content: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuContentProvider, { menuContext, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CustomPopoutContent, { width: width2, children }) }),
-      focusLockProps: {
-        // correct jerking motion when scrolling while the Popout is open
-        // returnFocus: false,
-        crossFrame: false,
-        ...focusLockProps
-      },
-      disableWrapperAria: true,
+      openMenu,
+      closeMenu,
+      content: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuContentProvider, { menuContext, children }),
       ...popoutProps,
       children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuToggleProvider, { menuContext: { ...menuContext, ...toggleProps }, children: menuToggleElement })
     }
   );
 };
+var MenuRootNoPopout = ({
+  children,
+  menuToggleElement,
+  ...contextProps
+}) => {
+  const menuContext = useMenu(contextProps);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuContentProvider, { menuContext, children });
+};
 
 // src/MenuLabel.tsx
-var import_react12 = require("react");
+var import_react11 = require("react");
 var import_seeds_react_label = require("@sproutsocial/seeds-react-label");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var MenuLabel = ({ children, ...rest }) => {
@@ -2660,7 +2733,7 @@ var MenuLabel = ({ children, ...rest }) => {
 };
 
 // src/MenuToggleButton/MenuToggleButton.tsx
-var import_react13 = require("react");
+var import_react12 = require("react");
 var import_seeds_react_button = require("@sproutsocial/seeds-react-button");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var MenuToggleButton = ({
@@ -2686,11 +2759,11 @@ var MenuToggleButton = ({
 };
 
 // src/MenuSearchInput/MenuSearchInput.tsx
-var import_react15 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_seeds_react_input = require("@sproutsocial/seeds-react-input");
 
 // src/hooks/useItemFiltering.tsx
-var import_react14 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 
 // src/utils/downshiftDefaults.ts
 var itemToString = (item) => {
@@ -2710,8 +2783,8 @@ var useItemFiltering = ({
   getShouldFilter = defaultGetShouldFilter,
   setHiddenItemsMap: setHiddenItemsMapProp
 }) => {
-  const [hiddenItemsMap, setHiddenItemsMap] = import_react14.default.useState({});
-  const updateFilteredItems = import_react14.default.useCallback(
+  const [hiddenItemsMap, setHiddenItemsMap] = import_react13.default.useState({});
+  const updateFilteredItems = import_react13.default.useCallback(
     ({ inputValue }) => {
       const newHiddenItems = getShouldFilter({ inputValue }) ? allMenuItems.reduce((map, item) => {
         const isItemVisible = getIsItemVisible(item, inputValue);
@@ -2748,11 +2821,11 @@ var MenuSearchInput = ({
     getIsItemVisible,
     setHiddenItemsMap
   });
-  import_react15.default.useEffect(() => {
+  import_react14.default.useEffect(() => {
     updateFilteredItems({ inputValue: restInputProps.value || "" });
   }, [isOpen, restInputProps.value]);
   const toggleButtonProps = getToggleButtonProps?.() || {};
-  const handleKeyDown = import_react15.default.useCallback(
+  const handleKeyDown = import_react14.default.useCallback(
     (e) => {
       if (e.key === " ") return;
       toggleButtonProps.onKeyDown?.(e);
@@ -2779,7 +2852,7 @@ var MenuSearchInput = ({
 };
 
 // src/MenuTokenInput.tsx
-var import_react16 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_styled_components11 = __toESM(require("styled-components"));
 var import_seeds_react_token_input = require("@sproutsocial/seeds-react-token-input");
 var import_jsx_runtime14 = require("react/jsx-runtime");
@@ -2812,7 +2885,7 @@ var MenuTokenInput = ({
     removeSelectedItem,
     setActiveIndex,
     selectedItems = []
-  } = import_react16.default.useContext(MenuContext);
+  } = import_react15.default.useContext(MenuContext);
   const removeToken = (tokenId) => {
     const tokenToRemove = selectedItems?.find((item) => item.id === tokenId);
     tokenToRemove && removeSelectedItem?.(tokenToRemove);
@@ -2866,7 +2939,7 @@ var MenuTokenInput = ({
 };
 
 // src/MenuSearchTokenInput/MenuSearchTokenInput.tsx
-var import_react17 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var MenuSearchTokenInput = ({
   getIsItemVisible,
@@ -2890,10 +2963,10 @@ var MenuSearchTokenInput = ({
     setHiddenItemsMap
   });
   const controlledValue = value || inputPropsValue !== void 0 ? `${inputPropsValue}` : void 0;
-  const [internalValue, setInternalValue] = import_react17.default.useState(
+  const [internalValue, setInternalValue] = import_react16.default.useState(
     controlledValue || ""
   );
-  const updateFilteredState = import_react17.default.useCallback(
+  const updateFilteredState = import_react16.default.useCallback(
     // defaults to an empty string if no value is passed
     (value2 = "") => {
       setInternalValue(value2);
@@ -2901,14 +2974,14 @@ var MenuSearchTokenInput = ({
     },
     [updateFilteredItems]
   );
-  import_react17.default.useEffect(() => {
+  import_react16.default.useEffect(() => {
     updateFilteredState(controlledValue);
   }, [controlledValue]);
-  import_react17.default.useEffect(() => {
+  import_react16.default.useEffect(() => {
     updateFilteredState(controlledValue);
   }, [isOpen]);
   const toggleButtonProps = getToggleButtonProps?.() || {};
-  const handleKeyDown = import_react17.default.useCallback(
+  const handleKeyDown = import_react16.default.useCallback(
     (e) => {
       if (e.key === " ") return;
       toggleButtonProps.onKeyDown?.(e);
@@ -2936,7 +3009,7 @@ var MenuSearchTokenInput = ({
 };
 
 // src/SubmenuItem/SubmenuItem.tsx
-var import_react18 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
 var import_seeds_react_box3 = require("@sproutsocial/seeds-react-box");
 var import_seeds_react_utilities = require("@sproutsocial/seeds-react-utilities");
@@ -2998,17 +3071,17 @@ var SubmenuItem = ({
     itemsMap,
     isOpen: parentIsOpen
   } = useMenuContentContext();
-  const [submenuIsFocused, setSubmenuIsFocused] = import_react18.default.useState(false);
-  const [submenuIsOpen, setSubmenuIsOpen] = import_react18.default.useState(false);
-  const [submenuIsActive, setSubmenuIsActive] = import_react18.default.useState(false);
-  const submenuItemRef = import_react18.default.useRef(null);
-  const submenuRef = import_react18.default.useRef(null);
+  const [submenuIsFocused, setSubmenuIsFocused] = import_react17.default.useState(false);
+  const [submenuIsOpen, setSubmenuIsOpen] = import_react17.default.useState(false);
+  const [submenuIsActive, setSubmenuIsActive] = import_react17.default.useState(false);
+  const submenuItemRef = import_react17.default.useRef(null);
+  const submenuRef = import_react17.default.useRef(null);
   const menuContent = menuItems ? getChildrenFromMenuItems({ menuItems, MenuItemComponent }) : menuChildren;
   const item = itemsMap[id] || {
     index: 0,
     id
   };
-  import_react18.default.useEffect(() => {
+  import_react17.default.useEffect(() => {
     if (highlightedIndex === item.index) {
       !submenuIsOpen && setSubmenuIsOpen(true);
     } else if (submenuIsOpen && highlightedIndex !== -1) {
@@ -3016,7 +3089,7 @@ var SubmenuItem = ({
       setSubmenuIsActive(false);
     }
   }, [highlightedIndex, item.index, submenuIsOpen, setSubmenuIsOpen]);
-  const onSubmenuStateChange = import_react18.default.useCallback(
+  const onSubmenuStateChange = import_react17.default.useCallback(
     (state) => {
       if (state.isOpen !== void 0) {
         setSubmenuIsOpen(state.isOpen);
@@ -3060,7 +3133,7 @@ var SubmenuItem = ({
       onMenuItemClick();
     }
   };
-  import_react18.default.useEffect(() => {
+  import_react17.default.useEffect(() => {
     if (document && document.body) {
       document.body.addEventListener("click", onBodyClick, {
         capture: true
@@ -3126,12 +3199,49 @@ var SubmenuItem = ({
 };
 SubmenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
+// src/ListboxToggleButton.tsx
+var import_styled_components12 = __toESM(require("styled-components"));
+var import_seeds_react_icon3 = require("@sproutsocial/seeds-react-icon");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var StyledListboxToggleButton = (0, import_styled_components12.default)(
+  MenuToggleButton
+)`
+  ${(props) => props.invalid && import_styled_components12.css`
+      border-color: ${(props2) => props2.theme.colors.form.border.error};
+    `}
+`;
+var StyledChevron = import_styled_components12.default.div`
+  margin-left: ${({ theme: theme2 }) => theme2.space[300]};
+  ${({ $isOpen }) => $isOpen && `
+		transform: rotate(-180deg);
+	`}
+  transition: transform 0.15s;
+
+  ${({ invalid }) => invalid && import_styled_components12.css`
+      color: ${(props) => props.theme.colors.icon.error};
+    `}
+`;
+var StyledInnerButton = import_styled_components12.default.div`
+  display: flex;
+  justify-content: space-between;
+`;
+var ListboxToggleButton = ({
+  children,
+  ...buttonProps
+}) => {
+  const { isOpen } = useMenuToggleContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StyledListboxToggleButton, { appearance: "secondary", ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(StyledInnerButton, { children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StyledChevron, { $isOpen: isOpen, invalid: buttonProps.invalid, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_seeds_react_icon3.Icon, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true }) })
+  ] }) });
+};
+
 // src/ActionMenu/ActionMenu.tsx
-var import_react20 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var import_downshift3 = require("downshift");
 
 // src/hooks/useDownshiftDefaults.tsx
-var import_react19 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 
 // src/reducers/useComboboxStateReducer.tsx
 var import_downshift = require("downshift");
@@ -3255,12 +3365,12 @@ var useDownshiftDefaults = ({
   isMulti = false,
   multiSelectProps = {}
 } = {}) => {
-  const [hiddenItemsMap, setHiddenItemsMap] = import_react19.default.useState({});
-  const hiddenItemsCount = import_react19.default.useMemo(
+  const [hiddenItemsMap, setHiddenItemsMap] = import_react18.default.useState({});
+  const hiddenItemsCount = import_react18.default.useMemo(
     () => Object.keys(hiddenItemsMap).filter(Boolean).length,
     [hiddenItemsMap]
   );
-  const isItemDisabled = import_react19.default.useCallback(
+  const isItemDisabled = import_react18.default.useCallback(
     (item) => Boolean(item.disabled || hiddenItemsMap[item.id]),
     [hiddenItemsMap]
   );
@@ -3291,7 +3401,7 @@ var useDownshiftDefaults = ({
 };
 
 // src/ActionMenu/ActionMenu.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var handleStateChange = (changes, currentSelectedItem) => {
   if (!(changes.type === import_downshift3.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter || changes.type === import_downshift3.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton)) {
     return;
@@ -3328,6 +3438,7 @@ var ActionMenu = ({
   menuItems,
   MenuItemComponent,
   stateReducer: externalStateReducer,
+  MenuRootComponent = MenuRoot,
   ...useSelectProps
 }) => {
   const { allMenuItems, menuItemsMap, children } = useMenuChildren({
@@ -3338,7 +3449,7 @@ var ActionMenu = ({
   const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
     isCombobox: false
   });
-  const [currentSelectedItem, setCurrentSelectedItem] = import_react20.default.useState(null);
+  const [currentSelectedItem, setCurrentSelectedItem] = import_react19.default.useState(null);
   const { isOpen, ...useSelectReturnProps } = (0, import_downshift3.useSelect)({
     ...defaultDownshiftProps.select,
     items: allMenuItems,
@@ -3350,11 +3461,11 @@ var ActionMenu = ({
     ),
     ...useSelectProps
   });
-  (0, import_react20.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     setCurrentSelectedItem(useSelectReturnProps.selectedItem);
   }, [useSelectReturnProps.selectedItem]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    MenuRoot,
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    MenuRootComponent,
     {
       ...{
         isListbox: false,
@@ -3372,14 +3483,15 @@ var ActionMenu = ({
 };
 
 // src/SingleSelectMenu/SingleSelectMenu.tsx
-var import_react21 = require("react");
+var import_react20 = require("react");
 var import_downshift4 = require("downshift");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var SingleSelectMenu = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
   menuItems,
   MenuItemComponent,
+  MenuRootComponent = MenuRoot,
   ...useSelectProps
 }) => {
   const { allMenuItems, menuItemsMap, children } = useMenuChildren({
@@ -3400,8 +3512,8 @@ var SingleSelectMenu = ({
     ),
     ...useSelectProps
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    MenuRoot,
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    MenuRootComponent,
     {
       ...{
         isListbox: true,
@@ -3419,15 +3531,16 @@ var SingleSelectMenu = ({
 };
 
 // src/MultiSelectMenu/MultiSelectMenu.tsx
-var import_react22 = require("react");
+var import_react21 = require("react");
 var import_downshift5 = require("downshift");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var MultiSelectMenu = ({
   children: childrenProp,
   menuItems,
   MenuItemComponent,
   onSelectedItemChange: externalOnSelectedItemChange,
   stateReducer: externalStateReducer,
+  MenuRootComponent = MenuRoot,
   getA11yMultiStatusMessage,
   onMultiSelectStateChange,
   multiSelectStateReducer,
@@ -3493,8 +3606,8 @@ var MultiSelectMenu = ({
     },
     ...useSelectProps
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    MenuRoot,
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    MenuRootComponent,
     {
       ...{
         isListbox: true,
@@ -3521,16 +3634,17 @@ var MultiSelectMenu = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-var import_react25 = require("react");
+var import_react24 = require("react");
 
 // src/Autocomplete/SingleAutocomplete.tsx
-var import_react23 = require("react");
+var import_react22 = require("react");
 var import_downshift6 = require("downshift");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var SingleAutocomplete = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
   menuItems,
+  MenuRootComponent = MenuRoot,
   MenuItemComponent,
   itemToString: itemToString2 = itemToString,
   getIsItemVisible,
@@ -3559,8 +3673,8 @@ var SingleAutocomplete = ({
     ),
     ...useComboboxProps
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    MenuRoot,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    MenuRootComponent,
     {
       ...{
         isListbox: true,
@@ -3581,14 +3695,15 @@ var SingleAutocomplete = ({
 };
 
 // src/Autocomplete/MultiAutocomplete.tsx
-var import_react24 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 var import_downshift7 = require("downshift");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var MultiAutocomplete = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
   menuItems,
   MenuItemComponent,
+  MenuRootComponent = MenuRoot,
   itemToString: itemToString2 = itemToString,
   itemToKey: itemToKey3 = itemToKey,
   getIsItemVisible = getDefaultGetIsItemVisible(itemToString2),
@@ -3606,15 +3721,15 @@ var MultiAutocomplete = ({
     menuItems,
     MenuItemComponent
   });
-  const [selectedItems, setSelectedItems] = import_react24.default.useState(initialSelectedItems);
-  const [selectedItemIds, setSelectedItemIds] = import_react24.default.useState(getSelectedItemIds(initialSelectedItems));
-  const getIsItemVisibleMulti = import_react24.default.useCallback(
+  const [selectedItems, setSelectedItems] = import_react23.default.useState(initialSelectedItems);
+  const [selectedItemIds, setSelectedItemIds] = import_react23.default.useState(getSelectedItemIds(initialSelectedItems));
+  const getIsItemVisibleMulti = import_react23.default.useCallback(
     (item, inputValue) => {
       return (showSelectedItemsInDropdown || !selectedItemIds[item.id]) && getIsItemVisible(item, inputValue);
     },
     [selectedItemIds, showSelectedItemsInDropdown, getIsItemVisible]
   );
-  const getShouldFilterMulti = import_react24.default.useCallback(
+  const getShouldFilterMulti = import_react23.default.useCallback(
     (args) => {
       return !showSelectedItemsInDropdown && Object.keys(selectedItemIds).length > 0 || defaultGetShouldFilter(args);
     },
@@ -3638,7 +3753,7 @@ var MultiAutocomplete = ({
     getShouldFilter: getShouldFilterMulti,
     setHiddenItemsMap
   });
-  import_react24.default.useEffect(() => {
+  import_react23.default.useEffect(() => {
     updateFilteredItems({ inputValue: "" });
   }, [selectedItemIds]);
   const useMultipleSelectionReturnProps = (0, import_downshift7.useMultipleSelection)({
@@ -3687,8 +3802,8 @@ var MultiAutocomplete = ({
     },
     ...useComboboxProps
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    MenuRoot,
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    MenuRootComponent,
     {
       ...{
         isListbox: true,
@@ -3716,21 +3831,21 @@ var MultiAutocomplete = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var Autocomplete = ({
   multiSelect,
   ...rest
 }) => {
   if (multiSelect) {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MultiAutocomplete, { ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MultiAutocomplete, { ...rest });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SingleAutocomplete, { ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SingleAutocomplete, { ...rest });
 };
 
 // src/Autocomplete/AutocompleteInput.tsx
-var import_react26 = require("react");
+var import_react25 = require("react");
 var import_seeds_react_input2 = require("@sproutsocial/seeds-react-input");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var AutocompleteInput = ({
   onKeyDown,
   onChange,
@@ -3741,7 +3856,7 @@ var AutocompleteInput = ({
   ...rest
 }) => {
   const { getInputComponentProps, inputValue, ref, ariaProps } = useMenuToggleContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_seeds_react_input2.Input,
     {
       id: "autocomplete_input",
@@ -3765,59 +3880,54 @@ var AutocompleteInput = ({
   );
 };
 
-// src/NestedMenu/NestedMenu.tsx
-var import_react29 = require("react");
-
-// src/NestedMenu/NestedMenuContext.tsx
-var import_react27 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var defaultNestedMenuContext = {
-  selectedMenuPath: [],
-  setSelectedMenuId: () => {
-  },
-  setSelectedMenuPath: () => {
-  },
-  goBack: () => {
-  }
-};
-var NestedMenuContext = (0, import_react27.createContext)(
-  defaultNestedMenuContext
-);
-var NestedMenuProvider = ({
-  children,
-  ...nestedMenuProps
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(NestedMenuContext.Provider, { value: nestedMenuProps, children });
-};
-var useNestedMenuContext = () => {
-  const nestedMenuContextValue = (0, import_react27.useContext)(NestedMenuContext);
-  if (nestedMenuContextValue === null) {
-    throw new Error(
-      "useNestedMenuContext must be used within a <NestedMenuContext.Provider />"
-    );
-  }
-  return nestedMenuContextValue;
-};
-
-// src/NestedMenu/NestedMenuHeader.tsx
-var import_seeds_react_button2 = require("@sproutsocial/seeds-react-button");
-var import_seeds_react_icon3 = require("@sproutsocial/seeds-react-icon");
+// src/Autocomplete/AutocompleteTokenInput.tsx
+var import_react26 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var NestedMenuHeader = ({
-  backArrowLabel,
-  ...props
+var AutocompleteTokenInput = ({
+  onKeyDown,
+  onChange,
+  onInput,
+  onBlur,
+  onClick,
+  inputProps,
+  getTokenProps,
+  ...rest
 }) => {
-  const { goBack, selectedMenuPath } = useNestedMenuContext();
-  const showBackArrow = selectedMenuPath.length > 1;
+  const {
+    getInputComponentProps,
+    getDropdownProps,
+    inputValue,
+    isOpen,
+    ref,
+    ariaProps
+  } = useMenuToggleContext();
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    MenuHeader,
+    MenuTokenInput,
     {
-      leftAction: showBackArrow ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_seeds_react_button2.Button, { onClick: goBack, ariaLabel: backArrowLabel, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_seeds_react_icon3.Icon, { name: "arrow-left" }) }) : void 0,
-      ...props
+      id: "autocomplete_input",
+      name: "autocomplete_input",
+      ...getInputComponentProps({
+        ...getDropdownProps?.({ ref, preventKeyAction: isOpen }) || { ref },
+        onKeyDown,
+        onChange,
+        onInput,
+        onBlur,
+        onClick,
+        value: inputValue,
+        refKey: "innerRef",
+        inputProps,
+        ...ariaProps
+      }),
+      ...rest
     }
   );
 };
 
+// src/NestedMenu/NestedMenu.tsx
+var import_react32 = require("react");
+var import_react33 = require("motion/react");
+var import_downshift9 = require("downshift");
+
 // src/reducers/nestedMenuStateReducer.tsx
 var import_downshift8 = require("downshift");
 var nestedMenuStateReducer = (_state, actionAndChanges) => {
@@ -3842,14 +3952,52 @@ var nestedMenuStateReducer = (_state, actionAndChanges) => {
   }
 };
 
+// src/NestedMenu/NestedMenuContext.tsx
+var import_react27 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var defaultNestedMenuContext = {
+  selectedMenuPath: [],
+  setSelectedMenuId: () => {
+  },
+  setSelectedMenuPath: () => {
+  },
+  resetSelectedMenuPath: () => {
+  },
+  goBack: () => {
+  },
+  rootMenuContextProps: {},
+  activeMenuContext: defaultMenuContext,
+  setActiveMenuContext: () => {
+  },
+  animationSpeed: MOTION_DURATION_FAST
+};
+var NestedMenuContext = (0, import_react27.createContext)(
+  defaultNestedMenuContext
+);
+var NestedMenuProvider = ({
+  children,
+  ...nestedMenuProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(NestedMenuContext.Provider, { value: nestedMenuProps, children });
+};
+var useNestedMenuContext = () => {
+  const nestedMenuContextValue = (0, import_react27.useContext)(NestedMenuContext);
+  if (nestedMenuContextValue === null) {
+    throw new Error(
+      "useNestedMenuContext must be used within a <NestedMenuContext.Provider />"
+    );
+  }
+  return nestedMenuContextValue;
+};
+
 // src/NestedMenu/NestedMenuContent.tsx
 var import_react28 = require("react");
-var import_src = require("@sproutsocial/seeds-react-utilities/src/index");
+var import_seeds_react_utilities2 = require("@sproutsocial/seeds-react-utilities");
 
 // src/NestedMenu/NestedMenuItem.tsx
 var import_seeds_react_icon4 = require("@sproutsocial/seeds-react-icon");
 var import_seeds_react_box4 = require("@sproutsocial/seeds-react-box");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var NestedMenuItem = ({
   children,
   childMenuId,
@@ -3863,15 +4011,15 @@ var NestedMenuItem = ({
       setSelectedMenuId?.(childMenuId);
     }
   } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MenuItem, { ...onClickProps, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_seeds_react_box4.Box, { display: "flex", justifyContent: "space-between", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuItem, { ...onClickProps, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_seeds_react_box4.Box, { display: "flex", justifyContent: "space-between", children: [
     children,
-    childMenuId && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MenuItemActionRight, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_seeds_react_icon4.Icon, { name: "arrow-right-outline" }) })
+    childMenuId && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuItemActionRight, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_seeds_react_icon4.Icon, { name: "arrow-right-outline" }) })
   ] }) });
 };
 NestedMenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
 // src/NestedMenu/NestedMenuContent.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var NestedMenuContent = ({
   innerRef: innerRefProp = null,
   onKeyDown: onKeyDownProp,
@@ -3883,7 +4031,7 @@ var NestedMenuContent = ({
   const { highlightedIndex, items } = useMenuContentContext();
   const { setSelectedMenuId, selectedMenuPath, goBack } = useNestedMenuContext();
   const internalRef = (0, import_react28.useRef)(null);
-  const innerRef = (0, import_src.mergeRefs)(internalRef, innerRefProp);
+  const innerRef = (0, import_seeds_react_utilities2.mergeRefs)(internalRef, innerRefProp);
   const contentProps = children ? { children } : { menuItems, MenuItemComponent };
   (0, import_react28.useEffect)(() => {
     internalRef?.current?.focus();
@@ -3908,7 +4056,7 @@ var NestedMenuContent = ({
         break;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     MenuContent,
     {
       onKeyDown,
@@ -3920,82 +4068,317 @@ var NestedMenuContent = ({
 };
 NestedMenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 
+// src/NestedMenu/NestedMenuHeader.tsx
+var import_seeds_react_button2 = require("@sproutsocial/seeds-react-button");
+var import_seeds_react_icon5 = require("@sproutsocial/seeds-react-icon");
+var import_react29 = require("motion/react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var NestedMenuHeader = ({
+  backArrowLabel,
+  ...props
+}) => {
+  const { goBack, selectedMenuPath, animationSpeed } = useNestedMenuContext();
+  const showBackArrow = selectedMenuPath.length > 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    MenuHeader,
+    {
+      leftAction: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react29.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        import_react29.motion.div,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: {
+            opacity: 0,
+            transition: { duration: animationSpeed }
+          },
+          children: showBackArrow ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_seeds_react_button2.Button, { onClick: goBack, ariaLabel: backArrowLabel, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_seeds_react_icon5.Icon, { name: "arrow-left" }) }) : void 0
+        },
+        `${selectedMenuPath}-header--button`
+      ) }),
+      ...props
+    }
+  );
+};
+
+// src/NestedMenu/NestedMenuRoot.tsx
+var import_react30 = __toESM(require("react"));
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var NestedMenuRoot = ({
+  children,
+  menuToggleElement,
+  ...contextProps
+}) => {
+  const menuContext = useMenu(contextProps);
+  const { setActiveMenuContext, selectedMenuPath } = useNestedMenuContext();
+  import_react30.default.useEffect(() => {
+    setActiveMenuContext(menuContext);
+  }, [
+    selectedMenuPath[selectedMenuPath.length - 1],
+    menuContext.selectedItem,
+    menuContext.selectedItems?.length
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MenuContentProvider, { menuContext, children });
+};
+
+// src/NestedMenu/NestedMenuPopout.tsx
+var import_react31 = require("motion/react");
+var import_styled_components13 = __toESM(require("styled-components"));
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var StyledDiv = (0, import_styled_components13.default)(import_react31.motion.div)`
+  overflow: hidden;
+`;
+var NestedMenuPopout = ({
+  content,
+  menuToggleElement,
+  width: width2,
+  ...popoutProps
+}) => {
+  const { activeMenuContext, rootMenuContextProps, resetSelectedMenuPath } = useNestedMenuContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    MenuPopout,
+    {
+      ...popoutProps,
+      onClose: () => setTimeout(() => resetSelectedMenuPath?.(), 100),
+      isOpen: !!rootMenuContextProps.isOpen,
+      openMenu: rootMenuContextProps.openMenu,
+      closeMenu: rootMenuContextProps.closeMenu,
+      width: width2,
+      content: (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StyledDiv, { layout: "position", children: typeof content === "function" ? content(props) : content }),
+      children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        MenuToggleProvider,
+        {
+          menuContext: {
+            ...activeMenuContext,
+            ...rootMenuContextProps,
+            ...toggleProps
+          },
+          children: menuToggleElement
+        }
+      )
+    }
+  );
+};
+
 // src/NestedMenu/NestedMenu.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var NestedMenu = ({
   initialMenuId,
   menus,
   onBackButtonClick,
   backArrowLabel,
-  menuToggleElement
+  menuToggleElement,
+  popoutProps = {},
+  width: width2 = "300px",
+  stateReducer: rootExternalStateReducer,
+  id: externalNestedMenuId,
+  ...useSelectProps
 }) => {
-  const [selectedMenuPath, setSelectedMenuPath] = (0, import_react29.useState)([initialMenuId]);
-  const selectedMenuId = selectedMenuPath[selectedMenuPath.length - 1];
+  const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
+    isCombobox: false
+  });
+  const uniqueId = (0, import_react32.useId)();
+  const nestedMenuId = externalNestedMenuId ?? `nested-menu-${uniqueId}`;
+  const [hasLoadedOnce, setHasLoadedOnce] = (0, import_react32.useState)(false);
+  const useSelectReturnProps = (0, import_downshift9.useSelect)({
+    ...defaultDownshiftProps.select,
+    id: nestedMenuId,
+    items: [],
+    stateReducer: reduceReducers(
+      defaultDownshiftProps.select.stateReducer,
+      rootExternalStateReducer
+    ),
+    ...useSelectProps
+  });
+  const rootMenuContextProps = {
+    ...useSelectProps,
+    ...useSelectReturnProps,
+    ...restDefaults
+  };
+  (0, import_react32.useEffect)(() => {
+    if (!useSelectReturnProps.isOpen) {
+      setHasLoadedOnce(false);
+    } else {
+      !hasLoadedOnce && setHasLoadedOnce(true);
+    }
+  }, [useSelectReturnProps.isOpen]);
+  const onNestedIsOpenChange = ({
+    isOpen: newIsOpen
+  }) => {
+    !newIsOpen && useSelectReturnProps.closeMenu?.();
+  };
+  const nestedMenuPropsFromRoot = {
+    // The selected menu needs to receive this id so that the toggle element can be properly associated with it.
+    id: nestedMenuId,
+    onIsOpenChange: onNestedIsOpenChange
+  };
+  const [selectedMenuPath, setSelectedMenuPath] = (0, import_react32.useState)([initialMenuId]);
+  const [activeMenuContext, setActiveMenuContext] = (0, import_react32.useState)(defaultMenuContext);
+  const [currentMenuId, setCurrentMenuId] = (0, import_react32.useState)(initialMenuId);
+  const [isAdding, setIsAdding] = (0, import_react32.useState)(false);
   const setSelectedMenuId = (id) => {
+    setIsAdding(true);
     setSelectedMenuPath((currentPath) => [...currentPath, id]);
   };
+  (0, import_react32.useEffect)(() => {
+    if (selectedMenuPath.length > 0) {
+      const newMenuId = selectedMenuPath[selectedMenuPath.length - 1];
+      setCurrentMenuId(newMenuId);
+    }
+  }, [selectedMenuPath.join("-")]);
+  const resetSelectedMenuPath = () => {
+    setSelectedMenuPath([initialMenuId]);
+    setCurrentMenuId(initialMenuId);
+  };
   const goBack = () => {
+    setIsAdding(false);
     setSelectedMenuPath((currentPath) => currentPath.slice(0, -1));
-    onBackButtonClick?.(selectedMenuId);
+    onBackButtonClick?.(currentMenuId);
   };
   const {
     MenuComponent,
     menuProps,
     MenuHeaderComponent = NestedMenuHeader,
     menuHeaderProps = {}
-  } = menus[selectedMenuId] || {};
+  } = menus[currentMenuId] || {};
   const {
     children,
     menuItems,
     MenuItemComponent,
     stateReducer: externalStateReducer,
-    onStateChange: externalOnStateChange,
-    ...props
+    ...restMenuProps
   } = menuProps || {};
   const stateReducer = reduceReducers(
     nestedMenuStateReducer,
     externalStateReducer
   );
-  const onStateChange = (changes) => {
-    externalOnStateChange?.(changes);
-    if (changes.isOpen === false) {
-      setTimeout(() => {
-        setSelectedMenuPath([initialMenuId]);
-      }, 100);
-    }
+  const animationSpeed = MOTION_DURATION_FAST;
+  const contentVariants = {
+    arrive: (custom = { hasLoadedOnce: false, isAdding: false }) => ({
+      opacity: 0,
+      // Start from left if is first render of root, else use default
+      x: !custom?.hasLoadedOnce ? "200%" : custom?.isAdding ? "200%" : "-200%"
+    }),
+    enter: (custom = { hasLoadedOnce: false }) => ({
+      opacity: 1,
+      x: 0,
+      transition: {
+        type: "tween",
+        duration: animationSpeed,
+        ease: "circOut",
+        delay: !custom.hasLoadedOnce ? animationSpeed : 0
+      }
+    }),
+    leave: (custom = { hasLoadedOnce: false, isAdding: false }) => ({
+      opacity: 0,
+      x: custom?.isAdding ? "-200%" : "200%",
+      transition: {
+        type: "tween",
+        duration: animationSpeed,
+        ease: "circIn"
+      }
+    })
+  };
+  const menuVariants = {
+    arrive: (custom = { hasLoadedOnce: false, isAdding: false }) => ({
+      opacity: 0,
+      // Start from left if is first render of root, else use default
+      x: !custom?.hasLoadedOnce ? "200%" : custom?.isAdding ? "200%" : "-200%"
+    }),
+    enter: (custom = { hasLoadedOnce: false }) => ({
+      opacity: 1,
+      x: 0,
+      transition: {
+        type: "tween",
+        duration: animationSpeed,
+        ease: "circOut",
+        delay: !custom.hasLoadedOnce ? animationSpeed : 0
+      }
+    }),
+    leave: (custom = { hasLoadedOnce: false, isAdding: false }) => ({
+      opacity: 0,
+      x: custom?.isAdding ? "-200%" : "200%",
+      transition: {
+        type: "tween",
+        duration: animationSpeed,
+        ease: "circIn"
+      }
+    })
   };
   const nestedMenuProps = {
+    ...nestedMenuPropsFromRoot,
     menuToggleElement,
     stateReducer,
-    onStateChange,
-    initialIsOpen: selectedMenuPath.length > 1,
-    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-      MenuHeaderComponent && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        MenuHeaderComponent,
+    MenuRootComponent: NestedMenuRoot,
+    // This ensures that onNestedIsOpenChange will be triggered if the selected menu attempts to close itself.
+    initialIsOpen: true,
+    children: (
+      // Handles the smooth animating of the content
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react33.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        import_react33.motion.div,
         {
-          backArrowLabel,
-          ...menuHeaderProps
-        }
-      ),
-      children && children,
-      menuItems && !children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        NestedMenuContent,
-        {
-          menuItems,
-          MenuItemComponent: MenuItemComponent ?? NestedMenuItem
-        }
-      )
-    ] }),
-    ...props
+          variants: contentVariants,
+          initial: "arrive",
+          animate: "enter",
+          exit: "leave",
+          custom: { isAdding, hasLoadedOnce },
+          children: [
+            MenuHeaderComponent && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              MenuHeaderComponent,
+              {
+                backArrowLabel,
+                ...menuHeaderProps
+              }
+            ),
+            children && children,
+            menuItems && !children && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              NestedMenuContent,
+              {
+                menuItems,
+                MenuItemComponent: MenuItemComponent ?? NestedMenuItem
+              }
+            )
+          ]
+        },
+        currentMenuId
+      ) })
+    ),
+    ...restMenuProps
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     NestedMenuProvider,
     {
-      selectedMenuPath,
-      setSelectedMenuPath,
-      setSelectedMenuId,
-      goBack,
-      children: MenuComponent && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MenuComponent, { ...nestedMenuProps })
+      ...{
+        selectedMenuPath,
+        setSelectedMenuPath,
+        setSelectedMenuId,
+        resetSelectedMenuPath,
+        goBack,
+        rootMenuContextProps,
+        activeMenuContext,
+        setActiveMenuContext,
+        animationSpeed
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        NestedMenuPopout,
+        {
+          content: MenuComponent && // Handles the rerender of the component
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react33.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            import_react33.motion.div,
+            {
+              variants: menuVariants,
+              initial: "arrive",
+              animate: "enter",
+              exit: "leave",
+              custom: { isAdding, hasLoadedOnce },
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MenuComponent, { ...nestedMenuProps })
+            },
+            `${currentMenuId}-content`
+          ) }),
+          menuToggleElement,
+          width: width2,
+          ...popoutProps
+        }
+      )
     }
   );
 };
@@ -4004,7 +4387,10 @@ var NestedMenu = ({
   ActionMenu,
   Autocomplete,
   AutocompleteInput,
+  AutocompleteTokenInput,
+  CustomPopoutContent,
   INPUT_TYPES,
+  ListboxToggleButton,
   MenuContent,
   MenuContentContext,
   MenuContentProvider,
@@ -4019,7 +4405,9 @@ var NestedMenu = ({
   MenuItemRow,
   MenuItemText,
   MenuLabel,
+  MenuPopout,
   MenuRoot,
+  MenuRootNoPopout,
   MenuSearchInput,
   MenuSearchTokenInput,
   MenuToggleButton,
@@ -4034,6 +4422,7 @@ var NestedMenu = ({
   NestedMenuItem,
   NestedMenuProvider,
   SingleSelectMenu,
+  StyledListboxToggleButton,
   StyledMenuGroup,
   StyledMenuGroupUl,
   StyledMenuItem,