@sproutsocial/seeds-react-menu 1.17.0 → 1.18.0

package/dist/esm/index.js

@@ -1,47 +1,291 @@
+// src/MenuContext.tsx
+import React, { createContext, useMemo, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var defaultMenuContext = {
+  items: [],
+  itemsMap: {},
+  isItemSelected: () => false,
+  getInputComponentProps: () => ({}),
+  hasVisibleItems: false,
+  isInitialized: false
+};
+var getSelectedItemIds = (selectedItems) => selectedItems?.reduce(
+  (selected, item) => ({ ...selected, [item.id]: true }),
+  {}
+);
+var checkIfItemSelected = ({
+  id,
+  selectedItem,
+  selectedItemIds
+}) => selectedItemIds ? !!selectedItemIds[id] : selectedItem?.id === id;
+var useMenu = ({
+  items = [],
+  isListbox = false,
+  isOpen = false,
+  itemsMap: itemsMapFromProps,
+  selectedItemIds: selectedItemIdsFromProps,
+  selectedItem,
+  selectedItems,
+  getInputProps,
+  contentRef: contentRefFromProps,
+  autoCloseOnEmpty,
+  hiddenItemsCount,
+  ...rest
+} = {}) => {
+  const contentRef = contentRefFromProps || React.createRef();
+  const menuProps = useMemo(() => ({ ...rest }), [rest]);
+  const itemsMap = useMemo(
+    () => itemsMapFromProps || items.reduce((map, item) => {
+      map[`${item.id}`] = {
+        ...item
+      };
+      return map;
+    }, {}),
+    [items, itemsMapFromProps]
+  );
+  const selectedItemIds = useMemo(
+    () => selectedItemIdsFromProps || getSelectedItemIds(selectedItems),
+    [selectedItems, selectedItemIdsFromProps]
+  );
+  const isItemSelected = React.useCallback(
+    (id) => checkIfItemSelected({ id, selectedItem, selectedItemIds }),
+    [selectedItem?.id, selectedItemIds]
+  );
+  const getInputComponentProps = React.useCallback(
+    ({ inputProps, ...props }) => {
+      if (!getInputProps) return {};
+      const {
+        ["aria-activedescendant"]: activedescendant,
+        ["aria-autocomplete"]: autocomplete,
+        ["aria-controls"]: controls,
+        ["aria-expanded"]: expanded,
+        ["aria-labelledby"]: labelledby,
+        role,
+        autoComplete,
+        onClick,
+        value,
+        ...restProps
+      } = getInputProps(props);
+      return {
+        ...restProps,
+        inputProps: {
+          ["aria-activedescendant"]: activedescendant,
+          ["aria-autocomplete"]: autocomplete,
+          ["aria-controls"]: controls,
+          ["aria-expanded"]: expanded,
+          ["aria-labelledby"]: labelledby,
+          role,
+          autoComplete,
+          onClick,
+          value,
+          ...inputProps
+        }
+      };
+    },
+    [getInputProps]
+  );
+  const hasVisibleItems = useMemo(() => {
+    return (hiddenItemsCount ?? 0) < items.length;
+  }, [items, hiddenItemsCount]);
+  return {
+    isOpen,
+    isListbox,
+    items,
+    itemsMap,
+    selectedItem,
+    selectedItems,
+    selectedItemIds,
+    isItemSelected,
+    getInputProps,
+    getInputComponentProps,
+    contentRef,
+    hasVisibleItems,
+    autoCloseOnEmpty,
+    isInitialized: true,
+    ...menuProps
+  };
+};
+var MenuToggleContext = createContext(defaultMenuContext);
+var MenuToggleProvider = ({
+  children,
+  menuContext
+}) => {
+  return /* @__PURE__ */ jsx(MenuToggleContext.Provider, { value: { ...menuContext }, children });
+};
+var useMenuToggleContext = () => {
+  const menuContextValue = useContext(MenuToggleContext);
+  if (menuContextValue === null) {
+    throw new Error(
+      "useMenuToggleContext must be used within a <MenuToggleContext.Provider />"
+    );
+  }
+  return menuContextValue;
+};
+var MenuContentContext = createContext(defaultMenuContext);
+var MenuContentProvider = ({
+  children,
+  menuContext
+}) => {
+  return /* @__PURE__ */ jsx(MenuContentContext.Provider, { value: { ...menuContext }, children });
+};
+var useMenuContentContext = () => {
+  const menuContextValue = useContext(MenuContentContext);
+  if (menuContextValue === null) {
+    throw new Error(
+      "useMenuContentContext must be used within a <MenuContentContext.Provider />"
+    );
+  }
+  return menuContextValue;
+};
+
+// src/MenuItem/styles.tsx
+import styled, { css } from "styled-components";
+import { focusRing, disabled } from "@sproutsocial/seeds-react-mixins";
+import { color, border, flexbox, grid, layout, space } from "styled-system";
 import {
-  MenuContentContext,
-  MenuContentProvider,
-  MenuItemAction,
-  MenuItemActionLeft,
-  MenuItemActionRight,
-  MenuItemContainer,
-  MenuItemRow,
-  MenuItemText,
-  MenuToggleButton,
-  MenuToggleContext,
-  MenuToggleProvider,
-  StyledMenuContent,
-  StyledMenuItem,
-  checkIfItemSelected,
-  defaultMenuContext,
-  getSelectedItemIds,
-  useMenu,
-  useMenuContentContext,
-  useMenuToggleContext
-} from "./chunk-ROQATIB7.js";
+  CheckboxContainer,
+  InputWrapper,
+  PillInput,
+  checkboxContainerHoverStyles,
+  inputWrapperHoverStyles,
+  pillInputHoverStyles
+} from "@sproutsocial/seeds-react-checkbox";
+var highlightedStyles = css`
+  cursor: pointer;
+  border: 1px solid ${({ theme }) => theme.colors.listItem.border.base};
+  background-color: ${({ theme }) => theme.colors.listItem.background.hover};
+  color: ${({ theme }) => theme.colors.text.body};
+  text-decoration: none;
+`;
+var activeStyles = css`
+  border: 1px solid ${({ theme }) => theme.colors.listItem.border.base};
+  background-color: ${({ theme }) => theme.colors.menuItem.background.active};
+  color: ${({ theme }) => theme.colors.text.body};
+  text-decoration: none;
+`;
+var selectedStyles = css`
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+`;
+var MenuItemContainer = styled.li`
+  box-sizing: border-box;
+  list-style-type: none;
+  margin-left: ${({ theme }) => theme.space[300]};
+  margin-right: ${({ theme }) => theme.space[300]};
+
+  &:first-child {
+    margin-top: ${({ theme }) => theme.space[300]};
+  }
+
+  &:last-child {
+    margin-bottom: ${({ theme }) => theme.space[300]};
+  }
+`;
+var StyledMenuItem = styled.button`
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: ${({ theme }) => theme.radii[500]};
+  background-color: ${({ theme }) => theme.colors.listItem.background.base};
+  border: 1px solid ${({ theme }) => theme.colors.listItem.background.base};
+  color: ${({ theme }) => theme.colors.text.body};
+  font-family: ${({ theme }) => theme.fontFamily};
+  font-weight: ${({ theme }) => theme.fontWeights.normal};
+  text-align: left;
+  text-decoration: none;
+  padding: ${({ theme }) => theme.space[300]};
+  outline: 0;
+  ${({ theme }) => theme.typography[200]};
+  transition: all ${({ theme }) => theme.duration["fast"]};
+
+  /* Highlighted */
+  ${({ $highlighted }) => $highlighted && highlightedStyles}
+
+  /* Hovered, but not focused */
+  &:hover {
+    ${highlightedStyles}
+    ${CheckboxContainer} {
+      ${checkboxContainerHoverStyles}
+    }
+    ${InputWrapper} {
+      ${inputWrapperHoverStyles}
+    }
+    ${PillInput} {
+      ${pillInputHoverStyles}
+    }
+  }
+
+  /* focused */
+  &:focus {
+    ${focusRing}
+  }
+
+  /* Active */
+  ${({ $active }) => $active && activeStyles}
+
+  /* Pressed state*/
+  &:active {
+    ${activeStyles}
+  }
+
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+    ${disabled}
+  }
+
+  ${({ $selected }) => $selected && selectedStyles}
+
+  ${border}
+  ${color}
+  ${flexbox}
+  ${grid}
+  ${layout}
+  ${space}
+`;
+var MenuItemRow = styled.div`
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+`;
+var MenuItemAction = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+var MenuItemActionLeft = styled(MenuItemAction)`
+  margin-right: ${({ theme }) => theme.space[300]};
+`;
+var MenuItemActionRight = styled(MenuItemAction)`
+  margin-left: ${({ theme }) => theme.space[300]};
+`;
+var MenuItemText = styled.div`
+  word-break: break-word;
+  flex-grow: 1;
+  min-width: 0;
+`;
 
 // src/MenuItem/useOptionProps.tsx
-import { useMemo } from "react";
+import { useMemo as useMemo2 } from "react";
 import { Icon } from "@sproutsocial/seeds-react-icon";
 import { Checkbox } from "@sproutsocial/seeds-react-checkbox";
 import { Switch } from "@sproutsocial/seeds-react-switch";
 import { Radio } from "@sproutsocial/seeds-react-radio";
 import { useTheme } from "styled-components";
 import { Box } from "@sproutsocial/seeds-react-box";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var SelectionIndicator = ({
   id,
   inputType = "icon",
   "aria-labelledby": labeledBy,
   selected
 }) => {
-  const { space: space3 } = useTheme();
+  const { space: space5 } = useTheme();
   const inputStub = (e) => {
     e.stopPropagation();
   };
   switch (inputType) {
     case "checkbox":
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx2(
         Checkbox,
         {
           tabIndex: -1,
@@ -53,7 +297,7 @@ var SelectionIndicator = ({
         }
       );
     case "switch":
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx2(
         Switch,
         {
           tabIndex: -1,
@@ -64,7 +308,7 @@ var SelectionIndicator = ({
         }
       );
     case "radio":
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx2(
         Radio,
         {
           tabIndex: -1,
@@ -76,9 +320,9 @@ var SelectionIndicator = ({
       );
     case "icon":
       if (selected) {
-        return /* @__PURE__ */ jsx(Icon, { name: "check-solid", "aria-hidden": true, size: "small" });
+        return /* @__PURE__ */ jsx2(Icon, { name: "check-solid", "aria-hidden": true, size: "small" });
       } else {
-        return /* @__PURE__ */ jsx(Box, { width: space3["400"] });
+        return /* @__PURE__ */ jsx2(Box, { width: space5["400"] });
       }
     default:
       return null;
@@ -92,7 +336,7 @@ var useOptionProps = ({
   ...props
 }) => {
   const { selectedItem, selectedItemIds, isListbox, isItemSelected } = useMenuContentContext();
-  const selected = useMemo(
+  const selected = useMemo2(
     () => isItemSelected(id),
     [selectedItem?.id, selectedItemIds]
   );
@@ -101,7 +345,7 @@ var useOptionProps = ({
     active: selected,
     ["aria-selected"]: selected,
     children: /* @__PURE__ */ jsxs(MenuItemRow, { children: [
-      /* @__PURE__ */ jsx(MenuItemActionLeft, { children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx2(MenuItemActionLeft, { children: /* @__PURE__ */ jsx2(
         SelectionIndicator,
         {
           id,
@@ -110,24 +354,24 @@ var useOptionProps = ({
           selected: !!selected
         }
       ) }),
-      /* @__PURE__ */ jsx(MenuItemText, { id: label, children })
+      /* @__PURE__ */ jsx2(MenuItemText, { id: label, children })
     ] }),
     ...props
   } : {};
 };
 
 // src/MenuItem/MenuItem.tsx
-import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
 var MenuItem = ({
   id,
   children,
   onClick,
   onKeyDown,
-  disabled = false,
+  disabled: disabled2 = false,
   active,
   innerRef,
   href,
-  color: color3,
+  color: color5,
   ...props
 }) => {
   const {
@@ -157,7 +401,7 @@ var MenuItem = ({
   if (!isListbox && "aria-selected" in downshiftItemProps) {
     delete downshiftItemProps["aria-selected"];
   }
-  return hiddenItemsMap[item.id] ? /* @__PURE__ */ jsx2(Fragment, {}) : /* @__PURE__ */ jsx2(MenuItemContainer, { role: "none", children: /* @__PURE__ */ jsx2(
+  return hiddenItemsMap[item.id] ? /* @__PURE__ */ jsx3(Fragment, {}) : /* @__PURE__ */ jsx3(MenuItemContainer, { role: "none", children: /* @__PURE__ */ jsx3(
     StyledMenuItem,
     {
       id,
@@ -188,17 +432,17 @@ var INPUT_TYPES = {
 import "react";
 
 // src/MenuHeader/styles.tsx
-import styled from "styled-components";
+import styled2 from "styled-components";
 import {
-  border,
-  color,
-  flexbox,
-  grid,
-  layout,
+  border as border2,
+  color as color2,
+  flexbox as flexbox2,
+  grid as grid2,
+  layout as layout2,
   position,
-  space
+  space as space2
 } from "styled-system";
-var MenuHeaderContainer = styled.div`
+var MenuHeaderContainer = styled2.div`
   border-color: ${({ theme }) => theme.colors.container.border.base};
   border-bottom-width: 1px;
   border-bottom-style: solid;
@@ -209,15 +453,15 @@ var MenuHeaderContainer = styled.div`
   flex-direction: column;
   padding: ${({ theme }) => theme.space[350]} ${({ theme }) => theme.space[400]};
 
-  ${border}
-  ${color}
-  ${flexbox}
-  ${grid}
-  ${layout}
-  ${space}
+  ${border2}
+  ${color2}
+  ${flexbox2}
+  ${grid2}
+  ${layout2}
+  ${space2}
   ${position}
 `;
-var MenuTitleText = styled.h3`
+var MenuTitleText = styled2.h3`
   color: ${({ theme }) => theme.colors.text.headline};
   font-weight: ${({ theme }) => theme.fontWeights.bold};
   margin: 0px;
@@ -229,7 +473,7 @@ var MenuTitleText = styled.h3`
       padding-left: ${theme.space[350]};
     `}
 `;
-var MenuChildrenContainer = styled.div`
+var MenuChildrenContainer = styled2.div`
   grid-column: 1 / -1;
   margin-top: ${({ theme }) => theme.space[300]};
 
@@ -237,7 +481,7 @@ var MenuChildrenContainer = styled.div`
     margin-top: 0;
   }
 `;
-var MenuHeaderFeatures = styled.div`
+var MenuHeaderFeatures = styled2.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -261,7 +505,7 @@ var MenuHeaderFeatures = styled.div`
 `;
 
 // src/MenuHeader/MenuHeader.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var MenuHeader = ({
   children,
   title,
@@ -270,32 +514,62 @@ var MenuHeader = ({
   ...rest
 }) => {
   const showTopRow = title || leftAction || rightAction;
-  return /* @__PURE__ */ jsx3(Fragment2, { children: /* @__PURE__ */ jsxs2(MenuHeaderContainer, { $leftAction: !!leftAction, ...rest, children: [
+  return /* @__PURE__ */ jsx4(Fragment2, { children: /* @__PURE__ */ jsxs2(MenuHeaderContainer, { $leftAction: !!leftAction, ...rest, children: [
     showTopRow && /* @__PURE__ */ jsxs2(MenuHeaderFeatures, { $leftAction: !!leftAction, children: [
       leftAction && leftAction,
-      title && /* @__PURE__ */ jsx3(MenuTitleText, { $leftAction: !!leftAction, children: title }),
-      rightAction && /* @__PURE__ */ jsx3("div", { className: "right-action", children: rightAction })
+      title && /* @__PURE__ */ jsx4(MenuTitleText, { $leftAction: !!leftAction, children: title }),
+      rightAction && /* @__PURE__ */ jsx4("div", { className: "right-action", children: rightAction })
     ] }),
-    children && /* @__PURE__ */ jsx3(MenuChildrenContainer, { children })
+    children && /* @__PURE__ */ jsx4(MenuChildrenContainer, { children })
   ] }) });
 };
 
+// src/MenuContent/styles.tsx
+import styled3 from "styled-components";
+import {
+  border as border3,
+  color as color3,
+  flexbox as flexbox3,
+  grid as grid3,
+  layout as layout3,
+  position as position2,
+  space as space3
+} from "styled-system";
+var StyledMenuContent = styled3.ul`
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+
+  ${border3}
+  ${color3}
+  ${flexbox3}
+  ${grid3}
+  ${layout3}
+  ${space3}
+  ${position2}
+`;
+
 // src/hooks/useMenuChildren.tsx
-import React3, { useMemo as useMemo2 } from "react";
-import { Fragment as Fragment3, jsx as jsx4 } from "react/jsx-runtime";
+import React4, { useMemo as useMemo3 } from "react";
+import { Fragment as Fragment3, jsx as jsx5 } from "react/jsx-runtime";
 var walkAllChildren = (children, callback) => {
   const walk = (element, parents2) => {
     if (element === null || element === void 0) return;
     callback(element, parents2);
     const newParents = [...parents2, element];
-    if (React3.isValidElement(element) && element.props?.children) {
-      React3.Children.toArray(element.props.children).forEach((child) => {
+    if (React4.isValidElement(element) && element.props?.children) {
+      React4.Children.toArray(element.props.children).forEach((child) => {
         walk(child, newParents);
       });
     }
   };
   const parents = [];
-  React3.Children.toArray(children).forEach((child) => {
+  React4.Children.toArray(children).forEach((child) => {
     walk(child, parents);
   });
 };
@@ -336,9 +610,9 @@ var addItemsFromGroup = ({
       });
     });
   } else if (menuGroup.props.children) {
-    const children = React3.Children.toArray(menuGroup.props.children);
+    const children = React4.Children.toArray(menuGroup.props.children);
     children.forEach((menuItem) => {
-      if (React3.isValidElement(menuItem)) {
+      if (React4.isValidElement(menuItem)) {
         addMenuItem({
           itemProps: {
             id: menuItem.props.id,
@@ -418,19 +692,19 @@ var mapMenuItems = ({
   menuItems,
   MenuItemComponent = MenuItem
 }) => {
-  return /* @__PURE__ */ jsx4(Fragment3, { children: menuItems.map((menuItemProps) => /* @__PURE__ */ jsx4(MenuItemComponent, { ...menuItemProps }, menuItemProps.id)) });
+  return /* @__PURE__ */ jsx5(Fragment3, { children: menuItems.map((menuItemProps) => /* @__PURE__ */ jsx5(MenuItemComponent, { ...menuItemProps }, menuItemProps.id)) });
 };
 var getChildrenFromMenuItems = ({
   menuItems,
   MenuItemComponent
-}) => /* @__PURE__ */ jsx4(MenuContent, { menuItems, MenuItemComponent });
+}) => /* @__PURE__ */ jsx5(MenuContent, { menuItems, MenuItemComponent });
 var useMenuChildren = ({
   children: childrenProp,
   menuItems,
   MenuItemComponent
 }) => {
-  const { allMenuItems, menuItemsMap, children } = useMemo2(() => {
-    let children2 = /* @__PURE__ */ jsx4(Fragment3, {});
+  const { allMenuItems, menuItemsMap, children } = useMemo3(() => {
+    let children2 = /* @__PURE__ */ jsx5(Fragment3, {});
     const menuItemsMap2 = {};
     const allMenuItems2 = [];
     if (menuItems && menuItems.length) {
@@ -455,10 +729,10 @@ var useMenuChildren = ({
 import { useCallback } from "react";
 
 // src/MenuContent/DefaultMenuEmptyState.tsx
-import styled2 from "styled-components";
+import styled4 from "styled-components";
 import { Box as Box2 } from "@sproutsocial/seeds-react-box";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var StyledEmptyState = styled2(Box2)`
+import { jsx as jsx6 } from "react/jsx-runtime";
+var StyledEmptyState = styled4(Box2)`
   padding: ${({ theme }) => theme.space[350]};
   text-align: center;
   font-size: ${({ theme }) => theme.typography[200].fontSize};
@@ -467,11 +741,11 @@ var DefaultMenuEmptyState = ({
   children = "No items found",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx5(StyledEmptyState, { ...props, children });
+  return /* @__PURE__ */ jsx6(StyledEmptyState, { ...props, children });
 };
 
 // src/MenuContent/MenuContent.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var MenuContent = ({
   id = "menu_content",
   children: childrenProp,
@@ -493,7 +767,7 @@ var MenuContent = ({
   const toggleButtonProps = getToggleButtonProps?.();
   const children = childrenProp || !menuItems || !menuItems.length ? childrenProp : mapMenuItems({ menuItems, MenuItemComponent });
   if (isInitialized && !hasVisibleItems && !autoCloseOnEmpty) {
-    return emptyStateElement ?? /* @__PURE__ */ jsx6(DefaultMenuEmptyState, {});
+    return emptyStateElement ?? /* @__PURE__ */ jsx7(DefaultMenuEmptyState, {});
   }
   if (!children) {
     return null;
@@ -505,7 +779,7 @@ var MenuContent = ({
     },
     [onKeyDown, toggleButtonProps?.["onKeyDown"]]
   );
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     StyledMenuContent,
     {
       autoFocus: true,
@@ -531,35 +805,35 @@ MenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 import "react";
 
 // src/MenuFooter/styles.tsx
-import styled3 from "styled-components";
+import styled5 from "styled-components";
 import { Box as Box3 } from "@sproutsocial/seeds-react-box";
-var StyledMenuFooterBox = styled3(Box3)`
+var StyledMenuFooterBox = styled5(Box3)`
   padding: ${({ theme }) => theme.space[350]} ${({ theme }) => theme.space[400]};
   border-top: 1px solid ${(p) => p.theme.colors.container.border.base};
 `;
 
 // src/MenuFooter/MenuFooter.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var MenuFooter = ({ children, ...rest }) => {
-  return /* @__PURE__ */ jsx7(StyledMenuFooterBox, { ...rest, children });
+  return /* @__PURE__ */ jsx8(StyledMenuFooterBox, { ...rest, children });
 };
 
 // src/MenuGroup/MenuGroup.tsx
 import "react";
 
 // src/MenuGroup/styles.tsx
-import styled4 from "styled-components";
+import styled6 from "styled-components";
 import Text from "@sproutsocial/seeds-react-text";
 import {
-  border as border2,
-  layout as layout2,
-  position as position2,
-  flexbox as flexbox2,
-  grid as grid2,
-  color as color2,
-  space as space2
+  border as border4,
+  layout as layout4,
+  position as position3,
+  flexbox as flexbox4,
+  grid as grid4,
+  color as color4,
+  space as space4
 } from "styled-system";
-var StyledMenuGroup = styled4.li`
+var StyledMenuGroup = styled6.li`
   &:not(:last-child) {
     border-bottom: 1px solid
       ${({ theme }) => theme.colors.container.border.base};
@@ -567,31 +841,31 @@ var StyledMenuGroup = styled4.li`
   list-style: none;
   margin: 0;
 
-  ${border2}
-  ${position2}
-  ${color2}
-  ${flexbox2}
-  ${grid2}
-  ${layout2}
-  ${space2}
+  ${border4}
+  ${position3}
+  ${color4}
+  ${flexbox4}
+  ${grid4}
+  ${layout4}
+  ${space4}
 `;
-var StyledTitle = styled4(Text.SmallSubHeadline)`
+var StyledTitle = styled6(Text.SmallSubHeadline)`
   font-size: ${({ theme }) => theme.typography[100].fontSize};
   margin: ${({ theme }) => theme.space[400]} ${({ theme }) => theme.space[400]}
     0px ${({ theme }) => theme.space[400]};
 `;
-var StyledMenuGroupUl = styled4.ul`
+var StyledMenuGroupUl = styled6.ul`
   margin: 0;
   padding: 0;
 `;
 
 // src/MenuGroup/MenuGroup.tsx
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 var MenuGroup = ({
   titleAs = "div",
   children: childrenProp,
   title,
-  color: color3,
+  color: color5,
   isSingleSelect,
   id,
   menuItems,
@@ -619,11 +893,11 @@ var MenuGroup = ({
         role: "none",
         id,
         isSingleSelect,
-        color: color3,
+        color: color5,
         ...rest,
         children: [
-          title && /* @__PURE__ */ jsx8(StyledTitle, { as: titleAs, id: titleId, children: title }),
-          /* @__PURE__ */ jsx8(
+          title && /* @__PURE__ */ jsx9(StyledTitle, { as: titleAs, id: titleId, children: title }),
+          /* @__PURE__ */ jsx9(
             StyledMenuGroupUl,
             {
               role: "group",
@@ -639,19 +913,19 @@ var MenuGroup = ({
 MenuGroup.__MENU_PRIMITIVE_TYPE = "MenuGroup";
 
 // src/MenuRoot/MenuRoot.tsx
-import React6, {
+import React7, {
   useCallback as useCallback2,
   useEffect,
   useLayoutEffect
 } from "react";
-import styled5 from "styled-components";
+import styled7 from "styled-components";
 import {
   Popout
 } from "@sproutsocial/seeds-react-popout";
 import { mergeRefs } from "@sproutsocial/seeds-react-utilities";
 import { MOTION_DURATION_FAST } from "@sproutsocial/seeds-motion/unitless";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var CustomPopoutContent = styled5(Popout.Content)`
+import { jsx as jsx10 } from "react/jsx-runtime";
+var CustomPopoutContent = styled7(Popout.Content)`
   padding: 0;
   margin-left: 0;
   margin-right: 0;
@@ -717,12 +991,12 @@ var MenuPopout = ({
     },
     [openMenu, closeMenu]
   );
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     Popout,
     {
       isOpen: !!isOpen,
       setIsOpen,
-      content: (props) => /* @__PURE__ */ jsx9(CustomPopoutContent, { width: popoutProps.fullWidth ? "initial" : width, children: typeof content === "function" ? content(props) : content }),
+      content: (props) => /* @__PURE__ */ jsx10(CustomPopoutContent, { width: popoutProps.fullWidth ? "initial" : width, children: typeof content === "function" ? content(props) : content }),
       focusLockProps: {
         // correct jerking motion when scrolling while the Popout is open
         // returnFocus: false,
@@ -750,8 +1024,8 @@ var MenuRoot = ({
     getMenuProps,
     autoCloseOnEmpty = false
   } = contextProps;
-  const toggleElementRef = React6.useRef(null);
-  const [finalWidth, setFinalWidth] = React6.useState();
+  const toggleElementRef = React7.useRef(null);
+  const [finalWidth, setFinalWidth] = React7.useState();
   const min_width = 200;
   useLayoutEffect(() => {
     if (width) {
@@ -771,17 +1045,17 @@ var MenuRoot = ({
       closeMenu?.();
     }
   }, [menuContext.hasVisibleItems, isOpen, inputValue, autoCloseOnEmpty]);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     MenuPopout,
     {
       placement,
       isOpen: !!isOpen,
       openMenu,
       closeMenu,
-      content: /* @__PURE__ */ jsx9(MenuContentProvider, { menuContext, children }),
+      content: /* @__PURE__ */ jsx10(MenuContentProvider, { menuContext, children }),
       width: finalWidth,
       ...popoutProps,
-      children: (toggleProps) => /* @__PURE__ */ jsx9(
+      children: (toggleProps) => /* @__PURE__ */ jsx10(
         MenuToggleProvider,
         {
           menuContext: {
@@ -802,7 +1076,7 @@ var MenuRoot = ({
 // src/MenuLabel.tsx
 import "react";
 import { Label } from "@sproutsocial/seeds-react-label";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var MenuLabel = ({
   children,
   required = false,
@@ -811,7 +1085,7 @@ var MenuLabel = ({
   const { getLabelProps } = useMenuToggleContext();
   return (
     // This fallback id should never be used, but it is here to satisfy TypeScript since getLabelProps could be undefined.
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(
       Label,
       {
         htmlFor: "fallback_menu_label",
@@ -824,12 +1098,51 @@ var MenuLabel = ({
   );
 };
 
+// src/MenuToggleButton/MenuToggleButton.tsx
+import { Button } from "@sproutsocial/seeds-react-button";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var MenuToggleButton = (props) => {
+  const { getToggleButtonProps, isListbox, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
+  const {
+    onClick: userOnClick,
+    onKeyDown: userOnKeyDown,
+    onBlur: userOnBlur,
+    ...restProps
+  } = props;
+  const defaultDropdownProps = {
+    ref,
+    onClick: userOnClick,
+    onKeyDown: userOnKeyDown,
+    onBlur: userOnBlur
+  };
+  const dropdownProps = getDropdownProps?.({
+    ...defaultDropdownProps,
+    preventKeyAction: true
+  }) ?? defaultDropdownProps;
+  const toggleButtonProps = getToggleButtonProps?.({
+    ...dropdownProps,
+    refKey: "innerRef",
+    ...ariaProps,
+    ...isListbox ? {} : { role: "button", "aria-haspopup": "menu" }
+  });
+  if (toggleButtonProps && toggleButtonProps["aria-activedescendant"] === "") {
+    toggleButtonProps["aria-activedescendant"] = void 0;
+  }
+  if (toggleButtonProps && toggleButtonProps["aria-expanded"] === false) {
+    toggleButtonProps["aria-controls"] = void 0;
+  }
+  if (toggleButtonProps) {
+    toggleButtonProps["aria-labelledby"] = void 0;
+  }
+  return /* @__PURE__ */ jsx12(Button, { appearance: "secondary", ...toggleButtonProps, ...restProps });
+};
+
 // src/MenuSearchInput/MenuSearchInput.tsx
-import React9 from "react";
+import React10 from "react";
 import { Input } from "@sproutsocial/seeds-react-input";
 
 // src/hooks/useItemFiltering.tsx
-import React8 from "react";
+import React9 from "react";
 
 // src/utils/downshiftDefaults.ts
 var itemToString = (item) => {
@@ -849,8 +1162,8 @@ var useItemFiltering = ({
   getShouldFilter = defaultGetShouldFilter,
   setHiddenItemsMap: setHiddenItemsMapProp
 }) => {
-  const [hiddenItemsMap, setHiddenItemsMap] = React8.useState({});
-  const updateFilteredItems = React8.useCallback(
+  const [hiddenItemsMap, setHiddenItemsMap] = React9.useState({});
+  const updateFilteredItems = React9.useCallback(
     ({ inputValue }) => {
       const newHiddenItems = getShouldFilter({ inputValue }) ? allMenuItems.reduce((map, item) => {
         const isItemVisible = getIsItemVisible(item, inputValue);
@@ -868,7 +1181,7 @@ var useItemFiltering = ({
 };
 
 // src/MenuSearchInput/MenuSearchInput.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var MenuSearchInput = ({
   getIsItemVisible,
   inputProps,
@@ -889,18 +1202,18 @@ var MenuSearchInput = ({
     getIsItemVisible,
     setHiddenItemsMap
   });
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     updateFilteredItems({ inputValue: restInputProps.value || "" });
   }, [isOpen, restInputProps.value]);
   const toggleButtonProps = getToggleButtonProps?.() || {};
-  const handleKeyDown = React9.useCallback(
+  const handleKeyDown = React10.useCallback(
     (e) => {
       if (e.key === " ") return;
       toggleButtonProps.onKeyDown?.(e);
     },
     [toggleButtonProps.onKeyDown]
   );
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx13(
     Input,
     {
       onChange: (e, value) => {
@@ -922,13 +1235,13 @@ var MenuSearchInput = ({
 };
 
 // src/MenuTokenInput.tsx
-import React10 from "react";
-import styled6 from "styled-components";
+import React11 from "react";
+import styled8 from "styled-components";
 import {
   TokenInput
 } from "@sproutsocial/seeds-react-token-input";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var StyledTokenInputWrapper = styled6.div`
+import { jsx as jsx14 } from "react/jsx-runtime";
+var StyledTokenInputWrapper = styled8.div`
   > div {
     padding: 4px;
   }
@@ -957,12 +1270,12 @@ var MenuTokenInput = ({
     removeSelectedItem,
     setActiveIndex,
     selectedItems = []
-  } = React10.useContext(MenuContext);
+  } = React11.useContext(MenuContext);
   const removeToken = (tokenId) => {
     const tokenToRemove = selectedItems?.find((item) => item.id === tokenId);
     tokenToRemove && removeSelectedItem?.(tokenToRemove);
   };
-  return /* @__PURE__ */ jsx12(StyledTokenInputWrapper, { children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(StyledTokenInputWrapper, { children: /* @__PURE__ */ jsx14(
     TokenInput,
     {
       onKeyDown: (e, value) => {
@@ -1011,8 +1324,8 @@ var MenuTokenInput = ({
 };
 
 // src/MenuSearchTokenInput/MenuSearchTokenInput.tsx
-import React11 from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import React12 from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var MenuSearchTokenInput = ({
   getIsItemVisible,
   getTokenProps,
@@ -1035,10 +1348,10 @@ var MenuSearchTokenInput = ({
     setHiddenItemsMap
   });
   const controlledValue = value || inputPropsValue !== void 0 ? `${inputPropsValue}` : void 0;
-  const [internalValue, setInternalValue] = React11.useState(
+  const [internalValue, setInternalValue] = React12.useState(
     controlledValue || ""
   );
-  const updateFilteredState = React11.useCallback(
+  const updateFilteredState = React12.useCallback(
     // defaults to an empty string if no value is passed
     (value2 = "") => {
       setInternalValue(value2);
@@ -1046,21 +1359,21 @@ var MenuSearchTokenInput = ({
     },
     [updateFilteredItems]
   );
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     updateFilteredState(controlledValue);
   }, [controlledValue]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     updateFilteredState(controlledValue);
   }, [isOpen]);
   const toggleButtonProps = getToggleButtonProps?.() || {};
-  const handleKeyDown = React11.useCallback(
+  const handleKeyDown = React12.useCallback(
     (e) => {
       if (e.key === " ") return;
       toggleButtonProps.onKeyDown?.(e);
     },
     [toggleButtonProps.onKeyDown]
   );
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15(
     MenuTokenInput,
     {
       onChange: (e, value2) => {
@@ -1081,11 +1394,11 @@ var MenuSearchTokenInput = ({
 };
 
 // src/SubmenuItem/SubmenuItem.tsx
-import React12 from "react";
+import React13 from "react";
 import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
 import { Box as Box4 } from "@sproutsocial/seeds-react-box";
 import { mergeRefs as mergeRefs2 } from "@sproutsocial/seeds-react-utilities";
-import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
 var SubmenuItemTrigger = ({
   id,
   children,
@@ -1094,7 +1407,7 @@ var SubmenuItemTrigger = ({
 }) => {
   const { getToggleButtonProps, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
   const toggleRef = ref && innerRef ? mergeRefs2([ref, innerRef].filter(Boolean)) : ref || innerRef;
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx16(
     MenuItem,
     {
       ...rest,
@@ -1113,7 +1426,7 @@ var SubmenuItemTrigger = ({
       id,
       children: /* @__PURE__ */ jsxs4(Box4, { display: "flex", justifyContent: "space-between", children: [
         children,
-        /* @__PURE__ */ jsx14(MenuItemActionRight, { children: /* @__PURE__ */ jsx14(Icon2, { name: "chevron-right-outline" }) })
+        /* @__PURE__ */ jsx16(MenuItemActionRight, { children: /* @__PURE__ */ jsx16(Icon2, { name: "chevron-right-outline" }) })
       ] })
     }
   );
@@ -1143,17 +1456,17 @@ var SubmenuItem = ({
     itemsMap,
     isOpen: parentIsOpen
   } = useMenuContentContext();
-  const [submenuIsFocused, setSubmenuIsFocused] = React12.useState(false);
-  const [submenuIsOpen, setSubmenuIsOpen] = React12.useState(false);
-  const [submenuIsActive, setSubmenuIsActive] = React12.useState(false);
-  const submenuItemRef = React12.useRef(null);
-  const submenuRef = React12.useRef(null);
+  const [submenuIsFocused, setSubmenuIsFocused] = React13.useState(false);
+  const [submenuIsOpen, setSubmenuIsOpen] = React13.useState(false);
+  const [submenuIsActive, setSubmenuIsActive] = React13.useState(false);
+  const submenuItemRef = React13.useRef(null);
+  const submenuRef = React13.useRef(null);
   const menuContent = menuItems ? getChildrenFromMenuItems({ menuItems, MenuItemComponent }) : menuChildren;
   const item = itemsMap[id] || {
     index: 0,
     id
   };
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     if (highlightedIndex === item.index) {
       !submenuIsOpen && setSubmenuIsOpen(true);
     } else if (submenuIsOpen && highlightedIndex !== -1) {
@@ -1161,7 +1474,7 @@ var SubmenuItem = ({
       setSubmenuIsActive(false);
     }
   }, [highlightedIndex, item.index, submenuIsOpen, setSubmenuIsOpen]);
-  const onSubmenuStateChange = React12.useCallback(
+  const onSubmenuStateChange = React13.useCallback(
     (state) => {
       if (state.isOpen !== void 0) {
         setSubmenuIsOpen(state.isOpen);
@@ -1205,7 +1518,7 @@ var SubmenuItem = ({
       onMenuItemClick();
     }
   };
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     if (document && document.body) {
       document.body.addEventListener("click", onBodyClick, {
         capture: true
@@ -1223,7 +1536,7 @@ var SubmenuItem = ({
       };
     }
   }, [document, onSubmenuKeydown]);
-  const subMenuContent = /* @__PURE__ */ jsx14(
+  const subMenuContent = /* @__PURE__ */ jsx16(
     "div",
     {
       ref: submenuRef,
@@ -1234,13 +1547,13 @@ var SubmenuItem = ({
       children: menuContent
     }
   );
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx16(
     MenuComponent,
     {
       ...{
         ...menuProps,
         children: subMenuContent,
-        menuToggleElement: /* @__PURE__ */ jsx14(
+        menuToggleElement: /* @__PURE__ */ jsx16(
           SubmenuItemTrigger,
           {
             innerRef: submenuItemRef,
@@ -1272,10 +1585,10 @@ var SubmenuItem = ({
 SubmenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
 // src/ListboxToggleButton.tsx
-import styled7, { css } from "styled-components";
+import styled9, { css as css2 } from "styled-components";
 import { Icon as Icon3 } from "@sproutsocial/seeds-react-icon";
-import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
-var StyledListboxToggleButton = styled7(
+import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
+var StyledListboxToggleButton = styled9(
   MenuToggleButton
 )`
   background-color: ${(props) => props.theme.colors.form.background.base};
@@ -1312,22 +1625,22 @@ var StyledListboxToggleButton = styled7(
   }
 }};
 
-  ${(props) => props.invalid && css`
+  ${(props) => props.invalid && css2`
       border-color: ${(props2) => props2.theme.colors.form.border.error};
     `}
 `;
-var StyledChevron = styled7.div`
+var StyledChevron = styled9.div`
   margin-left: ${({ theme }) => theme.space[300]};
   ${({ $isOpen }) => $isOpen && `
 		transform: rotate(-180deg);
 	`}
   transition: transform 0.15s;
 
-  ${({ invalid }) => invalid && css`
+  ${({ invalid }) => invalid && css2`
       color: ${(props) => props.theme.colors.icon.error};
     `}
 `;
-var StyledInnerButton = styled7.div`
+var StyledInnerButton = styled9.div`
   display: flex;
   justify-content: space-between;
 `;
@@ -1337,7 +1650,7 @@ var ListboxToggleButton = ({
   ...buttonProps
 }) => {
   const { isOpen } = useMenuToggleContext();
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     StyledListboxToggleButton,
     {
       appearance: "unstyled",
@@ -1345,20 +1658,20 @@ var ListboxToggleButton = ({
       ...buttonProps,
       children: /* @__PURE__ */ jsxs5(StyledInnerButton, { children: [
         children,
-        /* @__PURE__ */ jsx15(StyledChevron, { $isOpen: isOpen, invalid: buttonProps.invalid, children: /* @__PURE__ */ jsx15(Icon3, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true }) })
+        /* @__PURE__ */ jsx17(StyledChevron, { $isOpen: isOpen, invalid: buttonProps.invalid, children: /* @__PURE__ */ jsx17(Icon3, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true }) })
       ] })
     }
   );
 };
 
 // src/ActionMenu/ActionMenu.tsx
-import React14, { useEffect as useEffect2 } from "react";
+import React15, { useEffect as useEffect2 } from "react";
 import {
   useSelect as useSelect2
 } from "downshift";
 
 // src/hooks/useDownshiftDefaults.tsx
-import React13 from "react";
+import React14 from "react";
 
 // src/reducers/useComboboxStateReducer.tsx
 import { useCombobox } from "downshift";
@@ -1482,12 +1795,12 @@ var useDownshiftDefaults = ({
   isMulti = false,
   multiSelectProps = {}
 } = {}) => {
-  const [hiddenItemsMap, setHiddenItemsMap] = React13.useState({});
-  const hiddenItemsCount = React13.useMemo(
+  const [hiddenItemsMap, setHiddenItemsMap] = React14.useState({});
+  const hiddenItemsCount = React14.useMemo(
     () => Object.keys(hiddenItemsMap).filter(Boolean).length,
     [hiddenItemsMap]
   );
-  const isItemDisabled = React13.useCallback(
+  const isItemDisabled = React14.useCallback(
     (item) => Boolean(item.disabled || hiddenItemsMap[item.id]),
     [hiddenItemsMap]
   );
@@ -1518,7 +1831,7 @@ var useDownshiftDefaults = ({
 };
 
 // src/ActionMenu/ActionMenu.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var handleStateChange = (changes, currentSelectedItem) => {
   if (!(changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownEnter || changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownSpaceButton)) {
     return;
@@ -1566,7 +1879,7 @@ var ActionMenu = ({
   const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
     isCombobox: false
   });
-  const [currentSelectedItem, setCurrentSelectedItem] = React14.useState(null);
+  const [currentSelectedItem, setCurrentSelectedItem] = React15.useState(null);
   const { isOpen, ...useSelectReturnProps } = useSelect2({
     ...defaultDownshiftProps.select,
     items: allMenuItems,
@@ -1581,7 +1894,7 @@ var ActionMenu = ({
   useEffect2(() => {
     setCurrentSelectedItem(useSelectReturnProps.selectedItem);
   }, [useSelectReturnProps.selectedItem]);
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx18(
     MenuRootComponent,
     {
       ...{
@@ -1602,7 +1915,7 @@ var ActionMenu = ({
 // src/SingleSelectMenu/SingleSelectMenu.tsx
 import "react";
 import { useSelect as useSelect3 } from "downshift";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var SingleSelectMenu = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
@@ -1629,7 +1942,7 @@ var SingleSelectMenu = ({
     ),
     ...useSelectProps
   });
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     MenuRootComponent,
     {
       ...{
@@ -1650,7 +1963,7 @@ var SingleSelectMenu = ({
 // src/MultiSelectMenu/MultiSelectMenu.tsx
 import "react";
 import { useSelect as useSelect4, useMultipleSelection } from "downshift";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var MultiSelectMenu = ({
   children: childrenProp,
   menuItems,
@@ -1723,7 +2036,7 @@ var MultiSelectMenu = ({
     },
     ...useSelectProps
   });
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(
     MenuRootComponent,
     {
       ...{
@@ -1756,7 +2069,7 @@ import "react";
 // src/Autocomplete/SingleAutocomplete.tsx
 import "react";
 import { useCombobox as useCombobox2 } from "downshift";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var SingleAutocomplete = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
@@ -1794,7 +2107,7 @@ var SingleAutocomplete = ({
   });
   const { isOpen, closeMenu, inputValue } = useComboboxReturnProps;
   const { popoutProps: userPopoutProps } = useComboboxProps;
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx21(
     MenuRootComponent,
     {
       ...{
@@ -1816,9 +2129,9 @@ var SingleAutocomplete = ({
 };
 
 // src/Autocomplete/MultiAutocomplete.tsx
-import React18 from "react";
+import React19 from "react";
 import { useCombobox as useCombobox3, useMultipleSelection as useMultipleSelection2 } from "downshift";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var MultiAutocomplete = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
@@ -1844,22 +2157,22 @@ var MultiAutocomplete = ({
     menuItems,
     MenuItemComponent
   });
-  const [selectedItemsState, setSelectedItemsState] = React18.useState(initialSelectedItems);
-  const selectedItems = React18.useMemo(
+  const [selectedItemsState, setSelectedItemsState] = React19.useState(initialSelectedItems);
+  const selectedItems = React19.useMemo(
     () => selectedItemsProp || selectedItemsState,
     [selectedItemsProp, selectedItemsState]
   );
-  const selectedItemIds = React18.useMemo(
+  const selectedItemIds = React19.useMemo(
     () => getSelectedItemIds(selectedItems),
     [selectedItems]
   );
-  const getIsItemVisibleMulti = React18.useCallback(
+  const getIsItemVisibleMulti = React19.useCallback(
     (item, inputValue) => {
       return (showSelectedItemsInDropdown || !selectedItemIds[item.id]) && getIsItemVisible(item, inputValue);
     },
     [selectedItemIds, showSelectedItemsInDropdown, getIsItemVisible]
   );
-  const getShouldFilterMulti = React18.useCallback(
+  const getShouldFilterMulti = React19.useCallback(
     (args) => {
       return !showSelectedItemsInDropdown && Object.keys(selectedItemIds).length > 0 || defaultGetShouldFilter(args);
     },
@@ -1884,7 +2197,7 @@ var MultiAutocomplete = ({
     getShouldFilter: getShouldFilterMulti,
     setHiddenItemsMap
   });
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     updateFilteredItems({ inputValue: "" });
   }, [selectedItemIds]);
   const useMultipleSelectionReturnProps = useMultipleSelection2({
@@ -1929,7 +2242,7 @@ var MultiAutocomplete = ({
     ...useComboboxProps
   });
   const { popoutProps: userPopoutProps } = useComboboxProps;
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx22(
     MenuRootComponent,
     {
       ...{
@@ -1958,21 +2271,21 @@ var MultiAutocomplete = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var Autocomplete = ({
   multiSelect = false,
   ...rest
 }) => {
   if (multiSelect) {
-    return /* @__PURE__ */ jsx21(MultiAutocomplete, { ...rest });
+    return /* @__PURE__ */ jsx23(MultiAutocomplete, { ...rest });
   }
-  return /* @__PURE__ */ jsx21(SingleAutocomplete, { ...rest });
+  return /* @__PURE__ */ jsx23(SingleAutocomplete, { ...rest });
 };
 
 // src/Autocomplete/AutocompleteInput.tsx
 import "react";
 import { Input as Input2 } from "@sproutsocial/seeds-react-input";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var AutocompleteInput = ({
   onKeyDown,
   onChange,
@@ -1983,7 +2296,7 @@ var AutocompleteInput = ({
   ...rest
 }) => {
   const { getInputComponentProps, inputValue, ref, ariaProps } = useMenuToggleContext();
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx24(
     Input2,
     {
       id: "autocomplete_input",
@@ -2009,7 +2322,7 @@ var AutocompleteInput = ({
 
 // src/Autocomplete/AutocompleteTokenInput.tsx
 import "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var AutocompleteTokenInput = ({
   onKeyDown,
   onChange,
@@ -2028,7 +2341,7 @@ var AutocompleteTokenInput = ({
     ref,
     ariaProps
   } = useMenuToggleContext();
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx25(
     MenuTokenInput,
     {
       id: "autocomplete_input",
@@ -2053,19 +2366,19 @@ var AutocompleteTokenInput = ({
 // src/Autocomplete/AutocompleteSelect.tsx
 import Icon4 from "@sproutsocial/seeds-react-icon";
 import "react";
-import styled8 from "styled-components";
+import styled10 from "styled-components";
 import { Accessory } from "@sproutsocial/seeds-react-input";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var StyledAutocompleteInput = styled8(AutocompleteInput)`
+import { jsx as jsx26 } from "react/jsx-runtime";
+var StyledAutocompleteInput = styled10(AutocompleteInput)`
   ${Accessory} {
     pointer-events: none;
   }
 `;
 var AutocompleteSelect = (props) => {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     StyledAutocompleteInput,
     {
-      elemAfter: /* @__PURE__ */ jsx24(Icon4, { name: "chevron-down" }),
+      elemAfter: /* @__PURE__ */ jsx26(Icon4, { name: "chevron-down" }),
       ...props
     }
   );
@@ -2102,9 +2415,9 @@ var nestedMenuStateReducer = (_state, actionAndChanges) => {
 };
 
 // src/NestedMenu/NestedMenuContext.tsx
-import { createContext, useContext as useContext4 } from "react";
+import { createContext as createContext2, useContext as useContext5 } from "react";
 import { MOTION_DURATION_FAST as MOTION_DURATION_FAST2 } from "@sproutsocial/seeds-motion/unitless";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var defaultNestedMenuContext = {
   selectedMenuPath: [],
   setSelectedMenuId: () => {
@@ -2121,17 +2434,17 @@ var defaultNestedMenuContext = {
   },
   animationSpeed: MOTION_DURATION_FAST2
 };
-var NestedMenuContext = createContext(
+var NestedMenuContext = createContext2(
   defaultNestedMenuContext
 );
 var NestedMenuProvider = ({
   children,
   ...nestedMenuProps
 }) => {
-  return /* @__PURE__ */ jsx25(NestedMenuContext.Provider, { value: nestedMenuProps, children });
+  return /* @__PURE__ */ jsx27(NestedMenuContext.Provider, { value: nestedMenuProps, children });
 };
 var useNestedMenuContext = () => {
-  const nestedMenuContextValue = useContext4(NestedMenuContext);
+  const nestedMenuContextValue = useContext5(NestedMenuContext);
   if (nestedMenuContextValue === null) {
     throw new Error(
       "useNestedMenuContext must be used within a <NestedMenuContext.Provider />"
@@ -2147,7 +2460,7 @@ import { mergeRefs as mergeRefs3 } from "@sproutsocial/seeds-react-utilities";
 // src/NestedMenu/NestedMenuItem.tsx
 import { Icon as Icon5 } from "@sproutsocial/seeds-react-icon";
 import { Box as Box5 } from "@sproutsocial/seeds-react-box";
-import { jsx as jsx26, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs6 } from "react/jsx-runtime";
 var NestedMenuItem = ({
   children,
   childMenuId,
@@ -2163,15 +2476,15 @@ var NestedMenuItem = ({
       }
     }
   } : {};
-  return /* @__PURE__ */ jsx26(MenuItem, { ...onClickProps, ...rest, children: /* @__PURE__ */ jsxs6(Box5, { display: "flex", justifyContent: "space-between", children: [
+  return /* @__PURE__ */ jsx28(MenuItem, { ...onClickProps, ...rest, children: /* @__PURE__ */ jsxs6(Box5, { display: "flex", justifyContent: "space-between", children: [
     children,
-    childMenuId && /* @__PURE__ */ jsx26(MenuItemActionRight, { children: /* @__PURE__ */ jsx26(Icon5, { name: "arrow-right-outline" }) })
+    childMenuId && /* @__PURE__ */ jsx28(MenuItemActionRight, { children: /* @__PURE__ */ jsx28(Icon5, { name: "arrow-right-outline" }) })
   ] }) });
 };
 NestedMenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
 // src/NestedMenu/NestedMenuContent.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var NestedMenuContent = ({
   innerRef: innerRefProp = null,
   onKeyDown: onKeyDownProp,
@@ -2208,7 +2521,7 @@ var NestedMenuContent = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx29(
     MenuContent,
     {
       onKeyDown,
@@ -2221,20 +2534,20 @@ var NestedMenuContent = ({
 NestedMenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 
 // src/NestedMenu/NestedMenuHeader.tsx
-import { Button } from "@sproutsocial/seeds-react-button";
+import { Button as Button2 } from "@sproutsocial/seeds-react-button";
 import { Icon as Icon6 } from "@sproutsocial/seeds-react-icon";
 import { AnimatePresence, motion } from "motion/react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var NestedMenuHeader = ({
   backArrowLabel,
   ...props
 }) => {
   const { goBack, selectedMenuPath, animationSpeed } = useNestedMenuContext();
   const showBackArrow = selectedMenuPath.length > 1;
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx30(
     MenuHeader,
     {
-      leftAction: /* @__PURE__ */ jsx28(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx28(
+      leftAction: /* @__PURE__ */ jsx30(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx30(
         motion.div,
         {
           initial: { opacity: 0 },
@@ -2243,7 +2556,7 @@ var NestedMenuHeader = ({
             opacity: 0,
             transition: { duration: animationSpeed }
           },
-          children: showBackArrow ? /* @__PURE__ */ jsx28(Button, { onClick: goBack, ariaLabel: backArrowLabel, children: /* @__PURE__ */ jsx28(Icon6, { name: "arrow-left" }) }) : void 0
+          children: showBackArrow ? /* @__PURE__ */ jsx30(Button2, { onClick: goBack, ariaLabel: backArrowLabel, children: /* @__PURE__ */ jsx30(Icon6, { name: "arrow-left" }) }) : void 0
         },
         `${selectedMenuPath}-header--button`
       ) }),
@@ -2256,8 +2569,8 @@ var NestedMenuHeader = ({
 import { MOTION_DURATION_FAST as MOTION_DURATION_FAST3 } from "@sproutsocial/seeds-motion/unitless";
 
 // src/NestedMenu/NestedMenuRoot.tsx
-import React23 from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import React24 from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var NestedMenuRoot = ({
   children,
   menuToggleElement,
@@ -2265,23 +2578,23 @@ var NestedMenuRoot = ({
 }) => {
   const menuContext = useMenu(contextProps);
   const { setActiveMenuContext, selectedMenuPath } = useNestedMenuContext();
-  React23.useEffect(() => {
+  React24.useEffect(() => {
     setActiveMenuContext(menuContext);
   }, [
     selectedMenuPath[selectedMenuPath.length - 1],
     menuContext.selectedItem,
     menuContext.selectedItems?.length
   ]);
-  return /* @__PURE__ */ jsx29(MenuContentProvider, { menuContext, children });
+  return /* @__PURE__ */ jsx31(MenuContentProvider, { menuContext, children });
 };
 
 // src/NestedMenu/NestedMenuPopout.tsx
 import "react";
 import { motion as motion2 } from "motion/react";
-import styled9 from "styled-components";
+import styled11 from "styled-components";
 import { mergeRefs as mergeRefs4 } from "@sproutsocial/seeds-react-utilities";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var StyledDiv = styled9(motion2.div)`
+import { jsx as jsx32 } from "react/jsx-runtime";
+var StyledDiv = styled11(motion2.div)`
   overflow: hidden;
 `;
 var NestedMenuPopout = ({
@@ -2294,7 +2607,7 @@ var NestedMenuPopout = ({
   ...popoutProps
 }) => {
   const { activeMenuContext, rootMenuContextProps, resetSelectedMenuPath } = useNestedMenuContext();
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx32(
     MenuPopout,
     {
       lockPlacement: true,
@@ -2309,13 +2622,13 @@ var NestedMenuPopout = ({
       openMenu: rootMenuContextProps.openMenu,
       closeMenu: rootMenuContextProps.closeMenu,
       width,
-      content: (props) => /* @__PURE__ */ jsx30(StyledDiv, { layout: "position", children: typeof content === "function" ? content(props) : content }),
+      content: (props) => /* @__PURE__ */ jsx32(StyledDiv, { layout: "position", children: typeof content === "function" ? content(props) : content }),
       focusLockProps: {
         crossFrame: false,
         ...focusLockProps
       },
       ...popoutProps,
-      children: (toggleProps) => /* @__PURE__ */ jsx30(
+      children: (toggleProps) => /* @__PURE__ */ jsx32(
         MenuToggleProvider,
         {
           menuContext: {
@@ -2335,7 +2648,7 @@ var NestedMenuPopout = ({
 };
 
 // src/NestedMenu/NestedMenu.tsx
-import { jsx as jsx31, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs7 } from "react/jsx-runtime";
 var useId = () => {
   const [id, setId] = useState();
   useEffect4(() => {
@@ -2502,7 +2815,7 @@ var NestedMenu = ({
     initialIsOpen: true,
     children: (
       // Handles the smooth animating of the content
-      /* @__PURE__ */ jsx31(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsxs7(
+      /* @__PURE__ */ jsx33(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsxs7(
         motion3.div,
         {
           variants: contentVariants,
@@ -2511,7 +2824,7 @@ var NestedMenu = ({
           exit: "leave",
           custom: { isAdding, hasLoadedOnce },
           children: [
-            MenuHeaderComponent && /* @__PURE__ */ jsx31(
+            MenuHeaderComponent && /* @__PURE__ */ jsx33(
               MenuHeaderComponent,
               {
                 backArrowLabel,
@@ -2519,7 +2832,7 @@ var NestedMenu = ({
               }
             ),
             children && children,
-            menuItems && !children && /* @__PURE__ */ jsx31(
+            menuItems && !children && /* @__PURE__ */ jsx33(
               NestedMenuContent,
               {
                 menuItems,
@@ -2536,7 +2849,7 @@ var NestedMenu = ({
   useEffect4(() => {
     popoutUpdateRef.current?.();
   }, [nestedMenuProps.children]);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     NestedMenuProvider,
     {
       ...{
@@ -2550,11 +2863,11 @@ var NestedMenu = ({
         setActiveMenuContext,
         animationSpeed
       },
-      children: /* @__PURE__ */ jsx31(
+      children: /* @__PURE__ */ jsx33(
         NestedMenuPopout,
         {
           content: MenuComponent && // Handles the rerender of the component
-          /* @__PURE__ */ jsx31(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx33(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsx33(
             motion3.div,
             {
               variants: menuVariants,
@@ -2562,7 +2875,7 @@ var NestedMenu = ({
               animate: "enter",
               exit: "leave",
               custom: { isAdding, hasLoadedOnce },
-              children: /* @__PURE__ */ jsx31(MenuComponent, { ...nestedMenuProps })
+              children: /* @__PURE__ */ jsx33(MenuComponent, { ...nestedMenuProps })
             },
             `${currentMenuId}-content`
           ) }),