@sproutsocial/seeds-react-menu 1.16.16 → 1.18.0

package/dist/esm/v2/index.js

@@ -1,2089 +0,0 @@
-import {
-  MenuItemActionLeft,
-  MenuItemRow,
-  MenuItemText,
-  StyledMenuContent,
-  StyledMenuItem
-} from "../chunk-ROQATIB7.js";
-
-// src/v2/Select/SingleSelect.tsx
-import { useState as useState2, useMemo as useMemo3 } from "react";
-import { useSelect } from "downshift";
-import "@sproutsocial/seeds-react-label";
-
-// src/v2/Common-V2/utils.ts
-import "react";
-import { MOTION_DURATION_FAST } from "@sproutsocial/seeds-motion/unitless";
-import "@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: MOTION_DURATION_FAST,
-        ease: "circOut"
-      }
-    }),
-    exit: {
-      opacity: 0,
-      scale: 1,
-      transition: {
-        type: "tween",
-        duration: 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
-import * as React2 from "react";
-import { motion } from "motion/react";
-import * as Popover from "@radix-ui/react-popover";
-import { MOTION_DURATION_FAST as MOTION_DURATION_FAST2 } from "@sproutsocial/seeds-motion/unitless";
-import styled from "styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
-var defaultAnimationConfig = {
-  initial: { opacity: 0 },
-  animate: { opacity: 1 },
-  exit: { opacity: 0 },
-  transition: {
-    ease: "circOut",
-    type: "tween",
-    duration: MOTION_DURATION_FAST2
-  }
-};
-var StyledContent = styled(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 = styled(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,
-  onPointerDownOutside,
-  onInteractOutside,
-  ...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__ */ jsxs(Popover.Root, { open: popoverOpen, onOpenChange: popoverOnOpenChange, children: [
-    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx(Popover.Trigger, { ref: radixRef, asChild: true, children }),
-      /* @__PURE__ */ jsx(
-        Popover.Anchor,
-        {
-          style: {
-            position: "absolute",
-            top: side === "top" ? 0 : "100%",
-            left: 0,
-            right: 0,
-            height: "1px"
-          }
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
-      StyledContent,
-      {
-        side,
-        sideOffset,
-        align,
-        alignOffset,
-        onOpenAutoFocus,
-        onEscapeKeyDown,
-        onCloseAutoFocus,
-        onPointerDownOutside,
-        onInteractOutside,
-        role: "presentation",
-        children: /* @__PURE__ */ jsx(StyledMotionDiv, { ...animationConfig, ...rest, children: content })
-      }
-    ) })
-  ] });
-}
-
-// src/v2/Common-V2/PopoutTypes.tsx
-import "react";
-
-// src/v2/Common-V2/SelectToggleButton.tsx
-import styled2, { css } from "styled-components";
-import { Icon } from "@sproutsocial/seeds-react-icon";
-import Button from "@sproutsocial/seeds-react-button";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var StyledSelectToggleButton = styled2(
-  Button
-)`
-  border-color: ${(props) => props.theme.colors.form.border.base};
-  width: 100%;
-
-  ${(props) => props.invalid && css`
-      border-color: ${(props2) => props2.theme.colors.form.border.error};
-    `}
-`;
-var StyledChevron = styled2.div`
-  margin-left: ${({ theme }) => theme.space[300]};
-
-  ${({ invalid }) => invalid && css`
-      color: ${(props) => props.theme.colors.icon.error};
-    `}
-`;
-var RotatingIcon = styled2(Icon)`
-  transition: transform 0.15s;
-
-  ${({ $isOpen }) => $isOpen && `
-    transform: rotate(-180deg);
-  `}
-`;
-var StyledInnerButton = styled2.div`
-  display: flex;
-  justify-content: space-between;
-`;
-var EllipsisContent = styled2.div`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-var WrappedContent = styled2.div`
-  flex: 1;
-  width: 100%;
-  text-align: left;
-  text-wrap: auto;
-`;
-var SelectToggleButton = ({
-  children,
-  isOpen,
-  shouldOverflow,
-  ...buttonProps
-}) => {
-  return /* @__PURE__ */ jsx2(StyledSelectToggleButton, { ...buttonProps, children: /* @__PURE__ */ jsxs2(StyledInnerButton, { children: [
-    shouldOverflow ? /* @__PURE__ */ jsx2(WrappedContent, { children }) : /* @__PURE__ */ jsx2(EllipsisContent, { children }),
-    /* @__PURE__ */ jsx2(StyledChevron, { $isOpen: isOpen, invalid: buttonProps.invalid, children: /* @__PURE__ */ jsx2(
-      RotatingIcon,
-      {
-        name: "chevron-down-outline",
-        fixedWidth: true,
-        "aria-hidden": true,
-        $isOpen: isOpen
-      }
-    ) })
-  ] }) });
-};
-
-// src/v2/Common-V2/MenuItem.tsx
-import { useMemo } from "react";
-import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
-import { Checkbox } from "@sproutsocial/seeds-react-checkbox";
-import { Switch } from "@sproutsocial/seeds-react-switch";
-import { Radio } from "@sproutsocial/seeds-react-radio";
-import { useTheme } from "styled-components";
-import { Box } from "@sproutsocial/seeds-react-box";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var SelectionIndicator = ({
-  id,
-  inputType = "icon",
-  "aria-labelledby": labeledBy,
-  selected
-}) => {
-  const { space: space2 } = useTheme();
-  const inputStub = (e) => {
-    e.stopPropagation();
-  };
-  switch (inputType) {
-    case "checkbox":
-      return /* @__PURE__ */ jsx3(
-        Checkbox,
-        {
-          tabIndex: -1,
-          onChange: () => {
-          },
-          checked: selected,
-          "aria-labelledby": labeledBy,
-          id: `MenuItem-${inputType}-${id}`
-        }
-      );
-    case "switch":
-      return /* @__PURE__ */ jsx3(
-        Switch,
-        {
-          tabIndex: -1,
-          onClick: inputStub,
-          checked: !!selected,
-          "aria-labelledby": labeledBy,
-          id: `MenuItem-${inputType}-${id}`
-        }
-      );
-    case "radio":
-      return /* @__PURE__ */ jsx3(
-        Radio,
-        {
-          tabIndex: -1,
-          checked: selected,
-          id: `MenuItem-${inputType}-${id}`,
-          name: `MenuItem-${inputType}`,
-          "aria-labelledby": labeledBy
-        }
-      );
-    case "icon":
-      if (selected) {
-        return /* @__PURE__ */ jsx3(Icon2, { name: "check-solid", "aria-hidden": true, size: "small" });
-      } else {
-        return /* @__PURE__ */ jsx3(Box, { width: space2["400"] });
-      }
-    default:
-      return null;
-  }
-};
-var MenuItem = ({
-  children,
-  $highlighted = false,
-  $active = false,
-  inputType,
-  selected = false,
-  id,
-  style,
-  ...props
-}) => {
-  const labelId = useMemo(
-    () => id ? `menu-item-child-${id}` : `menu-item-child-${Math.random().toString(36).substr(2, 9)}`,
-    [id]
-  );
-  const content = inputType ? /* @__PURE__ */ jsxs3(MenuItemRow, { children: [
-    /* @__PURE__ */ jsx3(MenuItemActionLeft, { children: /* @__PURE__ */ jsx3(
-      SelectionIndicator,
-      {
-        id: String(id || ""),
-        "aria-labelledby": labelId,
-        inputType,
-        selected
-      }
-    ) }),
-    /* @__PURE__ */ jsx3(MenuItemText, { id: labelId, children })
-  ] }) : children;
-  return /* @__PURE__ */ jsx3(
-    StyledMenuItem,
-    {
-      $highlighted,
-      $active,
-      $selected: selected,
-      style,
-      ...props,
-      children: content
-    }
-  );
-};
-
-// src/v2/Common-V2/MenuHeading.tsx
-import styled3 from "styled-components";
-import Box2 from "@sproutsocial/seeds-react-box";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var MenuHeaderContainer = styled3(Box2)`
-  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__ */ jsx4(
-      MenuItem,
-      {
-        style: combinedStyle,
-        $highlighted,
-        $active: false,
-        inputType: "checkbox",
-        selected,
-        id,
-        onClick,
-        ...props,
-        children: renderGroupHeading ? renderGroupHeading(label) : label
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx4(
-    MenuHeaderContainer,
-    {
-      style: combinedStyle,
-      role: "option",
-      "aria-disabled": true,
-      "aria-selected": false,
-      children: renderGroupHeading ? renderGroupHeading(label) : label
-    }
-  );
-};
-
-// src/v2/Common-V2/MenuGroup.tsx
-import "react";
-
-// src/v2/Common-V2/styles.tsx
-import styled4 from "styled-components";
-import Text from "@sproutsocial/seeds-react-text";
-import {
-  border,
-  layout,
-  position,
-  flexbox,
-  grid,
-  color,
-  space
-} from "styled-system";
-var StyledMenuGroup = styled4.li`
-  font-family: ${({ theme }) => theme.fontFamily};
-  &:not(:last-child) {
-    border-bottom: 1px solid
-      ${({ theme }) => theme.colors.container.border.base};
-  }
-  list-style: none;
-  margin: 0;
-
-  ${border}
-  ${position}
-  ${color}
-  ${flexbox}
-  ${grid}
-  ${layout}
-  ${space}
-`;
-var StyledTitle = styled4(Text.SmallSubHeadline)`
-  font-size: ${({ theme }) => theme.typography[100].fontSize};
-  margin: ${({ theme }) => theme.space[400]} ${({ theme }) => theme.space[400]}
-    0px ${({ theme }) => theme.space[400]};
-`;
-var StyledMenuGroupUl = styled4.ul`
-  margin: 0;
-  padding: 0;
-`;
-
-// src/v2/Common-V2/MenuGroup.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var MenuGroup = ({
-  titleAs = "h3",
-  children,
-  title,
-  color: color2,
-  id,
-  ...rest
-}) => {
-  const titleId = `menu-group-title-${Math.random().toString(36).slice(2, 11)}`;
-  return /* @__PURE__ */ jsxs4(
-    StyledMenuGroup,
-    {
-      role: "group",
-      id,
-      "aria-labelledby": title ? titleId : void 0,
-      color: color2,
-      ...rest,
-      children: [
-        title && /* @__PURE__ */ jsx5(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
-        /* @__PURE__ */ jsx5(StyledMenuGroupUl, { children })
-      ]
-    }
-  );
-};
-MenuGroup.__MENU_PRIMITIVE_TYPE = "MenuGroup";
-
-// src/v2/Common-V2/useHighlightedIndex.ts
-import { useMemo as useMemo2 } from "react";
-function useHighlightedIndex(items, itemsForDownshift, downshiftHighlightedIndex, hasGroups, selectHeadings) {
-  return useMemo2(() => {
-    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
-import { useRef as useRef2, useEffect } from "react";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var VirtualizedComboboxContent = ({
-  items,
-  getMenuProps,
-  getItemProps,
-  selectedItems,
-  highlightedIndex,
-  renderItem,
-  renderGroupHeading,
-  EmptyState,
-  itemToKey,
-  inputType,
-  selectHeadings = false,
-  onHeadingClick,
-  groupBy,
-  allData,
-  selectAllItem,
-  estimatedItemHeight = 35,
-  ...rest
-}) => {
-  const containerRef = useRef2(null);
-  const hasItems = items.some((item) => !isGroupHeading(item));
-  const rowVirtualizer = useVirtualizer({
-    count: items.length,
-    getScrollElement: () => containerRef.current,
-    estimateSize: (index) => {
-      const item = items[index];
-      return isGroupHeading(item) ? 40 : estimatedItemHeight;
-    }
-  });
-  useEffect(() => {
-    if (highlightedIndex !== void 0 && highlightedIndex !== null && highlightedIndex >= 0) {
-      rowVirtualizer.scrollToIndex(highlightedIndex);
-    }
-  }, [highlightedIndex, rowVirtualizer]);
-  const virtualItems = rowVirtualizer.getVirtualItems();
-  const menuProps = getMenuProps(
-    { ref: containerRef },
-    { suppressRefError: true }
-  );
-  return /* @__PURE__ */ jsx6("div", { ...menuProps, ...rest, style: { overflowY: "auto", ...rest.style }, children: !hasItems && EmptyState ? /* @__PURE__ */ jsx6("div", { style: { padding: "16px" }, children: EmptyState }) : /* @__PURE__ */ jsx6(
-    StyledMenuContent,
-    {
-      style: {
-        height: `${rowVirtualizer.getTotalSize()}px`,
-        position: "relative",
-        overflow: "hidden"
-      },
-      children: /* @__PURE__ */ jsx6(
-        "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__ */ jsx6(
-                MenuHeading,
-                {
-                  ref: rowVirtualizer.measureElement,
-                  ...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__ */ jsx6(
-                MenuItem,
-                {
-                  ref: rowVirtualizer.measureElement,
-                  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__ */ jsx6(
-              MenuItem,
-              {
-                inputType,
-                selected: isItemSelected,
-                id: itemToKey(dataItem),
-                ...getItemProps({ index: virtualItem.index }),
-                style: {
-                  width: "100%"
-                },
-                $highlighted: highlightedIndex === virtualItem.index,
-                $active: false,
-                ref: rowVirtualizer.measureElement,
-                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({}, { suppressRefError: true });
-  return /* @__PURE__ */ jsx6("div", { ...menuProps, ...rest, children: !hasItems && EmptyState ? /* @__PURE__ */ jsx6("div", { style: { padding: "16px" }, children: EmptyState }) : /* @__PURE__ */ jsx6(
-    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__ */ jsx6(
-            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__ */ jsx6(
-            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__ */ jsx6(
-          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({}, { suppressRefError: true });
-  const groupedItems = groupItems(
-    items,
-    groupBy,
-    allData
-  );
-  let actualItemIndex = placeholderItem ? 1 : 0;
-  return /* @__PURE__ */ jsx6("div", { ...menuProps, ...rest, children: !hasItems && EmptyState ? /* @__PURE__ */ jsx6("div", { style: { padding: "16px" }, children: EmptyState }) : /* @__PURE__ */ jsxs5(StyledMenuContent, { style: { position: "relative" }, children: [
-    placeholderItem && /* @__PURE__ */ jsx6(
-      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__ */ jsx6(
-        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__ */ jsx6(
-              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__ */ jsx6(
-      VirtualizedComboboxContent,
-      {
-        groupBy,
-        selectHeadings,
-        ...props
-      }
-    );
-  }
-  if (groupBy && !selectHeadings) {
-    return /* @__PURE__ */ jsx6(
-      GroupedComboboxContent,
-      {
-        groupBy,
-        selectHeadings,
-        ...props
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx6(
-    NormalComboboxContent,
-    {
-      selectHeadings,
-      groupBy,
-      ...props
-    }
-  );
-};
-
-// src/v2/Select/SingleSelect.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-function defaultReducer(state, actionAndChanges) {
-  const { changes, type } = actionAndChanges;
-  switch (type) {
-    case 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,
-  estimatedItemHeight,
-  placeholder,
-  onSelectedItemIdChange,
-  onIsOpenChange,
-  stateReducer = defaultReducer,
-  triggerButtonProps,
-  menuProps,
-  inputType = "icon",
-  removePlaceholderItem = false,
-  onPointerDownOutside,
-  onInteractOutside,
-  popoutPlacement
-}) {
-  const [uncontrolledSelectedItemId, setUncontrolledSelectedItemId] = useState2(null);
-  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState2(false);
-  const isSelectedItemIdControlled = controlledSelectedItemId !== void 0;
-  const selectedItemId = isSelectedItemIdControlled ? controlledSelectedItemId : uncontrolledSelectedItemId;
-  const selectedItem = useMemo3(() => {
-    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 = useMemo3(() => {
-    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 = useMemo3(() => {
-    return items.filter((item) => !isGroupHeading(item));
-  }, [items]);
-  const itemToStringForDownshift = useMemo3(
-    () => createItemToStringForDownshift(itemToString),
-    [itemToString]
-  );
-  const selectProps = 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 === useSelect.stateChangeTypes.ItemClick || type === 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__ */ jsx7(
-    Popout,
-    {
-      open: selectIsOpen,
-      onOpenChange: updateIsOpen,
-      side: popoutPlacement,
-      animationConfig: menuAnimationConfig,
-      onOpenAutoFocus: (e) => {
-        e.preventDefault();
-      },
-      onCloseAutoFocus: (e) => {
-        e.preventDefault();
-      },
-      onPointerDownOutside,
-      onInteractOutside,
-      content: /* @__PURE__ */ jsx7(
-        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.findIndex((selectItem) => {
-              if (isToggleItem(selectItem)) {
-                return false;
-              }
-              return itemToKey(selectItem) === itemToKey(dataItem);
-            });
-            if (itemIndex === -1) {
-              return {};
-            }
-            return getItemProps({ item: dataItem, index: itemIndex });
-          },
-          selectedItems: selectedItem ? [selectedItem] : [],
-          highlightedIndex: highlightedIndex ?? -1,
-          renderItem,
-          renderGroupHeading,
-          itemToKey,
-          itemToString,
-          inputType,
-          isVirtualized,
-          estimatedItemHeight,
-          groupBy,
-          selectHeadings: false,
-          ...menuProps
-        }
-      ),
-      children: /* @__PURE__ */ jsx7(
-        SelectToggleButton,
-        {
-          ...toggleButtonProps,
-          ...triggerButtonProps,
-          isOpen: selectIsOpen,
-          children: buttonContent
-        }
-      )
-    }
-  );
-}
-
-// src/v2/Select/MultiSelect.tsx
-import { useState as useState3, useMemo as useMemo4 } from "react";
-import { useSelect as useSelect2, useMultipleSelection } from "downshift";
-import "@sproutsocial/seeds-react-label";
-import { jsx as jsx8 } from "react/jsx-runtime";
-function defaultReducer2(state, actionAndChanges) {
-  const { changes, type } = actionAndChanges;
-  switch (type) {
-    case useSelect2.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,
-  estimatedItemHeight,
-  showSelectedItems = false,
-  selectHeadings = false,
-  selectAllItem,
-  placeholder,
-  onSelectedItemIdsChange,
-  onIsOpenChange,
-  stateReducer = defaultReducer2,
-  triggerButtonProps,
-  menuProps,
-  inputType = "checkbox",
-  shouldOverflow,
-  onPointerDownOutside,
-  onInteractOutside,
-  popoutPlacement
-}) {
-  const [uncontrolledSelectedItemIds, setUncontrolledSelectedItemIds] = useState3([]);
-  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState3(false);
-  const isSelectedItemIdsControlled = controlledSelectedItemIds !== void 0;
-  const selectedItemIds = isSelectedItemIdsControlled ? controlledSelectedItemIds : uncontrolledSelectedItemIds;
-  const selectedItems = useMemo4(() => {
-    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 = useMemo4(() => {
-    if (showSelectedItems) {
-      return data;
-    }
-    return data.filter((item) => !selectedItems.includes(item));
-  }, [data, selectedItems, showSelectedItems]);
-  const items = useMemo4(() => {
-    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 = useMemo4(() => {
-    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 } = useMultipleSelection({
-    selectedItems,
-    onStateChange({ selectedItems: newSelectedItems, type }) {
-      switch (type) {
-        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
-        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
-        case useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
-        case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
-          if (newSelectedItems !== void 0) {
-            updateSelectedItems(newSelectedItems);
-          }
-          break;
-        default:
-          break;
-      }
-    }
-  });
-  const itemsForSelect = useMemo4(() => {
-    if (selectHeadings) {
-      return items;
-    }
-    return items.filter(
-      (item) => !isGroupHeading(item)
-    );
-  }, [items, selectHeadings]);
-  const itemToStringForDownshift = useMemo4(
-    () => createItemToStringForDownshift(itemToString),
-    [itemToString]
-  );
-  const selectProps = useSelect2({
-    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 === useSelect2.stateChangeTypes.ItemClick || type === useSelect2.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__ */ jsx8(
-    Popout,
-    {
-      open: selectIsOpen,
-      onOpenChange: updateIsOpen,
-      side: popoutPlacement,
-      onOpenAutoFocus: (e) => {
-        e.preventDefault();
-      },
-      onCloseAutoFocus: (e) => {
-        e.preventDefault();
-      },
-      onPointerDownOutside,
-      onInteractOutside,
-      animationConfig: menuAnimationConfig,
-      content: /* @__PURE__ */ jsx8(
-        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.findIndex((selectItem) => {
-              if (isGroupHeading(selectItem) || isToggleItem(selectItem)) {
-                return false;
-              }
-              return itemToKey(selectItem) === itemToKey(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,
-          estimatedItemHeight,
-          ...menuProps
-        }
-      ),
-      children: /* @__PURE__ */ jsx8(
-        SelectToggleButton,
-        {
-          ...toggleButtonIdProps,
-          ...triggerButtonProps,
-          isOpen: selectIsOpen,
-          shouldOverflow,
-          children: buttonText
-        }
-      )
-    }
-  );
-}
-
-// src/v2/Autocomplete/SingleAutocomplete.tsx
-import { useState as useState4, useMemo as useMemo5, useEffect as useEffect2 } from "react";
-import { useCombobox } from "downshift";
-import "@sproutsocial/seeds-react-label";
-import { Input } from "@sproutsocial/seeds-react-input";
-import { jsx as jsx9 } from "react/jsx-runtime";
-function defaultReducer3(state, actionAndChanges) {
-  const { changes, type } = actionAndChanges;
-  switch (type) {
-    case useCombobox.stateChangeTypes.InputKeyDownEnter:
-    case 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,
-  estimatedItemHeight,
-  EmptyState,
-  placeholder,
-  onSelectedItemIdChange,
-  onInputValueChange,
-  onIsOpenChange,
-  stateReducer = defaultReducer3,
-  menuProps,
-  inputType = "icon",
-  includePlaceholderItem = false,
-  onPointerDownOutside,
-  onInteractOutside,
-  popoutPlacement
-}) {
-  const [uncontrolledInputValue, setUncontrolledInputValue] = useState4("");
-  const [uncontrolledSelectedItemId, setUncontrolledSelectedItemId] = useState4(null);
-  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState4(false);
-  const isSelectedItemIdControlled = controlledSelectedItemId !== void 0;
-  const selectedItemId = isSelectedItemIdControlled ? controlledSelectedItemId : uncontrolledSelectedItemId;
-  const selectedItem = useMemo5(() => {
-    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;
-  useEffect2(() => {
-    if (selectedItem && !isOpen) {
-      const selectedItemString = itemToString(selectedItem);
-      if (!isInputValueControlled) {
-        if (uncontrolledInputValue !== selectedItemString) {
-          setUncontrolledInputValue(selectedItemString);
-        }
-      } else {
-        if (inputValue !== selectedItemString) {
-          onInputValueChange?.(selectedItemString);
-        }
-      }
-    }
-  }, [
-    selectedItem,
-    isOpen,
-    isInputValueControlled,
-    itemToString,
-    uncontrolledInputValue,
-    inputValue,
-    onInputValueChange
-  ]);
-  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 = useMemo5(
-    () => getFilteredItems(data, inputValue, searchStringFn, itemToString, {
-      selectedItem
-    }),
-    [data, selectedItem, inputValue, searchStringFn, itemToString]
-  );
-  const placeholderItem = {
-    id: "clear-selection",
-    label: placeholder
-  };
-  const items = useMemo5(() => {
-    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 = useMemo5(() => {
-    return items.filter(
-      (item) => !isGroupHeading(item)
-    );
-  }, [items]);
-  const itemToStringForDownshift = useMemo5(
-    () => createItemToStringForDownshift(itemToString),
-    [itemToString]
-  );
-  const comboboxProps = 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) {
-        updateIsOpen(newIsOpen);
-      }
-      switch (type) {
-        case useCombobox.stateChangeTypes.InputKeyDownEnter:
-        case useCombobox.stateChangeTypes.ItemClick:
-          if (newSelectedItem) {
-            updateSelectedItem(newSelectedItem);
-            if (newSelectedItem.id === "clear-selection") {
-              updateInputValue("");
-              return;
-            }
-            updateInputValue(itemToString(newSelectedItem));
-          }
-          break;
-        case 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;
-  return /* @__PURE__ */ jsx9(
-    Popout,
-    {
-      open: comboboxIsOpen,
-      onOpenChange: updateIsOpen,
-      side: popoutPlacement,
-      animationConfig: menuAnimationConfig,
-      onOpenAutoFocus: (e) => {
-        e.preventDefault();
-      },
-      onCloseAutoFocus: (e) => {
-        e.preventDefault();
-      },
-      onPointerDownOutside,
-      onInteractOutside,
-      content: /* @__PURE__ */ jsx9(
-        ComboboxContent,
-        {
-          items,
-          getMenuProps,
-          getItemProps: (props) => {
-            const item = items[props.index];
-            const dataItem = item;
-            const itemIndex = itemsForCombobox.findIndex((comboboxItem) => {
-              if (isToggleItem(comboboxItem)) {
-                return false;
-              }
-              return itemToKey(comboboxItem) === itemToKey(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,
-          estimatedItemHeight,
-          placeholderItem: includePlaceholderItem ? placeholderItem : void 0,
-          ...menuProps
-        }
-      ),
-      children: /* @__PURE__ */ jsx9(
-        Input,
-        {
-          id,
-          inputProps: {
-            autoComplete: "off"
-          },
-          innerRef: ref,
-          placeholder,
-          elemAfter: !includePlaceholderItem ? /* @__PURE__ */ jsx9(Input.ClearButton, {}) : void 0,
-          clearButtonLabel: "Clear selection",
-          onClear: () => {
-            updateSelectedItem(null);
-            updateInputValue("");
-          },
-          ...restProps
-        }
-      )
-    }
-  );
-}
-
-// src/v2/Autocomplete/MultiAutocomplete.tsx
-import { useState as useState5, useMemo as useMemo6, useRef as useRef3 } from "react";
-import { useCombobox as useCombobox2, useMultipleSelection as useMultipleSelection2 } from "downshift";
-import { TokenInput } from "@sproutsocial/seeds-react-token-input";
-import { jsx as jsx10 } from "react/jsx-runtime";
-function defaultReducer4(state, actionAndChanges) {
-  const { changes, type } = actionAndChanges;
-  switch (type) {
-    case useCombobox2.stateChangeTypes.InputBlur:
-      return {
-        ...changes,
-        isOpen: true
-      };
-    case useCombobox2.stateChangeTypes.InputKeyDownEnter:
-    case useCombobox2.stateChangeTypes.ItemClick:
-      return {
-        ...changes,
-        isOpen: true,
-        // keep the menu open after selection.
-        highlightedIndex: state.highlightedIndex
-        // preserve the current position so the list doesn't jump.
-      };
-    default:
-      return changes;
-  }
-}
-function MultiAutocomplete({
-  id,
-  data,
-  selectedItemIds: controlledSelectedItemIds,
-  inputValue: controlledInputValue,
-  isOpen: controlledIsOpen,
-  itemToKey = (item) => item?.id,
-  itemToString,
-  itemToSearchString,
-  renderItem,
-  groupBy,
-  renderGroupHeading,
-  isVirtualized = false,
-  estimatedItemHeight,
-  showSelectedItems = false,
-  selectHeadings = false,
-  selectAllItem,
-  EmptyState,
-  placeholder,
-  onSelectedItemIdsChange,
-  onInputValueChange,
-  onIsOpenChange,
-  stateReducer = defaultReducer4,
-  menuProps,
-  inputType = "checkbox",
-  onPointerDownOutside,
-  onInteractOutside,
-  popoutPlacement
-}) {
-  const mousedownInPopoverRef = useRef3(false);
-  const [uncontrolledInputValue, setUncontrolledInputValue] = useState5("");
-  const [uncontrolledSelectedItemIds, setUncontrolledSelectedItemIds] = useState5([]);
-  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState5(false);
-  const isSelectedItemIdsControlled = controlledSelectedItemIds !== void 0;
-  const selectedItemIds = isSelectedItemIdsControlled ? controlledSelectedItemIds : uncontrolledSelectedItemIds;
-  const selectedItems = useMemo6(() => {
-    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 (!newIsOpen) {
-      updateInputValue("");
-    }
-    if (!isIsOpenControlled) {
-      setUncontrolledIsOpen(newIsOpen);
-    }
-    onIsOpenChange?.(newIsOpen);
-  };
-  const searchStringFn = itemToSearchString ?? ((item) => itemToString(item));
-  const filteredItems = useMemo6(
-    () => getFilteredItems(data, inputValue, searchStringFn, itemToString, {
-      selectedItems,
-      showSelectedItems
-    }),
-    [data, selectedItems, inputValue, searchStringFn, showSelectedItems]
-  );
-  const items = useMemo6(() => {
-    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 = useMemo6(() => {
-    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 } = useMultipleSelection2({
-    selectedItems,
-    onStateChange({ selectedItems: newSelectedItems, type }) {
-      switch (type) {
-        case useMultipleSelection2.stateChangeTypes.SelectedItemKeyDownBackspace:
-        case useMultipleSelection2.stateChangeTypes.SelectedItemKeyDownDelete:
-        case useMultipleSelection2.stateChangeTypes.DropdownKeyDownBackspace:
-        case useMultipleSelection2.stateChangeTypes.FunctionRemoveSelectedItem:
-          if (newSelectedItems !== void 0) {
-            updateSelectedItems(newSelectedItems);
-          }
-          break;
-        default:
-          break;
-      }
-    }
-  });
-  const itemsForCombobox = useMemo6(() => {
-    if (selectHeadings) {
-      return items;
-    }
-    return items.filter(
-      (item) => !isGroupHeading(item)
-    );
-  }, [items, selectHeadings]);
-  const itemToStringForDownshift = useMemo6(
-    () => createItemToStringForDownshift(itemToString),
-    [itemToString]
-  );
-  const comboboxProps = useCombobox2({
-    inputId: id,
-    items: itemsForCombobox,
-    itemToString: itemToStringForDownshift,
-    defaultHighlightedIndex: -1,
-    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 useCombobox2.stateChangeTypes.InputKeyDownEnter:
-        case useCombobox2.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]);
-              }
-            } 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]);
-              }
-            }
-          }
-          break;
-        case useCombobox2.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);
-    }
-    if (mousedownInPopoverRef.current) {
-      mousedownInPopoverRef.current = false;
-      e.target.focus();
-      return;
-    }
-    updateIsOpen(false);
-  };
-  const inputPropsToSpread = { ...inputProps };
-  delete inputPropsToSpread.onBlur;
-  return /* @__PURE__ */ jsx10(
-    Popout,
-    {
-      open: comboboxIsOpen,
-      onOpenChange: updateIsOpen,
-      side: popoutPlacement,
-      onOpenAutoFocus: (e) => {
-        e.preventDefault();
-      },
-      onCloseAutoFocus: (e) => {
-        e.preventDefault();
-      },
-      onPointerDownOutside,
-      onInteractOutside,
-      animationConfig: menuAnimationConfig,
-      onMouseDown: () => {
-        mousedownInPopoverRef.current = true;
-      },
-      onMouseUp: () => {
-        mousedownInPopoverRef.current = false;
-      },
-      content: /* @__PURE__ */ jsx10(
-        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,
-          estimatedItemHeight,
-          ...menuProps
-        }
-      ),
-      children: /* @__PURE__ */ jsx10(
-        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,
-          "aria-controls": void 0,
-          "aria-expanded": void 0,
-          "aria-haspopup": void 0,
-          type: void 0
-        }
-      )
-    }
-  );
-}
-export {
-  MultiAutocomplete,
-  MultiSelect,
-  SingleAutocomplete,
-  SingleSelect
-};
-//# sourceMappingURL=index.js.map