@sproutsocial/seeds-react-menu 1.16.16 → 1.18.0

package/dist/v3/index.js

@@ -79,9 +79,8 @@ __export(v3_exports, {
 module.exports = __toCommonJS(v3_exports);
 
 // src/v3/SingleSelect.tsx
-var React4 = __toESM(require("react"));
+var React5 = __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"));
@@ -104,49 +103,51 @@ function useSeedsPortalContainer() {
 }
 
 // src/v3/Common/SelectItem.tsx
-var React2 = require("react");
+var React2 = __toESM(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};
+// src/v3/Common/cn.ts
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
   }
+  return classes.join(" ");
+}
 
-  &[data-selected] {
-    font-weight: ${({ theme }) => theme.fontWeights.semibold};
+// src/v3/Common/SelectItem.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var StyledItem = React2.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_select.Select.Item,
+  {
+    ref,
+    className: cn("seeds-select-item", className),
+    ...rest
   }
-
-  &[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;
+));
+StyledItem.displayName = "StyledItem";
+var StyledItemIndicator = React2.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_select.Select.ItemIndicator,
+  {
+    ref,
+    className: cn("seeds-select-item-indicator", className),
+    ...rest
   }
-`;
-var StyledItemText = (0, import_styled_components.default)(import_select.Select.ItemText)``;
+));
+StyledItemIndicator.displayName = "StyledItemIndicator";
+var StyledItemText = import_select.Select.ItemText;
 function CheckIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.Icon, { name: "check-outline", fixedWidth: true, "aria-hidden": true });
 }
@@ -217,176 +218,153 @@ function groupItems(data, groupBy) {
 }
 
 // src/v3/Common/SelectStyles.tsx
+var React3 = __toESM(require("react"));
 var import_select2 = require("@base-ui/react/select");
-var import_styled_components3 = __toESM(require("styled-components"));
-var import_seeds_react_mixins = require("@sproutsocial/seeds-react-mixins");
-
-// src/v3/Common/SelectIcons.tsx
-var React3 = require("react");
-var import_styled_components2 = __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_components2.default.div`
-  display: flex;
-  align-items: center;
-  transition: transform 0.15s;
-  ${({ $isOpen }) => $isOpen && "transform: rotate(-180deg);"}
-`;
-function ChevronIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon2.Icon, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true });
-}
-function ClearIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon2.Icon, { name: "circle-x-outline", fixedWidth: true, "aria-hidden": true, size: "mini" });
-}
-function CheckIcon2() {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon2.Icon, { name: "check-outline", fixedWidth: true, "aria-hidden": true });
-}
-
-// src/v3/Common/SelectStyles.tsx
-var invalidStyles = import_styled_components3.css`
-  border-color: ${({ theme }) => theme.colors.form.border.error};
-
-  ${StyledChevron} {
-    color: ${({ theme }) => theme.colors.icon.error};
-  }
-`;
-var Field = import_styled_components3.default.div`
-  display: ${({ $fullWidth }) => $fullWidth === false ? "inline-flex" : "flex"};
-  flex-direction: column;
-  gap: ${({ theme }) => theme.space[200]};
-  ${({ $fullWidth }) => $fullWidth !== false && "width: 100%;"}
-`;
-var SelectLabel = (0, import_styled_components3.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_components3.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}
+var Field = React3.forwardRef(
+  ({ $fullWidth, className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      ref,
+      className: cn(
+        "seeds-menu-field",
+        { "seeds-menu-field--inline": $fullWidth === false },
+        className
+      ),
+      ...rest
+    }
+  )
+);
+Field.displayName = "Field";
+var SelectLabel = React3.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  import_select2.Select.Label,
+  {
+    ref,
+    className: cn("seeds-menu-label", className),
+    ...rest
   }
-
-  &[data-popup-open] {
-    ${import_seeds_react_mixins.focusRing}
+));
+SelectLabel.displayName = "SelectLabel";
+var SelectTrigger = React3.forwardRef(({ $isInvalid, className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  import_select2.Select.Trigger,
+  {
+    ref,
+    className: cn(
+      "seeds-select-trigger",
+      { "seeds-select-trigger--invalid": !!$isInvalid },
+      className
+    ),
+    ...rest
   }
-
-  &[data-popup-open] [data-chevron] {
-    transform: rotate(-180deg);
+));
+SelectTrigger.displayName = "SelectTrigger";
+var SelectValue = React3.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  import_select2.Select.Value,
+  {
+    ref,
+    className: cn("seeds-select-value", className),
+    ...rest
   }
-
-  &[data-disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
+));
+SelectValue.displayName = "SelectValue";
+var SelectIcon = React3.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  import_select2.Select.Icon,
+  {
+    ref,
+    className: cn("seeds-select-icon", className),
+    ...rest
   }
-
-  ${({ $isInvalid }) => $isInvalid && invalidStyles}
-`;
-var SelectValue = (0, import_styled_components3.default)(import_select2.Select.Value)`
-  min-width: 0;
-  overflow: hidden;
-`;
-var SelectIcon = (0, import_styled_components3.default)(import_select2.Select.Icon)`
-  display: flex;
-  align-items: center;
-  color: ${({ theme }) => theme.colors.icon.base};
-  flex-shrink: 0;
-`;
-var SelectGroup = (0, import_styled_components3.default)(import_select2.Select.Group)`
-  display: block;
-`;
-var SelectGroupLabel = (0, import_styled_components3.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_components3.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_components3.default)(import_select2.Select.Positioner)`
-  width: var(--anchor-width);
-  z-index: 7;
-`;
-var SelectPopup = (0, import_styled_components3.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(--available-height, 400px), 400px);
-  overflow-y: auto;
-  padding: ${({ theme }) => theme.space[200]};
-
-  &[data-open] {
-    animation: select-popup-in 120ms ease-out;
+));
+SelectIcon.displayName = "SelectIcon";
+var SelectGroup = React3.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  import_select2.Select.Group,
+  {
+    ref,
+    className: cn("seeds-select-group", className),
+    ...rest
   }
-
-  &[data-closed] {
-    animation: select-popup-out 100ms ease-in;
+));
+SelectGroup.displayName = "SelectGroup";
+var SelectGroupLabel = React3.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  import_select2.Select.GroupLabel,
+  {
+    ref,
+    className: cn("seeds-select-group-label", className),
+    ...rest
   }
-
-  @keyframes select-popup-in {
-    from {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
+));
+SelectGroupLabel.displayName = "SelectGroupLabel";
+var SelectSeparator = React3.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  import_select2.Select.Separator,
+  {
+    ref,
+    className: cn("seeds-select-separator", className),
+    ...rest
   }
-
-  @keyframes select-popup-out {
-    from {
-      opacity: 1;
-      transform: scale(1);
-    }
-    to {
-      opacity: 0;
-      transform: scale(0.95);
-    }
+));
+SelectSeparator.displayName = "SelectSeparator";
+var SelectPositioner = React3.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  import_select2.Select.Positioner,
+  {
+    ref,
+    className: cn("seeds-select-positioner", className),
+    ...rest
+  }
+));
+SelectPositioner.displayName = "SelectPositioner";
+var SelectPopup = React3.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  import_select2.Select.Popup,
+  {
+    ref,
+    className: cn("seeds-select-popup", className),
+    ...rest
   }
-`;
+));
+SelectPopup.displayName = "SelectPopup";
 
-// src/v3/SingleSelect.tsx
+// src/v3/Common/SelectIcons.tsx
+var React4 = __toESM(require("react"));
+var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
 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;
+var StyledChevron = React4.forwardRef(({ $isOpen, className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "div",
+  {
+    ref,
+    className: cn(
+      "seeds-menu-chevron",
+      { "seeds-menu-chevron--open": !!$isOpen },
+      className
+    ),
+    ...rest
+  }
+));
+StyledChevron.displayName = "StyledChevron";
+function ChevronIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_icon2.Icon, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true });
+}
+function ClearIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_icon2.Icon, { name: "circle-x-outline", fixedWidth: true, "aria-hidden": true, size: "mini" });
+}
+function CheckIcon2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_icon2.Icon, { name: "check-outline", fixedWidth: true, "aria-hidden": true });
+}
 
-  &[data-placeholder] {
-    color: ${({ theme }) => theme.colors.text.subtext};
+// src/v3/SingleSelect.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var StyledValue = React5.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  import_select3.Select.Value,
+  {
+    ref,
+    className: cn("seeds-select-value-text", className),
+    ...rest
   }
-`;
+));
+StyledValue.displayName = "StyledValue";
 function SingleSelect(props) {
   const { id, placeholder, includePlaceholderItem, fullWidth = true } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
   const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const selectedItemId = props.selectedItemId;
@@ -401,7 +379,7 @@ function SingleSelect(props) {
   const renderGroupHeading = isChildrenMode ? void 0 : props.renderGroupHeading;
   const children = isChildrenMode ? props.children : void 0;
   const { containerRef, portalContainer } = useSeedsPortalContainer();
-  const items = React4.useMemo(() => {
+  const items = React5.useMemo(() => {
     const dataItems = data.map((item) => ({
       value: String(item.id),
       label: itemToString(item)
@@ -413,11 +391,11 @@ function SingleSelect(props) {
   }, [data, itemToString, includePlaceholderItem, placeholder]);
   const dataWithPlaceholder = includePlaceholderItem ? [{ id: null, value: null, label: placeholder ?? "" }, ...data] : data;
   const isControlled = selectedItemId !== void 0;
-  const [internalValue, setInternalValue] = React4.useState(
+  const [internalValue, setInternalValue] = React5.useState(
     defaultSelectedItemId != null ? String(defaultSelectedItemId) : null
   );
   const value = isControlled ? selectedItemId != null ? String(selectedItemId) : null : internalValue;
-  const selectedItem = React4.useMemo(
+  const selectedItem = React5.useMemo(
     () => value != null ? data.find((d) => String(d.id) === value) ?? null : null,
     [data, value]
   );
@@ -434,9 +412,9 @@ function SingleSelect(props) {
       }
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Field, { $fullWidth: fullWidth, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Field, { $fullWidth: fullWidth, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       import_select3.Select.Root,
       {
         items,
@@ -445,7 +423,7 @@ function SingleSelect(props) {
         onValueChange: handleValueChange,
         id,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             SelectTrigger,
             {
               "aria-describedby": ariaDescribedBy,
@@ -453,51 +431,58 @@ function SingleSelect(props) {
               "aria-required": props.required || void 0,
               $isInvalid: isInvalid,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledValue, { placeholder, children: renderSelection && selectedItem ? renderSelection(selectedItem) : void 0 }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronIcon, {}) }) })
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledValue, { placeholder, children: renderSelection && selectedItem ? renderSelection(selectedItem) : void 0 }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronIcon, {}) }) })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select3.Select.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectPositioner, { sideOffset: 8, alignItemWithTrigger: false, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectPopup, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select3.Select.ScrollUpArrow, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select3.Select.List, { children: children ? children : groupBy ? groupItems(data, groupBy).map((group, index, arr) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(React4.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectGroup, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
-                group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  SelectItem,
-                  {
-                    value: String(item.id),
-                    label: itemToString(item),
-                    disabled: item.disabled,
-                    inputType,
-                    renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
-                  },
-                  item.id
-                ))
-              ] }),
-              index < arr.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectSeparator, {})
-            ] }, group.value)) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-              includePlaceholderItem && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                SelectItem,
-                {
-                  value: null,
-                  label: placeholder ?? ""
-                },
-                "placeholder"
-              ),
-              data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                SelectItem,
-                {
-                  value: String(item.id),
-                  label: itemToString(item),
-                  disabled: item.disabled,
-                  inputType,
-                  renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
-                },
-                item.id
-              ))
-            ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select3.Select.ScrollDownArrow, {})
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_select3.Select.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectPositioner, { sideOffset: 8, alignItemWithTrigger: false, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectPopup, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_select3.Select.ScrollUpArrow, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_select3.Select.List,
+              {
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledBy,
+                children: children ? children : groupBy ? groupItems(data, groupBy).map((group, index, arr) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(React5.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectGroup, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                    group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      SelectItem,
+                      {
+                        value: String(item.id),
+                        label: itemToString(item),
+                        disabled: item.disabled,
+                        inputType,
+                        renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                      },
+                      item.id
+                    ))
+                  ] }),
+                  index < arr.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectSeparator, {})
+                ] }, group.value)) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                  includePlaceholderItem && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    SelectItem,
+                    {
+                      value: null,
+                      label: placeholder ?? ""
+                    },
+                    "placeholder"
+                  ),
+                  data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    SelectItem,
+                    {
+                      value: String(item.id),
+                      label: itemToString(item),
+                      disabled: item.disabled,
+                      inputType,
+                      renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                    },
+                    item.id
+                  ))
+                ] })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_select3.Select.ScrollDownArrow, {})
           ] }) }) })
         ]
       }
@@ -506,27 +491,19 @@ function SingleSelect(props) {
 }
 
 // src/v3/MultiSelect.tsx
-var React5 = __toESM(require("react"));
+var React6 = __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;
-`;
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SelectionText = ({
+  className,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("seeds-select-selection-text", className), ...rest });
+var Placeholder = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn("seeds-select-placeholder", className), ...rest });
 function MultiSelect(props) {
   const { id, placeholder = "Select...", fullWidth = true } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
   const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
@@ -545,18 +522,18 @@ function MultiSelect(props) {
   const children = isChildrenMode ? props.children : void 0;
   const { containerRef, portalContainer } = useSeedsPortalContainer();
   const isControlled = selectedItemIds !== void 0;
-  const [internalValue, setInternalValue] = React5.useState(
+  const [internalValue, setInternalValue] = React6.useState(
     () => defaultSelectedItemIds?.map(String) ?? []
   );
   const value = isControlled ? selectedItemIds.map(String) : internalValue;
-  const items = React5.useMemo(
+  const items = React6.useMemo(
     () => data.map((item) => ({
       value: String(item.id),
       label: itemToString(item)
     })),
     [data, itemToString]
   );
-  const selectedItems = React5.useMemo(
+  const selectedItems = React6.useMemo(
     () => value.map((v) => data.find((d) => String(d.id) === v)).filter((d) => d != null),
     [data, value]
   );
@@ -572,9 +549,9 @@ function MultiSelect(props) {
       onSelectedItemIdsChange(ids);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Field, { $fullWidth: fullWidth, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Field, { $fullWidth: fullWidth, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       import_select4.Select.Root,
       {
         multiple: true,
@@ -584,7 +561,7 @@ function MultiSelect(props) {
         disabled: props.disabled,
         id,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
             SelectTrigger,
             {
               "aria-describedby": ariaDescribedBy,
@@ -592,30 +569,49 @@ function MultiSelect(props) {
               "aria-required": props.required || void 0,
               $isInvalid: isInvalid,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectValue, { children: () => {
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectValue, { children: () => {
                   if (renderSelection) return renderSelection(selectedItems);
                   if (selectedItems.length === 0)
-                    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Placeholder, { children: placeholder });
+                    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Placeholder, { children: placeholder });
                   const visibleItems = maxSelections != null ? selectedItems.slice(0, maxSelections) : selectedItems;
                   const overflowCount = maxSelections != null && selectedItems.length > maxSelections ? selectedItems.length - maxSelections : 0;
                   const text = visibleItems.map(
                     (item) => customRenderSelections ? customRenderSelections(item) : itemToString(item)
                   ).join(", ");
-                  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectionText, { children: [
+                  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(SelectionText, { children: [
                     text,
                     overflowCount > 0 ? `, +${overflowCount}` : ""
                   ] });
                 } }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronIcon, {}) }) })
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronIcon, {}) }) })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_select4.Select.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectPositioner, { sideOffset: 8, alignItemWithTrigger: false, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectPopup, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_select4.Select.ScrollUpArrow, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_select4.Select.List, { children: children ? children : groupBy ? groupItems(data, groupBy).map((group, index, arr) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(React5.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectGroup, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
-                group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_select4.Select.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPositioner, { sideOffset: 8, alignItemWithTrigger: false, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(SelectPopup, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_select4.Select.ScrollUpArrow, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_select4.Select.List,
+              {
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledBy,
+                children: children ? children : groupBy ? groupItems(data, groupBy).map((group, index, arr) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(React6.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(SelectGroup, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                    group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      SelectItem,
+                      {
+                        value: String(item.id),
+                        label: itemToString(item),
+                        disabled: item.disabled,
+                        inputType,
+                        hidden: removeSelectedItems && value.includes(String(item.id)),
+                        renderItem: renderItem ? () => renderItem(item) : void 0
+                      },
+                      item.id
+                    ))
+                  ] }),
+                  index < arr.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectSeparator, {})
+                ] }, group.value)) : data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   SelectItem,
                   {
                     value: String(item.id),
@@ -623,25 +619,13 @@ function MultiSelect(props) {
                     disabled: item.disabled,
                     inputType,
                     hidden: removeSelectedItems && value.includes(String(item.id)),
-                    renderItem: renderItem ? () => renderItem(item) : void 0
+                    renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
                   },
                   item.id
                 ))
-              ] }),
-              index < arr.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectSeparator, {})
-            ] }, group.value)) : data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              SelectItem,
-              {
-                value: String(item.id),
-                label: itemToString(item),
-                disabled: item.disabled,
-                inputType,
-                hidden: removeSelectedItems && value.includes(String(item.id)),
-                renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
-              },
-              item.id
-            )) }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_select4.Select.ScrollDownArrow, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_select4.Select.ScrollDownArrow, {})
           ] }) }) })
         ]
       }
@@ -650,14 +634,14 @@ function MultiSelect(props) {
 }
 
 // src/v3/SingleCombobox.tsx
-var React9 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_combobox3 = require("@base-ui/react/combobox");
 var import_react_virtual2 = require("@tanstack/react-virtual");
 
 // src/v3/Common/useSuppressEscapeClear.ts
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 function useSuppressEscapeClear(open) {
-  return React6.useCallback(
+  return React7.useCallback(
     (event) => {
       if (event.key === "Escape" && !open) {
         event.stopPropagation();
@@ -668,309 +652,189 @@ function useSuppressEscapeClear(open) {
 }
 
 // src/v3/Common/ComboboxItem.tsx
-var React7 = __toESM(require("react"));
+var React9 = __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 React8 = __toESM(require("react"));
 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 invalidStyles2 = import_styled_components6.css`
-  border-color: ${({ theme }) => theme.colors.form.border.error};
-
-  ${StyledChevron} {
-    color: ${({ theme }) => theme.colors.icon.error};
-  }
-`;
-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 import_jsx_runtime6 = require("react/jsx-runtime");
+var ComboboxLabel = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { ref, className: cn("seeds-menu-label", className), ...rest }));
+ComboboxLabel.displayName = "ComboboxLabel";
+var ComboboxInputGroup = React8.forwardRef(({ $isInvalid, className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.InputGroup,
+  {
+    ref,
+    className: cn(
+      "seeds-combobox-input-group",
+      { "seeds-combobox-input-group--invalid": !!$isInvalid },
+      className
+    ),
+    ...rest
   }
-
-  &[data-disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
+));
+ComboboxInputGroup.displayName = "ComboboxInputGroup";
+var ComboboxInput = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.Input,
+  {
+    ref,
+    className: cn("seeds-combobox-input", className),
+    ...rest
   }
-
-  ${({ $isInvalid }) => $isInvalid && invalidStyles2}
-`;
-var ComboboxInput = (0, import_styled_components6.default)(import_combobox.Combobox.Input)`
-  flex: 1;
-  min-width: 30px;
-  padding: ${({ theme }) => theme.space[300]};
-  border: none !important;
-  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};
+));
+ComboboxInput.displayName = "ComboboxInput";
+var ComboboxTokenInput = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.Input,
+  {
+    ref,
+    className: cn("seeds-combobox-token-input", className),
+    ...rest
   }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-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 !important;
-  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};
+));
+ComboboxTokenInput.displayName = "ComboboxTokenInput";
+var ComboboxActionButtons = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("seeds-combobox-action-buttons", className),
+    ...rest
   }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-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).attrs({ tabIndex: 0 })`
-  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};
+));
+ComboboxActionButtons.displayName = "ComboboxActionButtons";
+var ComboboxClear = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.Clear,
+  {
+    ref,
+    tabIndex: 0,
+    className: cn("seeds-combobox-clear", className),
+    ...rest
   }
-
-  &:focus-visible {
-    ${import_seeds_react_mixins2.focusRing}
+));
+ComboboxClear.displayName = "ComboboxClear";
+var ComboboxTrigger = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.Trigger,
+  {
+    ref,
+    className: cn("seeds-combobox-trigger", className),
+    ...rest
   }
-
-  &[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(--available-height, 400px), 400px);
-  overflow-y: auto;
-  padding: 0;
-
-  &[data-open] {
-    animation: combobox-popup-in 120ms ease-out;
+));
+ComboboxTrigger.displayName = "ComboboxTrigger";
+var ComboboxPositioner = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.Positioner,
+  {
+    ref,
+    className: cn("seeds-combobox-positioner", className),
+    ...rest
   }
-
-  &[data-closed] {
-    animation: combobox-popup-out 100ms ease-in;
+));
+ComboboxPositioner.displayName = "ComboboxPositioner";
+var ComboboxPopup = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.Popup,
+  {
+    ref,
+    className: cn("seeds-combobox-popup", className),
+    ...rest
   }
-
-  @keyframes combobox-popup-in {
-    from {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
+));
+ComboboxPopup.displayName = "ComboboxPopup";
+var ComboboxList = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.List,
+  {
+    ref,
+    className: cn("seeds-combobox-list", className),
+    ...rest
   }
-
-  @keyframes combobox-popup-out {
-    from {
-      opacity: 1;
-      transform: scale(1);
-    }
-    to {
-      opacity: 0;
-      transform: scale(0.95);
-    }
+));
+ComboboxList.displayName = "ComboboxList";
+var ComboboxStatus = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.Status,
+  {
+    ref,
+    className: cn("seeds-combobox-status", className),
+    ...rest
   }
-`;
-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};
+));
+ComboboxStatus.displayName = "ComboboxStatus";
+var ComboboxEmpty = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.Empty,
+  {
+    ref,
+    className: cn("seeds-combobox-empty", className),
+    ...rest
   }
-
-  &[data-selected] {
-    font-weight: ${({ theme }) => theme.fontWeights.semibold};
+));
+ComboboxEmpty.displayName = "ComboboxEmpty";
+var ComboboxItem = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.Item,
+  {
+    ref,
+    className: cn("seeds-combobox-item", className),
+    ...rest
   }
-
-  &[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};
+));
+ComboboxItem.displayName = "ComboboxItem";
+var ComboboxItemIndicator = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.ItemIndicator,
+  {
+    ref,
+    className: cn("seeds-combobox-item-indicator", className),
+    ...rest
   }
-
-  &[data-disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-`;
-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};
+));
+ComboboxItemIndicator.displayName = "ComboboxItemIndicator";
+var ComboboxGroup = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.Group,
+  {
+    ref,
+    className: cn("seeds-combobox-group", className),
+    ...rest
   }
-`;
+));
+ComboboxGroup.displayName = "ComboboxGroup";
+var ComboboxGroupLabel = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.GroupLabel,
+  {
+    ref,
+    className: cn("seeds-combobox-group-label", className),
+    ...rest
+  }
+));
+ComboboxGroupLabel.displayName = "ComboboxGroupLabel";
+var ComboboxSeparator = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("seeds-combobox-separator", className),
+    ...rest
+  }
+));
+ComboboxSeparator.displayName = "ComboboxSeparator";
+var ComboboxGroupHeaderItem = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.Item,
+  {
+    ref,
+    className: cn("seeds-combobox-group-header-item", className),
+    ...rest
+  }
+));
+ComboboxGroupHeaderItem.displayName = "ComboboxGroupHeaderItem";
+var ComboboxSelectAllItem = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.Item,
+  {
+    ref,
+    className: cn("seeds-combobox-select-all-item", className),
+    ...rest
+  }
+));
+ComboboxSelectAllItem.displayName = "ComboboxSelectAllItem";
 function ComboboxGroupHeaderCheckbox({
   $state,
   id
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_seeds_react_checkbox2.default,
     {
       id,
@@ -982,196 +846,114 @@ function ComboboxGroupHeaderCheckbox({
     }
   );
 }
-var ComboboxToken = (0, import_styled_components6.default)(import_combobox.Combobox.Chips)`
-  display: flex;
-  width: 100%;
-  flex-wrap: wrap;
-  gap: ${({ theme }) => theme.space[200]};
-`;
-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 ComboboxToken = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.Chips,
+  {
+    ref,
+    className: cn("seeds-combobox-tokens", className),
+    ...rest
   }
-
-  &[data-disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
+));
+ComboboxToken.displayName = "ComboboxToken";
+var ComboboxTokenInputGroup = React8.forwardRef(({ $isInvalid, className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.InputGroup,
+  {
+    ref,
+    className: cn(
+      "seeds-combobox-token-input-group",
+      { "seeds-combobox-token-input-group--invalid": !!$isInvalid },
+      className
+    ),
+    ...rest
   }
-
-  ${({ $isInvalid }) => $isInvalid && invalidStyles2}
-`;
-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;
-
-  &:focus-visible {
-    ${import_seeds_react_mixins2.focusRing}
-  }
-`;
-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}
+));
+ComboboxTokenInputGroup.displayName = "ComboboxTokenInputGroup";
+var Token = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { ref, className: cn("seeds-combobox-token", className), ...rest }));
+Token.displayName = "Token";
+var TokenRemove = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  "button",
+  {
+    ref,
+    className: cn("seeds-combobox-token-remove", className),
+    ...rest
   }
-
-  &[data-popup-open] [data-chevron] {
-    transform: rotate(-180deg);
+));
+TokenRemove.displayName = "TokenRemove";
+var SearchableSelectTrigger = React8.forwardRef(({ $isInvalid, className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.Trigger,
+  {
+    ref,
+    className: cn(
+      "seeds-searchable-select-trigger",
+      { "seeds-searchable-select-trigger--invalid": !!$isInvalid },
+      className
+    ),
+    ...rest
   }
-
-  &[data-disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
+));
+SearchableSelectTrigger.displayName = "SearchableSelectTrigger";
+var SearchableSelectTriggerIcon = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.Icon,
+  {
+    ref,
+    className: cn("seeds-searchable-select-trigger-icon", className),
+    ...rest
   }
-
-  ${({ $isInvalid }) => $isInvalid && invalidStyles2}
-`;
-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}
+));
+SearchableSelectTriggerIcon.displayName = "SearchableSelectTriggerIcon";
+var SearchableSelectPlaceholder = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  "span",
+  {
+    ref,
+    className: cn("seeds-searchable-select-placeholder", className),
+    ...rest
   }
-
-  &::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}
+));
+SearchableSelectPlaceholder.displayName = "SearchableSelectPlaceholder";
+var SearchableSelectPopup = ComboboxPopup;
+var SearchableSelectSearchContainer = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("seeds-searchable-select-search-container", className),
+    ...rest
   }
-
-  &[data-popup-open] {
-    border-color: ${({ theme }) => theme.colors.blue[600]};
+));
+SearchableSelectSearchContainer.displayName = "SearchableSelectSearchContainer";
+var SearchableSelectInput = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.Input,
+  {
+    ref,
+    className: cn("seeds-searchable-select-input", className),
+    ...rest
   }
-
-  &[data-popup-open] [data-chevron] {
-    transform: rotate(-180deg);
+));
+SearchableSelectInput.displayName = "SearchableSelectInput";
+var SearchableSelectList = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.List,
+  {
+    ref,
+    className: cn("seeds-searchable-select-list", className),
+    ...rest
   }
-
-  &[data-disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
+));
+SearchableSelectList.displayName = "SearchableSelectList";
+var SearchableSelectTokenTrigger = React8.forwardRef(({ $isInvalid, className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  import_combobox.Combobox.Trigger,
+  {
+    ref,
+    className: cn(
+      "seeds-searchable-select-token-trigger",
+      { "seeds-searchable-select-token-trigger--invalid": !!$isInvalid },
+      className
+    ),
+    ...rest
   }
-
-  ${({ $isInvalid }) => $isInvalid && invalidStyles2}
-`;
+));
+SearchableSelectTokenTrigger.displayName = "SearchableSelectTokenTrigger";
 
 // src/v3/Common/ComboboxItem.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function ComboboxItemInner({
   value,
   itemId,
@@ -1183,7 +965,7 @@ function ComboboxItemInner({
   "data-index": dataIndex,
   style
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     ComboboxItem,
     {
       value,
@@ -1194,11 +976,11 @@ function ComboboxItemInner({
       disabled,
       "data-qa-menu-item": label,
       children: [
-        inputType === "radio" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        inputType === "radio" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           ComboboxItemIndicator,
           {
             keepMounted: true,
-            render: (_props, state) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            render: (_props, state) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               import_seeds_react_radio2.default,
               {
                 checked: state.selected,
@@ -1210,11 +992,11 @@ function ComboboxItemInner({
               }
             )
           }
-        ) : inputType === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        ) : inputType === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           ComboboxItemIndicator,
           {
             keepMounted: true,
-            render: (_props, state) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            render: (_props, state) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               import_seeds_react_checkbox3.default,
               {
                 checked: state.selected,
@@ -1226,17 +1008,17 @@ function ComboboxItemInner({
               }
             )
           }
-        ) : inputType === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ComboboxItemIndicator, { keepMounted: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckIcon2, {}) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: renderItem ? renderItem() : label })
+        ) : inputType === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ComboboxItemIndicator, { keepMounted: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckIcon2, {}) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: renderItem ? renderItem() : label })
       ]
     }
   );
 }
-var ComboboxItem2 = React7.forwardRef(ComboboxItemInner);
+var ComboboxItem2 = React9.forwardRef(ComboboxItemInner);
 var ComboboxItem_default = ComboboxItem2;
 
 // src/v3/Common/VirtualizedComboboxList.tsx
-var React8 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_combobox2 = require("@base-ui/react/combobox");
 var import_react_virtual = require("@tanstack/react-virtual");
 
@@ -1255,7 +1037,7 @@ function isCreatableSentinel(v) {
 }
 
 // src/v3/Common/VirtualizedComboboxList.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var ITEM_HEIGHT = 32;
 function isGroupHeaderSentinel(v) {
   return typeof v === "object" && v !== null && "__groupHeader" in v;
@@ -1277,7 +1059,7 @@ function VirtualizedComboboxList({
   renderCreatableItem
 }) {
   const filteredItems = import_combobox2.Combobox.useFilteredItems();
-  const scrollElementRef = React8.useRef(null);
+  const scrollElementRef = React10.useRef(null);
   const virtualizer = (0, import_react_virtual.useVirtualizer)({
     enabled: open,
     count: filteredItems.length,
@@ -1289,8 +1071,8 @@ function VirtualizedComboboxList({
     scrollPaddingStart: 4,
     scrollPaddingEnd: 4
   });
-  React8.useImperativeHandle(virtualizerRef, () => virtualizer);
-  const handleScrollRef = React8.useCallback(
+  React10.useImperativeHandle(virtualizerRef, () => virtualizer);
+  const handleScrollRef = React10.useCallback(
     (el) => {
       scrollElementRef.current = el;
       if (el) requestAnimationFrame(() => virtualizer.measure());
@@ -1300,7 +1082,7 @@ function VirtualizedComboboxList({
   if (!filteredItems.length) return null;
   const selectedArray = Array.isArray(value) ? value : value != null ? [value] : [];
   const totalSize = virtualizer.getTotalSize();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       role: "presentation",
@@ -1311,7 +1093,7 @@ function VirtualizedComboboxList({
         overflowY: "auto",
         overscrollBehavior: "contain"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "div",
         {
           role: "presentation",
@@ -1328,7 +1110,7 @@ function VirtualizedComboboxList({
               boxSizing: "border-box"
             };
             if (isPlaceholderSentinel(row)) {
-              return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 ComboboxItem_default,
                 {
                   index: virtualItem.index,
@@ -1347,7 +1129,7 @@ function VirtualizedComboboxList({
               const selectedCount = selectedArray.length;
               const totalCount = data.length;
               const state = selectedCount === 0 ? "none" : selectedCount === totalCount ? "all" : "partial";
-              return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 ComboboxSelectAllItem,
                 {
                   index: virtualItem.index,
@@ -1356,7 +1138,7 @@ function VirtualizedComboboxList({
                   style: baseStyle,
                   ref: virtualizer.measureElement,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ComboboxGroupHeaderCheckbox, { $state: state, id: "__selectAll" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComboboxGroupHeaderCheckbox, { $state: state, id: "__selectAll" }),
                     "Select all"
                   ]
                 },
@@ -1370,7 +1152,7 @@ function VirtualizedComboboxList({
                 (item2) => selectedArray.some((s) => s.id === item2.id)
               ).length;
               const state = selectedCount === 0 ? "none" : selectedCount === groupItems2.length ? "all" : "partial";
-              return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 ComboboxGroupHeaderItem,
                 {
                   index: virtualItem.index,
@@ -1380,7 +1162,7 @@ function VirtualizedComboboxList({
                   style: baseStyle,
                   ref: virtualizer.measureElement,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       ComboboxGroupHeaderCheckbox,
                       {
                         $state: state,
@@ -1405,7 +1187,7 @@ function VirtualizedComboboxList({
               return null;
             }
             const item = row;
-            return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               ComboboxItem_default,
               {
                 index: virtualItem.index,
@@ -1429,7 +1211,7 @@ function VirtualizedComboboxList({
 }
 
 // src/v3/SingleCombobox.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function SingleCombobox(props) {
   const {
     id,
@@ -1439,6 +1221,8 @@ function SingleCombobox(props) {
     fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
   const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
@@ -1453,18 +1237,18 @@ function SingleCombobox(props) {
   const defaultSelectedItemId = props.defaultSelectedItemId;
   const onSelectedItemIdChange = props.onSelectedItemIdChange;
   const { containerRef, portalContainer } = useSeedsPortalContainer();
-  const [open, setOpen] = React9.useState(false);
-  const virtualizerRef = React9.useRef(null);
+  const [open, setOpen] = React11.useState(false);
+  const virtualizerRef = React11.useRef(null);
   const onInputKeyDownCapture = useSuppressEscapeClear(open);
   const isControlled = selectedItemId !== void 0;
-  const idToItem = React9.useCallback(
+  const idToItem = React11.useCallback(
     (id2) => {
       if (id2 == null) return null;
       return data.find((d) => String(d.id) === String(id2)) ?? null;
     },
     [data]
   );
-  const [internalValue, setInternalValue] = React9.useState(
+  const [internalValue, setInternalValue] = React11.useState(
     () => idToItem(defaultSelectedItemId)
   );
   const value = isControlled ? idToItem(selectedItemId) : internalValue;
@@ -1476,13 +1260,13 @@ function SingleCombobox(props) {
       onSelectedItemIdChange(newItem ? newItem.id : null);
     }
   }
-  const groups = React9.useMemo(
+  const groups = React11.useMemo(
     () => groupBy ? groupItems(data, groupBy) : null,
     [data, groupBy]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Field, { $fullWidth: fullWidth, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Field, { $fullWidth: fullWidth, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       import_combobox3.Combobox.Root,
       {
         id,
@@ -1510,13 +1294,13 @@ function SingleCombobox(props) {
           }
         } : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             ComboboxInputGroup,
             {
               $isInvalid: isInvalid,
               onKeyDownCapture: onInputKeyDownCapture,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   ComboboxInput,
                   {
                     placeholder,
@@ -1526,22 +1310,24 @@ function SingleCombobox(props) {
                     "aria-required": props.required || void 0
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ComboboxActionButtons, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComboboxClear, { "aria-label": "Clear selection", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ClearIcon, {}) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComboboxTrigger, { "aria-label": "Open popup", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledChevron, { $isOpen: open, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronIcon, {}) }) })
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ComboboxActionButtons, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxClear, { "aria-label": "Clear selection", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ClearIcon, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxTrigger, { "aria-label": "Open popup", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledChevron, { $isOpen: open, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChevronIcon, {}) }) })
                 ] })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_combobox3.Combobox.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_combobox3.Combobox.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             ComboboxPopup,
             {
               style: isVirtualized ? { display: "flex", flexDirection: "column" } : void 0,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComboboxEmpty, { children: emptyText }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxEmpty, { children: emptyText }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   ComboboxList,
                   {
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
                     style: isVirtualized ? {
                       padding: 0,
                       flex: 1,
@@ -1549,7 +1335,7 @@ function SingleCombobox(props) {
                       display: "flex",
                       flexDirection: "column"
                     } : void 0,
-                    children: isVirtualized ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    children: isVirtualized ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       VirtualizedComboboxList,
                       {
                         open,
@@ -1562,10 +1348,10 @@ function SingleCombobox(props) {
                         renderItem,
                         renderGroupHeading
                       }
-                    ) : children ? children : groups ? ((group, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(React9.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ComboboxGroup, { items: group.items, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_combobox3.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    ) : children ? children : groups ? ((group, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(React11.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ComboboxGroup, { items: group.items, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_combobox3.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                           ComboboxItem_default,
                           {
                             value: item,
@@ -1578,8 +1364,8 @@ function SingleCombobox(props) {
                           item.id
                         ) })
                       ] }),
-                      index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComboboxSeparator, {})
-                    ] }, group.value)) : ((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxSeparator, {})
+                    ] }, group.value)) : ((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       ComboboxItem_default,
                       {
                         value: item,
@@ -1603,11 +1389,11 @@ function SingleCombobox(props) {
 }
 
 // src/v3/MultiCombobox.tsx
-var React10 = __toESM(require("react"));
+var React12 = __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");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function makeGroupHeaderSentinel(groupName) {
   return { __groupHeader: true, groupName };
 }
@@ -1631,6 +1417,8 @@ function MultiCombobox(props) {
     fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
   const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
@@ -1656,31 +1444,31 @@ function MultiCombobox(props) {
   const defaultSelectedItemIds = props.defaultSelectedItemIds;
   const onSelectedItemIdsChange = props.onSelectedItemIdsChange;
   const { containerRef, portalContainer } = useSeedsPortalContainer();
-  const [open, setOpen] = React10.useState(false);
-  const [internalInputValue, setInternalInputValue] = React10.useState("");
-  const skipNextInputChangeRef = React10.useRef(false);
-  const virtualizerRef = React10.useRef(null);
-  const inputRef = React10.useRef(null);
+  const [open, setOpen] = React12.useState(false);
+  const [internalInputValue, setInternalInputValue] = React12.useState("");
+  const skipNextInputChangeRef = React12.useRef(false);
+  const virtualizerRef = React12.useRef(null);
+  const inputRef = React12.useRef(null);
   const onInputKeyDownCapture = useSuppressEscapeClear(open);
   const isControlled = selectedItemIds !== void 0;
-  const idsToItems = React10.useCallback(
+  const idsToItems = React12.useCallback(
     (ids) => ids.map((id2) => data.find((d) => d.id === id2)).filter((d) => d != null),
     [data]
   );
-  const [internalValue, setInternalValue] = React10.useState(
+  const [internalValue, setInternalValue] = React12.useState(
     () => defaultSelectedItemIds ? idsToItems(defaultSelectedItemIds) : []
   );
   const value = isControlled ? idsToItems(selectedItemIds) : internalValue;
-  const visibleData = React10.useMemo(
+  const visibleData = React12.useMemo(
     () => removeSelectedItems ? data.filter((item) => !value.some((v) => v.id === item.id)) : data,
     [data, value, removeSelectedItems]
   );
-  const groups = React10.useMemo(
+  const groups = React12.useMemo(
     () => groupBy ? groupItems(visibleData, groupBy) : null,
     [visibleData, groupBy]
   );
   const currentInputValue = inputValue ?? internalInputValue;
-  const creatableSentinel = React10.useMemo(() => {
+  const creatableSentinel = React12.useMemo(() => {
     if (!creatableProp) return null;
     const trimmed = currentInputValue.trim();
     if (!trimmed) return null;
@@ -1691,7 +1479,7 @@ function MultiCombobox(props) {
     if (exactExists) return null;
     return makeCreatableSentinel(trimmed);
   }, [creatableProp, currentInputValue, data, itemToString]);
-  const flatItems = React10.useMemo(() => {
+  const flatItems = React12.useMemo(() => {
     if (!selectHeadings && !selectAll) return null;
     if (!groups && !selectAll) return null;
     const rows = [];
@@ -1785,8 +1573,8 @@ function MultiCombobox(props) {
       const totalCount = data.length;
       const selectedCount = value.length;
       const state = selectedCount === 0 ? "none" : selectedCount === totalCount ? "all" : "partial";
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ComboboxSelectAllItem, { value: row, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxGroupHeaderCheckbox, { $state: state, id: "__selectAll" }),
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ComboboxSelectAllItem, { value: row, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxGroupHeaderCheckbox, { $state: state, id: "__selectAll" }),
         selectAllLabel
       ] }, "__selectAll");
     }
@@ -1797,13 +1585,13 @@ function MultiCombobox(props) {
         (item2) => value.some((s) => s.id === item2.id)
       ).length;
       const state = selectedCount === 0 ? "none" : selectedCount === groupItemsList.length ? "all" : "partial";
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         ComboboxGroupHeaderItem,
         {
           value: row,
           disabled: isGroupHeaderDisabled?.(row.groupName),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               ComboboxGroupHeaderCheckbox,
               {
                 $state: state,
@@ -1820,7 +1608,7 @@ function MultiCombobox(props) {
       return renderCreatableItem(row);
     }
     const item = row;
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       ComboboxItem_default,
       {
         value: item,
@@ -1834,15 +1622,15 @@ function MultiCombobox(props) {
     );
   }
   function renderCreatableItem(sentinel, style, index, measureRef) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       ComboboxItem_default,
       {
         value: sentinel,
         itemId: "__creatable",
         label: `Create "${sentinel.label}"`,
         inputType: "none",
-        renderItem: () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_seeds_react_icon3.default, { name: "plus-outline", size: "mini" }),
+        renderItem: () => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_seeds_react_icon3.default, { name: "plus-outline", size: "mini" }),
           `Create "${sentinel.label}"`
         ] }),
         style,
@@ -1857,9 +1645,9 @@ function MultiCombobox(props) {
   const rootItems = creatableSentinel && Array.isArray(baseItems) ? [...baseItems, creatableSentinel] : baseItems;
   const hasSentinels = selectAll || selectHeadings;
   const rootValue = hasSentinels ? [...value] : value;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Field, { $fullWidth: fullWidth, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Field, { $fullWidth: fullWidth, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       import_combobox4.Combobox.Root,
       {
         multiple: true,
@@ -1934,35 +1722,35 @@ function MultiCombobox(props) {
         },
         items: rootItems,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             ComboboxTokenInputGroup,
             {
               $isInvalid: isInvalid,
               onKeyDownCapture: onInputKeyDownCapture,
-              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ComboboxToken, { children: [
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ComboboxToken, { children: [
                 renderSelection ? renderSelection(value) : (() => {
                   const visibleTokens = maxTokens != null ? value.slice(0, maxTokens) : value;
                   const overflow = maxTokens != null ? value.length - maxTokens : 0;
-                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-                    visibleTokens.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Token, { children: [
+                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                    visibleTokens.map((item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Token, { children: [
                       renderToken ? renderToken(item) : itemToString(item),
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         TokenRemove,
                         {
                           "aria-label": `Remove ${itemToString(item)}`,
                           onPointerDown: (e) => e.preventDefault(),
                           onClick: (e) => removeItem(item, e),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_seeds_react_icon3.default, { name: "x-outline", size: "mini" })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_seeds_react_icon3.default, { name: "x-outline", size: "mini" })
                         }
                       )
                     ] }, item.id)),
-                    overflow > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Token, { children: [
+                    overflow > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Token, { children: [
                       "+",
                       overflow
                     ] }, "__overflow")
                   ] });
                 })(),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   ComboboxTokenInput,
                   {
                     ref: inputRef,
@@ -1973,24 +1761,26 @@ function MultiCombobox(props) {
                     "aria-required": props.required || void 0
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ComboboxActionButtons, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxClear, { "aria-label": "Clear all", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ClearIcon, {}) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxTrigger, { "aria-label": "Open popup", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledChevron, { $isOpen: open, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChevronIcon, {}) }) })
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ComboboxActionButtons, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxClear, { "aria-label": "Clear all", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ClearIcon, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxTrigger, { "aria-label": "Open popup", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StyledChevron, { $isOpen: open, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChevronIcon, {}) }) })
                 ] })
               ] })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_combobox4.Combobox.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_combobox4.Combobox.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
             ComboboxPopup,
             {
               "aria-busy": isLoading || void 0,
               style: isVirtualized ? { display: "flex", flexDirection: "column" } : void 0,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxStatus, { children: isLoading ? loadingText : null }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxEmpty, { children: isLoading ? null : emptyText }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxStatus, { children: isLoading ? loadingText : null }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxEmpty, { children: isLoading ? null : emptyText }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   ComboboxList,
                   {
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
                     style: isVirtualized ? {
                       padding: 0,
                       flex: 1,
@@ -1998,7 +1788,7 @@ function MultiCombobox(props) {
                       display: "flex",
                       flexDirection: "column"
                     } : void 0,
-                    children: isVirtualized ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    children: isVirtualized ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       VirtualizedComboboxList,
                       {
                         open,
@@ -2023,10 +1813,10 @@ function MultiCombobox(props) {
                         return renderCreatableItem(group);
                       }
                       const g = group;
-                      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(React10.Fragment, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ComboboxGroup, { items: g.items, children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(g.value) : g.value }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_combobox4.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(React12.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ComboboxGroup, { items: g.items, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(g.value) : g.value }),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_combobox4.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                             ComboboxItem_default,
                             {
                               value: item,
@@ -2039,14 +1829,14 @@ function MultiCombobox(props) {
                             item.id
                           ) })
                         ] }),
-                        index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxSeparator, {})
+                        index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxSeparator, {})
                       ] }, g.value);
                     }) : ((item) => {
                       if (isCreatableSentinel(item)) {
                         return renderCreatableItem(item);
                       }
                       const dataItem = item;
-                      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         ComboboxItem_default,
                         {
                           value: dataItem,
@@ -2071,10 +1861,10 @@ function MultiCombobox(props) {
 }
 
 // src/v3/SingleSearchableSelect.tsx
-var React11 = __toESM(require("react"));
+var React13 = __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");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function SingleSearchableSelect(props) {
   const {
     id,
@@ -2088,6 +1878,8 @@ function SingleSearchableSelect(props) {
     fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
   const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
@@ -2103,17 +1895,17 @@ function SingleSearchableSelect(props) {
   const defaultSelectedItemId = props.defaultSelectedItemId;
   const onSelectedItemIdChange = props.onSelectedItemIdChange;
   const { containerRef, portalContainer } = useSeedsPortalContainer();
-  const [open, setOpen] = React11.useState(false);
-  const virtualizerRef = React11.useRef(null);
+  const [open, setOpen] = React13.useState(false);
+  const virtualizerRef = React13.useRef(null);
   const isControlled = selectedItemId !== void 0;
-  const idToItem = React11.useCallback(
+  const idToItem = React13.useCallback(
     (id2) => {
       if (id2 == null) return null;
       return data.find((d) => String(d.id) === String(id2)) ?? null;
     },
     [data]
   );
-  const [internalValue, setInternalValue] = React11.useState(
+  const [internalValue, setInternalValue] = React13.useState(
     () => idToItem(defaultSelectedItemId)
   );
   const value = isControlled ? idToItem(selectedItemId) : internalValue;
@@ -2124,13 +1916,13 @@ function SingleSearchableSelect(props) {
       onSelectedItemIdChange(realItem ? realItem.id : null);
     }
   }
-  const groups = React11.useMemo(
+  const groups = React13.useMemo(
     () => groupBy ? groupItems(data, groupBy) : null,
     [data, groupBy]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Field, { $fullWidth: fullWidth, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Field, { $fullWidth: fullWidth, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       import_combobox5.Combobox.Root,
       {
         id,
@@ -2163,7 +1955,7 @@ function SingleSearchableSelect(props) {
           }
         } : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             SearchableSelectTrigger,
             {
               id,
@@ -2172,29 +1964,31 @@ function SingleSearchableSelect(props) {
               "aria-required": props.required || void 0,
               $isInvalid: isInvalid,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SearchableSelectPlaceholder, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_combobox5.Combobox.Value, { placeholder, children: value ? renderSelection ? renderSelection(value) : itemToString(value) : placeholder }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SearchableSelectTriggerIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChevronIcon, {}) }) })
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SearchableSelectPlaceholder, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_combobox5.Combobox.Value, { placeholder, children: value ? renderSelection ? renderSelection(value) : itemToString(value) : placeholder }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SearchableSelectTriggerIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronIcon, {}) }) })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_combobox5.Combobox.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_combobox5.Combobox.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             SearchableSelectPopup,
             {
               "aria-busy": isLoading || void 0,
               style: { display: "flex", flexDirection: "column" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SearchableSelectSearchContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SearchableSelectSearchContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   SearchableSelectInput,
                   {
                     placeholder: searchPlaceholder,
                     autoFocus: true
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxStatus, { children: isLoading ? loadingText : null }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxEmpty, { children: isLoading ? null : emptyText }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxStatus, { children: isLoading ? loadingText : null }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxEmpty, { children: isLoading ? null : emptyText }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   SearchableSelectList,
                   {
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
                     style: isVirtualized ? {
                       padding: 0,
                       flex: 1,
@@ -2202,7 +1996,7 @@ function SingleSearchableSelect(props) {
                       display: "flex",
                       flexDirection: "column"
                     } : void 0,
-                    children: isVirtualized ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    children: isVirtualized ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                       VirtualizedComboboxList,
                       {
                         open,
@@ -2214,10 +2008,10 @@ function SingleSearchableSelect(props) {
                         inputType,
                         renderItem
                       }
-                    ) : children ? children : groups ? ((group, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(React11.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ComboboxGroup, { items: group.items, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_combobox5.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    ) : children ? children : groups ? ((group, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(React13.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ComboboxGroup, { items: group.items, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_combobox5.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                           ComboboxItem_default,
                           {
                             value: item,
@@ -2230,9 +2024,9 @@ function SingleSearchableSelect(props) {
                           item.id
                         ) })
                       ] }),
-                      index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxSeparator, {})
-                    ] }, group.value)) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-                      includePlaceholderItem && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxSeparator, {})
+                    ] }, group.value)) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+                      includePlaceholderItem && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                         ComboboxItem_default,
                         {
                           value: makePlaceholderSentinel(placeholder),
@@ -2242,7 +2036,7 @@ function SingleSearchableSelect(props) {
                         },
                         "placeholder"
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_combobox5.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_combobox5.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                         ComboboxItem_default,
                         {
                           value: item,
@@ -2267,18 +2061,15 @@ function SingleSearchableSelect(props) {
 }
 
 // src/v3/MultiSearchableSelect.tsx
-var React12 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 var import_combobox6 = require("@base-ui/react/combobox");
 var import_react_virtual5 = require("@tanstack/react-virtual");
 var import_seeds_react_icon4 = __toESM(require("@sproutsocial/seeds-react-icon"));
-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;
-`;
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var SelectionText2 = ({
+  className,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: cn("seeds-select-selection-text", className), ...rest });
 function makeGroupHeaderSentinel2(groupName) {
   return { __groupHeader: true, groupName };
 }
@@ -2301,6 +2092,8 @@ function MultiSearchableSelect(props) {
     fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
   const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
@@ -2323,29 +2116,29 @@ function MultiSearchableSelect(props) {
   const defaultSelectedItemIds = props.defaultSelectedItemIds;
   const onSelectedItemIdsChange = props.onSelectedItemIdsChange;
   const { containerRef, portalContainer } = useSeedsPortalContainer();
-  const [open, setOpen] = React12.useState(false);
-  const [internalInputValue, setInternalInputValue] = React12.useState("");
-  const skipNextInputChangeRef = React12.useRef(false);
-  const virtualizerRef = React12.useRef(null);
+  const [open, setOpen] = React14.useState(false);
+  const [internalInputValue, setInternalInputValue] = React14.useState("");
+  const skipNextInputChangeRef = React14.useRef(false);
+  const virtualizerRef = React14.useRef(null);
   const isControlled = selectedItemIds !== void 0;
-  const idsToItems = React12.useCallback(
+  const idsToItems = React14.useCallback(
     (ids) => ids.map((id2) => data.find((d) => d.id === id2)).filter((d) => d != null),
     [data]
   );
-  const [internalValue, setInternalValue] = React12.useState(
+  const [internalValue, setInternalValue] = React14.useState(
     () => defaultSelectedItemIds ? idsToItems(defaultSelectedItemIds) : []
   );
   const value = isControlled ? idsToItems(selectedItemIds) : internalValue;
-  const visibleData = React12.useMemo(
+  const visibleData = React14.useMemo(
     () => removeSelectedItems ? data.filter((item) => !value.some((v) => v.id === item.id)) : data,
     [data, value, removeSelectedItems]
   );
-  const groups = React12.useMemo(
+  const groups = React14.useMemo(
     () => groupBy ? groupItems(visibleData, groupBy) : null,
     [visibleData, groupBy]
   );
   const currentInputValue = internalInputValue;
-  const creatableSentinel = React12.useMemo(() => {
+  const creatableSentinel = React14.useMemo(() => {
     if (!creatableProp) return null;
     const trimmed = currentInputValue.trim();
     if (!trimmed) return null;
@@ -2356,7 +2149,7 @@ function MultiSearchableSelect(props) {
     if (exactExists) return null;
     return makeCreatableSentinel(trimmed);
   }, [creatableProp, currentInputValue, data, itemToString]);
-  const flatItems = React12.useMemo(() => {
+  const flatItems = React14.useMemo(() => {
     if (!groups || !selectHeadings && !selectAll) return null;
     const rows = [];
     if (selectAll) rows.push(SELECT_ALL_SENTINEL2);
@@ -2436,8 +2229,8 @@ function MultiSearchableSelect(props) {
       const totalCount = data.length;
       const selectedCount = value.length;
       const state = selectedCount === 0 ? "none" : selectedCount === totalCount ? "all" : "partial";
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ComboboxSelectAllItem, { value: row, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxGroupHeaderCheckbox, { $state: state, id: "__selectAll" }),
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ComboboxSelectAllItem, { value: row, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ComboboxGroupHeaderCheckbox, { $state: state, id: "__selectAll" }),
         "Select all"
       ] }, "__selectAll");
     }
@@ -2448,8 +2241,8 @@ function MultiSearchableSelect(props) {
         (item2) => value.some((s) => s.id === item2.id)
       ).length;
       const state = selectedCount === 0 ? "none" : selectedCount === groupItemsList.length ? "all" : "partial";
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ComboboxGroupHeaderItem, { value: row, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ComboboxGroupHeaderItem, { value: row, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           ComboboxGroupHeaderCheckbox,
           {
             $state: state,
@@ -2463,7 +2256,7 @@ function MultiSearchableSelect(props) {
       return renderCreatableItem(row);
     }
     const item = row;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ComboboxItem_default,
       {
         value: item,
@@ -2477,15 +2270,15 @@ function MultiSearchableSelect(props) {
     );
   }
   function renderCreatableItem(sentinel, style, index, measureRef) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ComboboxItem_default,
       {
         value: sentinel,
         itemId: "__creatable",
         label: `Create "${sentinel.label}"`,
         inputType: "none",
-        renderItem: () => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_seeds_react_icon4.default, { name: "plus-outline", size: "mini" }),
+        renderItem: () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_seeds_react_icon4.default, { name: "plus-outline", size: "mini" }),
           `Create "${sentinel.label}"`
         ] }),
         style,
@@ -2500,9 +2293,9 @@ function MultiSearchableSelect(props) {
   const rootItems = creatableSentinel && Array.isArray(baseItems) ? [...baseItems, creatableSentinel] : baseItems;
   const hasSentinels = selectAll || selectHeadings;
   const rootValue = hasSentinels ? [...value] : value;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Field, { $fullWidth: fullWidth, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Field, { $fullWidth: fullWidth, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       import_combobox6.Combobox.Root,
       {
         multiple: true,
@@ -2563,7 +2356,7 @@ function MultiSearchableSelect(props) {
         },
         items: rootItems,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             SearchableSelectTokenTrigger,
             {
               id,
@@ -2578,33 +2371,35 @@ function MultiSearchableSelect(props) {
                   const text = visibleItems.map(
                     (item) => customRenderSelections ? customRenderSelections(item) : itemToString(item)
                   ).join(", ");
-                  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(SelectionText2, { children: [
+                  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SelectionText2, { children: [
                     text,
                     overflowCount > 0 ? `, +${overflowCount}` : ""
                   ] });
-                })() : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SearchableSelectPlaceholder, { children: placeholder }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SearchableSelectTriggerIcon, { style: { marginLeft: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronIcon, {}) }) })
+                })() : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SearchableSelectPlaceholder, { children: placeholder }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SearchableSelectTriggerIcon, { style: { marginLeft: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChevronIcon, {}) }) })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_combobox6.Combobox.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_combobox6.Combobox.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             SearchableSelectPopup,
             {
               "aria-busy": isLoading || void 0,
               style: { display: "flex", flexDirection: "column" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SearchableSelectSearchContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SearchableSelectSearchContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   SearchableSelectInput,
                   {
                     placeholder: searchPlaceholder,
                     autoFocus: true
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxStatus, { children: isLoading ? loadingText : null }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxEmpty, { children: isLoading ? null : emptyText }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ComboboxStatus, { children: isLoading ? loadingText : null }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ComboboxEmpty, { children: isLoading ? null : emptyText }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   SearchableSelectList,
                   {
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
                     style: isVirtualized ? {
                       padding: 0,
                       flex: 1,
@@ -2612,7 +2407,7 @@ function MultiSearchableSelect(props) {
                       display: "flex",
                       flexDirection: "column"
                     } : void 0,
-                    children: isVirtualized ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    children: isVirtualized ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                       VirtualizedComboboxList,
                       {
                         open,
@@ -2636,10 +2431,10 @@ function MultiSearchableSelect(props) {
                         return renderCreatableItem(group);
                       }
                       const g = group;
-                      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(React12.Fragment, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ComboboxGroup, { items: g.items, children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(g.value) : g.value }),
-                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_combobox6.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(React14.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ComboboxGroup, { items: g.items, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(g.value) : g.value }),
+                          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_combobox6.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                             ComboboxItem_default,
                             {
                               value: item,
@@ -2652,14 +2447,14 @@ function MultiSearchableSelect(props) {
                             item.id
                           ) })
                         ] }),
-                        index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxSeparator, {})
+                        index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ComboboxSeparator, {})
                       ] }, g.value);
                     }) : ((item) => {
                       if (isCreatableSentinel(item)) {
                         return renderCreatableItem(item);
                       }
                       const dataItem = item;
-                      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                         ComboboxItem_default,
                         {
                           value: dataItem,
@@ -2684,153 +2479,141 @@ function MultiSearchableSelect(props) {
 }
 
 // src/v3/ActionMenu.tsx
-var React13 = __toESM(require("react"));
+var React16 = __toESM(require("react"));
 var import_menu2 = require("@base-ui/react/menu");
 var import_seeds_react_radio3 = __toESM(require("@sproutsocial/seeds-react-radio"));
 var import_seeds_react_checkbox4 = __toESM(require("@sproutsocial/seeds-react-checkbox"));
 var import_seeds_react_icon5 = require("@sproutsocial/seeds-react-icon");
 
 // src/v3/ActionMenuStyles.tsx
+var React15 = __toESM(require("react"));
 var import_menu = require("@base-ui/react/menu");
-var import_styled_components8 = __toESM(require("styled-components"));
-var import_seeds_react_mixins3 = require("@sproutsocial/seeds-react-mixins");
-var ActionMenuTrigger = (0, import_styled_components8.default)(import_menu.Menu.Trigger)``;
-var ActionMenuPositioner = (0, import_styled_components8.default)(import_menu.Menu.Positioner)`
-  min-width: var(--anchor-width);
-  z-index: 7;
-`;
-var ActionMenuPopup = (0, import_styled_components8.default)(import_menu.Menu.Popup).attrs({
-  "data-base-ui-swipe-ignore": ""
-})`
-  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(--available-height, 400px), 400px);
-  overflow-y: auto;
-  padding: ${({ theme }) => theme.space[300]};
-
-  &[data-open] {
-    animation: action-menu-popup-in 120ms ease-out;
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var ActionMenuTrigger = import_menu.Menu.Trigger;
+var ActionMenuPositioner = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  import_menu.Menu.Positioner,
+  {
+    ref,
+    className: cn("seeds-action-menu-positioner", className),
+    ...rest
   }
-
-  &[data-closed] {
-    animation: action-menu-popup-out 100ms ease-in;
+));
+ActionMenuPositioner.displayName = "ActionMenuPositioner";
+var ActionMenuPopup = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  import_menu.Menu.Popup,
+  {
+    ref,
+    "data-base-ui-swipe-ignore": "",
+    className: cn("seeds-action-menu-popup", className),
+    ...rest
   }
-
-  @keyframes action-menu-popup-in {
-    from {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
+));
+ActionMenuPopup.displayName = "ActionMenuPopup";
+var ActionMenuGroup = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  import_menu.Menu.Group,
+  {
+    ref,
+    className: cn("seeds-action-menu-group", className),
+    ...rest
   }
-
-  @keyframes action-menu-popup-out {
-    from {
-      opacity: 1;
-      transform: scale(1);
-    }
-    to {
-      opacity: 0;
-      transform: scale(0.95);
-    }
+));
+ActionMenuGroup.displayName = "ActionMenuGroup";
+var ActionMenuGroupLabel = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  import_menu.Menu.GroupLabel,
+  {
+    ref,
+    className: cn("seeds-action-menu-group-label", className),
+    ...rest
   }
-`;
-var ActionMenuGroup = (0, import_styled_components8.default)(import_menu.Menu.Group)`
-  display: block;
-`;
-var ActionMenuGroupLabel = (0, import_styled_components8.default)(import_menu.Menu.GroupLabel)`
-  padding: ${({ theme }) => `${theme.space[300]}`};
-  font-size: ${({ theme }) => theme.typography[100].fontSize};
-  color: ${({ theme }) => theme.colors.text.body};
-`;
-var ActionMenuSeparator = (0, import_styled_components8.default)(import_menu.Menu.Separator)`
-  height: 1px;
-  margin: ${({ theme }) => `${theme.space[300]} -${theme.space[300]}`};
-  background: ${({ theme }) => theme.colors.container.border.base};
-`;
-var menuItemStyles = import_styled_components8.css`
-  box-sizing: border-box;
-  display: block;
-  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};
-  cursor: pointer;
-  user-select: none;
-
-  &[data-highlighted] {
-    border-color: ${({ theme }) => theme.colors.listItem.border.base};
-    background-color: ${({ theme }) => theme.colors.listItem.background.hover};
-    color: ${({ theme }) => theme.colors.text.body};
-    text-decoration: none;
+));
+ActionMenuGroupLabel.displayName = "ActionMenuGroupLabel";
+var ActionMenuSeparator = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  import_menu.Menu.Separator,
+  {
+    ref,
+    className: cn("seeds-action-menu-separator", className),
+    ...rest
   }
-
-  &[data-disabled] {
-    cursor: not-allowed;
-    opacity: 0.4;
-  }
-`;
-var StyledMenuItem = (0, import_styled_components8.default)(import_menu.Menu.Item)`
-  ${menuItemStyles}
-`;
-var StyledCheckboxItem = (0, import_styled_components8.default)(import_menu.Menu.CheckboxItem)`
-  ${menuItemStyles}
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.space[300]};
-`;
-var StyledRadioItem = (0, import_styled_components8.default)(import_menu.Menu.RadioItem)`
-  ${menuItemStyles}
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.space[300]};
-`;
-var StyledCheckboxItemIndicator = (0, import_styled_components8.default)(import_menu.Menu.CheckboxItemIndicator)`
-  display: flex;
-  align-items: center;
-  width: 16px;
-  color: ${({ theme }) => theme.colors.text.body};
-`;
-var StyledRadioItemIndicator = (0, import_styled_components8.default)(import_menu.Menu.RadioItemIndicator)`
-  display: flex;
-  align-items: center;
-  width: 16px;
-  color: ${({ theme }) => theme.colors.text.body};
-`;
-var StyledSubmenuTrigger = (0, import_styled_components8.default)(import_menu.Menu.SubmenuTrigger)`
-  ${menuItemStyles}
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.space[300]};
-  justify-content: space-between;
-
-  &[data-popup-open] {
-    border-color: ${({ theme }) => theme.colors.listItem.border.base};
-    background-color: ${({ theme }) => theme.colors.listItem.background.hover};
-  }
-`;
-var StyledLinkItem = (0, import_styled_components8.default)(import_menu.Menu.LinkItem)`
-  ${menuItemStyles}
-`;
+));
+ActionMenuSeparator.displayName = "ActionMenuSeparator";
+var StyledMenuItem = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  import_menu.Menu.Item,
+  {
+    ref,
+    className: cn("seeds-action-menu-item", className),
+    ...rest
+  }
+));
+StyledMenuItem.displayName = "StyledMenuItem";
+var StyledCheckboxItem = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  import_menu.Menu.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "seeds-action-menu-item",
+      "seeds-action-menu-item--flex",
+      className
+    ),
+    ...rest
+  }
+));
+StyledCheckboxItem.displayName = "StyledCheckboxItem";
+var StyledRadioItem = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  import_menu.Menu.RadioItem,
+  {
+    ref,
+    className: cn(
+      "seeds-action-menu-item",
+      "seeds-action-menu-item--flex",
+      className
+    ),
+    ...rest
+  }
+));
+StyledRadioItem.displayName = "StyledRadioItem";
+var StyledCheckboxItemIndicator = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  import_menu.Menu.CheckboxItemIndicator,
+  {
+    ref,
+    className: cn("seeds-action-menu-item-indicator", className),
+    ...rest
+  }
+));
+StyledCheckboxItemIndicator.displayName = "StyledCheckboxItemIndicator";
+var StyledRadioItemIndicator = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  import_menu.Menu.RadioItemIndicator,
+  {
+    ref,
+    className: cn("seeds-action-menu-item-indicator", className),
+    ...rest
+  }
+));
+StyledRadioItemIndicator.displayName = "StyledRadioItemIndicator";
+var StyledSubmenuTrigger = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  import_menu.Menu.SubmenuTrigger,
+  {
+    ref,
+    className: cn(
+      "seeds-action-menu-item",
+      "seeds-action-menu-submenu-trigger",
+      className
+    ),
+    ...rest
+  }
+));
+StyledSubmenuTrigger.displayName = "StyledSubmenuTrigger";
+var StyledLinkItem = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  import_menu.Menu.LinkItem,
+  {
+    ref,
+    className: cn("seeds-action-menu-item", className),
+    ...rest
+  }
+));
+StyledLinkItem.displayName = "StyledLinkItem";
 
 // src/v3/ActionMenu.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function ActionMenu({
   trigger,
   children,
@@ -2840,16 +2623,16 @@ function ActionMenu({
   disabled
 }) {
   const { containerRef, portalContainer } = useSeedsPortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     import_menu2.Menu.Root,
     {
       open,
       defaultOpen,
       onOpenChange,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuTrigger, { render: trigger, disabled }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_menu2.Menu.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuPositioner, { sideOffset: 8, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuPopup, { children }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActionMenuTrigger, { render: trigger, disabled }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_menu2.Menu.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActionMenuPositioner, { sideOffset: 8, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActionMenuPopup, { children }) }) })
       ]
     }
   );
@@ -2859,12 +2642,12 @@ function MenuGroup({
   label,
   showSeparator = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ActionMenuGroup, { children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuGroupLabel, { children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ActionMenuGroup, { children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActionMenuGroupLabel, { children: label }),
       children
     ] }),
-    showSeparator && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuSeparator, {})
+    showSeparator && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActionMenuSeparator, {})
   ] });
 }
 function MenuRadioGroup({
@@ -2873,7 +2656,7 @@ function MenuRadioGroup({
   defaultValue,
   onValueChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     import_menu2.Menu.RadioGroup,
     {
       value,
@@ -2884,7 +2667,7 @@ function MenuRadioGroup({
   );
 }
 function MenuItem(props) {
-  const generatedId = React13.useId();
+  const generatedId = React16.useId();
   if (props.type === "checkbox") {
     const {
       children: children2,
@@ -2896,7 +2679,7 @@ function MenuItem(props) {
       id
     } = props;
     const itemId = id ?? `checkbox-menu-item-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       StyledCheckboxItem,
       {
         checked,
@@ -2905,11 +2688,11 @@ function MenuItem(props) {
         disabled: disabled2,
         closeOnClick: closeOnClick2,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             StyledCheckboxItemIndicator,
             {
               keepMounted: true,
-              render: (_indicatorProps, state) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              render: (_indicatorProps, state) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 import_seeds_react_checkbox4.default,
                 {
                   checked: state.checked,
@@ -2929,18 +2712,18 @@ function MenuItem(props) {
   }
   if (props.type === "radio") {
     const { children: children2, value, disabled: disabled2, closeOnClick: closeOnClick2 = false } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       StyledRadioItem,
       {
         value,
         disabled: disabled2,
         closeOnClick: closeOnClick2,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             StyledRadioItemIndicator,
             {
               keepMounted: true,
-              render: (_indicatorProps, state) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              render: (_indicatorProps, state) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 import_seeds_react_radio3.default,
                 {
                   checked: state.checked,
@@ -2967,9 +2750,9 @@ function MenuItem(props) {
     target
   } = props;
   if (href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StyledLinkItem, { href, target, closeOnClick, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StyledLinkItem, { href, target, closeOnClick, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     StyledMenuItem,
     {
       onClick,
@@ -2988,7 +2771,7 @@ function MenuSub({
   closeParentOnEsc = false
 }) {
   const { containerRef, portalContainer } = useSeedsPortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     import_menu2.Menu.SubmenuRoot,
     {
       open,
@@ -2996,9 +2779,9 @@ function MenuSub({
       onOpenChange,
       closeParentOnEsc,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
         trigger,
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_menu2.Menu.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuPositioner, { sideOffset: getOffset, alignOffset: getOffset, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuPopup, { children }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_menu2.Menu.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActionMenuPositioner, { sideOffset: getOffset, alignOffset: getOffset, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActionMenuPopup, { children }) }) })
       ]
     }
   );
@@ -3012,7 +2795,7 @@ function MenuSubTrigger({
   label,
   openOnHover = true
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     StyledSubmenuTrigger,
     {
       disabled,
@@ -3020,47 +2803,53 @@ function MenuSubTrigger({
       openOnHover,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_seeds_react_icon5.Icon, { name: "chevron-right-outline", fixedWidth: true, "aria-hidden": true })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_seeds_react_icon5.Icon, { name: "chevron-right-outline", fixedWidth: true, "aria-hidden": true })
       ]
     }
   );
 }
 
 // src/v3/MenuButton.tsx
-var React14 = require("react");
+var React18 = require("react");
 var import_seeds_react_button2 = require("@sproutsocial/seeds-react-button");
 var import_seeds_react_icon6 = require("@sproutsocial/seeds-react-icon");
 
 // src/v3/MenuButtonStyles.tsx
-var import_styled_components9 = __toESM(require("styled-components"));
+var React17 = __toESM(require("react"));
 var import_seeds_react_button = require("@sproutsocial/seeds-react-button");
-var MenuButtonContainer = import_styled_components9.default.div`
-  display: inline-flex;
-  gap: 1px;
-`;
-var MainButton = (0, import_styled_components9.default)(import_seeds_react_button.Button)`
-  && {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-`;
-var TriggerButton = (0, import_styled_components9.default)(import_seeds_react_button.Button)`
-  && {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  .Icon-svg {
-    transition: transform ${({ theme }) => theme.duration.fast} ease;
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var MenuButtonContainer = React17.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("seeds-menu-button-container", className),
+    ...rest
   }
-
-  &[data-popup-open] .Icon-svg {
-    transform: rotate(180deg);
+));
+MenuButtonContainer.displayName = "MenuButtonContainer";
+var MainButton = React17.forwardRef(
+  ({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_seeds_react_button.Button,
+    {
+      ref,
+      className: cn("seeds-menu-button-main", className),
+      ...rest
+    }
+  )
+);
+MainButton.displayName = "MainButton";
+var TriggerButton = React17.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  import_seeds_react_button.Button,
+  {
+    ref,
+    className: cn("seeds-menu-button-trigger", className),
+    ...rest
   }
-`;
+));
+TriggerButton.displayName = "TriggerButton";
 
 // src/v3/MenuButton.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function MenuButton({
   actionMenu,
   appearance = "primary",
@@ -3070,8 +2859,8 @@ function MenuButton({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(MenuButtonContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(MenuButtonContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       MainButton,
       {
         appearance,
@@ -3081,18 +2870,18 @@ function MenuButton({
         children
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       ActionMenu,
       {
         disabled,
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           TriggerButton,
           {
             appearance,
             size,
             disabled,
             ariaLabel: menuButtonAriaLabel,
-            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_seeds_react_icon6.Icon, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_seeds_react_icon6.Icon, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true })
           }
         ),
         children: actionMenu