@sproutsocial/seeds-react-menu 1.10.8 → 1.11.0

package/dist/v3/index.js

@@ -0,0 +1,868 @@
+"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/v3/index.ts
+var v3_exports = {};
+__export(v3_exports, {
+  ComboboxActionButtons: () => ComboboxActionButtons,
+  ComboboxClear: () => ComboboxClear,
+  ComboboxEmpty: () => ComboboxEmpty,
+  ComboboxGroup: () => ComboboxGroup,
+  ComboboxGroupHeaderCheckbox: () => ComboboxGroupHeaderCheckbox,
+  ComboboxGroupHeaderItem: () => ComboboxGroupHeaderItem,
+  ComboboxGroupLabel: () => ComboboxGroupLabel,
+  ComboboxInput: () => ComboboxInput,
+  ComboboxInputGroup: () => ComboboxInputGroup,
+  ComboboxItem: () => ComboboxItem,
+  ComboboxItemIndicator: () => ComboboxItemIndicator,
+  ComboboxLabel: () => ComboboxLabel,
+  ComboboxList: () => ComboboxList,
+  ComboboxPopup: () => ComboboxPopup,
+  ComboboxPositioner: () => ComboboxPositioner,
+  ComboboxSelectAllItem: () => ComboboxSelectAllItem,
+  ComboboxSeparator: () => ComboboxSeparator,
+  ComboboxStatus: () => ComboboxStatus,
+  ComboboxToken: () => ComboboxToken,
+  ComboboxTokenInput: () => ComboboxTokenInput,
+  ComboboxTokenInputGroup: () => ComboboxTokenInputGroup,
+  ComboboxTrigger: () => ComboboxTrigger,
+  SearchableSelectInput: () => SearchableSelectInput,
+  SearchableSelectList: () => SearchableSelectList,
+  SearchableSelectPlaceholder: () => SearchableSelectPlaceholder,
+  SearchableSelectPopup: () => SearchableSelectPopup,
+  SearchableSelectSearchContainer: () => SearchableSelectSearchContainer,
+  SearchableSelectTokenTrigger: () => SearchableSelectTokenTrigger,
+  SearchableSelectTrigger: () => SearchableSelectTrigger,
+  SearchableSelectTriggerIcon: () => SearchableSelectTriggerIcon,
+  Token: () => Token,
+  TokenRemove: () => TokenRemove
+});
+module.exports = __toCommonJS(v3_exports);
+
+// src/v3/SingleSelect.tsx
+var React4 = __toESM(require("react"));
+var import_select3 = require("@base-ui/react/select");
+var import_styled_components4 = __toESM(require("styled-components"));
+
+// src/v3/SeedsPortal.tsx
+var React = __toESM(require("react"));
+var import_seeds_react_portal = require("@sproutsocial/seeds-react-portal");
+
+// src/v3/Common/SelectItem.tsx
+var React2 = require("react");
+var import_select = require("@base-ui/react/select");
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_radio = __toESM(require("@sproutsocial/seeds-react-radio"));
+var import_seeds_react_checkbox = __toESM(require("@sproutsocial/seeds-react-checkbox"));
+var import_seeds_react_icon = require("@sproutsocial/seeds-react-icon");
+var import_jsx_runtime = require("react/jsx-runtime");
+var StyledItem = (0, import_styled_components.default)(import_select.Select.Item)`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: ${({ theme }) => theme.radii[500]};
+  font-size: 14px;
+  color: ${({ theme }) => theme.colors.text.body};
+  cursor: default;
+  outline: none;
+
+  &[data-highlighted] {
+    background: ${({ theme }) => theme.colors.listItem.background.hover};
+  }
+
+  &[data-selected] {
+    font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var StyledItemIndicator = (0, import_styled_components.default)(import_select.Select.ItemIndicator)`
+  display: flex;
+  align-items: center;
+  width: 16px;
+  color: ${({ theme }) => theme.colors.text.body};
+  visibility: hidden;
+
+  &[data-selected] {
+    visibility: visible;
+  }
+`;
+var StyledItemText = (0, import_styled_components.default)(import_select.Select.ItemText)``;
+
+// src/v3/Common/SelectStyles.tsx
+var import_select2 = require("@base-ui/react/select");
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_seeds_react_mixins = require("@sproutsocial/seeds-react-mixins");
+var Field = import_styled_components2.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.space[200]};
+`;
+var SelectLabel = (0, import_styled_components2.default)(import_select2.Select.Label)`
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  color: ${({ theme }) => theme.colors.text.body};
+`;
+var SelectTrigger = (0, import_styled_components2.default)(import_select2.Select.Trigger)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.space[300]};
+  padding: ${({ theme }) => `${theme.space[300]}`};
+  min-width: 160px;
+  border-radius: ${({ theme }) => theme.radii[500]};
+  border: 1px solid ${({ theme }) => theme.colors.form.border.base};
+  background: ${({ theme }) => theme.colors.form.background.base};
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  color: ${({ theme }) => theme.colors.text.body};
+  cursor: default;
+  outline: none;
+  transition: border-color ${({ theme }) => theme.duration.fast}
+      ${({ theme }) => theme.easing.ease_in},
+    box-shadow ${({ theme }) => theme.duration.fast}
+      ${({ theme }) => theme.easing.ease_in};
+
+  &:focus-visible {
+    ${import_seeds_react_mixins.focusRing}
+  }
+
+  &[data-popup-open] {
+    ${import_seeds_react_mixins.focusRing}
+  }
+
+  &[data-popup-open] [data-chevron] {
+    transform: rotate(-180deg);
+  }
+`;
+var SelectValue = (0, import_styled_components2.default)(import_select2.Select.Value)`
+  min-width: 0;
+  overflow: hidden;
+`;
+var SelectIcon = (0, import_styled_components2.default)(import_select2.Select.Icon)`
+  display: flex;
+  align-items: center;
+  color: ${({ theme }) => theme.colors.icon.base};
+  flex-shrink: 0;
+`;
+var SelectGroup = (0, import_styled_components2.default)(import_select2.Select.Group)`
+  display: block;
+`;
+var SelectGroupLabel = (0, import_styled_components2.default)(import_select2.Select.GroupLabel)`
+  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[300]} ${theme.space[200]}`};
+  font-size: ${({ theme }) => theme.typography[100].fontSize};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: ${({ theme }) => theme.colors.text.subtext};
+`;
+var SelectSeparator = (0, import_styled_components2.default)(import_select2.Select.Separator)`
+  height: 1px;
+  margin: ${({ theme }) => `${theme.space[200]} ${theme.space[300]}`};
+  background: ${({ theme }) => theme.colors.container.border.base};
+`;
+var SelectPositioner = (0, import_styled_components2.default)(import_select2.Select.Positioner)`
+  width: var(--anchor-width);
+  z-index: 7;
+`;
+var SelectPopup = (0, import_styled_components2.default)(import_select2.Select.Popup)`
+  font-family: ${({ theme }) => theme.fontFamily};
+  background: ${({ theme }) => theme.colors.container.background.base};
+  border: 1px solid ${({ theme }) => theme.colors.container.border.base};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  box-shadow: ${({ theme }) => theme.shadows.low};
+  outline: none;
+  max-height: min(var(--base-ui-available-height, 400px), 400px);
+  overflow-y: auto;
+  padding: ${({ theme }) => theme.space[200]};
+
+  &[data-open] {
+    animation: select-popup-in 120ms ease-out;
+  }
+
+  &[data-closed] {
+    animation: select-popup-out 100ms ease-in;
+  }
+
+  @keyframes select-popup-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes select-popup-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+`;
+
+// src/v3/Common/SelectIcons.tsx
+var React3 = require("react");
+var import_styled_components3 = __toESM(require("styled-components"));
+var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var StyledChevron = import_styled_components3.default.div`
+  display: flex;
+  align-items: center;
+  transition: transform 0.15s;
+  ${({ $isOpen }) => $isOpen && "transform: rotate(-180deg);"}
+`;
+function CheckIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon2.Icon, { name: "check-outline", fixedWidth: true, "aria-hidden": true });
+}
+
+// src/v3/SingleSelect.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var StyledValue = (0, import_styled_components4.default)(import_select3.Select.Value)`
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &[data-placeholder] {
+    color: ${({ theme }) => theme.colors.text.subtext};
+  }
+`;
+
+// src/v3/MultiSelect.tsx
+var React5 = __toESM(require("react"));
+var import_select4 = require("@base-ui/react/select");
+var import_styled_components5 = __toESM(require("styled-components"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var SelectionText = import_styled_components5.default.span`
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var Placeholder = import_styled_components5.default.div`
+  color: ${({ theme }) => theme.colors.text.subtext};
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  line-height: 16px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  margin: 2px 8px 0px 0px;
+`;
+
+// src/v3/SingleCombobox.tsx
+var React8 = __toESM(require("react"));
+var import_combobox3 = require("@base-ui/react/combobox");
+var import_react_virtual2 = require("@tanstack/react-virtual");
+
+// src/v3/Common/ComboboxItem.tsx
+var React6 = __toESM(require("react"));
+var import_seeds_react_radio2 = __toESM(require("@sproutsocial/seeds-react-radio"));
+var import_seeds_react_checkbox3 = __toESM(require("@sproutsocial/seeds-react-checkbox"));
+
+// src/v3/Common/ComboboxStyles.tsx
+var import_combobox = require("@base-ui/react/combobox");
+var import_styled_components6 = __toESM(require("styled-components"));
+var import_seeds_react_mixins2 = require("@sproutsocial/seeds-react-mixins");
+var import_seeds_react_checkbox2 = __toESM(require("@sproutsocial/seeds-react-checkbox"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ComboboxLabel = import_styled_components6.default.label`
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  color: ${({ theme }) => theme.colors.text.body};
+`;
+var ComboboxInputGroup = (0, import_styled_components6.default)(import_combobox.Combobox.InputGroup)`
+  display: flex;
+  align-items: center;
+  min-width: 160px;
+  border-radius: ${({ theme }) => theme.radii[500]};
+  border: 1px solid ${({ theme }) => theme.colors.form.border.base};
+  background: ${({ theme }) => theme.colors.form.background.base};
+  color: ${({ theme }) => theme.colors.text.body};
+  transition: border-color ${({ theme }) => theme.duration.fast}
+      ${({ theme }) => theme.easing.ease_in},
+    box-shadow ${({ theme }) => theme.duration.fast}
+      ${({ theme }) => theme.easing.ease_in};
+
+  &:focus-within {
+    ${import_seeds_react_mixins2.focusRing}
+  }
+`;
+var ComboboxInput = (0, import_styled_components6.default)(import_combobox.Combobox.Input)`
+  flex: 1;
+  min-width: 30px;
+  padding: ${({ theme }) => theme.space[300]};
+  border: none;
+  background: transparent;
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  line-height: ${({ theme }) => theme.typography[200].lineHeight};
+  color: ${({ theme }) => theme.colors.text.body};
+  outline: none;
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.text.subtext};
+  }
+`;
+var ComboboxTokenInput = (0, import_styled_components6.default)(import_combobox.Combobox.Input)`
+  flex: 1;
+  min-width: 60px;
+  padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[300]}
+    ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[350]};
+  border: none;
+  background: transparent;
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  line-height: ${({ theme }) => theme.typography[200].lineHeight};
+  color: ${({ theme }) => theme.colors.text.body};
+  outline: none;
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.text.subtext};
+  }
+`;
+var ComboboxActionButtons = import_styled_components6.default.div`
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: auto;
+  gap: ${({ theme }) => theme.space[100]};
+`;
+var ComboboxClear = (0, import_styled_components6.default)(import_combobox.Combobox.Clear)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  color: ${({ theme }) => theme.colors.icon.base};
+  cursor: pointer;
+  border-radius: ${({ theme }) => theme.radii[300]};
+  padding: 0;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.text.body};
+  }
+
+  &[data-empty] {
+    display: none;
+  }
+`;
+var ComboboxTrigger = (0, import_styled_components6.default)(import_combobox.Combobox.Trigger)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  color: ${({ theme }) => theme.colors.icon.base};
+  cursor: default;
+  padding: 0;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.text.body};
+  }
+`;
+var ComboboxPositioner = (0, import_styled_components6.default)(import_combobox.Combobox.Positioner)`
+  width: var(--anchor-width);
+  z-index: 7;
+`;
+var ComboboxPopup = (0, import_styled_components6.default)(import_combobox.Combobox.Popup)`
+  font-family: ${({ theme }) => theme.fontFamily};
+  background: ${({ theme }) => theme.colors.container.background.base};
+  border: 1px solid ${({ theme }) => theme.colors.container.border.base};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  box-shadow: ${({ theme }) => theme.shadows.medium};
+  outline: none;
+  width: 100%;
+  max-height: min(var(--base-ui-available-height, 400px), 400px);
+  overflow-y: auto;
+  padding: 0;
+
+  &[data-open] {
+    animation: combobox-popup-in 120ms ease-out;
+  }
+
+  &[data-closed] {
+    animation: combobox-popup-out 100ms ease-in;
+  }
+
+  @keyframes combobox-popup-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes combobox-popup-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+`;
+var ComboboxList = (0, import_styled_components6.default)(import_combobox.Combobox.List)`
+  padding: ${({ theme }) => theme.space[200]};
+
+  &:empty {
+    padding: 0;
+  }
+`;
+var ComboboxStatus = (0, import_styled_components6.default)(import_combobox.Combobox.Status)`
+  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[350]}`};
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  color: ${({ theme }) => theme.colors.text.subtext};
+
+  &:empty {
+    padding: 0;
+  }
+`;
+var ComboboxEmpty = (0, import_styled_components6.default)(import_combobox.Combobox.Empty)`
+  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[350]}`};
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  color: ${({ theme }) => theme.colors.text.subtext};
+
+  &:empty {
+    padding: 0;
+  }
+`;
+var ComboboxItem = (0, import_styled_components6.default)(import_combobox.Combobox.Item)`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[300]}`};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  color: ${({ theme }) => theme.colors.text.body};
+  cursor: default;
+  outline: none;
+
+  &[data-highlighted] {
+    background: ${({ theme }) => theme.colors.listItem.background.hover};
+  }
+
+  &[data-selected] {
+    font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var ComboboxItemIndicator = (0, import_styled_components6.default)(import_combobox.Combobox.ItemIndicator)`
+  display: flex;
+  align-items: center;
+  width: ${({ theme }) => theme.space[400]};
+  color: ${({ theme }) => theme.colors.text.body};
+  visibility: hidden;
+
+  &[data-selected] {
+    visibility: visible;
+  }
+`;
+var ComboboxGroup = (0, import_styled_components6.default)(import_combobox.Combobox.Group)`
+  display: block;
+`;
+var ComboboxGroupLabel = (0, import_styled_components6.default)(import_combobox.Combobox.GroupLabel)`
+  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[300]} ${theme.space[200]}`};
+  font-size: ${({ theme }) => theme.typography[100].fontSize};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: ${({ theme }) => theme.colors.text.subtext};
+`;
+var ComboboxSeparator = import_styled_components6.default.div`
+  height: 1px;
+  margin: ${({ theme }) => `${theme.space[200]} ${theme.space[300]}`};
+  background: ${({ theme }) => theme.colors.container.border.base};
+`;
+var ComboboxGroupHeaderItem = (0, import_styled_components6.default)(import_combobox.Combobox.Item)`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[300]}`};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  font-size: ${({ theme }) => theme.typography[100].fontSize};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: ${({ theme }) => theme.colors.text.subtext};
+  cursor: default;
+  outline: none;
+
+  &[data-highlighted] {
+    background: ${({ theme }) => theme.colors.listItem.background.hover};
+    color: ${({ theme }) => theme.colors.text.body};
+  }
+`;
+var ComboboxSelectAllItem = (0, import_styled_components6.default)(import_combobox.Combobox.Item)`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[300]}`};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  color: ${({ theme }) => theme.colors.text.body};
+  cursor: default;
+  outline: none;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.container.border.base};
+  margin-bottom: ${({ theme }) => theme.space[200]};
+
+  &[data-highlighted] {
+    background: ${({ theme }) => theme.colors.listItem.background.hover};
+  }
+`;
+function ComboboxGroupHeaderCheckbox({
+  $state,
+  id
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_seeds_react_checkbox2.default,
+    {
+      id,
+      checked: $state === "all",
+      indeterminate: $state === "partial",
+      onChange: () => {
+      },
+      tabIndex: -1
+    }
+  );
+}
+var ComboboxToken = (0, import_styled_components6.default)(import_combobox.Combobox.Chips)`
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+`;
+var ComboboxTokenInputGroup = (0, import_styled_components6.default)(import_combobox.Combobox.InputGroup)`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  border-radius: ${({ theme }) => theme.radii[500]};
+  border: 1px solid ${({ theme }) => theme.colors.form.border.base};
+  background: ${({ theme }) => theme.colors.form.background.base};
+  color: ${({ theme }) => theme.colors.text.body};
+  padding: ${({ theme }) => `${theme.space[200]} ${theme.space[300]} ${theme.space[200]} ${theme.space[200]}`};
+  gap: ${({ theme }) => theme.space[200]};
+  transition: border-color ${({ theme }) => theme.duration.fast}
+      ${({ theme }) => theme.easing.ease_in},
+    box-shadow ${({ theme }) => theme.duration.fast}
+      ${({ theme }) => theme.easing.ease_in};
+
+  &:focus-within {
+    ${import_seeds_react_mixins2.focusRing}
+  }
+`;
+var Token = import_styled_components6.default.span`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[200]};
+  padding: ${({ theme }) => `${theme.space[200]} ${theme.space[300]}`};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  border: 1px solid ${({ theme }) => theme.colors.container.border.base};
+  background: ${({ theme }) => theme.colors.container.background.base};
+  color: ${({ theme }) => theme.colors.text.body};
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  font-weight: ${({ theme }) => theme.fontWeights.normal};
+  line-height: 1;
+  white-space: nowrap;
+  transition: all ${({ theme }) => theme.duration.fast}
+    ${({ theme }) => theme.easing.ease_inout};
+
+  &:hover {
+    box-shadow: ${({ theme }) => theme.shadows.low};
+    border-color: ${({ theme }) => theme.colors.container.border.base};
+  }
+`;
+var TokenRemove = import_styled_components6.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+`;
+var SearchableSelectTrigger = (0, import_styled_components6.default)(import_combobox.Combobox.Trigger)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.space[300]};
+  padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[350]};
+  min-width: 160px;
+  border-radius: ${({ theme }) => theme.radii[500]};
+  border: 1px solid ${({ theme }) => theme.colors.form.border.base};
+  background: ${({ theme }) => theme.colors.form.background.base};
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  color: ${({ theme }) => theme.colors.text.body};
+  cursor: default;
+  outline: none;
+  user-select: none;
+  transition: border-color ${({ theme }) => theme.duration.fast}
+      ${({ theme }) => theme.easing.ease_in},
+    box-shadow ${({ theme }) => theme.duration.fast}
+      ${({ theme }) => theme.easing.ease_in};
+
+  &:focus-visible {
+    ${import_seeds_react_mixins2.focusRing}
+  }
+
+  &[data-popup-open] [data-chevron] {
+    transform: rotate(-180deg);
+  }
+`;
+var SearchableSelectTriggerIcon = (0, import_styled_components6.default)(import_combobox.Combobox.Icon)`
+  display: flex;
+  align-items: center;
+  color: ${({ theme }) => theme.colors.icon.base};
+  flex-shrink: 0;
+`;
+var SearchableSelectPlaceholder = import_styled_components6.default.span`
+  color: ${({ theme }) => theme.colors.text.subtext};
+  padding: ${({ theme }) => theme.space[200]} 0;
+`;
+var SearchableSelectPopup = ComboboxPopup;
+var SearchableSelectSearchContainer = import_styled_components6.default.div`
+  padding: ${({ theme }) => theme.space[300]};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.container.border.base};
+  flex-shrink: 0;
+`;
+var SearchableSelectInput = (0, import_styled_components6.default)(import_combobox.Combobox.Input)`
+  width: 100%;
+  height: ${({ theme }) => theme.space[500]};
+  padding: 0 ${({ theme }) => theme.space[300]};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  border: 1px solid ${({ theme }) => theme.colors.container.border.base};
+  background: ${({ theme }) => theme.colors.container.background.base};
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  color: ${({ theme }) => theme.colors.text.body};
+  outline: none;
+  box-sizing: border-box;
+
+  &:focus {
+    ${import_seeds_react_mixins2.focusRing}
+  }
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.text.subtext};
+  }
+`;
+var SearchableSelectList = (0, import_styled_components6.default)(import_combobox.Combobox.List)`
+  overflow-y: auto;
+  padding: ${({ theme }) => theme.space[200]};
+  flex: 1;
+  min-height: 0;
+  &:empty {
+    padding: 0;
+  }
+`;
+var SearchableSelectTokenTrigger = (0, import_styled_components6.default)(import_combobox.Combobox.Trigger)`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  min-width: 160px;
+  border-radius: ${({ theme }) => theme.radii[500]};
+  border: 1px solid ${({ theme }) => theme.colors.form.border.base};
+  background: ${({ theme }) => theme.colors.form.background.base};
+  color: ${({ theme }) => theme.colors.text.body};
+  padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[300]};
+  gap: ${({ theme }) => theme.space[200]};
+  cursor: default;
+  text-align: left;
+  outline: none;
+  user-select: none;
+  transition: border-color ${({ theme }) => theme.duration.fast}
+      ${({ theme }) => theme.easing.ease_in},
+    box-shadow ${({ theme }) => theme.duration.fast}
+      ${({ theme }) => theme.easing.ease_in};
+
+  &:focus-visible {
+    ${import_seeds_react_mixins2.focusRing}
+  }
+
+  &[data-popup-open] {
+    border-color: ${({ theme }) => theme.colors.blue[600]};
+  }
+
+  &[data-popup-open] [data-chevron] {
+    transform: rotate(-180deg);
+  }
+`;
+
+// src/v3/Common/ComboboxItem.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ComboboxItemInner({
+  value,
+  itemId,
+  label,
+  inputType = "icon",
+  renderItem,
+  index,
+  "data-index": dataIndex,
+  style
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    ComboboxItem,
+    {
+      value,
+      index,
+      "data-index": dataIndex,
+      style,
+      ref,
+      children: [
+        inputType === "radio" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          ComboboxItemIndicator,
+          {
+            keepMounted: true,
+            render: (_props, state) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              import_seeds_react_radio2.default,
+              {
+                checked: state.selected,
+                onChange: () => {
+                },
+                tabIndex: -1,
+                id: `radio-${itemId}`,
+                name: "combobox-item"
+              }
+            )
+          }
+        ) : inputType === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          ComboboxItemIndicator,
+          {
+            keepMounted: true,
+            render: (_props, state) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              import_seeds_react_checkbox3.default,
+              {
+                checked: state.selected,
+                onChange: () => {
+                },
+                tabIndex: -1,
+                id: `checkbox-${itemId}`,
+                name: "combobox-item"
+              }
+            )
+          }
+        ) : inputType === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ComboboxItemIndicator, { keepMounted: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckIcon, {}) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: renderItem ? renderItem() : label })
+      ]
+    }
+  );
+}
+var ComboboxItem2 = React6.forwardRef(ComboboxItemInner);
+
+// src/v3/Common/VirtualizedComboboxList.tsx
+var React7 = __toESM(require("react"));
+var import_combobox2 = require("@base-ui/react/combobox");
+var import_react_virtual = require("@tanstack/react-virtual");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+
+// src/v3/SingleCombobox.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+
+// src/v3/MultiCombobox.tsx
+var React9 = __toESM(require("react"));
+var import_combobox4 = require("@base-ui/react/combobox");
+var import_react_virtual3 = require("@tanstack/react-virtual");
+var import_seeds_react_icon3 = __toESM(require("@sproutsocial/seeds-react-icon"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+
+// src/v3/SingleSearchableSelect.tsx
+var React10 = __toESM(require("react"));
+var import_combobox5 = require("@base-ui/react/combobox");
+var import_react_virtual4 = require("@tanstack/react-virtual");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+
+// src/v3/MultiSearchableSelect.tsx
+var React11 = __toESM(require("react"));
+var import_combobox6 = require("@base-ui/react/combobox");
+var import_react_virtual5 = require("@tanstack/react-virtual");
+var import_styled_components7 = __toESM(require("styled-components"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var SelectionText2 = import_styled_components7.default.span`
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ComboboxActionButtons,
+  ComboboxClear,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxGroupHeaderCheckbox,
+  ComboboxGroupHeaderItem,
+  ComboboxGroupLabel,
+  ComboboxInput,
+  ComboboxInputGroup,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxPopup,
+  ComboboxPositioner,
+  ComboboxSelectAllItem,
+  ComboboxSeparator,
+  ComboboxStatus,
+  ComboboxToken,
+  ComboboxTokenInput,
+  ComboboxTokenInputGroup,
+  ComboboxTrigger,
+  SearchableSelectInput,
+  SearchableSelectList,
+  SearchableSelectPlaceholder,
+  SearchableSelectPopup,
+  SearchableSelectSearchContainer,
+  SearchableSelectTokenTrigger,
+  SearchableSelectTrigger,
+  SearchableSelectTriggerIcon,
+  Token,
+  TokenRemove
+});
+//# sourceMappingURL=index.js.map