@sproutsocial/seeds-react-menu 1.11.0 → 1.11.2

package/dist/v3/index.js

@@ -52,6 +52,9 @@ __export(v3_exports, {
   ComboboxTokenInput: () => ComboboxTokenInput,
   ComboboxTokenInputGroup: () => ComboboxTokenInputGroup,
   ComboboxTrigger: () => ComboboxTrigger,
+  MultiCombobox: () => MultiCombobox,
+  MultiSearchableSelect: () => MultiSearchableSelect,
+  MultiSelect: () => MultiSelect,
   SearchableSelectInput: () => SearchableSelectInput,
   SearchableSelectList: () => SearchableSelectList,
   SearchableSelectPlaceholder: () => SearchableSelectPlaceholder,
@@ -60,6 +63,9 @@ __export(v3_exports, {
   SearchableSelectTokenTrigger: () => SearchableSelectTokenTrigger,
   SearchableSelectTrigger: () => SearchableSelectTrigger,
   SearchableSelectTriggerIcon: () => SearchableSelectTriggerIcon,
+  SingleCombobox: () => SingleCombobox,
+  SingleSearchableSelect: () => SingleSearchableSelect,
+  SingleSelect: () => SingleSelect,
   Token: () => Token,
   TokenRemove: () => TokenRemove
 });
@@ -73,6 +79,18 @@ var import_styled_components4 = __toESM(require("styled-components"));
 // src/v3/SeedsPortal.tsx
 var React = __toESM(require("react"));
 var import_seeds_react_portal = require("@sproutsocial/seeds-react-portal");
+function useSeedsPortalContainer() {
+  const disablePortalToBody = React.useContext(import_seeds_react_portal.DisablePortalToBodyContext);
+  const containerRef = React.useRef(null);
+  const [portalContainer, setPortalContainer] = React.useState(void 0);
+  React.useEffect(() => {
+    if (disablePortalToBody && containerRef.current) {
+      const dialogContent = containerRef.current.closest("[role='dialog']");
+      setPortalContainer(dialogContent ?? containerRef.current);
+    }
+  }, [disablePortalToBody]);
+  return { containerRef, portalContainer, disablePortalToBody };
+}
 
 // src/v3/Common/SelectItem.tsx
 var React2 = require("react");
@@ -118,6 +136,72 @@ var StyledItemIndicator = (0, import_styled_components.default)(import_select.Se
   }
 `;
 var StyledItemText = (0, import_styled_components.default)(import_select.Select.ItemText)``;
+function CheckIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.Icon, { name: "check-outline", fixedWidth: true, "aria-hidden": true });
+}
+function SelectItem({
+  value,
+  label,
+  inputType = "icon",
+  renderItem,
+  hidden
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    StyledItem,
+    {
+      value,
+      style: hidden ? { display: "none" } : void 0,
+      "data-qa-menu-item": label,
+      children: [
+        inputType === "radio" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          StyledItemIndicator,
+          {
+            keepMounted: true,
+            render: (_props, state) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_seeds_react_radio.default,
+              {
+                checked: state.selected,
+                onChange: () => {
+                },
+                tabIndex: -1,
+                id: `radio-${value}`,
+                name: "select-item"
+              }
+            )
+          }
+        ) : inputType === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          StyledItemIndicator,
+          {
+            keepMounted: true,
+            render: (_props, state) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_seeds_react_checkbox.default,
+              {
+                checked: state.selected,
+                onChange: () => {
+                },
+                tabIndex: -1,
+                id: `checkbox-${value}`,
+                name: "select-item"
+              }
+            )
+          }
+        ) : inputType === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemIndicator, { keepMounted: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, {}) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemText, { children: renderItem ? renderItem() : label })
+      ]
+    }
+  );
+}
+
+// src/v3/Common/groupItems.ts
+function groupItems(data, groupBy) {
+  const map = /* @__PURE__ */ new Map();
+  for (const item of data) {
+    const key = groupBy(item);
+    if (!map.has(key)) map.set(key, []);
+    map.get(key).push(item);
+  }
+  return Array.from(map.entries()).map(([value, items]) => ({ value, items }));
+}
 
 // src/v3/Common/SelectStyles.tsx
 var import_select2 = require("@base-ui/react/select");
@@ -163,6 +247,11 @@ var SelectTrigger = (0, import_styled_components2.default)(import_select2.Select
   &[data-popup-open] [data-chevron] {
     transform: rotate(-180deg);
   }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 `;
 var SelectValue = (0, import_styled_components2.default)(import_select2.Select.Value)`
   min-width: 0;
@@ -247,7 +336,13 @@ var StyledChevron = import_styled_components3.default.div`
   transition: transform 0.15s;
   ${({ $isOpen }) => $isOpen && "transform: rotate(-180deg);"}
 `;
-function CheckIcon() {
+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 });
 }
 
@@ -264,6 +359,116 @@ var StyledValue = (0, import_styled_components4.default)(import_select3.Select.V
     color: ${({ theme }) => theme.colors.text.subtext};
   }
 `;
+function SingleSelect(props) {
+  const { id, placeholder, includePlaceholderItem } = props;
+  const isChildrenMode = "children" in props && props.children != null;
+  const selectedItemId = props.selectedItemId;
+  const defaultSelectedItemId = props.defaultSelectedItemId;
+  const onSelectedItemIdChange = props.onSelectedItemIdChange;
+  const data = isChildrenMode ? [] : props.data;
+  const itemToString = isChildrenMode ? () => "" : props.itemToString;
+  const renderItem = isChildrenMode ? void 0 : props.renderItem;
+  const inputType = isChildrenMode ? "icon" : props.inputType ?? "icon";
+  const renderSelection = isChildrenMode ? void 0 : props.renderSelection;
+  const groupBy = isChildrenMode ? void 0 : props.groupBy;
+  const renderGroupHeading = isChildrenMode ? void 0 : props.renderGroupHeading;
+  const children = isChildrenMode ? props.children : void 0;
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  const items = React4.useMemo(() => {
+    const dataItems = data.map((item) => ({
+      value: String(item.id),
+      label: itemToString(item)
+    }));
+    if (includePlaceholderItem) {
+      return [{ value: null, label: placeholder ?? "" }, ...dataItems];
+    }
+    return dataItems;
+  }, [data, itemToString, includePlaceholderItem, placeholder]);
+  const dataWithPlaceholder = includePlaceholderItem ? [{ id: null, value: null, label: placeholder ?? "" }, ...data] : data;
+  const isControlled = selectedItemId !== void 0;
+  const [internalValue, setInternalValue] = React4.useState(
+    defaultSelectedItemId != null ? String(defaultSelectedItemId) : null
+  );
+  const value = isControlled ? selectedItemId != null ? String(selectedItemId) : null : internalValue;
+  const selectedItem = React4.useMemo(
+    () => value != null ? data.find((d) => String(d.id) === value) ?? null : null,
+    [data, value]
+  );
+  function handleValueChange(newValue) {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    if (onSelectedItemIdChange) {
+      if (newValue == null) {
+        onSelectedItemIdChange(null);
+      } else {
+        const item = data.find((d) => String(d.id) === newValue);
+        onSelectedItemIdChange(item ? item.id : null);
+      }
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Field, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      import_select3.Select.Root,
+      {
+        items,
+        value,
+        disabled: props.disabled,
+        onValueChange: handleValueChange,
+        id,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectTrigger, { 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: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectGroup, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  SelectItem,
+                  {
+                    value: String(item.id),
+                    label: itemToString(item),
+                    inputType,
+                    renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                  },
+                  item.id
+                ))
+              ] }),
+              index < arr.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectSeparator, {})
+            ] }, group.value)) : (
+              // TODO: need to add a placeholder item when includePlaceholderItem is true
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                includePlaceholderItem && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  SelectItem,
+                  {
+                    value: null,
+                    label: placeholder ?? ""
+                  },
+                  "placeholder"
+                ),
+                data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  SelectItem,
+                  {
+                    value: String(item.id),
+                    label: itemToString(item),
+                    inputType,
+                    renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                  },
+                  item.id
+                ))
+              ] })
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select3.Select.ScrollDownArrow, {})
+          ] }) }) })
+        ]
+      }
+    )
+  ] });
+}
 
 // src/v3/MultiSelect.tsx
 var React5 = __toESM(require("react"));
@@ -284,6 +489,117 @@ var Placeholder = import_styled_components5.default.div`
   padding-bottom: 2px;
   margin: 2px 8px 0px 0px;
 `;
+function MultiSelect(props) {
+  const { id, placeholder = "Select..." } = props;
+  const isChildrenMode = "children" in props && props.children != null;
+  const data = isChildrenMode ? [] : props.data;
+  const itemToString = isChildrenMode ? () => "" : props.itemToString;
+  const renderItem = isChildrenMode ? void 0 : props.renderItem;
+  const customRenderSelections = isChildrenMode ? void 0 : props.customRenderSelections;
+  const maxSelections = isChildrenMode ? void 0 : props.maxSelections;
+  const renderSelection = isChildrenMode ? void 0 : props.renderSelection;
+  const removeSelectedItems = isChildrenMode ? false : props.removeSelectedItems ?? false;
+  const inputType = isChildrenMode ? "checkbox" : removeSelectedItems ? "none" : props.inputType ?? "checkbox";
+  const selectedItemIds = props.selectedItemIds;
+  const defaultSelectedItemIds = props.defaultSelectedItemIds;
+  const onSelectedItemIdsChange = props.onSelectedItemIdsChange;
+  const groupBy = isChildrenMode ? void 0 : props.groupBy;
+  const renderGroupHeading = isChildrenMode ? void 0 : props.renderGroupHeading;
+  const children = isChildrenMode ? props.children : void 0;
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  const isControlled = selectedItemIds !== void 0;
+  const [internalValue, setInternalValue] = React5.useState(
+    () => defaultSelectedItemIds?.map(String) ?? []
+  );
+  const value = isControlled ? selectedItemIds.map(String) : internalValue;
+  const items = React5.useMemo(
+    () => data.map((item) => ({
+      value: String(item.id),
+      label: itemToString(item)
+    })),
+    [data, itemToString]
+  );
+  const selectedItems = React5.useMemo(
+    () => value.map((v) => data.find((d) => String(d.id) === v)).filter((d) => d != null),
+    [data, value]
+  );
+  function handleValueChange(newValues) {
+    if (!isControlled) {
+      setInternalValue(newValues);
+    }
+    if (onSelectedItemIdsChange) {
+      const ids = newValues.map((v) => {
+        const item = data.find((d) => String(d.id) === v);
+        return item ? item.id : v;
+      });
+      onSelectedItemIdsChange(ids);
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Field, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      import_select4.Select.Root,
+      {
+        multiple: true,
+        items,
+        value,
+        onValueChange: handleValueChange,
+        disabled: props.disabled,
+        id,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectTrigger, { 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: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectGroup, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  SelectItem,
+                  {
+                    value: String(item.id),
+                    label: itemToString(item),
+                    inputType,
+                    hidden: removeSelectedItems && value.includes(String(item.id)),
+                    renderItem: renderItem ? () => renderItem(item) : void 0
+                  },
+                  item.id
+                ))
+              ] }),
+              index < arr.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectSeparator, {})
+            ] }, group.value)) : data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              SelectItem,
+              {
+                value: String(item.id),
+                label: itemToString(item),
+                inputType,
+                hidden: removeSelectedItems && value.includes(String(item.id)),
+                renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+              },
+              item.id
+            )) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_select4.Select.ScrollDownArrow, {})
+          ] }) }) })
+        ]
+      }
+    )
+  ] });
+}
 
 // src/v3/SingleCombobox.tsx
 var React8 = __toESM(require("react"));
@@ -322,6 +638,11 @@ var ComboboxInputGroup = (0, import_styled_components6.default)(import_combobox.
   &:focus-within {
     ${import_seeds_react_mixins2.focusRing}
   }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 `;
 var ComboboxInput = (0, import_styled_components6.default)(import_combobox.Combobox.Input)`
   flex: 1;
@@ -337,6 +658,10 @@ var ComboboxInput = (0, import_styled_components6.default)(import_combobox.Combo
   &::placeholder {
     color: ${({ theme }) => theme.colors.text.subtext};
   }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
 `;
 var ComboboxTokenInput = (0, import_styled_components6.default)(import_combobox.Combobox.Input)`
   flex: 1;
@@ -353,6 +678,10 @@ var ComboboxTokenInput = (0, import_styled_components6.default)(import_combobox.
   &::placeholder {
     color: ${({ theme }) => theme.colors.text.subtext};
   }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
 `;
 var ComboboxActionButtons = import_styled_components6.default.div`
   display: flex;
@@ -596,6 +925,11 @@ var ComboboxTokenInputGroup = (0, import_styled_components6.default)(import_comb
   &:focus-within {
     ${import_seeds_react_mixins2.focusRing}
   }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 `;
 var Token = import_styled_components6.default.span`
   display: inline-flex;
@@ -656,6 +990,11 @@ var SearchableSelectTrigger = (0, import_styled_components6.default)(import_comb
   &[data-popup-open] [data-chevron] {
     transform: rotate(-180deg);
   }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 `;
 var SearchableSelectTriggerIcon = (0, import_styled_components6.default)(import_combobox.Combobox.Icon)`
   display: flex;
@@ -733,6 +1072,11 @@ var SearchableSelectTokenTrigger = (0, import_styled_components6.default)(import
   &[data-popup-open] [data-chevron] {
     transform: rotate(-180deg);
   }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 `;
 
 // src/v3/Common/ComboboxItem.tsx
@@ -755,6 +1099,7 @@ function ComboboxItemInner({
       "data-index": dataIndex,
       style,
       ref,
+      "data-qa-menu-item": label,
       children: [
         inputType === "radio" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           ComboboxItemIndicator,
@@ -788,22 +1133,310 @@ function ComboboxItemInner({
               }
             )
           }
-        ) : inputType === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ComboboxItemIndicator, { keepMounted: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckIcon, {}) }) : null,
+        ) : inputType === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ComboboxItemIndicator, { keepMounted: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckIcon2, {}) }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: renderItem ? renderItem() : label })
       ]
     }
   );
 }
 var ComboboxItem2 = React6.forwardRef(ComboboxItemInner);
+var ComboboxItem_default = ComboboxItem2;
 
 // src/v3/Common/VirtualizedComboboxList.tsx
 var React7 = __toESM(require("react"));
 var import_combobox2 = require("@base-ui/react/combobox");
 var import_react_virtual = require("@tanstack/react-virtual");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var ITEM_HEIGHT = 32;
+function isGroupHeaderSentinel(v) {
+  return typeof v === "object" && v !== null && "__groupHeader" in v;
+}
+function isSelectAllSentinel(v) {
+  return typeof v === "object" && v !== null && "__selectAll" in v;
+}
+function VirtualizedComboboxList({
+  open,
+  virtualizerRef,
+  value,
+  groups,
+  data,
+  itemToString,
+  inputType,
+  renderItem,
+  renderGroupHeading
+}) {
+  const filteredItems = import_combobox2.Combobox.useFilteredItems();
+  const scrollElementRef = React7.useRef(null);
+  const virtualizer = (0, import_react_virtual.useVirtualizer)({
+    enabled: open,
+    count: filteredItems.length,
+    getScrollElement: () => scrollElementRef.current,
+    estimateSize: () => ITEM_HEIGHT,
+    overscan: 20,
+    paddingStart: 4,
+    paddingEnd: 4,
+    scrollPaddingStart: 4,
+    scrollPaddingEnd: 4
+  });
+  React7.useImperativeHandle(virtualizerRef, () => virtualizer);
+  const handleScrollRef = React7.useCallback(
+    (el) => {
+      scrollElementRef.current = el;
+      if (el) virtualizer.measure();
+    },
+    [virtualizer]
+  );
+  if (!filteredItems.length) return null;
+  const selectedArray = Array.isArray(value) ? value : value != null ? [value] : [];
+  const totalSize = virtualizer.getTotalSize();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      role: "presentation",
+      ref: handleScrollRef,
+      style: {
+        flex: 1,
+        minHeight: 0,
+        overflowY: "auto",
+        overscrollBehavior: "contain"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "div",
+        {
+          role: "presentation",
+          style: { position: "relative", width: "100%", height: totalSize },
+          children: virtualizer.getVirtualItems().map((virtualItem) => {
+            const row = filteredItems[virtualItem.index];
+            if (!row) return null;
+            const baseStyle = {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              transform: `translateY(${virtualItem.start}px)`,
+              boxSizing: "border-box"
+            };
+            if (isSelectAllSentinel(row)) {
+              const selectedCount = selectedArray.length;
+              const totalCount = data.length;
+              const state = selectedCount === 0 ? "none" : selectedCount === totalCount ? "all" : "partial";
+              return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                ComboboxSelectAllItem,
+                {
+                  index: virtualItem.index,
+                  "data-index": virtualItem.index,
+                  value: row,
+                  style: baseStyle,
+                  ref: virtualizer.measureElement,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ComboboxGroupHeaderCheckbox, { $state: state, id: "__selectAll" }),
+                    "Select all"
+                  ]
+                },
+                virtualItem.key
+              );
+            }
+            if (isGroupHeaderSentinel(row)) {
+              const group = groups?.find((g) => g.value === row.groupName);
+              const groupItems2 = group?.items ?? [];
+              const selectedCount = groupItems2.filter(
+                (item2) => selectedArray.some((s) => s.id === item2.id)
+              ).length;
+              const state = selectedCount === 0 ? "none" : selectedCount === groupItems2.length ? "all" : "partial";
+              return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                ComboboxGroupHeaderItem,
+                {
+                  index: virtualItem.index,
+                  "data-index": virtualItem.index,
+                  value: row,
+                  style: baseStyle,
+                  ref: virtualizer.measureElement,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      ComboboxGroupHeaderCheckbox,
+                      {
+                        $state: state,
+                        id: `__header-${row.groupName}`
+                      }
+                    ),
+                    renderGroupHeading ? renderGroupHeading(row.groupName) : row.groupName
+                  ]
+                },
+                virtualItem.key
+              );
+            }
+            const item = row;
+            return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              ComboboxItem_default,
+              {
+                index: virtualItem.index,
+                "data-index": virtualItem.index,
+                value: item,
+                itemId: String(item.id),
+                label: itemToString(item),
+                inputType,
+                renderItem: renderItem ? () => renderItem(item) : () => itemToString(item),
+                style: baseStyle,
+                ref: virtualizer.measureElement
+              },
+              virtualItem.key
+            );
+          })
+        }
+      )
+    }
+  );
+}
 
 // src/v3/SingleCombobox.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
+function SingleCombobox(props) {
+  const {
+    id,
+    placeholder = "Search...",
+    emptyText = "No results found."
+  } = props;
+  const isChildrenMode = "children" in props && props.children != null;
+  const data = isChildrenMode ? [] : props.data;
+  const itemToString = isChildrenMode ? (_item) => "" : props.itemToString;
+  const renderItem = isChildrenMode ? void 0 : props.renderItem;
+  const inputType = isChildrenMode ? "icon" : props.inputType ?? "icon";
+  const isVirtualized = isChildrenMode ? false : props.isVirtualized ?? false;
+  const groupBy = isChildrenMode ? void 0 : isVirtualized ? void 0 : props.groupBy;
+  const renderGroupHeading = isChildrenMode ? void 0 : isVirtualized ? void 0 : props.renderGroupHeading;
+  const children = isChildrenMode ? props.children : void 0;
+  const selectedItemId = props.selectedItemId;
+  const defaultSelectedItemId = props.defaultSelectedItemId;
+  const onSelectedItemIdChange = props.onSelectedItemIdChange;
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  const [open, setOpen] = React8.useState(false);
+  const virtualizerRef = React8.useRef(null);
+  const isControlled = selectedItemId !== void 0;
+  const idToItem = React8.useCallback(
+    (id2) => {
+      if (id2 == null) return null;
+      return data.find((d) => String(d.id) === String(id2)) ?? null;
+    },
+    [data]
+  );
+  const [internalValue, setInternalValue] = React8.useState(
+    () => idToItem(defaultSelectedItemId)
+  );
+  const value = isControlled ? idToItem(selectedItemId) : internalValue;
+  function handleValueChange(newItem) {
+    if (!isControlled) {
+      setInternalValue(newItem);
+    }
+    if (onSelectedItemIdChange) {
+      onSelectedItemIdChange(newItem ? newItem.id : null);
+    }
+  }
+  const groups = React8.useMemo(
+    () => groupBy ? groupItems(data, groupBy) : null,
+    [data, groupBy]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Field, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      import_combobox3.Combobox.Root,
+      {
+        id,
+        value,
+        onValueChange: handleValueChange,
+        itemToStringLabel: itemToString,
+        isItemEqualToValue: (a, b) => a != null && b != null && a.id === b.id,
+        items: isVirtualized ? data : groups ?? (isChildrenMode ? void 0 : data),
+        virtualized: isVirtualized,
+        disabled: props.disabled,
+        open,
+        onOpenChange: setOpen,
+        onItemHighlighted: isVirtualized ? (item, { reason, index }) => {
+          const virt = virtualizerRef.current;
+          if (!item || !virt) return;
+          const isStart = index === 0;
+          const isEnd = index === virt.options.count - 1;
+          if (reason === "none" || reason === "keyboard" && (isStart || isEnd)) {
+            queueMicrotask(() => {
+              virt.scrollToIndex(index, {
+                align: isEnd ? "start" : "end"
+              });
+            });
+          }
+        } : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ComboboxInputGroup, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComboboxInput, { placeholder, id }),
+            /* @__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,
+            {
+              style: isVirtualized ? { display: "flex", flexDirection: "column" } : void 0,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComboboxEmpty, { children: emptyText }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  ComboboxList,
+                  {
+                    style: isVirtualized ? {
+                      padding: 0,
+                      flex: 1,
+                      minHeight: 0,
+                      display: "flex",
+                      flexDirection: "column"
+                    } : void 0,
+                    children: isVirtualized ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      VirtualizedComboboxList,
+                      {
+                        open,
+                        virtualizerRef,
+                        value,
+                        groups,
+                        data,
+                        itemToString,
+                        inputType,
+                        renderItem,
+                        renderGroupHeading
+                      }
+                    ) : children ? children : groups ? (group, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(React8.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)(
+                          ComboboxItem_default,
+                          {
+                            value: item,
+                            itemId: String(item.id),
+                            label: itemToString(item),
+                            inputType,
+                            renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                          },
+                          item.id
+                        ) })
+                      ] }),
+                      index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComboboxSeparator, {})
+                    ] }, group.value) : (item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      ComboboxItem_default,
+                      {
+                        value: item,
+                        itemId: String(item.id),
+                        label: itemToString(item),
+                        inputType,
+                        renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                      },
+                      item.id
+                    )
+                  }
+                )
+              ]
+            }
+          ) }) })
+        ]
+      }
+    )
+  ] });
+}
 
 // src/v3/MultiCombobox.tsx
 var React9 = __toESM(require("react"));
@@ -811,12 +1444,473 @@ 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"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
+function makeGroupHeaderSentinel(groupName) {
+  return { __groupHeader: true, groupName };
+}
+function isGroupHeaderSentinel2(v) {
+  return typeof v === "object" && v !== null && "__groupHeader" in v;
+}
+var SELECT_ALL_SENTINEL = { __selectAll: true };
+function isSelectAllSentinel2(v) {
+  return typeof v === "object" && v !== null && "__selectAll" in v;
+}
+function MultiCombobox(props) {
+  const {
+    id,
+    placeholder = "Search...",
+    emptyText = "No results found.",
+    isLoading = false,
+    loadingText = "Loading..."
+  } = props;
+  const isChildrenMode = "children" in props && props.children != null;
+  const data = isChildrenMode ? [] : props.data;
+  const itemToString = isChildrenMode ? (_item) => "" : props.itemToString;
+  const renderItem = isChildrenMode ? void 0 : props.renderItem;
+  const renderToken = isChildrenMode ? void 0 : props.renderToken;
+  const renderSelection = isChildrenMode ? void 0 : props.renderSelection;
+  const maxTokens = isChildrenMode ? void 0 : props.maxTokens;
+  const removeSelectedItems = isChildrenMode ? false : props.removeSelectedItems ?? false;
+  const inputType = isChildrenMode ? "checkbox" : removeSelectedItems ? "none" : props.inputType ?? "checkbox";
+  const groupBy = isChildrenMode ? void 0 : props.groupBy;
+  const renderGroupHeading = isChildrenMode ? void 0 : props.renderGroupHeading;
+  const selectHeadings = isChildrenMode ? false : props.selectHeadings ?? false;
+  const selectAll = isChildrenMode ? false : props.selectAll ?? false;
+  const isVirtualized = isChildrenMode ? false : props.isVirtualized ?? false;
+  const children = isChildrenMode ? props.children : void 0;
+  const selectedItemIds = props.selectedItemIds;
+  const defaultSelectedItemIds = props.defaultSelectedItemIds;
+  const onSelectedItemIdsChange = props.onSelectedItemIdsChange;
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  const [open, setOpen] = React9.useState(false);
+  const virtualizerRef = React9.useRef(null);
+  const isControlled = selectedItemIds !== void 0;
+  const idsToItems = React9.useCallback(
+    (ids) => ids.map((id2) => data.find((d) => d.id === id2)).filter((d) => d != null),
+    [data]
+  );
+  const [internalValue, setInternalValue] = React9.useState(
+    () => defaultSelectedItemIds ? idsToItems(defaultSelectedItemIds) : []
+  );
+  const value = isControlled ? idsToItems(selectedItemIds) : internalValue;
+  const visibleData = React9.useMemo(
+    () => removeSelectedItems ? data.filter((item) => !value.some((v) => v.id === item.id)) : data,
+    [data, value, removeSelectedItems]
+  );
+  const groups = React9.useMemo(
+    () => groupBy ? groupItems(visibleData, groupBy) : null,
+    [visibleData, groupBy]
+  );
+  const flatItems = React9.useMemo(() => {
+    if (!groups || !selectHeadings && !selectAll) return null;
+    const rows = [];
+    if (selectAll) rows.push(SELECT_ALL_SENTINEL);
+    for (const group of groups) {
+      rows.push(makeGroupHeaderSentinel(group.value));
+      rows.push(...group.items);
+    }
+    return rows;
+  }, [groups, selectHeadings, selectAll]);
+  function setSelectedItems(items) {
+    if (!isControlled) setInternalValue(items);
+    if (onSelectedItemIdsChange)
+      onSelectedItemIdsChange(items.map((item) => item.id));
+  }
+  function handleValueChange(next) {
+    const selectAllClicked = next.filter(isSelectAllSentinel2);
+    const groupSentinels = next.filter(isGroupHeaderSentinel2);
+    const realItems = next.filter(
+      (v) => !isGroupHeaderSentinel2(v) && !isSelectAllSentinel2(v)
+    );
+    if (selectAllClicked.length > 0) {
+      const allSelected = data.every(
+        (d) => realItems.some((s) => s.id === d.id)
+      );
+      setSelectedItems(allSelected ? [] : [...data]);
+      return;
+    }
+    if (groupSentinels.length === 0) {
+      setSelectedItems(realItems);
+      return;
+    }
+    let updated = [...realItems];
+    for (const sentinel of groupSentinels) {
+      const group = groups?.find((g) => g.value === sentinel.groupName);
+      if (!group) continue;
+      const allSelected = group.items.every(
+        (item) => updated.some((s) => s.id === item.id)
+      );
+      if (allSelected) {
+        updated = updated.filter(
+          (s) => !group.items.some((item) => item.id === s.id)
+        );
+      } else {
+        const missing = group.items.filter(
+          (item) => !updated.some((s) => s.id === item.id)
+        );
+        updated = [...updated, ...missing];
+      }
+    }
+    setSelectedItems(updated);
+  }
+  function handleSimpleValueChange(newItems) {
+    setSelectedItems(newItems);
+  }
+  function removeItem(item, e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setSelectedItems(value.filter((v) => v.id !== item.id));
+  }
+  function renderSentinelRow(row) {
+    if (isSelectAllSentinel2(row)) {
+      const totalCount = data.length;
+      const selectedCount = value.length;
+      const state = selectedCount === 0 ? "none" : selectedCount === totalCount ? "all" : "partial";
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ComboboxSelectAllItem, { value: row, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxGroupHeaderCheckbox, { $state: state, id: "__selectAll" }),
+        "Select all"
+      ] }, "__selectAll");
+    }
+    if (isGroupHeaderSentinel2(row)) {
+      const group = groups?.find((g) => g.value === row.groupName);
+      const groupItemsList = group?.items ?? [];
+      const selectedCount = groupItemsList.filter(
+        (item2) => value.some((s) => s.id === item2.id)
+      ).length;
+      const state = selectedCount === 0 ? "none" : selectedCount === groupItemsList.length ? "all" : "partial";
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ComboboxGroupHeaderItem, { value: row, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          ComboboxGroupHeaderCheckbox,
+          {
+            $state: state,
+            id: `__header-${row.groupName}`
+          }
+        ),
+        renderGroupHeading ? renderGroupHeading(row.groupName) : row.groupName
+      ] }, `__header-${row.groupName}`);
+    }
+    const item = row;
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      ComboboxItem_default,
+      {
+        value: item,
+        itemId: String(item.id),
+        label: itemToString(item),
+        inputType,
+        renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+      },
+      item.id
+    );
+  }
+  const rootItems = flatItems ?? groups ?? (isChildrenMode ? void 0 : visibleData);
+  const hasSentinels = selectAll || selectHeadings;
+  const rootValue = hasSentinels ? [...value] : value;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Field, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      import_combobox4.Combobox.Root,
+      {
+        multiple: true,
+        id,
+        virtualized: isVirtualized,
+        open,
+        disabled: props.disabled,
+        onOpenChange: setOpen,
+        onItemHighlighted: isVirtualized ? (item, { reason, index }) => {
+          const virt = virtualizerRef.current;
+          if (!item || !virt) return;
+          const isStart = index === 0;
+          const isEnd = index === virt.options.count - 1;
+          if (reason === "none" || reason === "keyboard" && (isStart || isEnd)) {
+            queueMicrotask(() => {
+              virt.scrollToIndex(index, {
+                align: isEnd ? "start" : "end"
+              });
+            });
+          }
+        } : void 0,
+        value: rootValue,
+        onValueChange: (
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          hasSentinels ? handleValueChange : handleSimpleValueChange
+        ),
+        itemToStringLabel: (item) => {
+          if (!item || isGroupHeaderSentinel2(item) || isSelectAllSentinel2(item))
+            return "";
+          return itemToString(item);
+        },
+        isItemEqualToValue: (a, b) => {
+          if (isGroupHeaderSentinel2(a) && isGroupHeaderSentinel2(b))
+            return a.groupName === b.groupName;
+          if (isSelectAllSentinel2(a) && isSelectAllSentinel2(b)) return true;
+          if (!isGroupHeaderSentinel2(a) && !isSelectAllSentinel2(a) && !isGroupHeaderSentinel2(b) && !isSelectAllSentinel2(b))
+            return a.id === b.id;
+          return false;
+        },
+        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
+              }
+            ),
+            /* @__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,
+            {
+              "aria-busy": isLoading || void 0,
+              style: isVirtualized ? { display: "flex", flexDirection: "column" } : void 0,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxStatus, { children: isLoading ? loadingText : null }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxEmpty, { children: isLoading ? null : emptyText }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  ComboboxList,
+                  {
+                    style: isVirtualized ? {
+                      padding: 0,
+                      flex: 1,
+                      minHeight: 0,
+                      display: "flex",
+                      flexDirection: "column"
+                    } : void 0,
+                    children: isVirtualized ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      VirtualizedComboboxList,
+                      {
+                        open,
+                        virtualizerRef,
+                        value,
+                        groups,
+                        data: visibleData,
+                        itemToString,
+                        inputType,
+                        renderItem,
+                        renderGroupHeading
+                      }
+                    ) : children ? children : flatItems ? (row) => renderSentinelRow(row) : groups ? (group, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(React9.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ComboboxGroup, { items: group.items, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_combobox4.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          ComboboxItem_default,
+                          {
+                            value: item,
+                            itemId: String(item.id),
+                            label: itemToString(item),
+                            inputType,
+                            renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                          },
+                          item.id
+                        ) })
+                      ] }),
+                      index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxSeparator, {})
+                    ] }, group.value) : (item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      ComboboxItem_default,
+                      {
+                        value: item,
+                        itemId: String(item.id),
+                        label: itemToString(item),
+                        inputType,
+                        renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                      },
+                      item.id
+                    )
+                  }
+                )
+              ]
+            }
+          ) }) })
+        ]
+      }
+    )
+  ] });
+}
 
 // src/v3/SingleSearchableSelect.tsx
 var React10 = __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");
+function SingleSearchableSelect(props) {
+  const {
+    id,
+    placeholder = "Select...",
+    searchPlaceholder = "Search...",
+    emptyText = "No results found.",
+    isLoading = false,
+    loadingText = "Loading..."
+  } = props;
+  const isChildrenMode = "children" in props && props.children != null;
+  const data = isChildrenMode ? [] : props.data;
+  const itemToString = isChildrenMode ? (_item) => "" : props.itemToString;
+  const renderItem = isChildrenMode ? void 0 : props.renderItem;
+  const renderSelection = isChildrenMode ? void 0 : props.renderSelection;
+  const inputType = isChildrenMode ? "icon" : props.inputType ?? "icon";
+  const isVirtualized = isChildrenMode ? false : props.isVirtualized ?? false;
+  const groupBy = isChildrenMode ? void 0 : isVirtualized ? void 0 : props.groupBy;
+  const renderGroupHeading = isChildrenMode ? void 0 : isVirtualized ? void 0 : props.renderGroupHeading;
+  const children = isChildrenMode ? props.children : void 0;
+  const selectedItemId = props.selectedItemId;
+  const defaultSelectedItemId = props.defaultSelectedItemId;
+  const onSelectedItemIdChange = props.onSelectedItemIdChange;
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  const [open, setOpen] = React10.useState(false);
+  const virtualizerRef = React10.useRef(null);
+  const isControlled = selectedItemId !== void 0;
+  const idToItem = React10.useCallback(
+    (id2) => {
+      if (id2 == null) return null;
+      return data.find((d) => String(d.id) === String(id2)) ?? null;
+    },
+    [data]
+  );
+  const [internalValue, setInternalValue] = React10.useState(
+    () => idToItem(defaultSelectedItemId)
+  );
+  const value = isControlled ? idToItem(selectedItemId) : internalValue;
+  function handleValueChange(newItem) {
+    if (!isControlled) setInternalValue(newItem);
+    if (onSelectedItemIdChange) {
+      onSelectedItemIdChange(newItem ? newItem.id : null);
+    }
+  }
+  const groups = React10.useMemo(
+    () => groupBy ? groupItems(data, groupBy) : null,
+    [data, groupBy]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Field, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      import_combobox5.Combobox.Root,
+      {
+        id,
+        value,
+        disabled: props.disabled,
+        onValueChange: handleValueChange,
+        itemToStringLabel: itemToString,
+        isItemEqualToValue: (a, b) => a != null && b != null && a.id === b.id,
+        items: isVirtualized ? data : groups ?? (isChildrenMode ? void 0 : data),
+        virtualized: isVirtualized,
+        open,
+        onOpenChange: setOpen,
+        onItemHighlighted: isVirtualized ? (item, { reason, index }) => {
+          const virt = virtualizerRef.current;
+          if (!item || !virt) return;
+          const isStart = index === 0;
+          const isEnd = index === virt.options.count - 1;
+          if (reason === "none" || reason === "keyboard" && (isStart || isEnd)) {
+            queueMicrotask(() => {
+              virt.scrollToIndex(index, {
+                align: isEnd ? "start" : "end"
+              });
+            });
+          }
+        } : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SearchableSelectTrigger, { id, 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) : null }) }),
+            /* @__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,
+            {
+              "aria-busy": isLoading || void 0,
+              style: { display: "flex", flexDirection: "column" },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SearchableSelectSearchContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  SearchableSelectInput,
+                  {
+                    placeholder: searchPlaceholder,
+                    autoFocus: true
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxStatus, { children: isLoading ? loadingText : null }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxEmpty, { children: isLoading ? null : emptyText }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  SearchableSelectList,
+                  {
+                    style: isVirtualized ? {
+                      padding: 0,
+                      flex: 1,
+                      minHeight: 0,
+                      display: "flex",
+                      flexDirection: "column"
+                    } : void 0,
+                    children: isVirtualized ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      VirtualizedComboboxList,
+                      {
+                        open,
+                        virtualizerRef,
+                        value,
+                        groups: null,
+                        data,
+                        itemToString,
+                        inputType,
+                        renderItem
+                      }
+                    ) : children ? children : groups ? (group, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(React10.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)(
+                          ComboboxItem_default,
+                          {
+                            value: item,
+                            itemId: String(item.id),
+                            label: itemToString(item),
+                            inputType,
+                            renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                          },
+                          item.id
+                        ) })
+                      ] }),
+                      index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxSeparator, {})
+                    ] }, group.value) : (item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      ComboboxItem_default,
+                      {
+                        value: item,
+                        itemId: String(item.id),
+                        label: itemToString(item),
+                        inputType,
+                        renderItem: renderItem ? () => renderItem(item) : void 0
+                      },
+                      item.id
+                    )
+                  }
+                )
+              ]
+            }
+          ) }) })
+        ]
+      }
+    )
+  ] });
+}
 
 // src/v3/MultiSearchableSelect.tsx
 var React11 = __toESM(require("react"));
@@ -830,6 +1924,295 @@ var SelectionText2 = import_styled_components7.default.span`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
+function makeGroupHeaderSentinel2(groupName) {
+  return { __groupHeader: true, groupName };
+}
+function isGroupHeaderSentinel3(v) {
+  return typeof v === "object" && v !== null && "__groupHeader" in v;
+}
+var SELECT_ALL_SENTINEL2 = { __selectAll: true };
+function isSelectAllSentinel3(v) {
+  return typeof v === "object" && v !== null && "__selectAll" in v;
+}
+function MultiSearchableSelect(props) {
+  const {
+    id,
+    placeholder = "Select...",
+    searchPlaceholder = "Search...",
+    emptyText = "No results found.",
+    isLoading = false,
+    loadingText = "Loading..."
+  } = props;
+  const isChildrenMode = "children" in props && props.children != null;
+  const data = isChildrenMode ? [] : props.data;
+  const itemToString = isChildrenMode ? (_item) => "" : props.itemToString;
+  const renderItem = isChildrenMode ? void 0 : props.renderItem;
+  const customRenderSelections = isChildrenMode ? void 0 : props.customRenderSelections;
+  const maxSelections = isChildrenMode ? void 0 : props.maxSelections;
+  const renderSelection = isChildrenMode ? void 0 : props.renderSelection;
+  const removeSelectedItems = isChildrenMode ? false : props.removeSelectedItems ?? false;
+  const inputType = isChildrenMode ? "checkbox" : removeSelectedItems ? "none" : props.inputType ?? "checkbox";
+  const groupBy = isChildrenMode ? void 0 : props.groupBy;
+  const renderGroupHeading = isChildrenMode ? void 0 : props.renderGroupHeading;
+  const selectHeadings = isChildrenMode ? false : props.selectHeadings ?? false;
+  const selectAll = isChildrenMode ? false : props.selectAll ?? false;
+  const isVirtualized = isChildrenMode ? false : props.isVirtualized ?? false;
+  const children = isChildrenMode ? props.children : void 0;
+  const selectedItemIds = props.selectedItemIds;
+  const defaultSelectedItemIds = props.defaultSelectedItemIds;
+  const onSelectedItemIdsChange = props.onSelectedItemIdsChange;
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  const [open, setOpen] = React11.useState(false);
+  const virtualizerRef = React11.useRef(null);
+  const isControlled = selectedItemIds !== void 0;
+  const idsToItems = React11.useCallback(
+    (ids) => ids.map((id2) => data.find((d) => d.id === id2)).filter((d) => d != null),
+    [data]
+  );
+  const [internalValue, setInternalValue] = React11.useState(
+    () => defaultSelectedItemIds ? idsToItems(defaultSelectedItemIds) : []
+  );
+  const value = isControlled ? idsToItems(selectedItemIds) : internalValue;
+  const visibleData = React11.useMemo(
+    () => removeSelectedItems ? data.filter((item) => !value.some((v) => v.id === item.id)) : data,
+    [data, value, removeSelectedItems]
+  );
+  const groups = React11.useMemo(
+    () => groupBy ? groupItems(visibleData, groupBy) : null,
+    [visibleData, groupBy]
+  );
+  const flatItems = React11.useMemo(() => {
+    if (!groups || !selectHeadings && !selectAll) return null;
+    const rows = [];
+    if (selectAll) rows.push(SELECT_ALL_SENTINEL2);
+    for (const group of groups) {
+      rows.push(makeGroupHeaderSentinel2(group.value));
+      rows.push(...group.items);
+    }
+    return rows;
+  }, [groups, selectHeadings, selectAll]);
+  function setSelectedItems(items) {
+    if (!isControlled) setInternalValue(items);
+    if (onSelectedItemIdsChange)
+      onSelectedItemIdsChange(items.map((item) => item.id));
+  }
+  function handleValueChange(next) {
+    const selectAllClicked = next.filter(isSelectAllSentinel3);
+    const groupSentinels = next.filter(isGroupHeaderSentinel3);
+    const realItems = next.filter(
+      (v) => !isGroupHeaderSentinel3(v) && !isSelectAllSentinel3(v)
+    );
+    if (selectAllClicked.length > 0) {
+      const allSelected = data.every(
+        (d) => realItems.some((s) => s.id === d.id)
+      );
+      setSelectedItems(allSelected ? [] : [...data]);
+      return;
+    }
+    if (groupSentinels.length === 0) {
+      setSelectedItems(realItems);
+      return;
+    }
+    let updated = [...realItems];
+    for (const sentinel of groupSentinels) {
+      const group = groups?.find((g) => g.value === sentinel.groupName);
+      if (!group) continue;
+      const allSelected = group.items.every(
+        (item) => updated.some((s) => s.id === item.id)
+      );
+      if (allSelected) {
+        updated = updated.filter(
+          (s) => !group.items.some((item) => item.id === s.id)
+        );
+      } else {
+        const missing = group.items.filter(
+          (item) => !updated.some((s) => s.id === item.id)
+        );
+        updated = [...updated, ...missing];
+      }
+    }
+    setSelectedItems(updated);
+  }
+  function handleSimpleValueChange(newItems) {
+    setSelectedItems(newItems);
+  }
+  function renderSentinelRow(row) {
+    if (isSelectAllSentinel3(row)) {
+      const totalCount = data.length;
+      const selectedCount = value.length;
+      const state = selectedCount === 0 ? "none" : selectedCount === totalCount ? "all" : "partial";
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ComboboxSelectAllItem, { value: row, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxGroupHeaderCheckbox, { $state: state, id: "__selectAll" }),
+        "Select all"
+      ] }, "__selectAll");
+    }
+    if (isGroupHeaderSentinel3(row)) {
+      const group = groups?.find((g) => g.value === row.groupName);
+      const groupItemsList = group?.items ?? [];
+      const selectedCount = groupItemsList.filter(
+        (item2) => value.some((s) => s.id === item2.id)
+      ).length;
+      const state = selectedCount === 0 ? "none" : selectedCount === groupItemsList.length ? "all" : "partial";
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ComboboxGroupHeaderItem, { value: row, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          ComboboxGroupHeaderCheckbox,
+          {
+            $state: state,
+            id: `__header-${row.groupName}`
+          }
+        ),
+        renderGroupHeading ? renderGroupHeading(row.groupName) : row.groupName
+      ] }, `__header-${row.groupName}`);
+    }
+    const item = row;
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      ComboboxItem_default,
+      {
+        value: item,
+        itemId: String(item.id),
+        label: itemToString(item),
+        inputType,
+        renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+      },
+      item.id
+    );
+  }
+  const rootItems = flatItems ?? groups ?? (isChildrenMode ? void 0 : visibleData);
+  const hasSentinels = selectAll || selectHeadings;
+  const rootValue = hasSentinels ? [...value] : value;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Field, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      import_combobox6.Combobox.Root,
+      {
+        multiple: true,
+        id,
+        virtualized: isVirtualized,
+        open,
+        disabled: props.disabled,
+        onOpenChange: setOpen,
+        onItemHighlighted: isVirtualized ? (item, { reason, index }) => {
+          const virt = virtualizerRef.current;
+          if (!item || !virt) return;
+          const isStart = index === 0;
+          const isEnd = index === virt.options.count - 1;
+          if (reason === "none" || reason === "keyboard" && (isStart || isEnd)) {
+            queueMicrotask(() => {
+              virt.scrollToIndex(index, {
+                align: isEnd ? "start" : "end"
+              });
+            });
+          }
+        } : void 0,
+        value: rootValue,
+        onValueChange: (
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          hasSentinels ? handleValueChange : handleSimpleValueChange
+        ),
+        itemToStringLabel: (item) => {
+          if (!item || isGroupHeaderSentinel3(item) || isSelectAllSentinel3(item))
+            return "";
+          return itemToString(item);
+        },
+        isItemEqualToValue: (a, b) => {
+          if (isGroupHeaderSentinel3(a) && isGroupHeaderSentinel3(b))
+            return a.groupName === b.groupName;
+          if (isSelectAllSentinel3(a) && isSelectAllSentinel3(b)) return true;
+          if (!isGroupHeaderSentinel3(a) && !isSelectAllSentinel3(a) && !isGroupHeaderSentinel3(b) && !isSelectAllSentinel3(b))
+            return a.id === b.id;
+          return false;
+        },
+        items: rootItems,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(SearchableSelectTokenTrigger, { id, children: [
+            renderSelection ? renderSelection(value) : value.length > 0 ? (() => {
+              const visibleItems = maxSelections != null ? value.slice(0, maxSelections) : value;
+              const overflowCount = maxSelections != null && value.length > maxSelections ? value.length - maxSelections : 0;
+              const text = visibleItems.map(
+                (item) => customRenderSelections ? customRenderSelections(item) : itemToString(item)
+              ).join(", ");
+              return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(SelectionText2, { children: [
+                text,
+                overflowCount > 0 ? `, +${overflowCount}` : ""
+              ] });
+            })() : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SearchableSelectPlaceholder, { children: placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SearchableSelectTriggerIcon, { style: { marginLeft: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronIcon, {}) }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_combobox6.Combobox.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            SearchableSelectPopup,
+            {
+              "aria-busy": isLoading || void 0,
+              style: { display: "flex", flexDirection: "column" },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SearchableSelectSearchContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  SearchableSelectInput,
+                  {
+                    placeholder: searchPlaceholder,
+                    autoFocus: true
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxStatus, { children: isLoading ? loadingText : null }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxEmpty, { children: isLoading ? null : emptyText }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  SearchableSelectList,
+                  {
+                    style: isVirtualized ? {
+                      padding: 0,
+                      flex: 1,
+                      minHeight: 0,
+                      display: "flex",
+                      flexDirection: "column"
+                    } : void 0,
+                    children: isVirtualized ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      VirtualizedComboboxList,
+                      {
+                        open,
+                        virtualizerRef,
+                        value,
+                        groups,
+                        data: visibleData,
+                        itemToString,
+                        inputType,
+                        renderItem,
+                        renderGroupHeading
+                      }
+                    ) : children ? children : flatItems ? (row) => renderSentinelRow(row) : groups ? (group, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(React11.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ComboboxGroup, { items: group.items, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_combobox6.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                          ComboboxItem_default,
+                          {
+                            value: item,
+                            itemId: String(item.id),
+                            label: itemToString(item),
+                            inputType,
+                            renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                          },
+                          item.id
+                        ) })
+                      ] }),
+                      index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxSeparator, {})
+                    ] }, group.value) : (item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      ComboboxItem_default,
+                      {
+                        value: item,
+                        itemId: String(item.id),
+                        label: itemToString(item),
+                        inputType,
+                        renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                      },
+                      item.id
+                    )
+                  }
+                )
+              ]
+            }
+          ) }) })
+        ]
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ComboboxActionButtons,
@@ -854,6 +2237,9 @@ var SelectionText2 = import_styled_components7.default.span`
   ComboboxTokenInput,
   ComboboxTokenInputGroup,
   ComboboxTrigger,
+  MultiCombobox,
+  MultiSearchableSelect,
+  MultiSelect,
   SearchableSelectInput,
   SearchableSelectList,
   SearchableSelectPlaceholder,
@@ -862,6 +2248,9 @@ var SelectionText2 = import_styled_components7.default.span`
   SearchableSelectTokenTrigger,
   SearchableSelectTrigger,
   SearchableSelectTriggerIcon,
+  SingleCombobox,
+  SingleSearchableSelect,
+  SingleSelect,
   Token,
   TokenRemove
 });