@sproutsocial/seeds-react-menu 1.12.3 → 1.15.10

package/dist/v3/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/v3/index.ts
 var v3_exports = {};
 __export(v3_exports, {
+  ActionMenu: () => ActionMenu,
   ComboboxActionButtons: () => ComboboxActionButtons,
   ComboboxClear: () => ComboboxClear,
   ComboboxEmpty: () => ComboboxEmpty,
@@ -52,6 +53,12 @@ __export(v3_exports, {
   ComboboxTokenInput: () => ComboboxTokenInput,
   ComboboxTokenInputGroup: () => ComboboxTokenInputGroup,
   ComboboxTrigger: () => ComboboxTrigger,
+  MenuButton: () => MenuButton,
+  MenuGroup: () => MenuGroup,
+  MenuItem: () => MenuItem,
+  MenuRadioGroup: () => MenuRadioGroup,
+  MenuSub: () => MenuSub,
+  MenuSubTrigger: () => MenuSubTrigger,
   MultiCombobox: () => MultiCombobox,
   MultiSearchableSelect: () => MultiSearchableSelect,
   MultiSelect: () => MultiSelect,
@@ -207,20 +214,50 @@ function groupItems(data, groupBy) {
 
 // src/v3/Common/SelectStyles.tsx
 var import_select2 = require("@base-ui/react/select");
-var import_styled_components2 = __toESM(require("styled-components"));
+var import_styled_components3 = __toESM(require("styled-components"));
 var import_seeds_react_mixins = require("@sproutsocial/seeds-react-mixins");
-var Field = import_styled_components2.default.div`
+
+// src/v3/Common/SelectIcons.tsx
+var React3 = require("react");
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var StyledChevron = import_styled_components2.default.div`
   display: flex;
+  align-items: center;
+  transition: transform 0.15s;
+  ${({ $isOpen }) => $isOpen && "transform: rotate(-180deg);"}
+`;
+function ChevronIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon2.Icon, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true });
+}
+function ClearIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon2.Icon, { name: "circle-x-outline", fixedWidth: true, "aria-hidden": true, size: "mini" });
+}
+function CheckIcon2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon2.Icon, { name: "check-outline", fixedWidth: true, "aria-hidden": true });
+}
+
+// src/v3/Common/SelectStyles.tsx
+var invalidStyles = import_styled_components3.css`
+  border-color: ${({ theme }) => theme.colors.form.border.error};
+
+  ${StyledChevron} {
+    color: ${({ theme }) => theme.colors.icon.error};
+  }
+`;
+var Field = import_styled_components3.default.div`
+  display: ${({ $fullWidth }) => $fullWidth === false ? "inline-flex" : "flex"};
   flex-direction: column;
   gap: ${({ theme }) => theme.space[200]};
-  width: 100%;
+  ${({ $fullWidth }) => $fullWidth !== false && "width: 100%;"}
 `;
-var SelectLabel = (0, import_styled_components2.default)(import_select2.Select.Label)`
+var SelectLabel = (0, import_styled_components3.default)(import_select2.Select.Label)`
   font-size: ${({ theme }) => theme.typography[200].fontSize};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
   color: ${({ theme }) => theme.colors.text.body};
 `;
-var SelectTrigger = (0, import_styled_components2.default)(import_select2.Select.Trigger)`
+var SelectTrigger = (0, import_styled_components3.default)(import_select2.Select.Trigger)`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -255,21 +292,23 @@ var SelectTrigger = (0, import_styled_components2.default)(import_select2.Select
     opacity: 0.4;
     cursor: not-allowed;
   }
+
+  ${({ $isInvalid }) => $isInvalid && invalidStyles}
 `;
-var SelectValue = (0, import_styled_components2.default)(import_select2.Select.Value)`
+var SelectValue = (0, import_styled_components3.default)(import_select2.Select.Value)`
   min-width: 0;
   overflow: hidden;
 `;
-var SelectIcon = (0, import_styled_components2.default)(import_select2.Select.Icon)`
+var SelectIcon = (0, import_styled_components3.default)(import_select2.Select.Icon)`
   display: flex;
   align-items: center;
   color: ${({ theme }) => theme.colors.icon.base};
   flex-shrink: 0;
 `;
-var SelectGroup = (0, import_styled_components2.default)(import_select2.Select.Group)`
+var SelectGroup = (0, import_styled_components3.default)(import_select2.Select.Group)`
   display: block;
 `;
-var SelectGroupLabel = (0, import_styled_components2.default)(import_select2.Select.GroupLabel)`
+var SelectGroupLabel = (0, import_styled_components3.default)(import_select2.Select.GroupLabel)`
   padding: ${({ theme }) => `${theme.space[300]} ${theme.space[300]} ${theme.space[200]}`};
   font-size: ${({ theme }) => theme.typography[100].fontSize};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
@@ -277,23 +316,23 @@ var SelectGroupLabel = (0, import_styled_components2.default)(import_select2.Sel
   letter-spacing: 0.05em;
   color: ${({ theme }) => theme.colors.text.subtext};
 `;
-var SelectSeparator = (0, import_styled_components2.default)(import_select2.Select.Separator)`
+var SelectSeparator = (0, import_styled_components3.default)(import_select2.Select.Separator)`
   height: 1px;
   margin: ${({ theme }) => `${theme.space[200]} ${theme.space[300]}`};
   background: ${({ theme }) => theme.colors.container.border.base};
 `;
-var SelectPositioner = (0, import_styled_components2.default)(import_select2.Select.Positioner)`
+var SelectPositioner = (0, import_styled_components3.default)(import_select2.Select.Positioner)`
   width: var(--anchor-width);
   z-index: 7;
 `;
-var SelectPopup = (0, import_styled_components2.default)(import_select2.Select.Popup)`
+var SelectPopup = (0, import_styled_components3.default)(import_select2.Select.Popup)`
   font-family: ${({ theme }) => theme.fontFamily};
   background: ${({ theme }) => theme.colors.container.background.base};
   border: 1px solid ${({ theme }) => theme.colors.container.border.base};
   border-radius: ${({ theme }) => theme.radii[500]};
   box-shadow: ${({ theme }) => theme.shadows.low};
   outline: none;
-  max-height: min(var(--base-ui-available-height, 400px), 400px);
+  max-height: min(var(--available-height, 400px), 400px);
   overflow-y: auto;
   padding: ${({ theme }) => theme.space[200]};
 
@@ -328,27 +367,6 @@ var SelectPopup = (0, import_styled_components2.default)(import_select2.Select.P
   }
 `;
 
-// src/v3/Common/SelectIcons.tsx
-var React3 = require("react");
-var import_styled_components3 = __toESM(require("styled-components"));
-var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var StyledChevron = import_styled_components3.default.div`
-  display: flex;
-  align-items: center;
-  transition: transform 0.15s;
-  ${({ $isOpen }) => $isOpen && "transform: rotate(-180deg);"}
-`;
-function ChevronIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon2.Icon, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true });
-}
-function ClearIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon2.Icon, { name: "circle-x-outline", fixedWidth: true, "aria-hidden": true, size: "mini" });
-}
-function CheckIcon2() {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon2.Icon, { name: "check-outline", fixedWidth: true, "aria-hidden": true });
-}
-
 // src/v3/SingleSelect.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var StyledValue = (0, import_styled_components4.default)(import_select3.Select.Value)`
@@ -363,8 +381,9 @@ var StyledValue = (0, import_styled_components4.default)(import_select3.Select.V
   }
 `;
 function SingleSelect(props) {
-  const { id, placeholder, includePlaceholderItem } = props;
+  const { id, placeholder, includePlaceholderItem, fullWidth = true } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const selectedItemId = props.selectedItemId;
   const defaultSelectedItemId = props.defaultSelectedItemId;
@@ -411,7 +430,7 @@ function SingleSelect(props) {
       }
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Field, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Field, { $fullWidth: fullWidth, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       import_select3.Select.Root,
@@ -422,10 +441,19 @@ function SingleSelect(props) {
         onValueChange: handleValueChange,
         id,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectTrigger, { "aria-describedby": ariaDescribedBy, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledValue, { placeholder, children: renderSelection && selectedItem ? renderSelection(selectedItem) : void 0 }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronIcon, {}) }) })
-          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            SelectTrigger,
+            {
+              "aria-describedby": ariaDescribedBy,
+              "aria-invalid": isInvalid || void 0,
+              "aria-required": props.required || void 0,
+              $isInvalid: isInvalid,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledValue, { placeholder, children: renderSelection && selectedItem ? renderSelection(selectedItem) : void 0 }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronIcon, {}) }) })
+              ]
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select3.Select.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectPositioner, { sideOffset: 8, alignItemWithTrigger: false, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectPopup, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select3.Select.ScrollUpArrow, {}),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select3.Select.List, { children: children ? children : groupBy ? groupItems(data, groupBy).map((group, index, arr) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(React4.Fragment, { children: [
@@ -493,8 +521,9 @@ var Placeholder = import_styled_components5.default.div`
   margin: 2px 8px 0px 0px;
 `;
 function MultiSelect(props) {
-  const { id, placeholder = "Select..." } = props;
+  const { id, placeholder = "Select...", fullWidth = true } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
   const itemToString = isChildrenMode ? () => "" : props.itemToString;
@@ -539,7 +568,7 @@ function MultiSelect(props) {
       onSelectedItemIdsChange(ids);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Field, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Field, { $fullWidth: fullWidth, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       import_select4.Select.Root,
@@ -551,23 +580,32 @@ function MultiSelect(props) {
         disabled: props.disabled,
         id,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectTrigger, { "aria-describedby": ariaDescribedBy, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectValue, { children: () => {
-              if (renderSelection) return renderSelection(selectedItems);
-              if (selectedItems.length === 0)
-                return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Placeholder, { children: placeholder });
-              const visibleItems = maxSelections != null ? selectedItems.slice(0, maxSelections) : selectedItems;
-              const overflowCount = maxSelections != null && selectedItems.length > maxSelections ? selectedItems.length - maxSelections : 0;
-              const text = visibleItems.map(
-                (item) => customRenderSelections ? customRenderSelections(item) : itemToString(item)
-              ).join(", ");
-              return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectionText, { children: [
-                text,
-                overflowCount > 0 ? `, +${overflowCount}` : ""
-              ] });
-            } }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronIcon, {}) }) })
-          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            SelectTrigger,
+            {
+              "aria-describedby": ariaDescribedBy,
+              "aria-invalid": isInvalid || void 0,
+              "aria-required": props.required || void 0,
+              $isInvalid: isInvalid,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectValue, { children: () => {
+                  if (renderSelection) return renderSelection(selectedItems);
+                  if (selectedItems.length === 0)
+                    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Placeholder, { children: placeholder });
+                  const visibleItems = maxSelections != null ? selectedItems.slice(0, maxSelections) : selectedItems;
+                  const overflowCount = maxSelections != null && selectedItems.length > maxSelections ? selectedItems.length - maxSelections : 0;
+                  const text = visibleItems.map(
+                    (item) => customRenderSelections ? customRenderSelections(item) : itemToString(item)
+                  ).join(", ");
+                  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectionText, { children: [
+                    text,
+                    overflowCount > 0 ? `, +${overflowCount}` : ""
+                  ] });
+                } }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronIcon, {}) }) })
+              ]
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_select4.Select.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectPositioner, { sideOffset: 8, alignItemWithTrigger: false, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectPopup, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_select4.Select.ScrollUpArrow, {}),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_select4.Select.List, { children: children ? children : groupBy ? groupItems(data, groupBy).map((group, index, arr) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(React5.Fragment, { children: [
@@ -608,12 +646,25 @@ function MultiSelect(props) {
 }
 
 // src/v3/SingleCombobox.tsx
-var React8 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var import_combobox3 = require("@base-ui/react/combobox");
 var import_react_virtual2 = require("@tanstack/react-virtual");
 
-// src/v3/Common/ComboboxItem.tsx
+// src/v3/Common/useSuppressEscapeClear.ts
 var React6 = __toESM(require("react"));
+function useSuppressEscapeClear(open) {
+  return React6.useCallback(
+    (event) => {
+      if (event.key === "Escape" && !open) {
+        event.stopPropagation();
+      }
+    },
+    [open]
+  );
+}
+
+// src/v3/Common/ComboboxItem.tsx
+var React7 = __toESM(require("react"));
 var import_seeds_react_radio2 = __toESM(require("@sproutsocial/seeds-react-radio"));
 var import_seeds_react_checkbox3 = __toESM(require("@sproutsocial/seeds-react-checkbox"));
 
@@ -623,6 +674,13 @@ var import_styled_components6 = __toESM(require("styled-components"));
 var import_seeds_react_mixins2 = require("@sproutsocial/seeds-react-mixins");
 var import_seeds_react_checkbox2 = __toESM(require("@sproutsocial/seeds-react-checkbox"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var invalidStyles2 = import_styled_components6.css`
+  border-color: ${({ theme }) => theme.colors.form.border.error};
+
+  ${StyledChevron} {
+    color: ${({ theme }) => theme.colors.icon.error};
+  }
+`;
 var ComboboxLabel = import_styled_components6.default.label`
   font-size: ${({ theme }) => theme.typography[200].fontSize};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
@@ -649,6 +707,8 @@ var ComboboxInputGroup = (0, import_styled_components6.default)(import_combobox.
     opacity: 0.4;
     cursor: not-allowed;
   }
+
+  ${({ $isInvalid }) => $isInvalid && invalidStyles2}
 `;
 var ComboboxInput = (0, import_styled_components6.default)(import_combobox.Combobox.Input)`
   flex: 1;
@@ -696,7 +756,7 @@ var ComboboxActionButtons = import_styled_components6.default.div`
   margin-left: auto;
   gap: ${({ theme }) => theme.space[100]};
 `;
-var ComboboxClear = (0, import_styled_components6.default)(import_combobox.Combobox.Clear)`
+var ComboboxClear = (0, import_styled_components6.default)(import_combobox.Combobox.Clear).attrs({ tabIndex: 0 })`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -713,6 +773,10 @@ var ComboboxClear = (0, import_styled_components6.default)(import_combobox.Combo
     color: ${({ theme }) => theme.colors.text.body};
   }
 
+  &:focus-visible {
+    ${import_seeds_react_mixins2.focusRing}
+  }
+
   &[data-empty] {
     display: none;
   }
@@ -745,7 +809,7 @@ var ComboboxPopup = (0, import_styled_components6.default)(import_combobox.Combo
   box-shadow: ${({ theme }) => theme.shadows.medium};
   outline: none;
   width: 100%;
-  max-height: min(var(--base-ui-available-height, 400px), 400px);
+  max-height: min(var(--available-height, 400px), 400px);
   overflow-y: auto;
   padding: 0;
 
@@ -912,6 +976,7 @@ var ComboboxToken = (0, import_styled_components6.default)(import_combobox.Combo
   display: flex;
   width: 100%;
   flex-wrap: wrap;
+  gap: ${({ theme }) => theme.space[200]};
 `;
 var ComboboxTokenInputGroup = (0, import_styled_components6.default)(import_combobox.Combobox.InputGroup)`
   display: flex;
@@ -936,6 +1001,8 @@ var ComboboxTokenInputGroup = (0, import_styled_components6.default)(import_comb
     opacity: 0.4;
     cursor: not-allowed;
   }
+
+  ${({ $isInvalid }) => $isInvalid && invalidStyles2}
 `;
 var Token = import_styled_components6.default.span`
   display: inline-flex;
@@ -968,6 +1035,10 @@ var TokenRemove = import_styled_components6.default.button`
   cursor: pointer;
   padding: 0;
   line-height: 1;
+
+  &:focus-visible {
+    ${import_seeds_react_mixins2.focusRing}
+  }
 `;
 var SearchableSelectTrigger = (0, import_styled_components6.default)(import_combobox.Combobox.Trigger)`
   display: flex;
@@ -1001,6 +1072,8 @@ var SearchableSelectTrigger = (0, import_styled_components6.default)(import_comb
     opacity: 0.4;
     cursor: not-allowed;
   }
+
+  ${({ $isInvalid }) => $isInvalid && invalidStyles2}
 `;
 var SearchableSelectTriggerIcon = (0, import_styled_components6.default)(import_combobox.Combobox.Icon)`
   display: flex;
@@ -1083,6 +1156,8 @@ var SearchableSelectTokenTrigger = (0, import_styled_components6.default)(import
     opacity: 0.4;
     cursor: not-allowed;
   }
+
+  ${({ $isInvalid }) => $isInvalid && invalidStyles2}
 `;
 
 // src/v3/Common/ComboboxItem.tsx
@@ -1147,11 +1222,11 @@ function ComboboxItemInner({
     }
   );
 }
-var ComboboxItem2 = React6.forwardRef(ComboboxItemInner);
+var ComboboxItem2 = React7.forwardRef(ComboboxItemInner);
 var ComboboxItem_default = ComboboxItem2;
 
 // src/v3/Common/VirtualizedComboboxList.tsx
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var import_combobox2 = require("@base-ui/react/combobox");
 var import_react_virtual = require("@tanstack/react-virtual");
 
@@ -1191,7 +1266,7 @@ function VirtualizedComboboxList({
   renderCreatableItem
 }) {
   const filteredItems = import_combobox2.Combobox.useFilteredItems();
-  const scrollElementRef = React7.useRef(null);
+  const scrollElementRef = React8.useRef(null);
   const virtualizer = (0, import_react_virtual.useVirtualizer)({
     enabled: open,
     count: filteredItems.length,
@@ -1203,8 +1278,8 @@ function VirtualizedComboboxList({
     scrollPaddingStart: 4,
     scrollPaddingEnd: 4
   });
-  React7.useImperativeHandle(virtualizerRef, () => virtualizer);
-  const handleScrollRef = React7.useCallback(
+  React8.useImperativeHandle(virtualizerRef, () => virtualizer);
+  const handleScrollRef = React8.useCallback(
     (el) => {
       scrollElementRef.current = el;
       if (el) requestAnimationFrame(() => virtualizer.measure());
@@ -1348,9 +1423,11 @@ function SingleCombobox(props) {
     id,
     placeholder = "Search...",
     emptyText = "No results found.",
-    filter
+    filter,
+    fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
   const itemToString = isChildrenMode ? (_item) => "" : props.itemToString;
@@ -1364,17 +1441,18 @@ function SingleCombobox(props) {
   const defaultSelectedItemId = props.defaultSelectedItemId;
   const onSelectedItemIdChange = props.onSelectedItemIdChange;
   const { containerRef, portalContainer } = useSeedsPortalContainer();
-  const [open, setOpen] = React8.useState(false);
-  const virtualizerRef = React8.useRef(null);
+  const [open, setOpen] = React9.useState(false);
+  const virtualizerRef = React9.useRef(null);
+  const onInputKeyDownCapture = useSuppressEscapeClear(open);
   const isControlled = selectedItemId !== void 0;
-  const idToItem = React8.useCallback(
+  const idToItem = React9.useCallback(
     (id2) => {
       if (id2 == null) return null;
       return data.find((d) => String(d.id) === String(id2)) ?? null;
     },
     [data]
   );
-  const [internalValue, setInternalValue] = React8.useState(
+  const [internalValue, setInternalValue] = React9.useState(
     () => idToItem(defaultSelectedItemId)
   );
   const value = isControlled ? idToItem(selectedItemId) : internalValue;
@@ -1386,11 +1464,11 @@ function SingleCombobox(props) {
       onSelectedItemIdChange(newItem ? newItem.id : null);
     }
   }
-  const groups = React8.useMemo(
+  const groups = React9.useMemo(
     () => groupBy ? groupItems(data, groupBy) : null,
     [data, groupBy]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Field, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Field, { $fullWidth: fullWidth, children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       import_combobox3.Combobox.Root,
@@ -1411,29 +1489,38 @@ function SingleCombobox(props) {
           if (!item || !virt) return;
           const isStart = index === 0;
           const isEnd = index === virt.options.count - 1;
-          if (reason === "none" || reason === "keyboard" && (isStart || isEnd)) {
+          if (reason === "keyboard" && (isStart || isEnd)) {
             queueMicrotask(() => {
               virt.scrollToIndex(index, {
-                align: isEnd ? "start" : "end"
+                align: isStart ? "start" : "end"
               });
             });
           }
         } : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ComboboxInputGroup, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              ComboboxInput,
-              {
-                placeholder,
-                id,
-                "aria-describedby": ariaDescribedBy
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ComboboxActionButtons, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComboboxClear, { "aria-label": "Clear selection", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ClearIcon, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComboboxTrigger, { "aria-label": "Open popup", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledChevron, { $isOpen: open, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronIcon, {}) }) })
-            ] })
-          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            ComboboxInputGroup,
+            {
+              $isInvalid: isInvalid,
+              onKeyDownCapture: onInputKeyDownCapture,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  ComboboxInput,
+                  {
+                    placeholder,
+                    id,
+                    "aria-describedby": ariaDescribedBy,
+                    "aria-invalid": isInvalid || void 0,
+                    "aria-required": props.required || void 0
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ComboboxActionButtons, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComboboxClear, { "aria-label": "Clear selection", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ClearIcon, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComboboxTrigger, { "aria-label": "Open popup", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledChevron, { $isOpen: open, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronIcon, {}) }) })
+                ] })
+              ]
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_combobox3.Combobox.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             ComboboxPopup,
             {
@@ -1463,7 +1550,7 @@ function SingleCombobox(props) {
                         renderItem,
                         renderGroupHeading
                       }
-                    ) : children ? children : groups ? (group, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(React8.Fragment, { children: [
+                    ) : children ? children : groups ? ((group, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(React9.Fragment, { children: [
                       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ComboboxGroup, { items: group.items, children: [
                         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
                         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_combobox3.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -1480,7 +1567,7 @@ function SingleCombobox(props) {
                         ) })
                       ] }),
                       index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComboboxSeparator, {})
-                    ] }, group.value) : (item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    ] }, group.value)) : ((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       ComboboxItem_default,
                       {
                         value: item,
@@ -1491,7 +1578,7 @@ function SingleCombobox(props) {
                         renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
                       },
                       item.id
-                    )
+                    ))
                   }
                 )
               ]
@@ -1504,7 +1591,7 @@ function SingleCombobox(props) {
 }
 
 // src/v3/MultiCombobox.tsx
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_combobox4 = require("@base-ui/react/combobox");
 var import_react_virtual3 = require("@tanstack/react-virtual");
 var import_seeds_react_icon3 = __toESM(require("@sproutsocial/seeds-react-icon"));
@@ -1528,9 +1615,11 @@ function MultiCombobox(props) {
     loadingText = "Loading...",
     filter,
     inputValue,
-    onInputValueChange
+    onInputValueChange,
+    fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
   const itemToString = isChildrenMode ? (_item) => "" : props.itemToString;
@@ -1554,29 +1643,31 @@ function MultiCombobox(props) {
   const defaultSelectedItemIds = props.defaultSelectedItemIds;
   const onSelectedItemIdsChange = props.onSelectedItemIdsChange;
   const { containerRef, portalContainer } = useSeedsPortalContainer();
-  const [open, setOpen] = React9.useState(false);
-  const [internalInputValue, setInternalInputValue] = React9.useState("");
-  const skipNextInputChangeRef = React9.useRef(false);
-  const virtualizerRef = React9.useRef(null);
+  const [open, setOpen] = React10.useState(false);
+  const [internalInputValue, setInternalInputValue] = React10.useState("");
+  const skipNextInputChangeRef = React10.useRef(false);
+  const virtualizerRef = React10.useRef(null);
+  const inputRef = React10.useRef(null);
+  const onInputKeyDownCapture = useSuppressEscapeClear(open);
   const isControlled = selectedItemIds !== void 0;
-  const idsToItems = React9.useCallback(
+  const idsToItems = React10.useCallback(
     (ids) => ids.map((id2) => data.find((d) => d.id === id2)).filter((d) => d != null),
     [data]
   );
-  const [internalValue, setInternalValue] = React9.useState(
+  const [internalValue, setInternalValue] = React10.useState(
     () => defaultSelectedItemIds ? idsToItems(defaultSelectedItemIds) : []
   );
   const value = isControlled ? idsToItems(selectedItemIds) : internalValue;
-  const visibleData = React9.useMemo(
+  const visibleData = React10.useMemo(
     () => removeSelectedItems ? data.filter((item) => !value.some((v) => v.id === item.id)) : data,
     [data, value, removeSelectedItems]
   );
-  const groups = React9.useMemo(
+  const groups = React10.useMemo(
     () => groupBy ? groupItems(visibleData, groupBy) : null,
     [visibleData, groupBy]
   );
   const currentInputValue = inputValue ?? internalInputValue;
-  const creatableSentinel = React9.useMemo(() => {
+  const creatableSentinel = React10.useMemo(() => {
     if (!creatableProp) return null;
     const trimmed = currentInputValue.trim();
     if (!trimmed) return null;
@@ -1587,7 +1678,7 @@ function MultiCombobox(props) {
     if (exactExists) return null;
     return makeCreatableSentinel(trimmed);
   }, [creatableProp, currentInputValue, data, itemToString]);
-  const flatItems = React9.useMemo(() => {
+  const flatItems = React10.useMemo(() => {
     if (!selectHeadings && !selectAll) return null;
     if (!groups && !selectAll) return null;
     const rows = [];
@@ -1673,6 +1764,7 @@ function MultiCombobox(props) {
     e.preventDefault();
     e.stopPropagation();
     setSelectedItems(value.filter((v) => v.id !== item.id));
+    inputRef.current?.focus();
   }
   function renderSentinelRow(row) {
     if (isSelectAllSentinel2(row)) {
@@ -1743,7 +1835,7 @@ function MultiCombobox(props) {
   const rootItems = creatableSentinel && Array.isArray(baseItems) ? [...baseItems, creatableSentinel] : baseItems;
   const hasSentinels = selectAll || selectHeadings;
   const rootValue = hasSentinels ? [...value] : value;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Field, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Field, { $fullWidth: fullWidth, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       import_combobox4.Combobox.Root,
@@ -1754,7 +1846,10 @@ function MultiCombobox(props) {
         open,
         disabled: props.disabled,
         onOpenChange: (nextOpen, eventDetails) => {
-          if (!nextOpen && eventDetails.reason === "item-press") return;
+          if (!nextOpen && eventDetails.reason === "item-press") {
+            eventDetails.cancel();
+            return;
+          }
           setOpen(nextOpen);
         },
         filter: creatableProp ? (item, query) => {
@@ -1787,10 +1882,10 @@ function MultiCombobox(props) {
           if (!item || !virt) return;
           const isStart = index === 0;
           const isEnd = index === virt.options.count - 1;
-          if (reason === "none" || reason === "keyboard" && (isStart || isEnd)) {
+          if (reason === "keyboard" && (isStart || isEnd)) {
             queueMicrotask(() => {
               virt.scrollToIndex(index, {
-                align: isEnd ? "start" : "end"
+                align: isStart ? "start" : "end"
               });
             });
           }
@@ -1817,42 +1912,52 @@ function MultiCombobox(props) {
         },
         items: rootItems,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxTokenInputGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ComboboxToken, { children: [
-            renderSelection ? renderSelection(value) : (() => {
-              const visibleTokens = maxTokens != null ? value.slice(0, maxTokens) : value;
-              const overflow = maxTokens != null ? value.length - maxTokens : 0;
-              return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-                visibleTokens.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Token, { children: [
-                  renderToken ? renderToken(item) : itemToString(item),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                    TokenRemove,
-                    {
-                      "aria-label": `Remove ${itemToString(item)}`,
-                      onPointerDown: (e) => e.preventDefault(),
-                      onClick: (e) => removeItem(item, e),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_seeds_react_icon3.default, { name: "x-outline", size: "mini" })
-                    }
-                  )
-                ] }, item.id)),
-                overflow > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Token, { children: [
-                  "+",
-                  overflow
-                ] }, "__overflow")
-              ] });
-            })(),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              ComboboxTokenInput,
-              {
-                id,
-                placeholder: value.length > 0 ? "" : placeholder,
-                "aria-describedby": ariaDescribedBy
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ComboboxActionButtons, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxClear, { "aria-label": "Clear all", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ClearIcon, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxTrigger, { "aria-label": "Open popup", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledChevron, { $isOpen: open, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChevronIcon, {}) }) })
-            ] })
-          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            ComboboxTokenInputGroup,
+            {
+              $isInvalid: isInvalid,
+              onKeyDownCapture: onInputKeyDownCapture,
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ComboboxToken, { children: [
+                renderSelection ? renderSelection(value) : (() => {
+                  const visibleTokens = maxTokens != null ? value.slice(0, maxTokens) : value;
+                  const overflow = maxTokens != null ? value.length - maxTokens : 0;
+                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+                    visibleTokens.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Token, { children: [
+                      renderToken ? renderToken(item) : itemToString(item),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        TokenRemove,
+                        {
+                          "aria-label": `Remove ${itemToString(item)}`,
+                          onPointerDown: (e) => e.preventDefault(),
+                          onClick: (e) => removeItem(item, e),
+                          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_seeds_react_icon3.default, { name: "x-outline", size: "mini" })
+                        }
+                      )
+                    ] }, item.id)),
+                    overflow > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Token, { children: [
+                      "+",
+                      overflow
+                    ] }, "__overflow")
+                  ] });
+                })(),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  ComboboxTokenInput,
+                  {
+                    ref: inputRef,
+                    id,
+                    placeholder: value.length > 0 ? "" : placeholder,
+                    "aria-describedby": ariaDescribedBy,
+                    "aria-invalid": isInvalid || void 0,
+                    "aria-required": props.required || void 0
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ComboboxActionButtons, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxClear, { "aria-label": "Clear all", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ClearIcon, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxTrigger, { "aria-label": "Open popup", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledChevron, { $isOpen: open, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChevronIcon, {}) }) })
+                ] })
+              ] })
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_combobox4.Combobox.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             ComboboxPopup,
             {
@@ -1890,12 +1995,12 @@ function MultiCombobox(props) {
                           measureRef
                         ) : void 0
                       }
-                    ) : children ? children : flatItems ? (row) => renderSentinelRow(row) : groups ? (group, index) => {
+                    ) : children ? children : flatItems ? ((row) => renderSentinelRow(row)) : groups ? ((group, index) => {
                       if (isCreatableSentinel(group)) {
                         return renderCreatableItem(group);
                       }
                       const g = group;
-                      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(React9.Fragment, { children: [
+                      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(React10.Fragment, { children: [
                         /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ComboboxGroup, { items: g.items, children: [
                           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(g.value) : g.value }),
                           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_combobox4.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -1913,7 +2018,7 @@ function MultiCombobox(props) {
                         ] }),
                         index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxSeparator, {})
                       ] }, g.value);
-                    } : (item) => {
+                    }) : ((item) => {
                       if (isCreatableSentinel(item)) {
                         return renderCreatableItem(item);
                       }
@@ -1930,7 +2035,7 @@ function MultiCombobox(props) {
                         },
                         dataItem.id
                       );
-                    }
+                    })
                   }
                 )
               ]
@@ -1943,7 +2048,7 @@ function MultiCombobox(props) {
 }
 
 // src/v3/SingleSearchableSelect.tsx
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_combobox5 = require("@base-ui/react/combobox");
 var import_react_virtual4 = require("@tanstack/react-virtual");
 var import_jsx_runtime10 = require("react/jsx-runtime");
@@ -1956,9 +2061,11 @@ function SingleSearchableSelect(props) {
     emptyText = "No results found.",
     isLoading = false,
     loadingText = "Loading...",
-    filter
+    filter,
+    fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
   const itemToString = isChildrenMode ? (_item) => "" : props.itemToString;
@@ -1973,17 +2080,17 @@ function SingleSearchableSelect(props) {
   const defaultSelectedItemId = props.defaultSelectedItemId;
   const onSelectedItemIdChange = props.onSelectedItemIdChange;
   const { containerRef, portalContainer } = useSeedsPortalContainer();
-  const [open, setOpen] = React10.useState(false);
-  const virtualizerRef = React10.useRef(null);
+  const [open, setOpen] = React11.useState(false);
+  const virtualizerRef = React11.useRef(null);
   const isControlled = selectedItemId !== void 0;
-  const idToItem = React10.useCallback(
+  const idToItem = React11.useCallback(
     (id2) => {
       if (id2 == null) return null;
       return data.find((d) => String(d.id) === String(id2)) ?? null;
     },
     [data]
   );
-  const [internalValue, setInternalValue] = React10.useState(
+  const [internalValue, setInternalValue] = React11.useState(
     () => idToItem(defaultSelectedItemId)
   );
   const value = isControlled ? idToItem(selectedItemId) : internalValue;
@@ -1994,11 +2101,11 @@ function SingleSearchableSelect(props) {
       onSelectedItemIdChange(realItem ? realItem.id : null);
     }
   }
-  const groups = React10.useMemo(
+  const groups = React11.useMemo(
     () => groupBy ? groupItems(data, groupBy) : null,
     [data, groupBy]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Field, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Field, { $fullWidth: fullWidth, children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       import_combobox5.Combobox.Root,
@@ -2024,19 +2131,29 @@ function SingleSearchableSelect(props) {
           if (!item || !virt) return;
           const isStart = index === 0;
           const isEnd = index === virt.options.count - 1;
-          if (reason === "none" || reason === "keyboard" && (isStart || isEnd)) {
+          if (reason === "keyboard" && (isStart || isEnd)) {
             queueMicrotask(() => {
               virt.scrollToIndex(index, {
-                align: isEnd ? "start" : "end"
+                align: isStart ? "start" : "end"
               });
             });
           }
         } : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SearchableSelectTrigger, { id, "aria-describedby": ariaDescribedBy, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SearchableSelectPlaceholder, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_combobox5.Combobox.Value, { placeholder, children: value ? renderSelection ? renderSelection(value) : itemToString(value) : placeholder }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SearchableSelectTriggerIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChevronIcon, {}) }) })
-          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            SearchableSelectTrigger,
+            {
+              id,
+              "aria-describedby": ariaDescribedBy,
+              "aria-invalid": isInvalid || void 0,
+              "aria-required": props.required || void 0,
+              $isInvalid: isInvalid,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SearchableSelectPlaceholder, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_combobox5.Combobox.Value, { placeholder, children: value ? renderSelection ? renderSelection(value) : itemToString(value) : placeholder }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SearchableSelectTriggerIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChevronIcon, {}) }) })
+              ]
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_combobox5.Combobox.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
             SearchableSelectPopup,
             {
@@ -2074,7 +2191,7 @@ function SingleSearchableSelect(props) {
                         inputType,
                         renderItem
                       }
-                    ) : children ? children : groups ? (group, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(React10.Fragment, { children: [
+                    ) : children ? children : groups ? ((group, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(React11.Fragment, { children: [
                       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ComboboxGroup, { items: group.items, children: [
                         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
                         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_combobox5.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -2091,7 +2208,7 @@ function SingleSearchableSelect(props) {
                         ) })
                       ] }),
                       index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxSeparator, {})
-                    ] }, group.value) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                    ] }, group.value)) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
                       includePlaceholderItem && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         ComboboxItem_default,
                         {
@@ -2127,7 +2244,7 @@ function SingleSearchableSelect(props) {
 }
 
 // src/v3/MultiSearchableSelect.tsx
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 var import_combobox6 = require("@base-ui/react/combobox");
 var import_react_virtual5 = require("@tanstack/react-virtual");
 var import_seeds_react_icon4 = __toESM(require("@sproutsocial/seeds-react-icon"));
@@ -2157,9 +2274,11 @@ function MultiSearchableSelect(props) {
     emptyText = "No results found.",
     isLoading = false,
     loadingText = "Loading...",
-    filter
+    filter,
+    fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
   const itemToString = isChildrenMode ? (_item) => "" : props.itemToString;
@@ -2181,29 +2300,29 @@ function MultiSearchableSelect(props) {
   const defaultSelectedItemIds = props.defaultSelectedItemIds;
   const onSelectedItemIdsChange = props.onSelectedItemIdsChange;
   const { containerRef, portalContainer } = useSeedsPortalContainer();
-  const [open, setOpen] = React11.useState(false);
-  const [internalInputValue, setInternalInputValue] = React11.useState("");
-  const skipNextInputChangeRef = React11.useRef(false);
-  const virtualizerRef = React11.useRef(null);
+  const [open, setOpen] = React12.useState(false);
+  const [internalInputValue, setInternalInputValue] = React12.useState("");
+  const skipNextInputChangeRef = React12.useRef(false);
+  const virtualizerRef = React12.useRef(null);
   const isControlled = selectedItemIds !== void 0;
-  const idsToItems = React11.useCallback(
+  const idsToItems = React12.useCallback(
     (ids) => ids.map((id2) => data.find((d) => d.id === id2)).filter((d) => d != null),
     [data]
   );
-  const [internalValue, setInternalValue] = React11.useState(
+  const [internalValue, setInternalValue] = React12.useState(
     () => defaultSelectedItemIds ? idsToItems(defaultSelectedItemIds) : []
   );
   const value = isControlled ? idsToItems(selectedItemIds) : internalValue;
-  const visibleData = React11.useMemo(
+  const visibleData = React12.useMemo(
     () => removeSelectedItems ? data.filter((item) => !value.some((v) => v.id === item.id)) : data,
     [data, value, removeSelectedItems]
   );
-  const groups = React11.useMemo(
+  const groups = React12.useMemo(
     () => groupBy ? groupItems(visibleData, groupBy) : null,
     [visibleData, groupBy]
   );
   const currentInputValue = internalInputValue;
-  const creatableSentinel = React11.useMemo(() => {
+  const creatableSentinel = React12.useMemo(() => {
     if (!creatableProp) return null;
     const trimmed = currentInputValue.trim();
     if (!trimmed) return null;
@@ -2214,7 +2333,7 @@ function MultiSearchableSelect(props) {
     if (exactExists) return null;
     return makeCreatableSentinel(trimmed);
   }, [creatableProp, currentInputValue, data, itemToString]);
-  const flatItems = React11.useMemo(() => {
+  const flatItems = React12.useMemo(() => {
     if (!groups || !selectHeadings && !selectAll) return null;
     const rows = [];
     if (selectAll) rows.push(SELECT_ALL_SENTINEL2);
@@ -2358,7 +2477,7 @@ function MultiSearchableSelect(props) {
   const rootItems = creatableSentinel && Array.isArray(baseItems) ? [...baseItems, creatableSentinel] : baseItems;
   const hasSentinels = selectAll || selectHeadings;
   const rootValue = hasSentinels ? [...value] : value;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Field, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Field, { $fullWidth: fullWidth, children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       import_combobox6.Combobox.Root,
@@ -2391,10 +2510,10 @@ function MultiSearchableSelect(props) {
           if (!item || !virt) return;
           const isStart = index === 0;
           const isEnd = index === virt.options.count - 1;
-          if (reason === "none" || reason === "keyboard" && (isStart || isEnd)) {
+          if (reason === "keyboard" && (isStart || isEnd)) {
             queueMicrotask(() => {
               virt.scrollToIndex(index, {
-                align: isEnd ? "start" : "end"
+                align: isStart ? "start" : "end"
               });
             });
           }
@@ -2426,6 +2545,9 @@ function MultiSearchableSelect(props) {
             {
               id,
               "aria-describedby": ariaDescribedBy,
+              "aria-invalid": isInvalid || void 0,
+              "aria-required": props.required || void 0,
+              $isInvalid: isInvalid,
               children: [
                 renderSelection ? renderSelection(value) : value.length > 0 ? (() => {
                   const visibleItems = maxSelections != null ? value.slice(0, maxSelections) : value;
@@ -2486,12 +2608,12 @@ function MultiSearchableSelect(props) {
                           measureRef
                         ) : void 0
                       }
-                    ) : children ? children : flatItems ? (row) => renderSentinelRow(row) : groups ? (group, index) => {
+                    ) : children ? children : flatItems ? ((row) => renderSentinelRow(row)) : groups ? ((group, index) => {
                       if (isCreatableSentinel(group)) {
                         return renderCreatableItem(group);
                       }
                       const g = group;
-                      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(React11.Fragment, { children: [
+                      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(React12.Fragment, { children: [
                         /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ComboboxGroup, { items: g.items, children: [
                           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(g.value) : g.value }),
                           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_combobox6.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -2509,7 +2631,7 @@ function MultiSearchableSelect(props) {
                         ] }),
                         index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxSeparator, {})
                       ] }, g.value);
-                    } : (item) => {
+                    }) : ((item) => {
                       if (isCreatableSentinel(item)) {
                         return renderCreatableItem(item);
                       }
@@ -2526,7 +2648,7 @@ function MultiSearchableSelect(props) {
                         },
                         dataItem.id
                       );
-                    }
+                    })
                   }
                 )
               ]
@@ -2537,8 +2659,427 @@ function MultiSearchableSelect(props) {
     )
   ] });
 }
+
+// src/v3/ActionMenu.tsx
+var React13 = __toESM(require("react"));
+var import_menu2 = require("@base-ui/react/menu");
+var import_seeds_react_radio3 = __toESM(require("@sproutsocial/seeds-react-radio"));
+var import_seeds_react_checkbox4 = __toESM(require("@sproutsocial/seeds-react-checkbox"));
+var import_seeds_react_icon5 = require("@sproutsocial/seeds-react-icon");
+
+// src/v3/ActionMenuStyles.tsx
+var import_menu = require("@base-ui/react/menu");
+var import_styled_components8 = __toESM(require("styled-components"));
+var import_seeds_react_mixins3 = require("@sproutsocial/seeds-react-mixins");
+var ActionMenuTrigger = (0, import_styled_components8.default)(import_menu.Menu.Trigger)``;
+var ActionMenuPositioner = (0, import_styled_components8.default)(import_menu.Menu.Positioner)`
+  min-width: var(--anchor-width);
+  z-index: 7;
+`;
+var ActionMenuPopup = (0, import_styled_components8.default)(import_menu.Menu.Popup).attrs({
+  "data-base-ui-swipe-ignore": ""
+})`
+  font-family: ${({ theme }) => theme.fontFamily};
+  background: ${({ theme }) => theme.colors.container.background.base};
+  border: 1px solid ${({ theme }) => theme.colors.container.border.base};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  box-shadow: ${({ theme }) => theme.shadows.low};
+  outline: none;
+  max-height: min(var(--available-height, 400px), 400px);
+  overflow-y: auto;
+  padding: ${({ theme }) => theme.space[300]};
+
+  &[data-open] {
+    animation: action-menu-popup-in 120ms ease-out;
+  }
+
+  &[data-closed] {
+    animation: action-menu-popup-out 100ms ease-in;
+  }
+
+  @keyframes action-menu-popup-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes action-menu-popup-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+`;
+var ActionMenuGroup = (0, import_styled_components8.default)(import_menu.Menu.Group)`
+  display: block;
+`;
+var ActionMenuGroupLabel = (0, import_styled_components8.default)(import_menu.Menu.GroupLabel)`
+  padding: ${({ theme }) => `${theme.space[300]}`};
+  font-size: ${({ theme }) => theme.typography[100].fontSize};
+  color: ${({ theme }) => theme.colors.text.body};
+`;
+var ActionMenuSeparator = (0, import_styled_components8.default)(import_menu.Menu.Separator)`
+  height: 1px;
+  margin: ${({ theme }) => `${theme.space[300]} -${theme.space[300]}`};
+  background: ${({ theme }) => theme.colors.container.border.base};
+`;
+var menuItemStyles = import_styled_components8.css`
+  box-sizing: border-box;
+  display: block;
+  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};
+  cursor: pointer;
+  user-select: none;
+
+  &[data-highlighted] {
+    border-color: ${({ theme }) => theme.colors.listItem.border.base};
+    background-color: ${({ theme }) => theme.colors.listItem.background.hover};
+    color: ${({ theme }) => theme.colors.text.body};
+    text-decoration: none;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+`;
+var StyledMenuItem = (0, import_styled_components8.default)(import_menu.Menu.Item)`
+  ${menuItemStyles}
+`;
+var StyledCheckboxItem = (0, import_styled_components8.default)(import_menu.Menu.CheckboxItem)`
+  ${menuItemStyles}
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+`;
+var StyledRadioItem = (0, import_styled_components8.default)(import_menu.Menu.RadioItem)`
+  ${menuItemStyles}
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+`;
+var StyledCheckboxItemIndicator = (0, import_styled_components8.default)(import_menu.Menu.CheckboxItemIndicator)`
+  display: flex;
+  align-items: center;
+  width: 16px;
+  color: ${({ theme }) => theme.colors.text.body};
+`;
+var StyledRadioItemIndicator = (0, import_styled_components8.default)(import_menu.Menu.RadioItemIndicator)`
+  display: flex;
+  align-items: center;
+  width: 16px;
+  color: ${({ theme }) => theme.colors.text.body};
+`;
+var StyledSubmenuTrigger = (0, import_styled_components8.default)(import_menu.Menu.SubmenuTrigger)`
+  ${menuItemStyles}
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+  justify-content: space-between;
+
+  &[data-popup-open] {
+    border-color: ${({ theme }) => theme.colors.listItem.border.base};
+    background-color: ${({ theme }) => theme.colors.listItem.background.hover};
+  }
+`;
+var StyledLinkItem = (0, import_styled_components8.default)(import_menu.Menu.LinkItem)`
+  ${menuItemStyles}
+`;
+
+// src/v3/ActionMenu.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function ActionMenu({
+  trigger,
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled
+}) {
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    import_menu2.Menu.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuTrigger, { render: trigger, disabled }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_menu2.Menu.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuPositioner, { sideOffset: 8, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuPopup, { children }) }) })
+      ]
+    }
+  );
+}
+function MenuGroup({
+  children,
+  label,
+  showSeparator = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ActionMenuGroup, { children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuGroupLabel, { children: label }),
+      children
+    ] }),
+    showSeparator && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuSeparator, {})
+  ] });
+}
+function MenuRadioGroup({
+  children,
+  value,
+  defaultValue,
+  onValueChange
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_menu2.Menu.RadioGroup,
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      children
+    }
+  );
+}
+function MenuItem(props) {
+  const generatedId = React13.useId();
+  if (props.type === "checkbox") {
+    const {
+      children: children2,
+      checked,
+      defaultChecked,
+      onCheckedChange,
+      disabled: disabled2,
+      closeOnClick: closeOnClick2 = false,
+      id
+    } = props;
+    const itemId = id ?? `checkbox-menu-item-${generatedId}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      StyledCheckboxItem,
+      {
+        checked,
+        defaultChecked,
+        onCheckedChange,
+        disabled: disabled2,
+        closeOnClick: closeOnClick2,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            StyledCheckboxItemIndicator,
+            {
+              keepMounted: true,
+              render: (_indicatorProps, state) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                import_seeds_react_checkbox4.default,
+                {
+                  checked: state.checked,
+                  onChange: () => {
+                  },
+                  tabIndex: -1,
+                  id: itemId,
+                  name: "menu-checkbox-item"
+                }
+              )
+            }
+          ),
+          children2
+        ]
+      }
+    );
+  }
+  if (props.type === "radio") {
+    const { children: children2, value, disabled: disabled2, closeOnClick: closeOnClick2 = false } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      StyledRadioItem,
+      {
+        value,
+        disabled: disabled2,
+        closeOnClick: closeOnClick2,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            StyledRadioItemIndicator,
+            {
+              keepMounted: true,
+              render: (_indicatorProps, state) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                import_seeds_react_radio3.default,
+                {
+                  checked: state.checked,
+                  onChange: () => {
+                  },
+                  tabIndex: -1,
+                  id: `radio-menu-item-${value}`,
+                  name: "menu-radio-item"
+                }
+              )
+            }
+          ),
+          children2
+        ]
+      }
+    );
+  }
+  const {
+    children,
+    onClick,
+    disabled,
+    closeOnClick = true,
+    href,
+    target
+  } = props;
+  if (href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StyledLinkItem, { href, target, closeOnClick, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    StyledMenuItem,
+    {
+      onClick,
+      disabled,
+      closeOnClick,
+      children
+    }
+  );
+}
+function MenuSub({
+  trigger,
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  closeParentOnEsc = false
+}) {
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    import_menu2.Menu.SubmenuRoot,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      closeParentOnEsc,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
+        trigger,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_menu2.Menu.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuPositioner, { sideOffset: getOffset, alignOffset: getOffset, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuPopup, { children }) }) })
+      ]
+    }
+  );
+}
+function getOffset({ side }) {
+  return side === "top" || side === "bottom" ? 4 : -8;
+}
+function MenuSubTrigger({
+  children,
+  disabled,
+  label,
+  openOnHover = true
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    StyledSubmenuTrigger,
+    {
+      disabled,
+      label,
+      openOnHover,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_seeds_react_icon5.Icon, { name: "chevron-right-outline", fixedWidth: true, "aria-hidden": true })
+      ]
+    }
+  );
+}
+
+// src/v3/MenuButton.tsx
+var React14 = require("react");
+var import_seeds_react_button2 = require("@sproutsocial/seeds-react-button");
+var import_seeds_react_icon6 = require("@sproutsocial/seeds-react-icon");
+
+// src/v3/MenuButtonStyles.tsx
+var import_styled_components9 = __toESM(require("styled-components"));
+var import_seeds_react_button = require("@sproutsocial/seeds-react-button");
+var MenuButtonContainer = import_styled_components9.default.div`
+  display: inline-flex;
+  gap: 1px;
+`;
+var MainButton = (0, import_styled_components9.default)(import_seeds_react_button.Button)`
+  && {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+`;
+var TriggerButton = (0, import_styled_components9.default)(import_seeds_react_button.Button)`
+  && {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .Icon-svg {
+    transition: transform ${({ theme }) => theme.duration.fast} ease;
+  }
+
+  &[data-popup-open] .Icon-svg {
+    transform: rotate(180deg);
+  }
+`;
+
+// src/v3/MenuButton.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function MenuButton({
+  actionMenu,
+  appearance = "primary",
+  size,
+  disabled,
+  menuButtonAriaLabel,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(MenuButtonContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      MainButton,
+      {
+        appearance,
+        size,
+        disabled,
+        ...rest,
+        children
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      ActionMenu,
+      {
+        disabled,
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          TriggerButton,
+          {
+            appearance,
+            size,
+            disabled,
+            ariaLabel: menuButtonAriaLabel,
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_seeds_react_icon6.Icon, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true })
+          }
+        ),
+        children: actionMenu
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ActionMenu,
   ComboboxActionButtons,
   ComboboxClear,
   ComboboxEmpty,
@@ -2561,6 +3102,12 @@ function MultiSearchableSelect(props) {
   ComboboxTokenInput,
   ComboboxTokenInputGroup,
   ComboboxTrigger,
+  MenuButton,
+  MenuGroup,
+  MenuItem,
+  MenuRadioGroup,
+  MenuSub,
+  MenuSubTrigger,
   MultiCombobox,
   MultiSearchableSelect,
   MultiSelect,