@sproutsocial/seeds-react-menu 1.7.1 → 1.7.5

package/dist/v2/index.js

@@ -0,0 +1,2191 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/v2/index.ts
+var v2_exports = {};
+__export(v2_exports, {
+  MultiAutocomplete: () => MultiAutocomplete,
+  MultiSelect: () => MultiSelect,
+  SingleAutocomplete: () => SingleAutocomplete,
+  SingleSelect: () => SingleSelect
+});
+module.exports = __toCommonJS(v2_exports);
+
+// src/v2/Select/SingleSelect.tsx
+var import_react8 = require("react");
+var import_downshift = require("downshift");
+var import_seeds_react_label = require("@sproutsocial/seeds-react-label");
+
+// src/v2/Common-V2/utils.ts
+var import_react = require("react");
+var import_unitless = require("@sproutsocial/seeds-motion/unitless");
+var import_seeds_react_popout = require("@sproutsocial/seeds-react-popout");
+function isGroupHeading(item) {
+  return typeof item === "object" && item !== null && "type" in item && item.type === "heading";
+}
+function isToggleItem(item) {
+  return typeof item === "object" && item !== null && "label" in item && !("type" in item) && Object.keys(item).length === 2 && // ToggleItem only has id and label
+  "id" in item;
+}
+var menuPlacementOrigin = {
+  top: { originX: 0.5, originY: 1 },
+  ["top-start"]: { originX: 0, originY: 1 },
+  ["top-end"]: { originX: 1, originY: 1 },
+  bottom: { originX: 0.5, originY: 0 },
+  ["bottom-start"]: { originX: 0, originY: 0 },
+  ["bottom-end"]: { originX: 1, originY: 0 },
+  left: { originX: 1, originY: 0.5 },
+  ["left-start"]: { originX: 1, originY: 0 },
+  ["left-end"]: { originX: 1, originY: 1 },
+  right: { originX: 0, originY: 0.5 },
+  ["right-start"]: { originX: 0, originY: 0 },
+  ["right-end"]: { originX: 0, originY: 1 }
+};
+var menuAnimationConfig = {
+  // Turning off layout true. This seems to be what causes the crazy animations when searching.
+  // layout: true,
+  variants: {
+    initial: (custom = { placement: "bottom" }) => ({
+      ...menuPlacementOrigin[custom.placement],
+      scale: 0,
+      opacity: 0
+    }),
+    animate: (custom = { placement: "bottom" }) => ({
+      ...menuPlacementOrigin[custom.placement],
+      opacity: 1,
+      scale: 1,
+      transition: {
+        type: "tween",
+        duration: import_unitless.MOTION_DURATION_FAST,
+        ease: "circOut"
+      }
+    }),
+    exit: {
+      opacity: 0,
+      scale: 1,
+      transition: {
+        type: "tween",
+        duration: import_unitless.MOTION_DURATION_FAST,
+        ease: "circIn"
+      }
+    }
+  },
+  initial: "initial",
+  whileInView: "animate",
+  viewport: { once: true },
+  exit: "exit"
+};
+function getFilteredItems(data, inputValue, itemToSearchString, itemToString, options) {
+  const lowerCasedInputValue = inputValue.toLowerCase();
+  if (options?.selectedItem && itemToString(options?.selectedItem).toLowerCase() === lowerCasedInputValue) {
+    return data;
+  }
+  return data.filter(function filterItem(item) {
+    if (options?.selectedItems && !options.showSelectedItems && options.selectedItems.includes(item)) {
+      return false;
+    }
+    const searchString = itemToSearchString(item);
+    const searchableParts = searchString.split("|").map((part) => part.toLowerCase().trim());
+    return searchableParts.some((part) => part.includes(lowerCasedInputValue));
+  });
+}
+function groupItems(items, groupBy, allData) {
+  if (items.length === 0) {
+    return /* @__PURE__ */ new Map();
+  }
+  const dataForOrder = allData || items;
+  const groupOrder = [];
+  const seenGroups = /* @__PURE__ */ new Set();
+  for (const item of dataForOrder) {
+    let groupKey = groupBy(item);
+    if (item.id === "clear-selection") {
+      continue;
+    }
+    if (!seenGroups.has(groupKey)) {
+      seenGroups.add(groupKey);
+      groupOrder.push(groupKey);
+    }
+  }
+  const grouped = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    let groupKey = groupBy(item);
+    if (item.id === "clear-selection") {
+      continue;
+    }
+    if (!grouped.has(groupKey)) {
+      grouped.set(groupKey, []);
+    }
+    grouped.get(groupKey).push(item);
+  }
+  const sortedGrouped = /* @__PURE__ */ new Map();
+  for (const groupKey of groupOrder) {
+    const groupItems2 = grouped.get(groupKey);
+    if (groupItems2) {
+      sortedGrouped.set(groupKey, groupItems2);
+    }
+  }
+  return sortedGrouped;
+}
+function groupItemsWithHeadings(items, groupBy, allData, selectHeadings = false) {
+  if (items.length === 0) {
+    return [];
+  }
+  const grouped = groupItems(items, groupBy, allData);
+  const result = [];
+  for (const groupKey of grouped.keys()) {
+    const groupItems2 = grouped.get(groupKey);
+    if (groupItems2 && groupItems2.length > 0) {
+      if (selectHeadings) {
+        result.push({
+          id: `heading-${groupKey}`,
+          type: "heading",
+          label: groupKey
+        });
+      }
+      result.push(...groupItems2);
+    }
+  }
+  return result;
+}
+function createItemToStringForDownshift(itemToString) {
+  return (item) => {
+    if (!item) return "";
+    if (isToggleItem(item)) {
+      return item.label;
+    }
+    if (isGroupHeading(item)) {
+      return item.label;
+    }
+    return itemToString(item);
+  };
+}
+
+// src/v2/Common-V2/Popout.tsx
+var React2 = __toESM(require("react"));
+var import_react2 = require("motion/react");
+var Popover = __toESM(require("@radix-ui/react-popover"));
+var import_unitless2 = require("@sproutsocial/seeds-motion/unitless");
+var import_styled_components = __toESM(require("styled-components"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaultAnimationConfig = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+  transition: {
+    ease: "circOut",
+    type: "tween",
+    duration: import_unitless2.MOTION_DURATION_FAST
+  }
+};
+var StyledContent = (0, import_styled_components.default)(Popover.Content)`
+  width: var(--radix-popover-trigger-width);
+  max-height: var(--radix-popover-content-available-height);
+  // This should be a prop on the Popout component
+  z-index: 7;
+`;
+var StyledMotionDiv = (0, import_styled_components.default)(import_react2.motion.div)`
+  background-color: ${({ theme }) => theme.colors.container.background.base};
+  border: ${({ theme }) => theme.borders[500]};
+  border-color: ${({ theme }) => theme.colors.container.border.base};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  box-shadow: ${({ theme }) => theme.shadows.medium};
+  padding: ${({ theme }) => theme.space[400]};
+`;
+function Popout({
+  children,
+  content,
+  open,
+  defaultOpen,
+  onOpenChange,
+  animationConfig = defaultAnimationConfig,
+  side = "bottom",
+  sideOffset = 8,
+  align = "center",
+  alignOffset = 0,
+  onOpenAutoFocus,
+  onEscapeKeyDown,
+  onCloseAutoFocus,
+  ...rest
+}) {
+  const [isOpen, setIsOpen] = React2.useState(defaultOpen ?? false);
+  const handleOpenChange = React2.useCallback(
+    (newOpen) => {
+      setIsOpen(newOpen);
+      onOpenChange?.(newOpen);
+    },
+    [onOpenChange]
+  );
+  const isControlled = open !== void 0;
+  const popoverOpen = isControlled ? open : isOpen;
+  const popoverOnOpenChange = isControlled ? onOpenChange : handleOpenChange;
+  const radixRef = React2.useRef(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Popover.Root, { open: popoverOpen, onOpenChange: popoverOnOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover.Trigger, { ref: radixRef, asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover.Anchor, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StyledContent,
+      {
+        side,
+        sideOffset,
+        align,
+        alignOffset,
+        onOpenAutoFocus,
+        onEscapeKeyDown,
+        onCloseAutoFocus,
+        role: "presentation",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledMotionDiv, { ...animationConfig, ...rest, children: content })
+      }
+    ) })
+  ] });
+}
+
+// src/v2/Common-V2/PopoutTypes.tsx
+var React3 = require("react");
+
+// src/v2/Common-V2/SelectToggleButton.tsx
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_seeds_react_icon = require("@sproutsocial/seeds-react-icon");
+
+// src/MenuToggleButton/MenuToggleButton.tsx
+var import_seeds_react_button = require("@sproutsocial/seeds-react-button");
+
+// src/MenuContext.tsx
+var import_react3 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var defaultMenuContext = {
+  items: [],
+  itemsMap: {},
+  isItemSelected: () => false,
+  getInputComponentProps: () => ({}),
+  hasVisibleItems: false,
+  isInitialized: false
+};
+var MenuToggleContext = (0, import_react3.createContext)(defaultMenuContext);
+var MenuContentContext = (0, import_react3.createContext)(defaultMenuContext);
+
+// src/MenuToggleButton/MenuToggleButton.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+
+// src/v2/Common-V2/SelectToggleButton.tsx
+var import_seeds_react_button2 = __toESM(require("@sproutsocial/seeds-react-button"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var StyledSelectToggleButton = (0, import_styled_components2.default)(
+  import_seeds_react_button2.default
+)`
+  border-color: ${(props) => props.theme.colors.form.border.base};
+  width: 100%;
+
+  ${(props) => props.invalid && import_styled_components2.css`
+      border-color: ${(props2) => props2.theme.colors.form.border.error};
+    `}
+`;
+var StyledChevron = import_styled_components2.default.div`
+  margin-left: ${({ theme }) => theme.space[300]};
+
+  ${({ invalid }) => invalid && import_styled_components2.css`
+      color: ${(props) => props.theme.colors.icon.error};
+    `}
+`;
+var RotatingIcon = (0, import_styled_components2.default)(import_seeds_react_icon.Icon)`
+  transition: transform 0.15s;
+
+  ${({ $isOpen }) => $isOpen && `
+    transform: rotate(-180deg);
+  `}
+`;
+var StyledInnerButton = import_styled_components2.default.div`
+  display: flex;
+  justify-content: space-between;
+`;
+var EllipsisContent = import_styled_components2.default.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var WrappedContent = import_styled_components2.default.div`
+  flex: 1;
+  width: 100%;
+  text-align: left;
+  text-wrap: auto;
+`;
+var SelectToggleButton = ({
+  children,
+  isOpen,
+  shouldOverflow,
+  ...buttonProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledSelectToggleButton, { ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(StyledInnerButton, { children: [
+    shouldOverflow ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WrappedContent, { children }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EllipsisContent, { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledChevron, { $isOpen: isOpen, invalid: buttonProps.invalid, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      RotatingIcon,
+      {
+        name: "chevron-down-outline",
+        fixedWidth: true,
+        "aria-hidden": true,
+        $isOpen: isOpen
+      }
+    ) })
+  ] }) });
+};
+
+// src/v2/Common-V2/MenuItem.tsx
+var import_react4 = require("react");
+var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
+var import_seeds_react_checkbox2 = require("@sproutsocial/seeds-react-checkbox");
+var import_seeds_react_switch = require("@sproutsocial/seeds-react-switch");
+var import_seeds_react_radio = require("@sproutsocial/seeds-react-radio");
+var import_styled_components4 = require("styled-components");
+var import_seeds_react_box = require("@sproutsocial/seeds-react-box");
+
+// src/MenuItem/styles.tsx
+var import_styled_components3 = __toESM(require("styled-components"));
+var import_seeds_react_mixins = require("@sproutsocial/seeds-react-mixins");
+var import_styled_system = require("styled-system");
+var import_seeds_react_checkbox = require("@sproutsocial/seeds-react-checkbox");
+var highlightedStyles = import_styled_components3.css`
+  cursor: pointer;
+  border: 1px solid ${({ theme }) => theme.colors.listItem.border.base};
+  background-color: ${({ theme }) => theme.colors.listItem.background.hover};
+  color: ${({ theme }) => theme.colors.text.body};
+  text-decoration: none;
+`;
+var activeStyles = import_styled_components3.css`
+  border: 1px solid ${({ theme }) => theme.colors.listItem.border.base};
+  background-color: ${({ theme }) => theme.colors.menuItem.background.active};
+  color: ${({ theme }) => theme.colors.text.body};
+  text-decoration: none;
+`;
+var selectedStyles = import_styled_components3.css`
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+`;
+var MenuItemContainer = import_styled_components3.default.li`
+  box-sizing: border-box;
+  list-style-type: none;
+  margin-left: ${({ theme }) => theme.space[300]};
+  margin-right: ${({ theme }) => theme.space[300]};
+
+  &:first-child {
+    margin-top: ${({ theme }) => theme.space[300]};
+  }
+
+  &:last-child {
+    margin-bottom: ${({ theme }) => theme.space[300]};
+  }
+`;
+var StyledMenuItem = import_styled_components3.default.button`
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: ${({ theme }) => theme.radii[500]};
+  background-color: ${({ theme }) => theme.colors.listItem.background.base};
+  border: 1px solid ${({ theme }) => theme.colors.listItem.background.base};
+  color: ${({ theme }) => theme.colors.text.body};
+  font-family: ${({ theme }) => theme.fontFamily};
+  font-weight: ${({ theme }) => theme.fontWeights.normal};
+  text-align: left;
+  text-decoration: none;
+  padding: ${({ theme }) => theme.space[300]};
+  outline: 0;
+  ${({ theme }) => theme.typography[200]};
+  transition: all ${({ theme }) => theme.duration["fast"]};
+
+  /* Highlighted */
+  ${({ $highlighted }) => $highlighted && highlightedStyles}
+
+  /* Hovered, but not focused */
+  &:hover {
+    ${highlightedStyles}
+    ${import_seeds_react_checkbox.CheckboxContainer} {
+      ${import_seeds_react_checkbox.checkboxContainerHoverStyles}
+    }
+    ${import_seeds_react_checkbox.InputWrapper} {
+      ${import_seeds_react_checkbox.inputWrapperHoverStyles}
+    }
+    ${import_seeds_react_checkbox.PillInput} {
+      ${import_seeds_react_checkbox.pillInputHoverStyles}
+    }
+  }
+
+  /* focused */
+  &:focus {
+    ${import_seeds_react_mixins.focusRing}
+  }
+
+  /* Active */
+  ${({ $active }) => $active && activeStyles}
+
+  /* Pressed state*/
+  &:active {
+    ${activeStyles}
+  }
+
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+    ${import_seeds_react_mixins.disabled}
+  }
+
+  ${({ $selected }) => $selected && selectedStyles}
+
+  ${import_styled_system.border}
+  ${import_styled_system.color}
+  ${import_styled_system.flexbox}
+  ${import_styled_system.grid}
+  ${import_styled_system.layout}
+  ${import_styled_system.space}
+`;
+var MenuItemRow = import_styled_components3.default.div`
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+`;
+var MenuItemAction = import_styled_components3.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+var MenuItemActionLeft = (0, import_styled_components3.default)(MenuItemAction)`
+  margin-right: ${({ theme }) => theme.space[300]};
+`;
+var MenuItemActionRight = (0, import_styled_components3.default)(MenuItemAction)`
+  margin-left: ${({ theme }) => theme.space[300]};
+`;
+var MenuItemText = import_styled_components3.default.div`
+  word-break: break-word;
+  flex-grow: 1;
+  min-width: 0;
+`;
+
+// src/v2/Common-V2/MenuItem.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SelectionIndicator = ({
+  id,
+  inputType = "icon",
+  "aria-labelledby": labeledBy,
+  selected
+}) => {
+  const { space: space4 } = (0, import_styled_components4.useTheme)();
+  const inputStub = (e) => {
+    e.stopPropagation();
+  };
+  switch (inputType) {
+    case "checkbox":
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_seeds_react_checkbox2.Checkbox,
+        {
+          tabIndex: -1,
+          onChange: () => {
+          },
+          checked: selected,
+          "aria-labelledby": labeledBy,
+          id: `MenuItem-${inputType}-${id}`
+        }
+      );
+    case "switch":
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_seeds_react_switch.Switch,
+        {
+          tabIndex: -1,
+          onClick: inputStub,
+          checked: !!selected,
+          "aria-labelledby": labeledBy,
+          id: `MenuItem-${inputType}-${id}`
+        }
+      );
+    case "radio":
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_seeds_react_radio.Radio,
+        {
+          tabIndex: -1,
+          checked: selected,
+          id: `MenuItem-${inputType}-${id}`,
+          name: `MenuItem-${inputType}`,
+          "aria-labelledby": labeledBy
+        }
+      );
+    case "icon":
+      if (selected) {
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_seeds_react_icon2.Icon, { name: "check-solid", "aria-hidden": true, size: "small" });
+      } else {
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_seeds_react_box.Box, { width: space4["400"] });
+      }
+    default:
+      return null;
+  }
+};
+var MenuItem = ({
+  children,
+  $highlighted = false,
+  $active = false,
+  inputType,
+  selected = false,
+  id,
+  style,
+  ...props
+}) => {
+  const labelId = (0, import_react4.useMemo)(
+    () => id ? `menu-item-child-${id}` : `menu-item-child-${Math.random().toString(36).substr(2, 9)}`,
+    [id]
+  );
+  const content = inputType ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItemRow, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MenuItemActionLeft, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      SelectionIndicator,
+      {
+        id: String(id || ""),
+        "aria-labelledby": labelId,
+        inputType,
+        selected
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MenuItemText, { id: labelId, children })
+  ] }) : children;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    StyledMenuItem,
+    {
+      $highlighted,
+      $active,
+      $selected: selected,
+      style,
+      ...props,
+      children: content
+    }
+  );
+};
+
+// src/v2/Common-V2/MenuHeading.tsx
+var import_styled_components5 = __toESM(require("styled-components"));
+var import_seeds_react_box2 = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var MenuHeaderContainer = (0, import_styled_components5.default)(import_seeds_react_box2.default)`
+  border-color: ${({ theme }) => theme.colors.container.border.base};
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.space[350]} ${({ theme }) => theme.space[400]};
+`;
+var MenuHeading = ({
+  label,
+  renderGroupHeading,
+  style,
+  selectable = false,
+  $highlighted = false,
+  selected = false,
+  id,
+  onClick,
+  ...props
+}) => {
+  const combinedStyle = {
+    fontWeight: "bold",
+    ...style
+  };
+  if (selectable) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      MenuItem,
+      {
+        style: combinedStyle,
+        $highlighted,
+        $active: false,
+        inputType: "checkbox",
+        selected,
+        id,
+        onClick,
+        ...props,
+        children: renderGroupHeading ? renderGroupHeading(label) : label
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    MenuHeaderContainer,
+    {
+      style: combinedStyle,
+      role: "option",
+      "aria-disabled": true,
+      "aria-selected": false,
+      children: renderGroupHeading ? renderGroupHeading(label) : label
+    }
+  );
+};
+
+// src/v2/Common-V2/MenuGroup.tsx
+var import_react5 = require("react");
+
+// src/v2/Common-V2/styles.tsx
+var import_styled_components6 = __toESM(require("styled-components"));
+var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
+var import_styled_system2 = require("styled-system");
+var StyledMenuGroup = import_styled_components6.default.li`
+  font-family: ${({ theme }) => theme.fontFamily};
+  &:not(:last-child) {
+    border-bottom: 1px solid
+      ${({ theme }) => theme.colors.container.border.base};
+  }
+  list-style: none;
+  margin: 0;
+
+  ${import_styled_system2.border}
+  ${import_styled_system2.position}
+  ${import_styled_system2.color}
+  ${import_styled_system2.flexbox}
+  ${import_styled_system2.grid}
+  ${import_styled_system2.layout}
+  ${import_styled_system2.space}
+`;
+var StyledTitle = (0, import_styled_components6.default)(import_seeds_react_text.default.SmallSubHeadline)`
+  font-size: ${({ theme }) => theme.typography[100].fontSize};
+  margin: ${({ theme }) => theme.space[400]} ${({ theme }) => theme.space[400]}
+    0px ${({ theme }) => theme.space[400]};
+`;
+var StyledMenuGroupUl = import_styled_components6.default.ul`
+  margin: 0;
+  padding: 0;
+`;
+
+// src/v2/Common-V2/MenuGroup.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var MenuGroup = ({
+  titleAs = "h3",
+  children,
+  title,
+  color: color4,
+  id,
+  ...rest
+}) => {
+  const titleId = `menu-group-title-${Math.random().toString(36).slice(2, 11)}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    StyledMenuGroup,
+    {
+      role: "group",
+      id,
+      "aria-labelledby": title ? titleId : void 0,
+      color: color4,
+      ...rest,
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StyledMenuGroupUl, { children })
+      ]
+    }
+  );
+};
+MenuGroup.__MENU_PRIMITIVE_TYPE = "MenuGroup";
+
+// src/v2/Common-V2/useHighlightedIndex.ts
+var import_react6 = require("react");
+function useHighlightedIndex(items, itemsForDownshift, downshiftHighlightedIndex, hasGroups, selectHeadings) {
+  return (0, import_react6.useMemo)(() => {
+    if (downshiftHighlightedIndex === null || downshiftHighlightedIndex === void 0 || downshiftHighlightedIndex < 0) {
+      return null;
+    }
+    if (!hasGroups) {
+      return downshiftHighlightedIndex;
+    }
+    const highlightedItem = itemsForDownshift[downshiftHighlightedIndex];
+    if (!highlightedItem) {
+      return null;
+    }
+    if (selectHeadings) {
+      return items.findIndex((item) => item === highlightedItem);
+    } else {
+      return items.findIndex(
+        (item) => !isGroupHeading(item) && item === highlightedItem
+      );
+    }
+  }, [
+    items,
+    itemsForDownshift,
+    downshiftHighlightedIndex,
+    hasGroups,
+    selectHeadings
+  ]);
+}
+
+// src/v2/Common-V2/ComboboxContent.tsx
+var import_react7 = require("react");
+var import_react_virtual = require("@tanstack/react-virtual");
+
+// src/MenuContent/styles.tsx
+var import_styled_components7 = __toESM(require("styled-components"));
+var import_styled_system3 = require("styled-system");
+var StyledMenuContent = import_styled_components7.default.ul`
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+
+  ${import_styled_system3.border}
+  ${import_styled_system3.color}
+  ${import_styled_system3.flexbox}
+  ${import_styled_system3.grid}
+  ${import_styled_system3.layout}
+  ${import_styled_system3.space}
+  ${import_styled_system3.position}
+`;
+
+// src/v2/Common-V2/ComboboxContent.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var VirtualizedComboboxContent = ({
+  items,
+  getMenuProps,
+  getItemProps,
+  selectedItems,
+  highlightedIndex,
+  renderItem,
+  renderGroupHeading,
+  EmptyState,
+  itemToKey,
+  inputType,
+  selectHeadings = false,
+  onHeadingClick,
+  groupBy,
+  allData,
+  selectAllItem,
+  ...rest
+}) => {
+  const containerRef = (0, import_react7.useRef)(null);
+  const hasItems = items.some((item) => !isGroupHeading(item));
+  const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
+    count: items.length,
+    getScrollElement: () => containerRef.current,
+    estimateSize: (index) => {
+      const item = items[index];
+      return isGroupHeading(item) ? 30 : 35;
+    }
+  });
+  (0, import_react7.useEffect)(() => {
+    if (highlightedIndex !== void 0 && highlightedIndex !== null && highlightedIndex >= 0) {
+      rowVirtualizer.scrollToIndex(highlightedIndex);
+    }
+  }, [highlightedIndex, rowVirtualizer]);
+  const virtualItems = rowVirtualizer.getVirtualItems();
+  const menuProps = getMenuProps({ ref: containerRef });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...menuProps, ...rest, children: !hasItems && EmptyState ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { padding: "16px" }, children: EmptyState }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    StyledMenuContent,
+    {
+      style: {
+        height: `${rowVirtualizer.getTotalSize()}px`,
+        position: "relative"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            transform: `translateY(${virtualItems[0]?.start ?? 0}px)`
+          },
+          children: virtualItems.map((virtualItem) => {
+            const item = items[virtualItem.index];
+            if (isGroupHeading(item)) {
+              const groupItems2 = groupBy && allData ? allData.filter(
+                (dataItem2) => groupBy(dataItem2) === item.label
+              ) : [];
+              const allSelected = groupItems2.length > 0 && groupItems2.every(
+                (groupItem) => selectedItems.includes(groupItem)
+              );
+              const headingItemProps = selectHeadings ? getItemProps({ index: virtualItem.index }) : {};
+              const handleHeadingClick = (e) => {
+                headingItemProps.onClick?.(e);
+                if (onHeadingClick) {
+                  onHeadingClick(item.label, allSelected);
+                }
+              };
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                MenuHeading,
+                {
+                  ...headingItemProps,
+                  $highlighted: highlightedIndex === virtualItem.index,
+                  label: item.label,
+                  renderGroupHeading,
+                  selectable: selectHeadings,
+                  selected: allSelected,
+                  id: item.id,
+                  onClick: selectHeadings ? handleHeadingClick : void 0,
+                  style: {
+                    width: "100%"
+                  }
+                },
+                virtualItem.key
+              );
+            }
+            if (isToggleItem(item)) {
+              const toggleItem = item;
+              const isItemSelected2 = selectAllItem && toggleItem.id === selectAllItem.id ? allData && allData.length > 0 && allData.every((item2) => selectedItems.includes(item2)) : false;
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                MenuItem,
+                {
+                  inputType,
+                  selected: isItemSelected2,
+                  id: toggleItem.id,
+                  ...getItemProps({ index: virtualItem.index }),
+                  style: {
+                    width: "100%"
+                  },
+                  $highlighted: highlightedIndex === virtualItem.index,
+                  $active: false,
+                  children: toggleItem.label
+                },
+                virtualItem.key
+              );
+            }
+            const dataItem = item;
+            const isItemSelected = selectedItems.includes(dataItem);
+            return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              MenuItem,
+              {
+                inputType,
+                selected: isItemSelected,
+                id: itemToKey(dataItem),
+                ...getItemProps({ index: virtualItem.index }),
+                style: {
+                  width: "100%"
+                },
+                $highlighted: highlightedIndex === virtualItem.index,
+                $active: false,
+                children: renderItem(dataItem)
+              },
+              virtualItem.key
+            );
+          })
+        }
+      )
+    }
+  ) });
+};
+var NormalComboboxContent = ({
+  items,
+  getMenuProps,
+  getItemProps,
+  selectedItems,
+  highlightedIndex,
+  renderItem,
+  renderGroupHeading,
+  EmptyState,
+  itemToKey,
+  inputType,
+  selectHeadings = false,
+  onHeadingClick,
+  groupBy,
+  allData,
+  selectAllItem,
+  ...rest
+}) => {
+  const hasItems = items.some((item) => !isGroupHeading(item));
+  const menuProps = getMenuProps();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...menuProps, ...rest, children: !hasItems && EmptyState ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { padding: "16px" }, children: EmptyState }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    StyledMenuContent,
+    {
+      style: {
+        position: "relative"
+      },
+      children: items.map((item, index) => {
+        if (isGroupHeading(item)) {
+          const groupItems2 = groupBy && allData ? allData.filter(
+            (dataItem2) => groupBy(dataItem2) === item.label
+          ) : [];
+          const allSelected = groupItems2.length > 0 && groupItems2.every(
+            (groupItem) => selectedItems.includes(groupItem)
+          );
+          const headingItemProps = selectHeadings ? getItemProps({ index }) : {};
+          const handleHeadingClick = (e) => {
+            headingItemProps.onClick?.(e);
+            if (onHeadingClick) {
+              onHeadingClick(item.label, allSelected);
+            }
+          };
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            MenuHeading,
+            {
+              ...headingItemProps,
+              $highlighted: highlightedIndex === index,
+              label: item.label,
+              renderGroupHeading,
+              selectable: selectHeadings,
+              selected: allSelected,
+              id: item.id,
+              onClick: selectHeadings ? handleHeadingClick : void 0
+            },
+            index
+          );
+        }
+        if (isToggleItem(item)) {
+          const toggleItem = item;
+          const isItemSelected2 = selectAllItem && toggleItem.id === selectAllItem.id ? allData && allData.length > 0 && allData.every((item2) => selectedItems.includes(item2)) : false;
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            MenuItem,
+            {
+              ...getItemProps({ index }),
+              $highlighted: highlightedIndex === index,
+              $active: false,
+              inputType,
+              selected: isItemSelected2,
+              id: toggleItem.id,
+              children: toggleItem.label
+            },
+            index
+          );
+        }
+        const dataItem = item;
+        const isItemSelected = selectedItems.includes(dataItem);
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          MenuItem,
+          {
+            ...getItemProps({ index }),
+            $highlighted: highlightedIndex === index,
+            $active: false,
+            inputType,
+            selected: isItemSelected,
+            id: itemToKey(dataItem),
+            children: renderItem(dataItem)
+          },
+          index
+        );
+      })
+    }
+  ) });
+};
+var GroupedComboboxContent = ({
+  items,
+  getMenuProps,
+  getItemProps,
+  highlightedIndex,
+  selectedItems,
+  renderItem,
+  renderGroupHeading,
+  EmptyState,
+  itemToKey,
+  itemToString,
+  inputType,
+  onHeadingClick,
+  groupBy,
+  allData,
+  selectAllItem,
+  placeholderItem,
+  ...rest
+}) => {
+  const hasItems = items.some((item) => !isGroupHeading(item));
+  const menuProps = getMenuProps();
+  const groupedItems = groupItems(
+    items,
+    groupBy,
+    allData
+  );
+  let actualItemIndex = placeholderItem ? 1 : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...menuProps, ...rest, children: !hasItems && EmptyState ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { padding: "16px" }, children: EmptyState }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(StyledMenuContent, { style: { position: "relative" }, children: [
+    placeholderItem && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      MenuItem,
+      {
+        ...getItemProps({ index: 0 }),
+        $highlighted: highlightedIndex === 0,
+        $active: false,
+        inputType,
+        selected: selectedItems.length === 0,
+        id: placeholderItem.id,
+        "data-item-index": 0,
+        children: placeholderItem.label
+      },
+      "placeholder-item"
+    ),
+    Array.from(groupedItems.keys()).map((group, groupIndex) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        MenuGroup,
+        {
+          id: `menu-group-${group}`,
+          title: renderGroupHeading ? renderGroupHeading(group) : group,
+          children: groupedItems.get(group)?.map((item) => {
+            const isItemSelected = selectedItems.includes(item);
+            const itemIndex = actualItemIndex;
+            actualItemIndex += 1;
+            return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              MenuItem,
+              {
+                ...getItemProps({ index: itemIndex }),
+                $highlighted: highlightedIndex === itemIndex,
+                $active: false,
+                inputType,
+                selected: isItemSelected,
+                id: itemToKey(item),
+                "data-item-index": itemIndex,
+                children: renderItem(item)
+              },
+              itemIndex
+            );
+          })
+        },
+        groupIndex
+      );
+    })
+  ] }) });
+};
+var ComboboxContent = ({
+  isVirtualized = false,
+  groupBy,
+  selectHeadings = false,
+  ...props
+}) => {
+  if (isVirtualized) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      VirtualizedComboboxContent,
+      {
+        groupBy,
+        selectHeadings,
+        ...props
+      }
+    );
+  }
+  if (groupBy && !selectHeadings) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      GroupedComboboxContent,
+      {
+        groupBy,
+        selectHeadings,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    NormalComboboxContent,
+    {
+      selectHeadings,
+      groupBy,
+      ...props
+    }
+  );
+};
+
+// src/v2/Select/SingleSelect.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function defaultReducer(state, actionAndChanges) {
+  const { changes, type } = actionAndChanges;
+  switch (type) {
+    case import_downshift.useSelect.stateChangeTypes.ItemClick:
+      return {
+        ...changes,
+        isOpen: false,
+        // close the menu after selection for single select
+        highlightedIndex: 0
+        // reset highlight
+      };
+    default:
+      return changes;
+  }
+}
+function SingleSelect({
+  id,
+  data,
+  selectedItemId: controlledSelectedItemId,
+  isOpen: controlledIsOpen,
+  itemToKey = (item) => item?.id,
+  itemToString,
+  itemToSelection,
+  renderSelection,
+  renderItem,
+  groupBy,
+  renderGroupHeading,
+  isVirtualized = false,
+  placeholder,
+  onSelectedItemIdChange,
+  onIsOpenChange,
+  stateReducer = defaultReducer,
+  triggerButtonProps,
+  menuProps,
+  inputType = "icon",
+  removePlaceholderItem = false
+}) {
+  const [uncontrolledSelectedItemId, setUncontrolledSelectedItemId] = (0, import_react8.useState)(null);
+  const [uncontrolledIsOpen, setUncontrolledIsOpen] = (0, import_react8.useState)(false);
+  const isSelectedItemIdControlled = controlledSelectedItemId !== void 0;
+  const selectedItemId = isSelectedItemIdControlled ? controlledSelectedItemId : uncontrolledSelectedItemId;
+  const selectedItem = (0, import_react8.useMemo)(() => {
+    if (selectedItemId === null || selectedItemId === void 0) {
+      return null;
+    }
+    return data.find((item) => itemToKey(item) === selectedItemId) ?? null;
+  }, [selectedItemId, data, itemToKey]);
+  const isIsOpenControlled = controlledIsOpen !== void 0;
+  const isOpen = isIsOpenControlled ? controlledIsOpen : uncontrolledIsOpen;
+  const updateSelectedItem = (newSelectedItem) => {
+    const newSelectedItemId = newSelectedItem ? itemToKey(newSelectedItem) : null;
+    if (!isSelectedItemIdControlled) {
+      setUncontrolledSelectedItemId(newSelectedItemId);
+    }
+    onSelectedItemIdChange?.(newSelectedItemId);
+  };
+  const updateIsOpen = (newIsOpen) => {
+    if (!isIsOpenControlled) {
+      setUncontrolledIsOpen(newIsOpen);
+    }
+    onIsOpenChange?.(newIsOpen);
+  };
+  const items = (0, import_react8.useMemo)(() => {
+    let groupedItems;
+    const placeholderItem = {
+      id: "clear-selection",
+      label: placeholder
+    };
+    if (groupBy) {
+      groupedItems = groupItemsWithHeadings(data, groupBy, data, true);
+    } else {
+      groupedItems = data;
+    }
+    if (!removePlaceholderItem) {
+      groupedItems = [placeholderItem, ...groupedItems];
+    }
+    return groupedItems;
+  }, [data, groupBy, placeholder]);
+  const itemsForSelect = (0, import_react8.useMemo)(() => {
+    return items.filter((item) => !isGroupHeading(item));
+  }, [items]);
+  const itemToStringForDownshift = (0, import_react8.useMemo)(
+    () => createItemToStringForDownshift(itemToString),
+    [itemToString]
+  );
+  const selectProps = (0, import_downshift.useSelect)({
+    toggleButtonId: id,
+    items: itemsForSelect,
+    itemToString: itemToStringForDownshift,
+    // defaultHighlightedIndex: 0,
+    selectedItem,
+    isOpen,
+    stateReducer,
+    onStateChange({ type, selectedItem: newSelectedItem, isOpen: newIsOpen }) {
+      if (newIsOpen !== void 0) {
+        updateIsOpen(newIsOpen);
+      }
+      const isSelectionEvent = type === import_downshift.useSelect.stateChangeTypes.ItemClick || type === import_downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter;
+      if (isSelectionEvent && newSelectedItem && newSelectedItem !== null) {
+        if (newSelectedItem.id === "clear-selection") {
+          updateSelectedItem(null);
+        } else {
+          updateSelectedItem(newSelectedItem);
+        }
+      }
+    }
+  });
+  const {
+    isOpen: selectIsOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    highlightedIndex: selectHighlightedIndex,
+    getItemProps
+  } = selectProps;
+  const highlightedIndex = useHighlightedIndex(
+    items,
+    itemsForSelect,
+    selectHighlightedIndex,
+    !!groupBy,
+    false
+    // Single select components hardcode selectHeadings to false
+  );
+  const buttonContent = renderSelection ? renderSelection(selectedItem) : selectedItem ? itemToSelection ? itemToSelection(selectedItem) : itemToString(selectedItem) : placeholder;
+  const toggleButtonProps = getToggleButtonProps();
+  toggleButtonProps["aria-labelledby"] = void 0;
+  if (!selectIsOpen) {
+    toggleButtonProps["aria-controls"] = void 0;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    Popout,
+    {
+      open: selectIsOpen,
+      onOpenChange: updateIsOpen,
+      animationConfig: menuAnimationConfig,
+      onOpenAutoFocus: (e) => {
+        e.preventDefault();
+      },
+      onCloseAutoFocus: (e) => {
+        e.preventDefault();
+      },
+      content: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        ComboboxContent,
+        {
+          items,
+          getMenuProps,
+          getItemProps: (props) => {
+            const item = items[props.index];
+            if (isToggleItem(item)) {
+              return {
+                onClick: () => {
+                  if (item.id === "clear-selection") {
+                    updateSelectedItem(null);
+                  }
+                }
+              };
+            }
+            const dataItem = item;
+            const itemIndex = itemsForSelect.indexOf(dataItem);
+            if (itemIndex === -1) {
+              return {};
+            }
+            return getItemProps({ item: dataItem, index: itemIndex });
+          },
+          selectedItems: selectedItem ? [selectedItem] : [],
+          highlightedIndex: highlightedIndex ?? -1,
+          renderItem,
+          renderGroupHeading,
+          itemToKey,
+          itemToString,
+          inputType,
+          isVirtualized,
+          groupBy,
+          selectHeadings: false,
+          ...menuProps
+        }
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        SelectToggleButton,
+        {
+          ...toggleButtonProps,
+          ...triggerButtonProps,
+          isOpen: selectIsOpen,
+          children: buttonContent
+        }
+      )
+    }
+  );
+}
+
+// src/v2/Select/MultiSelect.tsx
+var import_react9 = require("react");
+var import_downshift2 = require("downshift");
+var import_seeds_react_label2 = require("@sproutsocial/seeds-react-label");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function defaultReducer2(state, actionAndChanges) {
+  const { changes, type } = actionAndChanges;
+  switch (type) {
+    case import_downshift2.useSelect.stateChangeTypes.ItemClick:
+      return {
+        ...changes,
+        isOpen: true,
+        // keep the menu open after selection.
+        highlightedIndex: 0
+        // with the first option highlighted.
+      };
+    default:
+      if (changes.selectedItem && changes.isOpen === false) {
+        return {
+          ...changes,
+          isOpen: true,
+          // keep the menu open after keyboard selection.
+          highlightedIndex: 0
+          // with the first option highlighted.
+        };
+      }
+      return changes;
+  }
+}
+function MultiSelect({
+  id,
+  data,
+  selectedItemIds: controlledSelectedItemIds,
+  isOpen: controlledIsOpen,
+  itemToKey = (item) => item?.id,
+  itemToString,
+  renderSelections,
+  renderItem,
+  groupBy,
+  renderGroupHeading,
+  isVirtualized = false,
+  showSelectedItems = false,
+  selectHeadings = false,
+  selectAllItem,
+  placeholder,
+  onSelectedItemIdsChange,
+  onIsOpenChange,
+  stateReducer = defaultReducer2,
+  triggerButtonProps,
+  menuProps,
+  inputType = "checkbox",
+  shouldOverflow
+}) {
+  const [uncontrolledSelectedItemIds, setUncontrolledSelectedItemIds] = (0, import_react9.useState)([]);
+  const [uncontrolledIsOpen, setUncontrolledIsOpen] = (0, import_react9.useState)(false);
+  const isSelectedItemIdsControlled = controlledSelectedItemIds !== void 0;
+  const selectedItemIds = isSelectedItemIdsControlled ? controlledSelectedItemIds : uncontrolledSelectedItemIds;
+  const selectedItems = (0, import_react9.useMemo)(() => {
+    return data.filter((item) => selectedItemIds.includes(itemToKey(item)));
+  }, [selectedItemIds, data, itemToKey]);
+  const isIsOpenControlled = controlledIsOpen !== void 0;
+  const isOpen = isIsOpenControlled ? controlledIsOpen : uncontrolledIsOpen;
+  const updateSelectedItems = (newSelectedItems) => {
+    const newSelectedItemIds = newSelectedItems.map((item) => itemToKey(item));
+    if (!isSelectedItemIdsControlled) {
+      setUncontrolledSelectedItemIds(newSelectedItemIds);
+    }
+    onSelectedItemIdsChange?.(newSelectedItemIds);
+  };
+  const updateIsOpen = (newIsOpen) => {
+    if (!isIsOpenControlled) {
+      setUncontrolledIsOpen(newIsOpen);
+    }
+    onIsOpenChange?.(newIsOpen);
+  };
+  const filteredData = (0, import_react9.useMemo)(() => {
+    if (showSelectedItems) {
+      return data;
+    }
+    return data.filter((item) => !selectedItems.includes(item));
+  }, [data, selectedItems, showSelectedItems]);
+  const items = (0, import_react9.useMemo)(() => {
+    let groupedItems;
+    if (groupBy) {
+      groupedItems = groupItemsWithHeadings(filteredData, groupBy, data, true);
+    } else {
+      groupedItems = filteredData;
+    }
+    if (selectAllItem) {
+      return [selectAllItem, ...groupedItems];
+    }
+    return groupedItems;
+  }, [filteredData, groupBy, data, selectAllItem, selectHeadings]);
+  const handleHeadingClick = (0, import_react9.useMemo)(() => {
+    if (!selectHeadings || !groupBy) {
+      return void 0;
+    }
+    return (groupLabel, allSelected) => {
+      const groupItems2 = data.filter((item) => groupBy(item) === groupLabel);
+      if (allSelected) {
+        const newSelectedItems = selectedItems.filter(
+          (item) => !groupItems2.includes(item)
+        );
+        updateSelectedItems(newSelectedItems);
+      } else {
+        const newSelectedItems = [...selectedItems];
+        for (const groupItem of groupItems2) {
+          if (!newSelectedItems.includes(groupItem)) {
+            newSelectedItems.push(groupItem);
+          }
+        }
+        updateSelectedItems(newSelectedItems);
+      }
+    };
+  }, [selectHeadings, groupBy, data, selectedItems, updateSelectedItems]);
+  const { getSelectedItemProps, getDropdownProps, removeSelectedItem } = (0, import_downshift2.useMultipleSelection)({
+    selectedItems,
+    onStateChange({ selectedItems: newSelectedItems, type }) {
+      switch (type) {
+        case import_downshift2.useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
+        case import_downshift2.useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+        case import_downshift2.useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
+        case import_downshift2.useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+          if (newSelectedItems !== void 0) {
+            updateSelectedItems(newSelectedItems);
+          }
+          break;
+        default:
+          break;
+      }
+    }
+  });
+  const itemsForSelect = (0, import_react9.useMemo)(() => {
+    if (selectHeadings) {
+      return items;
+    }
+    return items.filter(
+      (item) => !isGroupHeading(item)
+    );
+  }, [items, selectHeadings]);
+  const itemToStringForDownshift = (0, import_react9.useMemo)(
+    () => createItemToStringForDownshift(itemToString),
+    [itemToString]
+  );
+  const selectProps = (0, import_downshift2.useSelect)({
+    toggleButtonId: id,
+    items: itemsForSelect,
+    itemToString: itemToStringForDownshift,
+    // defaultHighlightedIndex: 0, // after selection, highlight the first item.
+    selectedItem: null,
+    isOpen,
+    stateReducer,
+    // Could maybe let devs override this too?
+    onStateChange({ type, selectedItem: newSelectedItem, isOpen: newIsOpen }) {
+      if (newIsOpen !== void 0) {
+        updateIsOpen(newIsOpen);
+      }
+      if (newSelectedItem && newSelectedItem !== null) {
+        const isSelectionEvent = type === import_downshift2.useSelect.stateChangeTypes.ItemClick || type === import_downshift2.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter;
+        if (isSelectionEvent) {
+          if (selectAllItem && isToggleItem(newSelectedItem) && newSelectedItem.id === selectAllItem.id) {
+            const allSelected = data.length > 0 && data.every((item) => selectedItems.includes(item));
+            if (allSelected) {
+              updateSelectedItems([]);
+            } else {
+              updateSelectedItems([...data]);
+            }
+          } else if (selectHeadings && groupBy && isGroupHeading(newSelectedItem)) {
+            const groupLabel = newSelectedItem.label;
+            const groupItems2 = data.filter(
+              (item) => groupBy(item) === groupLabel
+            );
+            const allSelected = groupItems2.length > 0 && groupItems2.every((item) => selectedItems.includes(item));
+            if (allSelected) {
+              updateSelectedItems(
+                selectedItems.filter((item) => !groupItems2.includes(item))
+              );
+            } else {
+              const newItems = [
+                ...selectedItems.filter((item) => !groupItems2.includes(item)),
+                ...groupItems2
+              ];
+              updateSelectedItems(newItems);
+            }
+          } else if (!isGroupHeading(newSelectedItem) && !isToggleItem(newSelectedItem)) {
+            const itemIndex = selectedItems.findIndex(
+              (item) => itemToKey(item) === itemToKey(newSelectedItem)
+            );
+            if (itemIndex >= 0) {
+              updateSelectedItems(
+                selectedItems.filter((_, index) => index !== itemIndex)
+              );
+            } else {
+              updateSelectedItems([...selectedItems, newSelectedItem]);
+            }
+          }
+        }
+      }
+    }
+  });
+  const {
+    isOpen: selectIsOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    highlightedIndex: selectHighlightedIndex,
+    getItemProps
+  } = selectProps;
+  const highlightedIndex = useHighlightedIndex(
+    items,
+    itemsForSelect,
+    selectHighlightedIndex,
+    !!groupBy,
+    selectHeadings ?? false
+  );
+  const buttonText = renderSelections ? renderSelections(selectedItems) : selectedItems.length > 0 ? selectedItems.map((item) => itemToString(item)).join(", ") : placeholder;
+  const toggleButtonIdProps = getToggleButtonProps();
+  toggleButtonIdProps["aria-labelledby"] = void 0;
+  if (!selectIsOpen) {
+    toggleButtonIdProps["aria-controls"] = void 0;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    Popout,
+    {
+      open: selectIsOpen,
+      onOpenChange: updateIsOpen,
+      onOpenAutoFocus: (e) => {
+        e.preventDefault();
+      },
+      onCloseAutoFocus: (e) => {
+        e.preventDefault();
+      },
+      animationConfig: menuAnimationConfig,
+      content: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        ComboboxContent,
+        {
+          items,
+          getMenuProps,
+          getItemProps: (props) => {
+            const item = items[props.index];
+            if (isToggleItem(item)) {
+              return {
+                onClick: () => {
+                  const allSelected = data.length > 0 && data.every((item2) => selectedItems.includes(item2));
+                  if (allSelected) {
+                    updateSelectedItems([]);
+                  } else {
+                    updateSelectedItems([...data]);
+                  }
+                }
+              };
+            }
+            const dataItem = item;
+            const itemIndex = itemsForSelect.indexOf(dataItem);
+            if (itemIndex === -1) {
+              return {};
+            }
+            return getItemProps({ item: dataItem, index: itemIndex });
+          },
+          selectedItems,
+          highlightedIndex: highlightedIndex ?? -1,
+          renderItem,
+          renderGroupHeading,
+          itemToKey,
+          itemToString,
+          inputType,
+          selectHeadings,
+          onHeadingClick: handleHeadingClick,
+          groupBy,
+          allData: data,
+          selectAllItem,
+          isVirtualized,
+          ...menuProps
+        }
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        SelectToggleButton,
+        {
+          ...toggleButtonIdProps,
+          ...triggerButtonProps,
+          isOpen: selectIsOpen,
+          shouldOverflow,
+          children: buttonText
+        }
+      )
+    }
+  );
+}
+
+// src/v2/Autocomplete/SingleAutocomplete.tsx
+var import_react10 = require("react");
+var import_downshift3 = require("downshift");
+var import_seeds_react_label3 = require("@sproutsocial/seeds-react-label");
+var import_seeds_react_input = require("@sproutsocial/seeds-react-input");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function defaultReducer3(state, actionAndChanges) {
+  const { changes, type } = actionAndChanges;
+  switch (type) {
+    case import_downshift3.useCombobox.stateChangeTypes.InputKeyDownEnter:
+    case import_downshift3.useCombobox.stateChangeTypes.ItemClick:
+      return {
+        ...changes,
+        isOpen: false,
+        // close the menu after selection for single select
+        highlightedIndex: 0
+        // reset highlight
+      };
+    default:
+      return changes;
+  }
+}
+function SingleAutocomplete({
+  id,
+  data,
+  selectedItemId: controlledSelectedItemId,
+  inputValue: controlledInputValue,
+  isOpen: controlledIsOpen,
+  itemToKey = (item) => item?.id,
+  itemToString,
+  itemToSearchString,
+  renderItem,
+  groupBy,
+  renderGroupHeading,
+  isVirtualized = false,
+  EmptyState,
+  placeholder,
+  onSelectedItemIdChange,
+  onInputValueChange,
+  onIsOpenChange,
+  stateReducer = defaultReducer3,
+  menuProps,
+  inputType = "icon",
+  includePlaceholderItem = false
+}) {
+  const [uncontrolledInputValue, setUncontrolledInputValue] = (0, import_react10.useState)("");
+  const [uncontrolledSelectedItemId, setUncontrolledSelectedItemId] = (0, import_react10.useState)(null);
+  const [uncontrolledIsOpen, setUncontrolledIsOpen] = (0, import_react10.useState)(false);
+  const isSelectedItemIdControlled = controlledSelectedItemId !== void 0;
+  const selectedItemId = isSelectedItemIdControlled ? controlledSelectedItemId : uncontrolledSelectedItemId;
+  const selectedItem = (0, import_react10.useMemo)(() => {
+    if (selectedItemId === null || selectedItemId === void 0) {
+      return null;
+    }
+    return data.find((item) => itemToKey(item) === selectedItemId) ?? null;
+  }, [selectedItemId, data, itemToKey]);
+  const isInputValueControlled = controlledInputValue !== void 0;
+  const inputValue = isInputValueControlled ? controlledInputValue : uncontrolledInputValue;
+  const isIsOpenControlled = controlledIsOpen !== void 0;
+  const isOpen = isIsOpenControlled ? controlledIsOpen : uncontrolledIsOpen;
+  (0, import_react10.useEffect)(() => {
+    if (selectedItem && !isOpen) {
+      const selectedItemString = itemToString(selectedItem);
+      if (!isInputValueControlled && uncontrolledInputValue !== selectedItemString) {
+        setUncontrolledInputValue(selectedItemString);
+      } else if (isInputValueControlled && inputValue !== selectedItemString) {
+        updateInputValue(selectedItemString);
+      }
+    }
+  }, [
+    selectedItem,
+    isOpen,
+    isInputValueControlled,
+    itemToString,
+    uncontrolledInputValue
+  ]);
+  const updateSelectedItem = (newSelectedItem) => {
+    const newSelectedItemId = newSelectedItem ? itemToKey(newSelectedItem) : null;
+    if (!isSelectedItemIdControlled) {
+      setUncontrolledSelectedItemId(newSelectedItemId);
+    }
+    onSelectedItemIdChange?.(newSelectedItemId);
+  };
+  const updateInputValue = (newInputValue) => {
+    if (!isInputValueControlled) {
+      setUncontrolledInputValue(newInputValue);
+    }
+    onInputValueChange?.(newInputValue);
+  };
+  const updateIsOpen = (newIsOpen) => {
+    if (!isIsOpenControlled) {
+      setUncontrolledIsOpen(newIsOpen);
+    }
+    onIsOpenChange?.(newIsOpen);
+  };
+  const searchStringFn = itemToSearchString ?? ((item) => itemToString(item));
+  const filteredItems = (0, import_react10.useMemo)(
+    () => getFilteredItems(data, inputValue, searchStringFn, itemToString, {
+      selectedItem
+    }),
+    [data, selectedItem, inputValue, searchStringFn, itemToString]
+  );
+  const placeholderItem = {
+    id: "clear-selection",
+    label: placeholder
+  };
+  const items = (0, import_react10.useMemo)(() => {
+    let groupedItems;
+    if (groupBy) {
+      groupedItems = groupItemsWithHeadings(
+        filteredItems,
+        groupBy,
+        data,
+        isVirtualized
+      );
+    } else {
+      groupedItems = filteredItems;
+    }
+    groupedItems = includePlaceholderItem ? [placeholderItem, ...groupedItems] : groupedItems;
+    return groupedItems;
+  }, [
+    filteredItems,
+    placeholder,
+    groupBy,
+    data,
+    includePlaceholderItem,
+    isVirtualized
+  ]);
+  const itemsForCombobox = (0, import_react10.useMemo)(() => {
+    return items.filter(
+      (item) => !isGroupHeading(item)
+    );
+  }, [items]);
+  const itemToStringForDownshift = (0, import_react10.useMemo)(
+    () => createItemToStringForDownshift(itemToString),
+    [itemToString]
+  );
+  const comboboxProps = (0, import_downshift3.useCombobox)({
+    inputId: id,
+    items: itemsForCombobox,
+    itemToString: itemToStringForDownshift,
+    defaultHighlightedIndex: 0,
+    selectedItem,
+    inputValue,
+    isOpen,
+    stateReducer,
+    onStateChange({
+      inputValue: newInputValue,
+      type,
+      selectedItem: newSelectedItem,
+      isOpen: newIsOpen
+    }) {
+      if (newIsOpen !== void 0 && type !== import_downshift3.useCombobox.stateChangeTypes.InputBlur) {
+        updateIsOpen(newIsOpen);
+      }
+      switch (type) {
+        case import_downshift3.useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case import_downshift3.useCombobox.stateChangeTypes.ItemClick:
+          if (newSelectedItem) {
+            updateSelectedItem(newSelectedItem);
+            if (newSelectedItem.id === "clear-selection") {
+              updateInputValue("");
+              return;
+            }
+            updateInputValue(itemToString(newSelectedItem));
+          }
+          break;
+        case import_downshift3.useCombobox.stateChangeTypes.InputChange:
+          updateInputValue(newInputValue ?? "");
+          if (newInputValue === "" && selectedItem && !isInputValueControlled) {
+            updateSelectedItem(null);
+          }
+          break;
+        default:
+          break;
+      }
+    }
+  });
+  const {
+    isOpen: comboboxIsOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex: comboboxHighlightedIndex,
+    getItemProps,
+    selectedItem: comboboxSelectedItem
+  } = comboboxProps;
+  const highlightedIndex = useHighlightedIndex(
+    items,
+    itemsForCombobox,
+    comboboxHighlightedIndex,
+    !!groupBy,
+    false
+    // Single select components hardcode selectHeadings to false
+  );
+  const inputProps = getInputProps();
+  inputProps["aria-labelledby"] = void 0;
+  if (!comboboxIsOpen) {
+    inputProps["aria-controls"] = void 0;
+  }
+  const { ref, id: inputId, ...restProps } = inputProps;
+  const handleBlur = (e) => {
+    if (inputProps.onBlur) {
+      inputProps.onBlur(e);
+    }
+    updateIsOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    Popout,
+    {
+      open: comboboxIsOpen,
+      onOpenChange: updateIsOpen,
+      animationConfig: menuAnimationConfig,
+      onOpenAutoFocus: (e) => {
+        e.preventDefault();
+      },
+      onCloseAutoFocus: (e) => {
+        e.preventDefault();
+      },
+      content: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        ComboboxContent,
+        {
+          items,
+          getMenuProps,
+          getItemProps: (props) => {
+            const item = items[props.index];
+            const dataItem = item;
+            const itemIndex = itemsForCombobox.indexOf(dataItem);
+            if (itemIndex === -1) {
+              return {};
+            }
+            return getItemProps({ item: dataItem, index: itemIndex });
+          },
+          selectedItems: selectedItem ? [selectedItem] : [],
+          highlightedIndex: highlightedIndex ?? -1,
+          renderItem,
+          renderGroupHeading,
+          EmptyState,
+          itemToKey,
+          itemToString,
+          inputType,
+          selectHeadings: false,
+          groupBy,
+          isVirtualized,
+          placeholderItem: includePlaceholderItem ? placeholderItem : void 0,
+          ...menuProps
+        }
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_seeds_react_input.Input,
+        {
+          id,
+          inputProps: {
+            ...restProps,
+            autoComplete: "off",
+            onBlur: handleBlur
+          },
+          innerRef: ref,
+          placeholder,
+          elemAfter: !includePlaceholderItem ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_seeds_react_input.Input.ClearButton, {}) : void 0,
+          clearButtonLabel: "Clear selection",
+          onClear: () => {
+            updateSelectedItem(null);
+            updateInputValue("");
+          },
+          ...restProps,
+          onBlur: handleBlur
+        }
+      )
+    }
+  );
+}
+
+// src/v2/Autocomplete/MultiAutocomplete.tsx
+var import_react11 = require("react");
+var import_downshift4 = require("downshift");
+var import_seeds_react_label4 = require("@sproutsocial/seeds-react-label");
+var import_seeds_react_token_input = require("@sproutsocial/seeds-react-token-input");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function defaultReducer4(state, actionAndChanges) {
+  const { changes, type } = actionAndChanges;
+  switch (type) {
+    case import_downshift4.useCombobox.stateChangeTypes.InputKeyDownEnter:
+    case import_downshift4.useCombobox.stateChangeTypes.ItemClick:
+      return {
+        ...changes,
+        isOpen: true,
+        // keep the menu open after selection.
+        highlightedIndex: 0
+        // with the first option highlighted.
+      };
+    default:
+      return changes;
+  }
+}
+function MultiAutocomplete({
+  id,
+  data,
+  selectedItemIds: controlledSelectedItemIds,
+  inputValue: controlledInputValue,
+  isOpen: controlledIsOpen,
+  itemToKey = (item) => item?.id,
+  itemToString,
+  itemToSearchString,
+  renderItem,
+  groupBy,
+  renderGroupHeading,
+  isVirtualized = false,
+  showSelectedItems = false,
+  selectHeadings = false,
+  selectAllItem,
+  EmptyState,
+  placeholder,
+  onSelectedItemIdsChange,
+  onInputValueChange,
+  onIsOpenChange,
+  stateReducer = defaultReducer4,
+  menuProps,
+  inputType = "checkbox"
+}) {
+  const [uncontrolledInputValue, setUncontrolledInputValue] = (0, import_react11.useState)("");
+  const [uncontrolledSelectedItemIds, setUncontrolledSelectedItemIds] = (0, import_react11.useState)([]);
+  const [uncontrolledIsOpen, setUncontrolledIsOpen] = (0, import_react11.useState)(false);
+  const isSelectedItemIdsControlled = controlledSelectedItemIds !== void 0;
+  const selectedItemIds = isSelectedItemIdsControlled ? controlledSelectedItemIds : uncontrolledSelectedItemIds;
+  const selectedItems = (0, import_react11.useMemo)(() => {
+    return data.filter((item) => selectedItemIds.includes(itemToKey(item)));
+  }, [selectedItemIds, data, itemToKey]);
+  const isInputValueControlled = controlledInputValue !== void 0;
+  const inputValue = isInputValueControlled ? controlledInputValue : uncontrolledInputValue;
+  const isIsOpenControlled = controlledIsOpen !== void 0;
+  const isOpen = isIsOpenControlled ? controlledIsOpen : uncontrolledIsOpen;
+  const updateSelectedItems = (newSelectedItems) => {
+    const newSelectedItemIds = newSelectedItems.map((item) => itemToKey(item));
+    if (!isSelectedItemIdsControlled) {
+      setUncontrolledSelectedItemIds(newSelectedItemIds);
+    }
+    onSelectedItemIdsChange?.(newSelectedItemIds);
+  };
+  const updateInputValue = (newInputValue) => {
+    if (!isInputValueControlled) {
+      setUncontrolledInputValue(newInputValue);
+    }
+    onInputValueChange?.(newInputValue);
+  };
+  const updateIsOpen = (newIsOpen) => {
+    if (!isIsOpenControlled) {
+      setUncontrolledIsOpen(newIsOpen);
+    }
+    onIsOpenChange?.(newIsOpen);
+  };
+  const searchStringFn = itemToSearchString ?? ((item) => itemToString(item));
+  const filteredItems = (0, import_react11.useMemo)(
+    () => getFilteredItems(data, inputValue, searchStringFn, itemToString, {
+      selectedItems,
+      showSelectedItems
+    }),
+    [data, selectedItems, inputValue, searchStringFn, showSelectedItems]
+  );
+  const items = (0, import_react11.useMemo)(() => {
+    let listItems;
+    if (groupBy) {
+      listItems = groupItemsWithHeadings(
+        filteredItems,
+        groupBy,
+        data,
+        selectHeadings
+      );
+    } else {
+      listItems = filteredItems;
+    }
+    if (selectAllItem) {
+      return [selectAllItem, ...listItems];
+    }
+    return listItems;
+  }, [filteredItems, groupBy, selectAllItem, selectHeadings, data]);
+  const handleHeadingClick = (0, import_react11.useMemo)(() => {
+    if (!selectHeadings || !groupBy) {
+      return void 0;
+    }
+    return (groupLabel, allSelected) => {
+      const groupItems2 = data.filter((item) => groupBy(item) === groupLabel);
+      if (allSelected) {
+        const newSelectedItems = selectedItems.filter(
+          (item) => !groupItems2.includes(item)
+        );
+        updateSelectedItems(newSelectedItems);
+      } else {
+        const newSelectedItems = [...selectedItems];
+        for (const groupItem of groupItems2) {
+          if (!newSelectedItems.includes(groupItem)) {
+            newSelectedItems.push(groupItem);
+          }
+        }
+        updateSelectedItems(newSelectedItems);
+      }
+    };
+  }, [selectHeadings, groupBy, data, selectedItems, updateSelectedItems]);
+  const { getSelectedItemProps, getDropdownProps, removeSelectedItem } = (0, import_downshift4.useMultipleSelection)({
+    selectedItems,
+    onStateChange({ selectedItems: newSelectedItems, type }) {
+      switch (type) {
+        case import_downshift4.useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
+        case import_downshift4.useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+        case import_downshift4.useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
+        case import_downshift4.useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+          if (newSelectedItems !== void 0) {
+            updateSelectedItems(newSelectedItems);
+          }
+          break;
+        default:
+          break;
+      }
+    }
+  });
+  const itemsForCombobox = (0, import_react11.useMemo)(() => {
+    if (selectHeadings) {
+      return items;
+    }
+    return items.filter(
+      (item) => !isGroupHeading(item)
+    );
+  }, [items, selectHeadings]);
+  const itemToStringForDownshift = (0, import_react11.useMemo)(
+    () => createItemToStringForDownshift(itemToString),
+    [itemToString]
+  );
+  const comboboxProps = (0, import_downshift4.useCombobox)({
+    inputId: id,
+    items: itemsForCombobox,
+    itemToString: itemToStringForDownshift,
+    defaultHighlightedIndex: 0,
+    // after selection, highlight the first item.
+    selectedItem: null,
+    inputValue,
+    isOpen,
+    stateReducer,
+    // Could maybe let devs override this too?
+    onStateChange({
+      inputValue: newInputValue,
+      type,
+      selectedItem: newSelectedItem,
+      isOpen: newIsOpen
+    }) {
+      if (newIsOpen !== void 0) {
+        updateIsOpen(newIsOpen);
+      }
+      switch (type) {
+        case import_downshift4.useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case import_downshift4.useCombobox.stateChangeTypes.ItemClick:
+          if (newSelectedItem) {
+            if (selectAllItem && isToggleItem(newSelectedItem) && newSelectedItem.id === selectAllItem.id) {
+              const allSelected = data.length > 0 && data.every((item) => selectedItems.includes(item));
+              if (allSelected) {
+                updateSelectedItems([]);
+              } else {
+                updateSelectedItems([...data]);
+              }
+              updateInputValue("");
+            } else if (selectHeadings && groupBy && isGroupHeading(newSelectedItem)) {
+              const groupLabel = newSelectedItem.label;
+              const groupItems2 = data.filter(
+                (item) => groupBy(item) === groupLabel
+              );
+              const allSelected = groupItems2.length > 0 && groupItems2.every((item) => selectedItems.includes(item));
+              if (allSelected) {
+                updateSelectedItems(
+                  selectedItems.filter((item) => !groupItems2.includes(item))
+                );
+              } else {
+                const newItems = [
+                  ...selectedItems.filter((item) => !groupItems2.includes(item)),
+                  ...groupItems2
+                ];
+                updateSelectedItems(newItems);
+              }
+              updateInputValue("");
+            } else if (!isGroupHeading(newSelectedItem) && !isToggleItem(newSelectedItem)) {
+              const itemIndex = selectedItems.findIndex(
+                (item) => itemToKey(item) === itemToKey(newSelectedItem)
+              );
+              if (itemIndex >= 0) {
+                updateSelectedItems(
+                  selectedItems.filter((_, index) => index !== itemIndex)
+                );
+              } else {
+                updateSelectedItems([...selectedItems, newSelectedItem]);
+              }
+              updateInputValue("");
+            }
+          }
+          break;
+        case import_downshift4.useCombobox.stateChangeTypes.InputChange:
+          updateInputValue(newInputValue ?? "");
+          break;
+        default:
+          break;
+      }
+    }
+  });
+  const {
+    isOpen: comboboxIsOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex: comboboxHighlightedIndex,
+    getItemProps,
+    selectedItem
+  } = comboboxProps;
+  const highlightedIndex = useHighlightedIndex(
+    items,
+    itemsForCombobox,
+    comboboxHighlightedIndex,
+    !!groupBy,
+    selectHeadings ?? false
+  );
+  const inputProps = getInputProps({ preventKeyAction: isOpen });
+  inputProps["aria-labelledby"] = void 0;
+  if (!comboboxIsOpen) {
+    inputProps["aria-controls"] = void 0;
+  }
+  const handleBlur = (e) => {
+    if (inputProps.onBlur) {
+      inputProps.onBlur(e);
+    }
+  };
+  const inputPropsToSpread = { ...inputProps };
+  delete inputPropsToSpread.onBlur;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    Popout,
+    {
+      open: comboboxIsOpen,
+      onOpenChange: updateIsOpen,
+      onOpenAutoFocus: (e) => {
+        e.preventDefault();
+      },
+      onCloseAutoFocus: (e) => {
+        e.preventDefault();
+      },
+      animationConfig: menuAnimationConfig,
+      content: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        ComboboxContent,
+        {
+          items,
+          getMenuProps,
+          getItemProps: (props) => {
+            const item = items[props.index];
+            if (isToggleItem(item)) {
+              return {
+                onClick: () => {
+                  const allSelected = data.length > 0 && data.every((item2) => selectedItems.includes(item2));
+                  if (allSelected) {
+                    updateSelectedItems([]);
+                  } else {
+                    updateSelectedItems([...data]);
+                  }
+                }
+              };
+            }
+            const dataItem = item;
+            const itemIndex = itemsForCombobox.indexOf(dataItem);
+            if (itemIndex === -1) {
+              return {};
+            }
+            return getItemProps({ item: dataItem, index: itemIndex });
+          },
+          selectedItems,
+          highlightedIndex: highlightedIndex ?? -1,
+          renderItem,
+          renderGroupHeading,
+          EmptyState,
+          itemToKey,
+          itemToString,
+          inputType,
+          selectHeadings,
+          onHeadingClick: handleHeadingClick,
+          groupBy,
+          allData: data,
+          selectAllItem,
+          isVirtualized,
+          ...menuProps
+        }
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        import_seeds_react_token_input.TokenInput,
+        {
+          placeholder,
+          inputProps: {
+            ...inputPropsToSpread,
+            autoComplete: "off"
+            // Override with "off" to prevent browser autocomplete
+          },
+          tokens: selectedItems.map((item) => ({
+            id: String(itemToKey(item)),
+            value: itemToString(item)
+          })),
+          onRemoveToken: (tokenId) => {
+            const itemToRemove = selectedItems.find(
+              (item) => String(itemToKey(item)) === tokenId
+            );
+            if (itemToRemove) {
+              removeSelectedItem(itemToRemove);
+            }
+          },
+          onClickToken: (e) => {
+            e.stopPropagation();
+          },
+          onBlur: handleBlur
+        }
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MultiAutocomplete,
+  MultiSelect,
+  SingleAutocomplete,
+  SingleSelect
+});
+//# sourceMappingURL=index.js.map