@sproutsocial/seeds-react-menu 1.16.16 → 1.18.0

package/dist/esm/v3/index.js

@@ -1,7 +1,6 @@
 // src/v3/SingleSelect.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import { Select as Select3 } from "@base-ui/react/select";
-import styled4 from "styled-components";
 
 // src/v3/SeedsPortal.tsx
 import * as React from "react";
@@ -24,49 +23,51 @@ function useSeedsPortalContainer() {
 }
 
 // src/v3/Common/SelectItem.tsx
-import "react";
+import * as React2 from "react";
 import { Select } from "@base-ui/react/select";
-import styled from "styled-components";
 import Radio from "@sproutsocial/seeds-react-radio";
 import Checkbox from "@sproutsocial/seeds-react-checkbox";
 import { Icon } from "@sproutsocial/seeds-react-icon";
-import { jsx, jsxs } from "react/jsx-runtime";
-var StyledItem = styled(Select.Item)`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 8px;
-  border-radius: ${({ theme }) => theme.radii[500]};
-  font-size: 14px;
-  color: ${({ theme }) => theme.colors.text.body};
-  cursor: default;
-  outline: none;
 
-  &[data-highlighted] {
-    background: ${({ theme }) => theme.colors.listItem.background.hover};
-  }
-
-  &[data-selected] {
-    font-weight: ${({ theme }) => theme.fontWeights.semibold};
+// 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-disabled] {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`;
-var StyledItemIndicator = styled(Select.ItemIndicator)`
-  display: flex;
-  align-items: center;
-  width: 16px;
-  color: ${({ theme }) => theme.colors.text.body};
-  visibility: hidden;
-
-  &[data-selected] {
-    visibility: visible;
-  }
-`;
-var StyledItemText = styled(Select.ItemText)``;
+// src/v3/Common/SelectItem.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledItem = React2.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  Select.Item,
+  {
+    ref,
+    className: cn("seeds-select-item", className),
+    ...rest
+  }
+));
+StyledItem.displayName = "StyledItem";
+var StyledItemIndicator = React2.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  Select.ItemIndicator,
+  {
+    ref,
+    className: cn("seeds-select-item-indicator", className),
+    ...rest
+  }
+));
+StyledItemIndicator.displayName = "StyledItemIndicator";
+var StyledItemText = Select.ItemText;
 function CheckIcon() {
   return /* @__PURE__ */ jsx(Icon, { name: "check-outline", fixedWidth: true, "aria-hidden": true });
 }
@@ -137,176 +138,153 @@ function groupItems(data, groupBy) {
 }
 
 // src/v3/Common/SelectStyles.tsx
+import * as React3 from "react";
 import { Select as Select2 } from "@base-ui/react/select";
-import styled3, { css } from "styled-components";
-import { focusRing } from "@sproutsocial/seeds-react-mixins";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Field = React3.forwardRef(
+  ({ $fullWidth, className, ...rest }, ref) => /* @__PURE__ */ jsx2(
+    "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__ */ jsx2(
+  Select2.Label,
+  {
+    ref,
+    className: cn("seeds-menu-label", className),
+    ...rest
+  }
+));
+SelectLabel.displayName = "SelectLabel";
+var SelectTrigger = React3.forwardRef(({ $isInvalid, className, ...rest }, ref) => /* @__PURE__ */ jsx2(
+  Select2.Trigger,
+  {
+    ref,
+    className: cn(
+      "seeds-select-trigger",
+      { "seeds-select-trigger--invalid": !!$isInvalid },
+      className
+    ),
+    ...rest
+  }
+));
+SelectTrigger.displayName = "SelectTrigger";
+var SelectValue = React3.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx2(
+  Select2.Value,
+  {
+    ref,
+    className: cn("seeds-select-value", className),
+    ...rest
+  }
+));
+SelectValue.displayName = "SelectValue";
+var SelectIcon = React3.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx2(
+  Select2.Icon,
+  {
+    ref,
+    className: cn("seeds-select-icon", className),
+    ...rest
+  }
+));
+SelectIcon.displayName = "SelectIcon";
+var SelectGroup = React3.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx2(
+  Select2.Group,
+  {
+    ref,
+    className: cn("seeds-select-group", className),
+    ...rest
+  }
+));
+SelectGroup.displayName = "SelectGroup";
+var SelectGroupLabel = React3.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx2(
+  Select2.GroupLabel,
+  {
+    ref,
+    className: cn("seeds-select-group-label", className),
+    ...rest
+  }
+));
+SelectGroupLabel.displayName = "SelectGroupLabel";
+var SelectSeparator = React3.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx2(
+  Select2.Separator,
+  {
+    ref,
+    className: cn("seeds-select-separator", className),
+    ...rest
+  }
+));
+SelectSeparator.displayName = "SelectSeparator";
+var SelectPositioner = React3.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx2(
+  Select2.Positioner,
+  {
+    ref,
+    className: cn("seeds-select-positioner", className),
+    ...rest
+  }
+));
+SelectPositioner.displayName = "SelectPositioner";
+var SelectPopup = React3.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx2(
+  Select2.Popup,
+  {
+    ref,
+    className: cn("seeds-select-popup", className),
+    ...rest
+  }
+));
+SelectPopup.displayName = "SelectPopup";
 
 // src/v3/Common/SelectIcons.tsx
-import "react";
-import styled2 from "styled-components";
+import * as React4 from "react";
 import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var StyledChevron = styled2.div`
-  display: flex;
-  align-items: center;
-  transition: transform 0.15s;
-  ${({ $isOpen }) => $isOpen && "transform: rotate(-180deg);"}
-`;
+import { jsx as jsx3 } from "react/jsx-runtime";
+var StyledChevron = React4.forwardRef(({ $isOpen, className, ...rest }, ref) => /* @__PURE__ */ jsx3(
+  "div",
+  {
+    ref,
+    className: cn(
+      "seeds-menu-chevron",
+      { "seeds-menu-chevron--open": !!$isOpen },
+      className
+    ),
+    ...rest
+  }
+));
+StyledChevron.displayName = "StyledChevron";
 function ChevronIcon() {
-  return /* @__PURE__ */ jsx2(Icon2, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true });
+  return /* @__PURE__ */ jsx3(Icon2, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true });
 }
 function ClearIcon() {
-  return /* @__PURE__ */ jsx2(Icon2, { name: "circle-x-outline", fixedWidth: true, "aria-hidden": true, size: "mini" });
+  return /* @__PURE__ */ jsx3(Icon2, { name: "circle-x-outline", fixedWidth: true, "aria-hidden": true, size: "mini" });
 }
 function CheckIcon2() {
-  return /* @__PURE__ */ jsx2(Icon2, { name: "check-outline", fixedWidth: true, "aria-hidden": true });
+  return /* @__PURE__ */ jsx3(Icon2, { name: "check-outline", fixedWidth: true, "aria-hidden": true });
 }
 
-// src/v3/Common/SelectStyles.tsx
-var invalidStyles = css`
-  border-color: ${({ theme }) => theme.colors.form.border.error};
-
-  ${StyledChevron} {
-    color: ${({ theme }) => theme.colors.icon.error};
-  }
-`;
-var Field = styled3.div`
-  display: ${({ $fullWidth }) => $fullWidth === false ? "inline-flex" : "flex"};
-  flex-direction: column;
-  gap: ${({ theme }) => theme.space[200]};
-  ${({ $fullWidth }) => $fullWidth !== false && "width: 100%;"}
-`;
-var SelectLabel = styled3(Select2.Label)`
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
-  font-weight: ${({ theme }) => theme.fontWeights.semibold};
-  color: ${({ theme }) => theme.colors.text.body};
-`;
-var SelectTrigger = styled3(Select2.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 {
-    ${focusRing}
-  }
-
-  &[data-popup-open] {
-    ${focusRing}
-  }
-
-  &[data-popup-open] [data-chevron] {
-    transform: rotate(-180deg);
-  }
-
-  &[data-disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  ${({ $isInvalid }) => $isInvalid && invalidStyles}
-`;
-var SelectValue = styled3(Select2.Value)`
-  min-width: 0;
-  overflow: hidden;
-`;
-var SelectIcon = styled3(Select2.Icon)`
-  display: flex;
-  align-items: center;
-  color: ${({ theme }) => theme.colors.icon.base};
-  flex-shrink: 0;
-`;
-var SelectGroup = styled3(Select2.Group)`
-  display: block;
-`;
-var SelectGroupLabel = styled3(Select2.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 = styled3(Select2.Separator)`
-  height: 1px;
-  margin: ${({ theme }) => `${theme.space[200]} ${theme.space[300]}`};
-  background: ${({ theme }) => theme.colors.container.border.base};
-`;
-var SelectPositioner = styled3(Select2.Positioner)`
-  width: var(--anchor-width);
-  z-index: 7;
-`;
-var SelectPopup = styled3(Select2.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;
-  }
-
-  &[data-closed] {
-    animation: select-popup-out 100ms ease-in;
-  }
-
-  @keyframes select-popup-in {
-    from {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  @keyframes select-popup-out {
-    from {
-      opacity: 1;
-      transform: scale(1);
-    }
-    to {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-  }
-`;
-
 // src/v3/SingleSelect.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var StyledValue = styled4(Select3.Value)`
-  flex: 1;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &[data-placeholder] {
-    color: ${({ theme }) => theme.colors.text.subtext};
-  }
-`;
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var StyledValue = React5.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx4(
+  Select3.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;
@@ -321,7 +299,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)
@@ -333,11 +311,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]
   );
@@ -355,7 +333,7 @@ function SingleSelect(props) {
     }
   }
   return /* @__PURE__ */ jsxs2(Field, { $fullWidth: fullWidth, children: [
-    /* @__PURE__ */ jsx3("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ jsx4("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ jsxs2(
       Select3.Root,
       {
@@ -373,51 +351,58 @@ function SingleSelect(props) {
               "aria-required": props.required || void 0,
               $isInvalid: isInvalid,
               children: [
-                /* @__PURE__ */ jsx3(StyledValue, { placeholder, children: renderSelection && selectedItem ? renderSelection(selectedItem) : void 0 }),
-                /* @__PURE__ */ jsx3(SelectIcon, { children: /* @__PURE__ */ jsx3(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ jsx3(ChevronIcon, {}) }) })
+                /* @__PURE__ */ jsx4(StyledValue, { placeholder, children: renderSelection && selectedItem ? renderSelection(selectedItem) : void 0 }),
+                /* @__PURE__ */ jsx4(SelectIcon, { children: /* @__PURE__ */ jsx4(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ jsx4(ChevronIcon, {}) }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx3(Select3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx3(SelectPositioner, { sideOffset: 8, alignItemWithTrigger: false, children: /* @__PURE__ */ jsxs2(SelectPopup, { children: [
-            /* @__PURE__ */ jsx3(Select3.ScrollUpArrow, {}),
-            /* @__PURE__ */ jsx3(Select3.List, { children: children ? children : groupBy ? groupItems(data, groupBy).map((group, index, arr) => /* @__PURE__ */ jsxs2(React4.Fragment, { children: [
-              /* @__PURE__ */ jsxs2(SelectGroup, { children: [
-                /* @__PURE__ */ jsx3(SelectGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
-                group.items.map((item) => /* @__PURE__ */ jsx3(
-                  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__ */ jsx3(SelectSeparator, {})
-            ] }, group.value)) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
-              includePlaceholderItem && /* @__PURE__ */ jsx3(
-                SelectItem,
-                {
-                  value: null,
-                  label: placeholder ?? ""
-                },
-                "placeholder"
-              ),
-              data.map((item) => /* @__PURE__ */ jsx3(
-                SelectItem,
-                {
-                  value: String(item.id),
-                  label: itemToString(item),
-                  disabled: item.disabled,
-                  inputType,
-                  renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
-                },
-                item.id
-              ))
-            ] }) }),
-            /* @__PURE__ */ jsx3(Select3.ScrollDownArrow, {})
+          /* @__PURE__ */ jsx4(Select3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx4(SelectPositioner, { sideOffset: 8, alignItemWithTrigger: false, children: /* @__PURE__ */ jsxs2(SelectPopup, { children: [
+            /* @__PURE__ */ jsx4(Select3.ScrollUpArrow, {}),
+            /* @__PURE__ */ jsx4(
+              Select3.List,
+              {
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledBy,
+                children: children ? children : groupBy ? groupItems(data, groupBy).map((group, index, arr) => /* @__PURE__ */ jsxs2(React5.Fragment, { children: [
+                  /* @__PURE__ */ jsxs2(SelectGroup, { children: [
+                    /* @__PURE__ */ jsx4(SelectGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                    group.items.map((item) => /* @__PURE__ */ jsx4(
+                      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__ */ jsx4(SelectSeparator, {})
+                ] }, group.value)) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+                  includePlaceholderItem && /* @__PURE__ */ jsx4(
+                    SelectItem,
+                    {
+                      value: null,
+                      label: placeholder ?? ""
+                    },
+                    "placeholder"
+                  ),
+                  data.map((item) => /* @__PURE__ */ jsx4(
+                    SelectItem,
+                    {
+                      value: String(item.id),
+                      label: itemToString(item),
+                      disabled: item.disabled,
+                      inputType,
+                      renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                    },
+                    item.id
+                  ))
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx4(Select3.ScrollDownArrow, {})
           ] }) }) })
         ]
       }
@@ -426,27 +411,19 @@ function SingleSelect(props) {
 }
 
 // src/v3/MultiSelect.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { Select as Select4 } from "@base-ui/react/select";
-import styled5 from "styled-components";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var SelectionText = styled5.span`
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-var Placeholder = styled5.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;
-`;
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var SelectionText = ({
+  className,
+  ...rest
+}) => /* @__PURE__ */ jsx5("span", { className: cn("seeds-select-selection-text", className), ...rest });
+var Placeholder = ({ className, ...rest }) => /* @__PURE__ */ jsx5("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;
@@ -465,18 +442,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]
   );
@@ -493,7 +470,7 @@ function MultiSelect(props) {
     }
   }
   return /* @__PURE__ */ jsxs3(Field, { $fullWidth: fullWidth, children: [
-    /* @__PURE__ */ jsx4("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ jsx5("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ jsxs3(
       Select4.Root,
       {
@@ -512,10 +489,10 @@ function MultiSelect(props) {
               "aria-required": props.required || void 0,
               $isInvalid: isInvalid,
               children: [
-                /* @__PURE__ */ jsx4(SelectValue, { children: () => {
+                /* @__PURE__ */ jsx5(SelectValue, { children: () => {
                   if (renderSelection) return renderSelection(selectedItems);
                   if (selectedItems.length === 0)
-                    return /* @__PURE__ */ jsx4(Placeholder, { children: placeholder });
+                    return /* @__PURE__ */ jsx5(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(
@@ -526,16 +503,35 @@ function MultiSelect(props) {
                     overflowCount > 0 ? `, +${overflowCount}` : ""
                   ] });
                 } }),
-                /* @__PURE__ */ jsx4(SelectIcon, { children: /* @__PURE__ */ jsx4(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ jsx4(ChevronIcon, {}) }) })
+                /* @__PURE__ */ jsx5(SelectIcon, { children: /* @__PURE__ */ jsx5(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ jsx5(ChevronIcon, {}) }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx4(Select4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx4(SelectPositioner, { sideOffset: 8, alignItemWithTrigger: false, children: /* @__PURE__ */ jsxs3(SelectPopup, { children: [
-            /* @__PURE__ */ jsx4(Select4.ScrollUpArrow, {}),
-            /* @__PURE__ */ jsx4(Select4.List, { children: children ? children : groupBy ? groupItems(data, groupBy).map((group, index, arr) => /* @__PURE__ */ jsxs3(React5.Fragment, { children: [
-              /* @__PURE__ */ jsxs3(SelectGroup, { children: [
-                /* @__PURE__ */ jsx4(SelectGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
-                group.items.map((item) => /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(Select4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx5(SelectPositioner, { sideOffset: 8, alignItemWithTrigger: false, children: /* @__PURE__ */ jsxs3(SelectPopup, { children: [
+            /* @__PURE__ */ jsx5(Select4.ScrollUpArrow, {}),
+            /* @__PURE__ */ jsx5(
+              Select4.List,
+              {
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledBy,
+                children: children ? children : groupBy ? groupItems(data, groupBy).map((group, index, arr) => /* @__PURE__ */ jsxs3(React6.Fragment, { children: [
+                  /* @__PURE__ */ jsxs3(SelectGroup, { children: [
+                    /* @__PURE__ */ jsx5(SelectGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                    group.items.map((item) => /* @__PURE__ */ jsx5(
+                      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__ */ jsx5(SelectSeparator, {})
+                ] }, group.value)) : data.map((item) => /* @__PURE__ */ jsx5(
                   SelectItem,
                   {
                     value: String(item.id),
@@ -543,25 +539,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__ */ jsx4(SelectSeparator, {})
-            ] }, group.value)) : data.map((item) => /* @__PURE__ */ jsx4(
-              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__ */ jsx4(Select4.ScrollDownArrow, {})
+              }
+            ),
+            /* @__PURE__ */ jsx5(Select4.ScrollDownArrow, {})
           ] }) }) })
         ]
       }
@@ -570,14 +554,14 @@ function MultiSelect(props) {
 }
 
 // src/v3/SingleCombobox.tsx
-import * as React9 from "react";
+import * as React11 from "react";
 import { Combobox as Combobox3 } from "@base-ui/react/combobox";
 import "@tanstack/react-virtual";
 
 // src/v3/Common/useSuppressEscapeClear.ts
-import * as React6 from "react";
+import * as React7 from "react";
 function useSuppressEscapeClear(open) {
-  return React6.useCallback(
+  return React7.useCallback(
     (event) => {
       if (event.key === "Escape" && !open) {
         event.stopPropagation();
@@ -588,309 +572,189 @@ function useSuppressEscapeClear(open) {
 }
 
 // src/v3/Common/ComboboxItem.tsx
-import * as React7 from "react";
+import * as React9 from "react";
 import Radio2 from "@sproutsocial/seeds-react-radio";
 import Checkbox3 from "@sproutsocial/seeds-react-checkbox";
 
 // src/v3/Common/ComboboxStyles.tsx
+import * as React8 from "react";
 import { Combobox } from "@base-ui/react/combobox";
-import styled6, { css as css2 } from "styled-components";
-import { focusRing as focusRing2 } from "@sproutsocial/seeds-react-mixins";
 import Checkbox2 from "@sproutsocial/seeds-react-checkbox";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var invalidStyles2 = css2`
-  border-color: ${({ theme }) => theme.colors.form.border.error};
-
-  ${StyledChevron} {
-    color: ${({ theme }) => theme.colors.icon.error};
-  }
-`;
-var ComboboxLabel = styled6.label`
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
-  font-weight: ${({ theme }) => theme.fontWeights.semibold};
-  color: ${({ theme }) => theme.colors.text.body};
-`;
-var ComboboxInputGroup = styled6(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 {
-    ${focusRing2}
-  }
-
-  &[data-disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  ${({ $isInvalid }) => $isInvalid && invalidStyles2}
-`;
-var ComboboxInput = styled6(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};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-var ComboboxTokenInput = styled6(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};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-var ComboboxActionButtons = styled6.div`
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  margin-left: auto;
-  gap: ${({ theme }) => theme.space[100]};
-`;
-var ComboboxClear = styled6(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};
-  }
-
-  &:focus-visible {
-    ${focusRing2}
-  }
-
-  &[data-empty] {
-    display: none;
-  }
-`;
-var ComboboxTrigger = styled6(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 = styled6(Combobox.Positioner)`
-  width: var(--anchor-width);
-  z-index: 7;
-`;
-var ComboboxPopup = styled6(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;
-  }
-
-  &[data-closed] {
-    animation: combobox-popup-out 100ms ease-in;
-  }
-
-  @keyframes combobox-popup-in {
-    from {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  @keyframes combobox-popup-out {
-    from {
-      opacity: 1;
-      transform: scale(1);
-    }
-    to {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-  }
-`;
-var ComboboxList = styled6(Combobox.List)`
-  padding: ${({ theme }) => theme.space[200]};
-
-  &:empty {
-    padding: 0;
-  }
-`;
-var ComboboxStatus = styled6(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 = styled6(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 = styled6(Combobox.Item)`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.space[300]};
-  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[300]}`};
-  border-radius: ${({ theme }) => theme.radii[500]};
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
-  color: ${({ theme }) => theme.colors.text.body};
-  cursor: default;
-  outline: none;
-
-  &[data-highlighted] {
-    background: ${({ theme }) => theme.colors.listItem.background.hover};
-  }
-
-  &[data-selected] {
-    font-weight: ${({ theme }) => theme.fontWeights.semibold};
-  }
-
-  &[data-disabled] {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`;
-var ComboboxItemIndicator = styled6(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 = styled6(Combobox.Group)`
-  display: block;
-`;
-var ComboboxGroupLabel = styled6(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 = styled6.div`
-  height: 1px;
-  margin: ${({ theme }) => `${theme.space[200]} ${theme.space[300]}`};
-  background: ${({ theme }) => theme.colors.container.border.base};
-`;
-var ComboboxGroupHeaderItem = styled6(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};
-  }
-
-  &[data-disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-`;
-var ComboboxSelectAllItem = styled6(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};
-  }
-`;
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ComboboxLabel = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6("label", { ref, className: cn("seeds-menu-label", className), ...rest }));
+ComboboxLabel.displayName = "ComboboxLabel";
+var ComboboxInputGroup = React8.forwardRef(({ $isInvalid, className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.InputGroup,
+  {
+    ref,
+    className: cn(
+      "seeds-combobox-input-group",
+      { "seeds-combobox-input-group--invalid": !!$isInvalid },
+      className
+    ),
+    ...rest
+  }
+));
+ComboboxInputGroup.displayName = "ComboboxInputGroup";
+var ComboboxInput = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.Input,
+  {
+    ref,
+    className: cn("seeds-combobox-input", className),
+    ...rest
+  }
+));
+ComboboxInput.displayName = "ComboboxInput";
+var ComboboxTokenInput = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.Input,
+  {
+    ref,
+    className: cn("seeds-combobox-token-input", className),
+    ...rest
+  }
+));
+ComboboxTokenInput.displayName = "ComboboxTokenInput";
+var ComboboxActionButtons = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  "div",
+  {
+    ref,
+    className: cn("seeds-combobox-action-buttons", className),
+    ...rest
+  }
+));
+ComboboxActionButtons.displayName = "ComboboxActionButtons";
+var ComboboxClear = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.Clear,
+  {
+    ref,
+    tabIndex: 0,
+    className: cn("seeds-combobox-clear", className),
+    ...rest
+  }
+));
+ComboboxClear.displayName = "ComboboxClear";
+var ComboboxTrigger = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.Trigger,
+  {
+    ref,
+    className: cn("seeds-combobox-trigger", className),
+    ...rest
+  }
+));
+ComboboxTrigger.displayName = "ComboboxTrigger";
+var ComboboxPositioner = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.Positioner,
+  {
+    ref,
+    className: cn("seeds-combobox-positioner", className),
+    ...rest
+  }
+));
+ComboboxPositioner.displayName = "ComboboxPositioner";
+var ComboboxPopup = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.Popup,
+  {
+    ref,
+    className: cn("seeds-combobox-popup", className),
+    ...rest
+  }
+));
+ComboboxPopup.displayName = "ComboboxPopup";
+var ComboboxList = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.List,
+  {
+    ref,
+    className: cn("seeds-combobox-list", className),
+    ...rest
+  }
+));
+ComboboxList.displayName = "ComboboxList";
+var ComboboxStatus = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.Status,
+  {
+    ref,
+    className: cn("seeds-combobox-status", className),
+    ...rest
+  }
+));
+ComboboxStatus.displayName = "ComboboxStatus";
+var ComboboxEmpty = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.Empty,
+  {
+    ref,
+    className: cn("seeds-combobox-empty", className),
+    ...rest
+  }
+));
+ComboboxEmpty.displayName = "ComboboxEmpty";
+var ComboboxItem = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.Item,
+  {
+    ref,
+    className: cn("seeds-combobox-item", className),
+    ...rest
+  }
+));
+ComboboxItem.displayName = "ComboboxItem";
+var ComboboxItemIndicator = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.ItemIndicator,
+  {
+    ref,
+    className: cn("seeds-combobox-item-indicator", className),
+    ...rest
+  }
+));
+ComboboxItemIndicator.displayName = "ComboboxItemIndicator";
+var ComboboxGroup = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.Group,
+  {
+    ref,
+    className: cn("seeds-combobox-group", className),
+    ...rest
+  }
+));
+ComboboxGroup.displayName = "ComboboxGroup";
+var ComboboxGroupLabel = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.GroupLabel,
+  {
+    ref,
+    className: cn("seeds-combobox-group-label", className),
+    ...rest
+  }
+));
+ComboboxGroupLabel.displayName = "ComboboxGroupLabel";
+var ComboboxSeparator = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  "div",
+  {
+    ref,
+    className: cn("seeds-combobox-separator", className),
+    ...rest
+  }
+));
+ComboboxSeparator.displayName = "ComboboxSeparator";
+var ComboboxGroupHeaderItem = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.Item,
+  {
+    ref,
+    className: cn("seeds-combobox-group-header-item", className),
+    ...rest
+  }
+));
+ComboboxGroupHeaderItem.displayName = "ComboboxGroupHeaderItem";
+var ComboboxSelectAllItem = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.Item,
+  {
+    ref,
+    className: cn("seeds-combobox-select-all-item", className),
+    ...rest
+  }
+));
+ComboboxSelectAllItem.displayName = "ComboboxSelectAllItem";
 function ComboboxGroupHeaderCheckbox({
   $state,
   id
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     Checkbox2,
     {
       id,
@@ -902,196 +766,114 @@ function ComboboxGroupHeaderCheckbox({
     }
   );
 }
-var ComboboxToken = styled6(Combobox.Chips)`
-  display: flex;
-  width: 100%;
-  flex-wrap: wrap;
-  gap: ${({ theme }) => theme.space[200]};
-`;
-var ComboboxTokenInputGroup = styled6(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 {
-    ${focusRing2}
-  }
-
-  &[data-disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  ${({ $isInvalid }) => $isInvalid && invalidStyles2}
-`;
-var Token = styled6.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 = styled6.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-
-  &:focus-visible {
-    ${focusRing2}
-  }
-`;
-var SearchableSelectTrigger = styled6(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 {
-    ${focusRing2}
-  }
-
-  &[data-popup-open] [data-chevron] {
-    transform: rotate(-180deg);
-  }
-
-  &[data-disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  ${({ $isInvalid }) => $isInvalid && invalidStyles2}
-`;
-var SearchableSelectTriggerIcon = styled6(Combobox.Icon)`
-  display: flex;
-  align-items: center;
-  color: ${({ theme }) => theme.colors.icon.base};
-  flex-shrink: 0;
-`;
-var SearchableSelectPlaceholder = styled6.span`
-  color: ${({ theme }) => theme.colors.text.subtext};
-  padding: ${({ theme }) => theme.space[200]} 0;
-`;
+var ComboboxToken = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.Chips,
+  {
+    ref,
+    className: cn("seeds-combobox-tokens", className),
+    ...rest
+  }
+));
+ComboboxToken.displayName = "ComboboxToken";
+var ComboboxTokenInputGroup = React8.forwardRef(({ $isInvalid, className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.InputGroup,
+  {
+    ref,
+    className: cn(
+      "seeds-combobox-token-input-group",
+      { "seeds-combobox-token-input-group--invalid": !!$isInvalid },
+      className
+    ),
+    ...rest
+  }
+));
+ComboboxTokenInputGroup.displayName = "ComboboxTokenInputGroup";
+var Token = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6("span", { ref, className: cn("seeds-combobox-token", className), ...rest }));
+Token.displayName = "Token";
+var TokenRemove = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  "button",
+  {
+    ref,
+    className: cn("seeds-combobox-token-remove", className),
+    ...rest
+  }
+));
+TokenRemove.displayName = "TokenRemove";
+var SearchableSelectTrigger = React8.forwardRef(({ $isInvalid, className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.Trigger,
+  {
+    ref,
+    className: cn(
+      "seeds-searchable-select-trigger",
+      { "seeds-searchable-select-trigger--invalid": !!$isInvalid },
+      className
+    ),
+    ...rest
+  }
+));
+SearchableSelectTrigger.displayName = "SearchableSelectTrigger";
+var SearchableSelectTriggerIcon = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.Icon,
+  {
+    ref,
+    className: cn("seeds-searchable-select-trigger-icon", className),
+    ...rest
+  }
+));
+SearchableSelectTriggerIcon.displayName = "SearchableSelectTriggerIcon";
+var SearchableSelectPlaceholder = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  "span",
+  {
+    ref,
+    className: cn("seeds-searchable-select-placeholder", className),
+    ...rest
+  }
+));
+SearchableSelectPlaceholder.displayName = "SearchableSelectPlaceholder";
 var SearchableSelectPopup = ComboboxPopup;
-var SearchableSelectSearchContainer = styled6.div`
-  padding: ${({ theme }) => theme.space[300]};
-  border-bottom: 1px solid ${({ theme }) => theme.colors.container.border.base};
-  flex-shrink: 0;
-`;
-var SearchableSelectInput = styled6(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 {
-    ${focusRing2}
-  }
-
-  &::placeholder {
-    color: ${({ theme }) => theme.colors.text.subtext};
-  }
-`;
-var SearchableSelectList = styled6(Combobox.List)`
-  overflow-y: auto;
-  padding: ${({ theme }) => theme.space[200]};
-  flex: 1;
-  min-height: 0;
-  &:empty {
-    padding: 0;
-  }
-`;
-var SearchableSelectTokenTrigger = styled6(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 {
-    ${focusRing2}
-  }
-
-  &[data-popup-open] {
-    border-color: ${({ theme }) => theme.colors.blue[600]};
-  }
-
-  &[data-popup-open] [data-chevron] {
-    transform: rotate(-180deg);
-  }
-
-  &[data-disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
+var SearchableSelectSearchContainer = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  "div",
+  {
+    ref,
+    className: cn("seeds-searchable-select-search-container", className),
+    ...rest
+  }
+));
+SearchableSelectSearchContainer.displayName = "SearchableSelectSearchContainer";
+var SearchableSelectInput = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.Input,
+  {
+    ref,
+    className: cn("seeds-searchable-select-input", className),
+    ...rest
+  }
+));
+SearchableSelectInput.displayName = "SearchableSelectInput";
+var SearchableSelectList = React8.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  Combobox.List,
+  {
+    ref,
+    className: cn("seeds-searchable-select-list", className),
+    ...rest
+  }
+));
+SearchableSelectList.displayName = "SearchableSelectList";
+var SearchableSelectTokenTrigger = React8.forwardRef(({ $isInvalid, className, ...rest }, ref) => /* @__PURE__ */ jsx6(
+  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
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function ComboboxItemInner({
   value,
   itemId,
@@ -1114,11 +896,11 @@ function ComboboxItemInner({
       disabled,
       "data-qa-menu-item": label,
       children: [
-        inputType === "radio" ? /* @__PURE__ */ jsx6(
+        inputType === "radio" ? /* @__PURE__ */ jsx7(
           ComboboxItemIndicator,
           {
             keepMounted: true,
-            render: (_props, state) => /* @__PURE__ */ jsx6(
+            render: (_props, state) => /* @__PURE__ */ jsx7(
               Radio2,
               {
                 checked: state.selected,
@@ -1130,11 +912,11 @@ function ComboboxItemInner({
               }
             )
           }
-        ) : inputType === "checkbox" ? /* @__PURE__ */ jsx6(
+        ) : inputType === "checkbox" ? /* @__PURE__ */ jsx7(
           ComboboxItemIndicator,
           {
             keepMounted: true,
-            render: (_props, state) => /* @__PURE__ */ jsx6(
+            render: (_props, state) => /* @__PURE__ */ jsx7(
               Checkbox3,
               {
                 checked: state.selected,
@@ -1146,17 +928,17 @@ function ComboboxItemInner({
               }
             )
           }
-        ) : inputType === "icon" ? /* @__PURE__ */ jsx6(ComboboxItemIndicator, { keepMounted: true, children: /* @__PURE__ */ jsx6(CheckIcon2, {}) }) : null,
-        /* @__PURE__ */ jsx6("span", { children: renderItem ? renderItem() : label })
+        ) : inputType === "icon" ? /* @__PURE__ */ jsx7(ComboboxItemIndicator, { keepMounted: true, children: /* @__PURE__ */ jsx7(CheckIcon2, {}) }) : null,
+        /* @__PURE__ */ jsx7("span", { children: renderItem ? renderItem() : label })
       ]
     }
   );
 }
-var ComboboxItem2 = React7.forwardRef(ComboboxItemInner);
+var ComboboxItem2 = React9.forwardRef(ComboboxItemInner);
 var ComboboxItem_default = ComboboxItem2;
 
 // src/v3/Common/VirtualizedComboboxList.tsx
-import * as React8 from "react";
+import * as React10 from "react";
 import { Combobox as Combobox2 } from "@base-ui/react/combobox";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
@@ -1175,7 +957,7 @@ function isCreatableSentinel(v) {
 }
 
 // src/v3/Common/VirtualizedComboboxList.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var ITEM_HEIGHT = 32;
 function isGroupHeaderSentinel(v) {
   return typeof v === "object" && v !== null && "__groupHeader" in v;
@@ -1197,7 +979,7 @@ function VirtualizedComboboxList({
   renderCreatableItem
 }) {
   const filteredItems = Combobox2.useFilteredItems();
-  const scrollElementRef = React8.useRef(null);
+  const scrollElementRef = React10.useRef(null);
   const virtualizer = useVirtualizer({
     enabled: open,
     count: filteredItems.length,
@@ -1209,8 +991,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());
@@ -1220,7 +1002,7 @@ function VirtualizedComboboxList({
   if (!filteredItems.length) return null;
   const selectedArray = Array.isArray(value) ? value : value != null ? [value] : [];
   const totalSize = virtualizer.getTotalSize();
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       role: "presentation",
@@ -1231,7 +1013,7 @@ function VirtualizedComboboxList({
         overflowY: "auto",
         overscrollBehavior: "contain"
       },
-      children: /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsx8(
         "div",
         {
           role: "presentation",
@@ -1248,7 +1030,7 @@ function VirtualizedComboboxList({
               boxSizing: "border-box"
             };
             if (isPlaceholderSentinel(row)) {
-              return /* @__PURE__ */ jsx7(
+              return /* @__PURE__ */ jsx8(
                 ComboboxItem_default,
                 {
                   index: virtualItem.index,
@@ -1276,7 +1058,7 @@ function VirtualizedComboboxList({
                   style: baseStyle,
                   ref: virtualizer.measureElement,
                   children: [
-                    /* @__PURE__ */ jsx7(ComboboxGroupHeaderCheckbox, { $state: state, id: "__selectAll" }),
+                    /* @__PURE__ */ jsx8(ComboboxGroupHeaderCheckbox, { $state: state, id: "__selectAll" }),
                     "Select all"
                   ]
                 },
@@ -1300,7 +1082,7 @@ function VirtualizedComboboxList({
                   style: baseStyle,
                   ref: virtualizer.measureElement,
                   children: [
-                    /* @__PURE__ */ jsx7(
+                    /* @__PURE__ */ jsx8(
                       ComboboxGroupHeaderCheckbox,
                       {
                         $state: state,
@@ -1325,7 +1107,7 @@ function VirtualizedComboboxList({
               return null;
             }
             const item = row;
-            return /* @__PURE__ */ jsx7(
+            return /* @__PURE__ */ jsx8(
               ComboboxItem_default,
               {
                 index: virtualItem.index,
@@ -1349,7 +1131,7 @@ function VirtualizedComboboxList({
 }
 
 // src/v3/SingleCombobox.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function SingleCombobox(props) {
   const {
     id,
@@ -1359,6 +1141,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;
@@ -1373,18 +1157,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;
@@ -1396,12 +1180,12 @@ 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__ */ jsxs6(Field, { $fullWidth: fullWidth, children: [
-    /* @__PURE__ */ jsx8("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ jsx9("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ jsxs6(
       Combobox3.Root,
       {
@@ -1436,7 +1220,7 @@ function SingleCombobox(props) {
               $isInvalid: isInvalid,
               onKeyDownCapture: onInputKeyDownCapture,
               children: [
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9(
                   ComboboxInput,
                   {
                     placeholder,
@@ -1447,21 +1231,23 @@ function SingleCombobox(props) {
                   }
                 ),
                 /* @__PURE__ */ jsxs6(ComboboxActionButtons, { children: [
-                  /* @__PURE__ */ jsx8(ComboboxClear, { "aria-label": "Clear selection", children: /* @__PURE__ */ jsx8(ClearIcon, {}) }),
-                  /* @__PURE__ */ jsx8(ComboboxTrigger, { "aria-label": "Open popup", children: /* @__PURE__ */ jsx8(StyledChevron, { $isOpen: open, children: /* @__PURE__ */ jsx8(ChevronIcon, {}) }) })
+                  /* @__PURE__ */ jsx9(ComboboxClear, { "aria-label": "Clear selection", children: /* @__PURE__ */ jsx9(ClearIcon, {}) }),
+                  /* @__PURE__ */ jsx9(ComboboxTrigger, { "aria-label": "Open popup", children: /* @__PURE__ */ jsx9(StyledChevron, { $isOpen: open, children: /* @__PURE__ */ jsx9(ChevronIcon, {}) }) })
                 ] })
               ]
             }
           ),
-          /* @__PURE__ */ jsx8(Combobox3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx8(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ jsxs6(
+          /* @__PURE__ */ jsx9(Combobox3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx9(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ jsxs6(
             ComboboxPopup,
             {
               style: isVirtualized ? { display: "flex", flexDirection: "column" } : void 0,
               children: [
-                /* @__PURE__ */ jsx8(ComboboxEmpty, { children: emptyText }),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9(ComboboxEmpty, { children: emptyText }),
+                /* @__PURE__ */ jsx9(
                   ComboboxList,
                   {
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
                     style: isVirtualized ? {
                       padding: 0,
                       flex: 1,
@@ -1469,7 +1255,7 @@ function SingleCombobox(props) {
                       display: "flex",
                       flexDirection: "column"
                     } : void 0,
-                    children: isVirtualized ? /* @__PURE__ */ jsx8(
+                    children: isVirtualized ? /* @__PURE__ */ jsx9(
                       VirtualizedComboboxList,
                       {
                         open,
@@ -1482,10 +1268,10 @@ function SingleCombobox(props) {
                         renderItem,
                         renderGroupHeading
                       }
-                    ) : children ? children : groups ? ((group, index) => /* @__PURE__ */ jsxs6(React9.Fragment, { children: [
+                    ) : children ? children : groups ? ((group, index) => /* @__PURE__ */ jsxs6(React11.Fragment, { children: [
                       /* @__PURE__ */ jsxs6(ComboboxGroup, { items: group.items, children: [
-                        /* @__PURE__ */ jsx8(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
-                        /* @__PURE__ */ jsx8(Combobox3.Collection, { children: (item) => /* @__PURE__ */ jsx8(
+                        /* @__PURE__ */ jsx9(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                        /* @__PURE__ */ jsx9(Combobox3.Collection, { children: (item) => /* @__PURE__ */ jsx9(
                           ComboboxItem_default,
                           {
                             value: item,
@@ -1498,8 +1284,8 @@ function SingleCombobox(props) {
                           item.id
                         ) })
                       ] }),
-                      index < groups.length - 1 && /* @__PURE__ */ jsx8(ComboboxSeparator, {})
-                    ] }, group.value)) : ((item) => /* @__PURE__ */ jsx8(
+                      index < groups.length - 1 && /* @__PURE__ */ jsx9(ComboboxSeparator, {})
+                    ] }, group.value)) : ((item) => /* @__PURE__ */ jsx9(
                       ComboboxItem_default,
                       {
                         value: item,
@@ -1523,11 +1309,11 @@ function SingleCombobox(props) {
 }
 
 // src/v3/MultiCombobox.tsx
-import * as React10 from "react";
+import * as React12 from "react";
 import { Combobox as Combobox4 } from "@base-ui/react/combobox";
 import "@tanstack/react-virtual";
 import Icon3 from "@sproutsocial/seeds-react-icon";
-import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function makeGroupHeaderSentinel(groupName) {
   return { __groupHeader: true, groupName };
 }
@@ -1551,6 +1337,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;
@@ -1576,31 +1364,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;
@@ -1611,7 +1399,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 = [];
@@ -1706,7 +1494,7 @@ function MultiCombobox(props) {
       const selectedCount = value.length;
       const state = selectedCount === 0 ? "none" : selectedCount === totalCount ? "all" : "partial";
       return /* @__PURE__ */ jsxs7(ComboboxSelectAllItem, { value: row, children: [
-        /* @__PURE__ */ jsx9(ComboboxGroupHeaderCheckbox, { $state: state, id: "__selectAll" }),
+        /* @__PURE__ */ jsx10(ComboboxGroupHeaderCheckbox, { $state: state, id: "__selectAll" }),
         selectAllLabel
       ] }, "__selectAll");
     }
@@ -1723,7 +1511,7 @@ function MultiCombobox(props) {
           value: row,
           disabled: isGroupHeaderDisabled?.(row.groupName),
           children: [
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               ComboboxGroupHeaderCheckbox,
               {
                 $state: state,
@@ -1740,7 +1528,7 @@ function MultiCombobox(props) {
       return renderCreatableItem(row);
     }
     const item = row;
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx10(
       ComboboxItem_default,
       {
         value: item,
@@ -1754,7 +1542,7 @@ function MultiCombobox(props) {
     );
   }
   function renderCreatableItem(sentinel, style, index, measureRef) {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx10(
       ComboboxItem_default,
       {
         value: sentinel,
@@ -1762,7 +1550,7 @@ function MultiCombobox(props) {
         label: `Create "${sentinel.label}"`,
         inputType: "none",
         renderItem: () => /* @__PURE__ */ jsxs7(Fragment6, { children: [
-          /* @__PURE__ */ jsx9(Icon3, { name: "plus-outline", size: "mini" }),
+          /* @__PURE__ */ jsx10(Icon3, { name: "plus-outline", size: "mini" }),
           `Create "${sentinel.label}"`
         ] }),
         style,
@@ -1778,7 +1566,7 @@ function MultiCombobox(props) {
   const hasSentinels = selectAll || selectHeadings;
   const rootValue = hasSentinels ? [...value] : value;
   return /* @__PURE__ */ jsxs7(Field, { $fullWidth: fullWidth, children: [
-    /* @__PURE__ */ jsx9("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ jsx10("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ jsxs7(
       Combobox4.Root,
       {
@@ -1854,7 +1642,7 @@ function MultiCombobox(props) {
         },
         items: rootItems,
         children: [
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             ComboboxTokenInputGroup,
             {
               $isInvalid: isInvalid,
@@ -1866,13 +1654,13 @@ function MultiCombobox(props) {
                   return /* @__PURE__ */ jsxs7(Fragment6, { children: [
                     visibleTokens.map((item) => /* @__PURE__ */ jsxs7(Token, { children: [
                       renderToken ? renderToken(item) : itemToString(item),
-                      /* @__PURE__ */ jsx9(
+                      /* @__PURE__ */ jsx10(
                         TokenRemove,
                         {
                           "aria-label": `Remove ${itemToString(item)}`,
                           onPointerDown: (e) => e.preventDefault(),
                           onClick: (e) => removeItem(item, e),
-                          children: /* @__PURE__ */ jsx9(Icon3, { name: "x-outline", size: "mini" })
+                          children: /* @__PURE__ */ jsx10(Icon3, { name: "x-outline", size: "mini" })
                         }
                       )
                     ] }, item.id)),
@@ -1882,7 +1670,7 @@ function MultiCombobox(props) {
                     ] }, "__overflow")
                   ] });
                 })(),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   ComboboxTokenInput,
                   {
                     ref: inputRef,
@@ -1894,23 +1682,25 @@ function MultiCombobox(props) {
                   }
                 ),
                 /* @__PURE__ */ jsxs7(ComboboxActionButtons, { children: [
-                  /* @__PURE__ */ jsx9(ComboboxClear, { "aria-label": "Clear all", children: /* @__PURE__ */ jsx9(ClearIcon, {}) }),
-                  /* @__PURE__ */ jsx9(ComboboxTrigger, { "aria-label": "Open popup", children: /* @__PURE__ */ jsx9(StyledChevron, { $isOpen: open, children: /* @__PURE__ */ jsx9(ChevronIcon, {}) }) })
+                  /* @__PURE__ */ jsx10(ComboboxClear, { "aria-label": "Clear all", children: /* @__PURE__ */ jsx10(ClearIcon, {}) }),
+                  /* @__PURE__ */ jsx10(ComboboxTrigger, { "aria-label": "Open popup", children: /* @__PURE__ */ jsx10(StyledChevron, { $isOpen: open, children: /* @__PURE__ */ jsx10(ChevronIcon, {}) }) })
                 ] })
               ] })
             }
           ),
-          /* @__PURE__ */ jsx9(Combobox4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx9(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ jsxs7(
+          /* @__PURE__ */ jsx10(Combobox4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx10(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ jsxs7(
             ComboboxPopup,
             {
               "aria-busy": isLoading || void 0,
               style: isVirtualized ? { display: "flex", flexDirection: "column" } : void 0,
               children: [
-                /* @__PURE__ */ jsx9(ComboboxStatus, { children: isLoading ? loadingText : null }),
-                /* @__PURE__ */ jsx9(ComboboxEmpty, { children: isLoading ? null : emptyText }),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(ComboboxStatus, { children: isLoading ? loadingText : null }),
+                /* @__PURE__ */ jsx10(ComboboxEmpty, { children: isLoading ? null : emptyText }),
+                /* @__PURE__ */ jsx10(
                   ComboboxList,
                   {
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
                     style: isVirtualized ? {
                       padding: 0,
                       flex: 1,
@@ -1918,7 +1708,7 @@ function MultiCombobox(props) {
                       display: "flex",
                       flexDirection: "column"
                     } : void 0,
-                    children: isVirtualized ? /* @__PURE__ */ jsx9(
+                    children: isVirtualized ? /* @__PURE__ */ jsx10(
                       VirtualizedComboboxList,
                       {
                         open,
@@ -1943,10 +1733,10 @@ function MultiCombobox(props) {
                         return renderCreatableItem(group);
                       }
                       const g = group;
-                      return /* @__PURE__ */ jsxs7(React10.Fragment, { children: [
+                      return /* @__PURE__ */ jsxs7(React12.Fragment, { children: [
                         /* @__PURE__ */ jsxs7(ComboboxGroup, { items: g.items, children: [
-                          /* @__PURE__ */ jsx9(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(g.value) : g.value }),
-                          /* @__PURE__ */ jsx9(Combobox4.Collection, { children: (item) => /* @__PURE__ */ jsx9(
+                          /* @__PURE__ */ jsx10(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(g.value) : g.value }),
+                          /* @__PURE__ */ jsx10(Combobox4.Collection, { children: (item) => /* @__PURE__ */ jsx10(
                             ComboboxItem_default,
                             {
                               value: item,
@@ -1959,14 +1749,14 @@ function MultiCombobox(props) {
                             item.id
                           ) })
                         ] }),
-                        index < groups.length - 1 && /* @__PURE__ */ jsx9(ComboboxSeparator, {})
+                        index < groups.length - 1 && /* @__PURE__ */ jsx10(ComboboxSeparator, {})
                       ] }, g.value);
                     }) : ((item) => {
                       if (isCreatableSentinel(item)) {
                         return renderCreatableItem(item);
                       }
                       const dataItem = item;
-                      return /* @__PURE__ */ jsx9(
+                      return /* @__PURE__ */ jsx10(
                         ComboboxItem_default,
                         {
                           value: dataItem,
@@ -1991,10 +1781,10 @@ function MultiCombobox(props) {
 }
 
 // src/v3/SingleSearchableSelect.tsx
-import * as React11 from "react";
+import * as React13 from "react";
 import { Combobox as Combobox5 } from "@base-ui/react/combobox";
 import "@tanstack/react-virtual";
-import { Fragment as Fragment8, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function SingleSearchableSelect(props) {
   const {
     id,
@@ -2008,6 +1798,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;
@@ -2023,17 +1815,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;
@@ -2044,12 +1836,12 @@ 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__ */ jsxs8(Field, { $fullWidth: fullWidth, children: [
-    /* @__PURE__ */ jsx10("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ jsx11("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ jsxs8(
       Combobox5.Root,
       {
@@ -2092,29 +1884,31 @@ function SingleSearchableSelect(props) {
               "aria-required": props.required || void 0,
               $isInvalid: isInvalid,
               children: [
-                /* @__PURE__ */ jsx10(SearchableSelectPlaceholder, { children: /* @__PURE__ */ jsx10(Combobox5.Value, { placeholder, children: value ? renderSelection ? renderSelection(value) : itemToString(value) : placeholder }) }),
-                /* @__PURE__ */ jsx10(SearchableSelectTriggerIcon, { children: /* @__PURE__ */ jsx10(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ jsx10(ChevronIcon, {}) }) })
+                /* @__PURE__ */ jsx11(SearchableSelectPlaceholder, { children: /* @__PURE__ */ jsx11(Combobox5.Value, { placeholder, children: value ? renderSelection ? renderSelection(value) : itemToString(value) : placeholder }) }),
+                /* @__PURE__ */ jsx11(SearchableSelectTriggerIcon, { children: /* @__PURE__ */ jsx11(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ jsx11(ChevronIcon, {}) }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx10(Combobox5.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx10(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ jsxs8(
+          /* @__PURE__ */ jsx11(Combobox5.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx11(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ jsxs8(
             SearchableSelectPopup,
             {
               "aria-busy": isLoading || void 0,
               style: { display: "flex", flexDirection: "column" },
               children: [
-                /* @__PURE__ */ jsx10(SearchableSelectSearchContainer, { children: /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx11(SearchableSelectSearchContainer, { children: /* @__PURE__ */ jsx11(
                   SearchableSelectInput,
                   {
                     placeholder: searchPlaceholder,
                     autoFocus: true
                   }
                 ) }),
-                /* @__PURE__ */ jsx10(ComboboxStatus, { children: isLoading ? loadingText : null }),
-                /* @__PURE__ */ jsx10(ComboboxEmpty, { children: isLoading ? null : emptyText }),
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx11(ComboboxStatus, { children: isLoading ? loadingText : null }),
+                /* @__PURE__ */ jsx11(ComboboxEmpty, { children: isLoading ? null : emptyText }),
+                /* @__PURE__ */ jsx11(
                   SearchableSelectList,
                   {
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
                     style: isVirtualized ? {
                       padding: 0,
                       flex: 1,
@@ -2122,7 +1916,7 @@ function SingleSearchableSelect(props) {
                       display: "flex",
                       flexDirection: "column"
                     } : void 0,
-                    children: isVirtualized ? /* @__PURE__ */ jsx10(
+                    children: isVirtualized ? /* @__PURE__ */ jsx11(
                       VirtualizedComboboxList,
                       {
                         open,
@@ -2134,10 +1928,10 @@ function SingleSearchableSelect(props) {
                         inputType,
                         renderItem
                       }
-                    ) : children ? children : groups ? ((group, index) => /* @__PURE__ */ jsxs8(React11.Fragment, { children: [
+                    ) : children ? children : groups ? ((group, index) => /* @__PURE__ */ jsxs8(React13.Fragment, { children: [
                       /* @__PURE__ */ jsxs8(ComboboxGroup, { items: group.items, children: [
-                        /* @__PURE__ */ jsx10(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
-                        /* @__PURE__ */ jsx10(Combobox5.Collection, { children: (item) => /* @__PURE__ */ jsx10(
+                        /* @__PURE__ */ jsx11(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                        /* @__PURE__ */ jsx11(Combobox5.Collection, { children: (item) => /* @__PURE__ */ jsx11(
                           ComboboxItem_default,
                           {
                             value: item,
@@ -2150,9 +1944,9 @@ function SingleSearchableSelect(props) {
                           item.id
                         ) })
                       ] }),
-                      index < groups.length - 1 && /* @__PURE__ */ jsx10(ComboboxSeparator, {})
+                      index < groups.length - 1 && /* @__PURE__ */ jsx11(ComboboxSeparator, {})
                     ] }, group.value)) : /* @__PURE__ */ jsxs8(Fragment8, { children: [
-                      includePlaceholderItem && /* @__PURE__ */ jsx10(
+                      includePlaceholderItem && /* @__PURE__ */ jsx11(
                         ComboboxItem_default,
                         {
                           value: makePlaceholderSentinel(placeholder),
@@ -2162,7 +1956,7 @@ function SingleSearchableSelect(props) {
                         },
                         "placeholder"
                       ),
-                      /* @__PURE__ */ jsx10(Combobox5.Collection, { children: (item) => /* @__PURE__ */ jsx10(
+                      /* @__PURE__ */ jsx11(Combobox5.Collection, { children: (item) => /* @__PURE__ */ jsx11(
                         ComboboxItem_default,
                         {
                           value: item,
@@ -2187,18 +1981,15 @@ function SingleSearchableSelect(props) {
 }
 
 // src/v3/MultiSearchableSelect.tsx
-import * as React12 from "react";
+import * as React14 from "react";
 import { Combobox as Combobox6 } from "@base-ui/react/combobox";
 import "@tanstack/react-virtual";
 import Icon4 from "@sproutsocial/seeds-react-icon";
-import styled7 from "styled-components";
-import { Fragment as Fragment10, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
-var SelectionText2 = styled7.span`
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
+import { Fragment as Fragment10, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var SelectionText2 = ({
+  className,
+  ...rest
+}) => /* @__PURE__ */ jsx12("span", { className: cn("seeds-select-selection-text", className), ...rest });
 function makeGroupHeaderSentinel2(groupName) {
   return { __groupHeader: true, groupName };
 }
@@ -2221,6 +2012,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;
@@ -2243,29 +2036,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;
@@ -2276,7 +2069,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);
@@ -2357,7 +2150,7 @@ function MultiSearchableSelect(props) {
       const selectedCount = value.length;
       const state = selectedCount === 0 ? "none" : selectedCount === totalCount ? "all" : "partial";
       return /* @__PURE__ */ jsxs9(ComboboxSelectAllItem, { value: row, children: [
-        /* @__PURE__ */ jsx11(ComboboxGroupHeaderCheckbox, { $state: state, id: "__selectAll" }),
+        /* @__PURE__ */ jsx12(ComboboxGroupHeaderCheckbox, { $state: state, id: "__selectAll" }),
         "Select all"
       ] }, "__selectAll");
     }
@@ -2369,7 +2162,7 @@ function MultiSearchableSelect(props) {
       ).length;
       const state = selectedCount === 0 ? "none" : selectedCount === groupItemsList.length ? "all" : "partial";
       return /* @__PURE__ */ jsxs9(ComboboxGroupHeaderItem, { value: row, children: [
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           ComboboxGroupHeaderCheckbox,
           {
             $state: state,
@@ -2383,7 +2176,7 @@ function MultiSearchableSelect(props) {
       return renderCreatableItem(row);
     }
     const item = row;
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       ComboboxItem_default,
       {
         value: item,
@@ -2397,7 +2190,7 @@ function MultiSearchableSelect(props) {
     );
   }
   function renderCreatableItem(sentinel, style, index, measureRef) {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       ComboboxItem_default,
       {
         value: sentinel,
@@ -2405,7 +2198,7 @@ function MultiSearchableSelect(props) {
         label: `Create "${sentinel.label}"`,
         inputType: "none",
         renderItem: () => /* @__PURE__ */ jsxs9(Fragment10, { children: [
-          /* @__PURE__ */ jsx11(Icon4, { name: "plus-outline", size: "mini" }),
+          /* @__PURE__ */ jsx12(Icon4, { name: "plus-outline", size: "mini" }),
           `Create "${sentinel.label}"`
         ] }),
         style,
@@ -2421,7 +2214,7 @@ function MultiSearchableSelect(props) {
   const hasSentinels = selectAll || selectHeadings;
   const rootValue = hasSentinels ? [...value] : value;
   return /* @__PURE__ */ jsxs9(Field, { $fullWidth: fullWidth, children: [
-    /* @__PURE__ */ jsx11("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ jsx12("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ jsxs9(
       Combobox6.Root,
       {
@@ -2502,29 +2295,31 @@ function MultiSearchableSelect(props) {
                     text,
                     overflowCount > 0 ? `, +${overflowCount}` : ""
                   ] });
-                })() : /* @__PURE__ */ jsx11(SearchableSelectPlaceholder, { children: placeholder }),
-                /* @__PURE__ */ jsx11(SearchableSelectTriggerIcon, { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx11(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ jsx11(ChevronIcon, {}) }) })
+                })() : /* @__PURE__ */ jsx12(SearchableSelectPlaceholder, { children: placeholder }),
+                /* @__PURE__ */ jsx12(SearchableSelectTriggerIcon, { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx12(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ jsx12(ChevronIcon, {}) }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx11(Combobox6.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx11(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ jsxs9(
+          /* @__PURE__ */ jsx12(Combobox6.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx12(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ jsxs9(
             SearchableSelectPopup,
             {
               "aria-busy": isLoading || void 0,
               style: { display: "flex", flexDirection: "column" },
               children: [
-                /* @__PURE__ */ jsx11(SearchableSelectSearchContainer, { children: /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx12(SearchableSelectSearchContainer, { children: /* @__PURE__ */ jsx12(
                   SearchableSelectInput,
                   {
                     placeholder: searchPlaceholder,
                     autoFocus: true
                   }
                 ) }),
-                /* @__PURE__ */ jsx11(ComboboxStatus, { children: isLoading ? loadingText : null }),
-                /* @__PURE__ */ jsx11(ComboboxEmpty, { children: isLoading ? null : emptyText }),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx12(ComboboxStatus, { children: isLoading ? loadingText : null }),
+                /* @__PURE__ */ jsx12(ComboboxEmpty, { children: isLoading ? null : emptyText }),
+                /* @__PURE__ */ jsx12(
                   SearchableSelectList,
                   {
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
                     style: isVirtualized ? {
                       padding: 0,
                       flex: 1,
@@ -2532,7 +2327,7 @@ function MultiSearchableSelect(props) {
                       display: "flex",
                       flexDirection: "column"
                     } : void 0,
-                    children: isVirtualized ? /* @__PURE__ */ jsx11(
+                    children: isVirtualized ? /* @__PURE__ */ jsx12(
                       VirtualizedComboboxList,
                       {
                         open,
@@ -2556,10 +2351,10 @@ function MultiSearchableSelect(props) {
                         return renderCreatableItem(group);
                       }
                       const g = group;
-                      return /* @__PURE__ */ jsxs9(React12.Fragment, { children: [
+                      return /* @__PURE__ */ jsxs9(React14.Fragment, { children: [
                         /* @__PURE__ */ jsxs9(ComboboxGroup, { items: g.items, children: [
-                          /* @__PURE__ */ jsx11(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(g.value) : g.value }),
-                          /* @__PURE__ */ jsx11(Combobox6.Collection, { children: (item) => /* @__PURE__ */ jsx11(
+                          /* @__PURE__ */ jsx12(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(g.value) : g.value }),
+                          /* @__PURE__ */ jsx12(Combobox6.Collection, { children: (item) => /* @__PURE__ */ jsx12(
                             ComboboxItem_default,
                             {
                               value: item,
@@ -2572,14 +2367,14 @@ function MultiSearchableSelect(props) {
                             item.id
                           ) })
                         ] }),
-                        index < groups.length - 1 && /* @__PURE__ */ jsx11(ComboboxSeparator, {})
+                        index < groups.length - 1 && /* @__PURE__ */ jsx12(ComboboxSeparator, {})
                       ] }, g.value);
                     }) : ((item) => {
                       if (isCreatableSentinel(item)) {
                         return renderCreatableItem(item);
                       }
                       const dataItem = item;
-                      return /* @__PURE__ */ jsx11(
+                      return /* @__PURE__ */ jsx12(
                         ComboboxItem_default,
                         {
                           value: dataItem,
@@ -2604,153 +2399,141 @@ function MultiSearchableSelect(props) {
 }
 
 // src/v3/ActionMenu.tsx
-import * as React13 from "react";
+import * as React16 from "react";
 import { Menu as Menu2 } from "@base-ui/react/menu";
 import Radio3 from "@sproutsocial/seeds-react-radio";
 import Checkbox4 from "@sproutsocial/seeds-react-checkbox";
 import { Icon as Icon5 } from "@sproutsocial/seeds-react-icon";
 
 // src/v3/ActionMenuStyles.tsx
+import * as React15 from "react";
 import { Menu } from "@base-ui/react/menu";
-import styled8, { css as css3 } from "styled-components";
-import "@sproutsocial/seeds-react-mixins";
-var ActionMenuTrigger = styled8(Menu.Trigger)``;
-var ActionMenuPositioner = styled8(Menu.Positioner)`
-  min-width: var(--anchor-width);
-  z-index: 7;
-`;
-var ActionMenuPopup = styled8(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;
-  }
-
-  &[data-closed] {
-    animation: action-menu-popup-out 100ms ease-in;
-  }
-
-  @keyframes action-menu-popup-in {
-    from {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  @keyframes action-menu-popup-out {
-    from {
-      opacity: 1;
-      transform: scale(1);
-    }
-    to {
-      opacity: 0;
-      transform: scale(0.95);
-    }
+import { jsx as jsx13 } from "react/jsx-runtime";
+var ActionMenuTrigger = Menu.Trigger;
+var ActionMenuPositioner = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx13(
+  Menu.Positioner,
+  {
+    ref,
+    className: cn("seeds-action-menu-positioner", className),
+    ...rest
+  }
+));
+ActionMenuPositioner.displayName = "ActionMenuPositioner";
+var ActionMenuPopup = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx13(
+  Menu.Popup,
+  {
+    ref,
+    "data-base-ui-swipe-ignore": "",
+    className: cn("seeds-action-menu-popup", className),
+    ...rest
+  }
+));
+ActionMenuPopup.displayName = "ActionMenuPopup";
+var ActionMenuGroup = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx13(
+  Menu.Group,
+  {
+    ref,
+    className: cn("seeds-action-menu-group", className),
+    ...rest
+  }
+));
+ActionMenuGroup.displayName = "ActionMenuGroup";
+var ActionMenuGroupLabel = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx13(
+  Menu.GroupLabel,
+  {
+    ref,
+    className: cn("seeds-action-menu-group-label", className),
+    ...rest
+  }
+));
+ActionMenuGroupLabel.displayName = "ActionMenuGroupLabel";
+var ActionMenuSeparator = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx13(
+  Menu.Separator,
+  {
+    ref,
+    className: cn("seeds-action-menu-separator", className),
+    ...rest
+  }
+));
+ActionMenuSeparator.displayName = "ActionMenuSeparator";
+var StyledMenuItem = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx13(
+  Menu.Item,
+  {
+    ref,
+    className: cn("seeds-action-menu-item", className),
+    ...rest
+  }
+));
+StyledMenuItem.displayName = "StyledMenuItem";
+var StyledCheckboxItem = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx13(
+  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__ */ jsx13(
+  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__ */ jsx13(
+  Menu.CheckboxItemIndicator,
+  {
+    ref,
+    className: cn("seeds-action-menu-item-indicator", className),
+    ...rest
+  }
+));
+StyledCheckboxItemIndicator.displayName = "StyledCheckboxItemIndicator";
+var StyledRadioItemIndicator = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx13(
+  Menu.RadioItemIndicator,
+  {
+    ref,
+    className: cn("seeds-action-menu-item-indicator", className),
+    ...rest
+  }
+));
+StyledRadioItemIndicator.displayName = "StyledRadioItemIndicator";
+var StyledSubmenuTrigger = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx13(
+  Menu.SubmenuTrigger,
+  {
+    ref,
+    className: cn(
+      "seeds-action-menu-item",
+      "seeds-action-menu-submenu-trigger",
+      className
+    ),
+    ...rest
   }
-`;
-var ActionMenuGroup = styled8(Menu.Group)`
-  display: block;
-`;
-var ActionMenuGroupLabel = styled8(Menu.GroupLabel)`
-  padding: ${({ theme }) => `${theme.space[300]}`};
-  font-size: ${({ theme }) => theme.typography[100].fontSize};
-  color: ${({ theme }) => theme.colors.text.body};
-`;
-var ActionMenuSeparator = styled8(Menu.Separator)`
-  height: 1px;
-  margin: ${({ theme }) => `${theme.space[300]} -${theme.space[300]}`};
-  background: ${({ theme }) => theme.colors.container.border.base};
-`;
-var menuItemStyles = css3`
-  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;
+));
+StyledSubmenuTrigger.displayName = "StyledSubmenuTrigger";
+var StyledLinkItem = React15.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx13(
+  Menu.LinkItem,
+  {
+    ref,
+    className: cn("seeds-action-menu-item", className),
+    ...rest
   }
-
-  &[data-disabled] {
-    cursor: not-allowed;
-    opacity: 0.4;
-  }
-`;
-var StyledMenuItem = styled8(Menu.Item)`
-  ${menuItemStyles}
-`;
-var StyledCheckboxItem = styled8(Menu.CheckboxItem)`
-  ${menuItemStyles}
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.space[300]};
-`;
-var StyledRadioItem = styled8(Menu.RadioItem)`
-  ${menuItemStyles}
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.space[300]};
-`;
-var StyledCheckboxItemIndicator = styled8(Menu.CheckboxItemIndicator)`
-  display: flex;
-  align-items: center;
-  width: 16px;
-  color: ${({ theme }) => theme.colors.text.body};
-`;
-var StyledRadioItemIndicator = styled8(Menu.RadioItemIndicator)`
-  display: flex;
-  align-items: center;
-  width: 16px;
-  color: ${({ theme }) => theme.colors.text.body};
-`;
-var StyledSubmenuTrigger = styled8(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 = styled8(Menu.LinkItem)`
-  ${menuItemStyles}
-`;
+));
+StyledLinkItem.displayName = "StyledLinkItem";
 
 // src/v3/ActionMenu.tsx
-import { Fragment as Fragment11, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function ActionMenu({
   trigger,
   children,
@@ -2767,9 +2550,9 @@ function ActionMenu({
       defaultOpen,
       onOpenChange,
       children: [
-        /* @__PURE__ */ jsx12("div", { ref: containerRef, style: { position: "relative" } }),
-        /* @__PURE__ */ jsx12(ActionMenuTrigger, { render: trigger, disabled }),
-        /* @__PURE__ */ jsx12(Menu2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx12(ActionMenuPositioner, { sideOffset: 8, children: /* @__PURE__ */ jsx12(ActionMenuPopup, { children }) }) })
+        /* @__PURE__ */ jsx14("div", { ref: containerRef, style: { position: "relative" } }),
+        /* @__PURE__ */ jsx14(ActionMenuTrigger, { render: trigger, disabled }),
+        /* @__PURE__ */ jsx14(Menu2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx14(ActionMenuPositioner, { sideOffset: 8, children: /* @__PURE__ */ jsx14(ActionMenuPopup, { children }) }) })
       ]
     }
   );
@@ -2781,10 +2564,10 @@ function MenuGroup({
 }) {
   return /* @__PURE__ */ jsxs10(Fragment11, { children: [
     /* @__PURE__ */ jsxs10(ActionMenuGroup, { children: [
-      label && /* @__PURE__ */ jsx12(ActionMenuGroupLabel, { children: label }),
+      label && /* @__PURE__ */ jsx14(ActionMenuGroupLabel, { children: label }),
       children
     ] }),
-    showSeparator && /* @__PURE__ */ jsx12(ActionMenuSeparator, {})
+    showSeparator && /* @__PURE__ */ jsx14(ActionMenuSeparator, {})
   ] });
 }
 function MenuRadioGroup({
@@ -2793,7 +2576,7 @@ function MenuRadioGroup({
   defaultValue,
   onValueChange
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     Menu2.RadioGroup,
     {
       value,
@@ -2804,7 +2587,7 @@ function MenuRadioGroup({
   );
 }
 function MenuItem(props) {
-  const generatedId = React13.useId();
+  const generatedId = React16.useId();
   if (props.type === "checkbox") {
     const {
       children: children2,
@@ -2825,11 +2608,11 @@ function MenuItem(props) {
         disabled: disabled2,
         closeOnClick: closeOnClick2,
         children: [
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx14(
             StyledCheckboxItemIndicator,
             {
               keepMounted: true,
-              render: (_indicatorProps, state) => /* @__PURE__ */ jsx12(
+              render: (_indicatorProps, state) => /* @__PURE__ */ jsx14(
                 Checkbox4,
                 {
                   checked: state.checked,
@@ -2856,11 +2639,11 @@ function MenuItem(props) {
         disabled: disabled2,
         closeOnClick: closeOnClick2,
         children: [
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx14(
             StyledRadioItemIndicator,
             {
               keepMounted: true,
-              render: (_indicatorProps, state) => /* @__PURE__ */ jsx12(
+              render: (_indicatorProps, state) => /* @__PURE__ */ jsx14(
                 Radio3,
                 {
                   checked: state.checked,
@@ -2887,9 +2670,9 @@ function MenuItem(props) {
     target
   } = props;
   if (href) {
-    return /* @__PURE__ */ jsx12(StyledLinkItem, { href, target, closeOnClick, children });
+    return /* @__PURE__ */ jsx14(StyledLinkItem, { href, target, closeOnClick, children });
   }
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     StyledMenuItem,
     {
       onClick,
@@ -2916,9 +2699,9 @@ function MenuSub({
       onOpenChange,
       closeParentOnEsc,
       children: [
-        /* @__PURE__ */ jsx12("div", { ref: containerRef, style: { position: "relative" } }),
+        /* @__PURE__ */ jsx14("div", { ref: containerRef, style: { position: "relative" } }),
         trigger,
-        /* @__PURE__ */ jsx12(Menu2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx12(ActionMenuPositioner, { sideOffset: getOffset, alignOffset: getOffset, children: /* @__PURE__ */ jsx12(ActionMenuPopup, { children }) }) })
+        /* @__PURE__ */ jsx14(Menu2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx14(ActionMenuPositioner, { sideOffset: getOffset, alignOffset: getOffset, children: /* @__PURE__ */ jsx14(ActionMenuPopup, { children }) }) })
       ]
     }
   );
@@ -2940,7 +2723,7 @@ function MenuSubTrigger({
       openOnHover,
       children: [
         children,
-        /* @__PURE__ */ jsx12(Icon5, { name: "chevron-right-outline", fixedWidth: true, "aria-hidden": true })
+        /* @__PURE__ */ jsx14(Icon5, { name: "chevron-right-outline", fixedWidth: true, "aria-hidden": true })
       ]
     }
   );
@@ -2952,35 +2735,41 @@ import "@sproutsocial/seeds-react-button";
 import { Icon as Icon6 } from "@sproutsocial/seeds-react-icon";
 
 // src/v3/MenuButtonStyles.tsx
-import styled9 from "styled-components";
+import * as React17 from "react";
 import { Button } from "@sproutsocial/seeds-react-button";
-var MenuButtonContainer = styled9.div`
-  display: inline-flex;
-  gap: 1px;
-`;
-var MainButton = styled9(Button)`
-  && {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-`;
-var TriggerButton = styled9(Button)`
-  && {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  .Icon-svg {
-    transition: transform ${({ theme }) => theme.duration.fast} ease;
-  }
-
-  &[data-popup-open] .Icon-svg {
-    transform: rotate(180deg);
-  }
-`;
+import { jsx as jsx15 } from "react/jsx-runtime";
+var MenuButtonContainer = React17.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx15(
+  "div",
+  {
+    ref,
+    className: cn("seeds-menu-button-container", className),
+    ...rest
+  }
+));
+MenuButtonContainer.displayName = "MenuButtonContainer";
+var MainButton = React17.forwardRef(
+  ({ className, ...rest }, ref) => /* @__PURE__ */ jsx15(
+    Button,
+    {
+      ref,
+      className: cn("seeds-menu-button-main", className),
+      ...rest
+    }
+  )
+);
+MainButton.displayName = "MainButton";
+var TriggerButton = React17.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx15(
+  Button,
+  {
+    ref,
+    className: cn("seeds-menu-button-trigger", className),
+    ...rest
+  }
+));
+TriggerButton.displayName = "TriggerButton";
 
 // src/v3/MenuButton.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 function MenuButton({
   actionMenu,
   appearance = "primary",
@@ -2991,7 +2780,7 @@ function MenuButton({
   ...rest
 }) {
   return /* @__PURE__ */ jsxs11(MenuButtonContainer, { children: [
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx16(
       MainButton,
       {
         appearance,
@@ -3001,18 +2790,18 @@ function MenuButton({
         children
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx16(
       ActionMenu,
       {
         disabled,
-        trigger: /* @__PURE__ */ jsx13(
+        trigger: /* @__PURE__ */ jsx16(
           TriggerButton,
           {
             appearance,
             size,
             disabled,
             ariaLabel: menuButtonAriaLabel,
-            children: /* @__PURE__ */ jsx13(Icon6, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true })
+            children: /* @__PURE__ */ jsx16(Icon6, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true })
           }
         ),
         children: actionMenu