@sproutsocial/seeds-react-menu 1.17.0 → 1.18.0

package/dist/v2/index.js

@@ -1,2280 +0,0 @@
-"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,
-  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__ */ (0, import_jsx_runtime.jsxs)(Popover.Root, { open: popoverOpen, onOpenChange: popoverOnOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover.Trigger, { ref: radixRef, asChild: true, children }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        Popover.Anchor,
-        {
-          style: {
-            position: "absolute",
-            top: side === "top" ? 0 : "100%",
-            left: 0,
-            right: 0,
-            height: "1px"
-          }
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      StyledContent,
-      {
-        side,
-        sideOffset,
-        align,
-        alignOffset,
-        onOpenAutoFocus,
-        onEscapeKeyDown,
-        onCloseAutoFocus,
-        onPointerDownOutside,
-        onInteractOutside,
-        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,
-  estimatedItemHeight = 35,
-  ...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) ? 40 : estimatedItemHeight;
-    }
-  });
-  (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 },
-    { suppressRefError: true }
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...menuProps, ...rest, style: { overflowY: "auto", ...rest.style }, 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",
-        overflow: "hidden"
-      },
-      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,
-                {
-                  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__ */ (0, import_jsx_runtime8.jsx)(
-                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__ */ (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,
-                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__ */ (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({}, { suppressRefError: true });
-  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,
-  estimatedItemHeight,
-  placeholder,
-  onSelectedItemIdChange,
-  onIsOpenChange,
-  stateReducer = defaultReducer,
-  triggerButtonProps,
-  menuProps,
-  inputType = "icon",
-  removePlaceholderItem = false,
-  onPointerDownOutside,
-  onInteractOutside,
-  popoutPlacement
-}) {
-  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,
-      side: popoutPlacement,
-      animationConfig: menuAnimationConfig,
-      onOpenAutoFocus: (e) => {
-        e.preventDefault();
-      },
-      onCloseAutoFocus: (e) => {
-        e.preventDefault();
-      },
-      onPointerDownOutside,
-      onInteractOutside,
-      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.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__ */ (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,
-  estimatedItemHeight,
-  showSelectedItems = false,
-  selectHeadings = false,
-  selectAllItem,
-  placeholder,
-  onSelectedItemIdsChange,
-  onIsOpenChange,
-  stateReducer = defaultReducer2,
-  triggerButtonProps,
-  menuProps,
-  inputType = "checkbox",
-  shouldOverflow,
-  onPointerDownOutside,
-  onInteractOutside,
-  popoutPlacement
-}) {
-  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,
-      side: popoutPlacement,
-      onOpenAutoFocus: (e) => {
-        e.preventDefault();
-      },
-      onCloseAutoFocus: (e) => {
-        e.preventDefault();
-      },
-      onPointerDownOutside,
-      onInteractOutside,
-      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.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__ */ (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,
-  estimatedItemHeight,
-  EmptyState,
-  placeholder,
-  onSelectedItemIdChange,
-  onInputValueChange,
-  onIsOpenChange,
-  stateReducer = defaultReducer3,
-  menuProps,
-  inputType = "icon",
-  includePlaceholderItem = false,
-  onPointerDownOutside,
-  onInteractOutside,
-  popoutPlacement
-}) {
-  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) {
-        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 = (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) {
-        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;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    Popout,
-    {
-      open: comboboxIsOpen,
-      onOpenChange: updateIsOpen,
-      side: popoutPlacement,
-      animationConfig: menuAnimationConfig,
-      onOpenAutoFocus: (e) => {
-        e.preventDefault();
-      },
-      onCloseAutoFocus: (e) => {
-        e.preventDefault();
-      },
-      onPointerDownOutside,
-      onInteractOutside,
-      content: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        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__ */ (0, import_jsx_runtime11.jsx)(
-        import_seeds_react_input.Input,
-        {
-          id,
-          inputProps: {
-            autoComplete: "off"
-          },
-          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
-        }
-      )
-    }
-  );
-}
-
-// src/v2/Autocomplete/MultiAutocomplete.tsx
-var import_react11 = require("react");
-var import_downshift4 = require("downshift");
-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.InputBlur:
-      return {
-        ...changes,
-        isOpen: true
-      };
-    case import_downshift4.useCombobox.stateChangeTypes.InputKeyDownEnter:
-    case import_downshift4.useCombobox.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 = (0, import_react11.useRef)(false);
-  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 (!newIsOpen) {
-      updateInputValue("");
-    }
-    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: -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 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]);
-              }
-            } 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 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);
-    }
-    if (mousedownInPopoverRef.current) {
-      mousedownInPopoverRef.current = false;
-      e.target.focus();
-      return;
-    }
-    updateIsOpen(false);
-  };
-  const inputPropsToSpread = { ...inputProps };
-  delete inputPropsToSpread.onBlur;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    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__ */ (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,
-          estimatedItemHeight,
-          ...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,
-          "aria-controls": void 0,
-          "aria-expanded": void 0,
-          "aria-haspopup": void 0,
-          type: void 0
-        }
-      )
-    }
-  );
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  MultiAutocomplete,
-  MultiSelect,
-  SingleAutocomplete,
-  SingleSelect
-});
-//# sourceMappingURL=index.js.map