@osdk/react-components 0.2.0-beta.28 → 0.2.0-beta.29

package/build/cjs/public/experimental.cjs

@@ -4,7 +4,7 @@ var chunkMRRRZN44_cjs = require('../chunk-MRRRZN44.cjs');
 var chunkUZ2E5NRX_cjs = require('../chunk-UZ2E5NRX.cjs');
 var chunkHMQTYQEX_cjs = require('../chunk-HMQTYQEX.cjs');
 var button = require('@base-ui/react/button');
-var classnames13 = require('classnames');
+var classnames14 = require('classnames');
 var React76 = require('react');
 var icons = require('@blueprintjs/icons');
 var core = require('@dnd-kit/core');
@@ -17,7 +17,6 @@ var _switch = require('@base-ui/react/switch');
 var experimental = require('@osdk/react/experimental');
 var checkbox = require('@base-ui/react/checkbox');
 var combobox = require('@base-ui/react/combobox');
-var select = require('@base-ui/react/select');
 var react = require('@osdk/react');
 var reactTable = require('@tanstack/react-table');
 var unstableDoNotUse = require('@osdk/react/unstable-do-not-use');
@@ -31,12 +30,13 @@ var pdfjsDist = require('pdfjs-dist');
 var pdf_viewer_mjs = require('pdfjs-dist/web/pdf_viewer.mjs');
 var reactHookForm = require('react-hook-form');
 var popover = require('@base-ui/react/popover');
+var select = require('@base-ui/react/select');
 var radio = require('@base-ui/react/radio');
 var radioGroup = require('@base-ui/react/radio-group');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var classnames13__default = /*#__PURE__*/_interopDefault(classnames13);
+var classnames14__default = /*#__PURE__*/_interopDefault(classnames14);
 var React76__default = /*#__PURE__*/_interopDefault(React76);
 
 function RemoveIcon() {
@@ -70,8 +70,8 @@ function ExpandIcon() {
   });
 }
 function ResetIcon() {
-  return /* @__PURE__ */ React76__default.default.createElement(icons.Undo, {
-    size: 14
+  return /* @__PURE__ */ React76__default.default.createElement(icons.Reset, {
+    size: 12
   });
 }
 function CheckIcon() {
@@ -356,7 +356,7 @@ function FilterListItemInner({
   const searchQuery = searchState.type === "open" ? searchState.query : "";
   const searchQueryForInput = searchState.type === "open" ? searchState.query : void 0;
   return /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(FilterListItem_default.filterItem, className),
+    className: classnames14__default.default(FilterListItem_default.filterItem, className),
     style,
     "data-has-selection": hasActiveSelection(filterState) || void 0
   }, /* @__PURE__ */ React76__default.default.createElement("div", {
@@ -436,7 +436,7 @@ function SortableFilterListItemInner({
   return /* @__PURE__ */ React76__default.default.createElement("div", {
     ref: setNodeRef,
     style,
-    className: classnames13__default.default(isDragging && FilterListItem_default.dragging)
+    className: classnames14__default.default(isDragging && FilterListItem_default.dragging)
   }, /* @__PURE__ */ React76__default.default.createElement(FilterListItem, {
     definition,
     filterKey,
@@ -579,14 +579,14 @@ function FilterListContent({
   }), [announcements]);
   if (!renderDefinitions || renderDefinitions.length === 0) {
     return /* @__PURE__ */ React76__default.default.createElement("div", {
-      className: classnames13__default.default(FilterListContent_default.content, className),
+      className: classnames14__default.default(FilterListContent_default.content, className),
       style,
       "data-empty": "true"
     });
   }
   if (enableSorting) {
     return /* @__PURE__ */ React76__default.default.createElement("div", {
-      className: classnames13__default.default(FilterListContent_default.content, className),
+      className: classnames14__default.default(FilterListContent_default.content, className),
       style
     }, /* @__PURE__ */ React76__default.default.createElement(core.DndContext, {
       sensors,
@@ -630,7 +630,7 @@ function FilterListContent({
     }))));
   }
   return /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(FilterListContent_default.content, className),
+    className: classnames14__default.default(FilterListContent_default.content, className),
     style
   }, renderDefinitions.map((definition) => {
     const filterKey = getFilterKey2(definition);
@@ -683,7 +683,7 @@ function FilterListHeaderInner({
     className: FilterListHeader_default.resetButton,
     onClick: onReset,
     disabled: activeFilterCount === 0 && !hasVisibilityChanges
-  }, /* @__PURE__ */ React76__default.default.createElement(ResetIcon, null), " Reset"), showCollapseButton && /* @__PURE__ */ React76__default.default.createElement(button.Button, {
+  }, /* @__PURE__ */ React76__default.default.createElement(ResetIcon, null), " Reset filters"), showCollapseButton && /* @__PURE__ */ React76__default.default.createElement(button.Button, {
     className: FilterListHeader_default.collapseButton,
     onClick: handleCollapseClick,
     "aria-expanded": !collapsed,
@@ -723,7 +723,7 @@ function BaseFilterList(props) {
   }, [onCollapsedChange]);
   const isCollapsed = collapsed && onCollapsedChange != null;
   return /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(FilterList_default.filterList, className)
+    className: classnames14__default.default(FilterList_default.filterList, className)
   }, isCollapsed && /* @__PURE__ */ React76__default.default.createElement("div", {
     className: FilterList_default.filterListCollapsed,
     "data-collapsed": "true"
@@ -734,7 +734,7 @@ function BaseFilterList(props) {
   }, /* @__PURE__ */ React76__default.default.createElement(ExpandIcon, null)), /* @__PURE__ */ React76__default.default.createElement("span", {
     className: FilterList_default.collapsedLabel
   }, title ?? "Filters")), /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(FilterList_default.expandedContent, isCollapsed && FilterList_default.hiddenContent),
+    className: classnames14__default.default(FilterList_default.expandedContent, isCollapsed && FilterList_default.hiddenContent),
     "data-active-count": activeFilterCount
   }, showHeader && /* @__PURE__ */ React76__default.default.createElement(FilterListHeader, {
     title,
@@ -746,7 +746,9 @@ function BaseFilterList(props) {
     showActiveFilterCount,
     activeFilterCount,
     hasVisibilityChanges
-  }), /* @__PURE__ */ React76__default.default.createElement(FilterListContent, {
+  }), /* @__PURE__ */ React76__default.default.createElement("div", {
+    className: FilterList_default.scrollableContent
+  }, /* @__PURE__ */ React76__default.default.createElement(FilterListContent, {
     filterDefinitions,
     filterStates,
     onFilterStateChanged,
@@ -755,7 +757,7 @@ function BaseFilterList(props) {
     getFilterKey: getFilterKey2,
     getFilterLabel: getFilterLabel2,
     enableSorting
-  }), showAddButton && /* @__PURE__ */ React76__default.default.createElement("div", {
+  })), showAddButton && /* @__PURE__ */ React76__default.default.createElement("div", {
     className: FilterList_default.addButtonContainer
   }, renderAddFilterButton ? renderAddFilterButton() : /* @__PURE__ */ React76__default.default.createElement(button.Button, {
     type: "button",
@@ -764,6 +766,102 @@ function BaseFilterList(props) {
   }, "+ Add filter"))));
 }
 
+// src/base-components/search-bar/SearchBar.module.css
+var SearchBar_default = {};
+
+// src/base-components/search-bar/SearchBar.tsx
+function SearchBar({
+  value,
+  onChange,
+  placeholder = "Search",
+  "aria-label": ariaLabel,
+  className,
+  onKeyDown
+}) {
+  return /* @__PURE__ */ React76__default.default.createElement("div", {
+    className: classnames14__default.default(SearchBar_default.searchBar, className)
+  }, /* @__PURE__ */ React76__default.default.createElement(icons.Search, {
+    className: SearchBar_default.searchIcon
+  }), /* @__PURE__ */ React76__default.default.createElement(input.Input, {
+    type: "text",
+    placeholder,
+    "aria-label": ariaLabel ?? placeholder,
+    value,
+    onChange,
+    className: SearchBar_default.searchInput,
+    onKeyDown
+  }));
+}
+
+// src/base-components/searchable-menu/SearchableMenu.module.css
+var SearchableMenu_default = {};
+
+// src/base-components/searchable-menu/SearchableMenu.tsx
+function SearchableMenuInner({
+  items,
+  onItemSelected,
+  trigger,
+  triggerClassName,
+  disabled,
+  searchPlaceholder = "Search",
+  emptyMessage = "No matching items",
+  className
+}) {
+  const [searchQuery, setSearchQuery] = React76.useState("");
+  const filteredItems = React76.useMemo(() => {
+    const query = searchQuery.toLowerCase().trim();
+    if (!query) return items;
+    return items.filter((item) => item.label.toLowerCase().includes(query));
+  }, [items, searchQuery]);
+  const handleSearchChange = React76.useCallback((event) => {
+    setSearchQuery(event.target.value);
+  }, []);
+  const handleMenuOpenChange = React76.useCallback((open) => {
+    if (open) {
+      setSearchQuery("");
+    }
+  }, []);
+  const handleKeyDown = React76.useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+  return /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Root, {
+    onOpenChange: handleMenuOpenChange
+  }, /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Trigger, {
+    className: triggerClassName,
+    disabled
+  }, trigger), /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Portal, null, /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Positioner, {
+    className: classnames14__default.default(SearchableMenu_default.positioner, className),
+    sideOffset: 4
+  }, /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Popup, {
+    className: SearchableMenu_default.popup
+  }, /* @__PURE__ */ React76__default.default.createElement(SearchBar, {
+    value: searchQuery,
+    onChange: handleSearchChange,
+    placeholder: searchPlaceholder,
+    "aria-label": searchPlaceholder,
+    className: SearchableMenu_default.searchContainer,
+    onKeyDown: handleKeyDown
+  }), filteredItems.map((item) => /* @__PURE__ */ React76__default.default.createElement(SearchableMenuItemRow, {
+    key: item.key,
+    item,
+    onItemSelected
+  })), filteredItems.length === 0 && /* @__PURE__ */ React76__default.default.createElement("div", {
+    className: SearchableMenu_default.emptyState
+  }, emptyMessage)))));
+}
+var SearchableMenu = /* @__PURE__ */ React76.memo(SearchableMenuInner);
+function SearchableMenuItemRowInner({
+  item,
+  onItemSelected
+}) {
+  const handleClick = React76.useCallback(() => onItemSelected(item.key), [onItemSelected, item.key]);
+  return /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Item, {
+    className: SearchableMenu_default.menuItem,
+    onClick: handleClick
+  }, item.label);
+}
+var SearchableMenuItemRow = /* @__PURE__ */ React76.memo(SearchableMenuItemRowInner);
+
 // src/filter-list/base/AddFilterPopover.module.css
 var AddFilterPopover_default = {};
 
@@ -773,25 +871,14 @@ function AddFilterPopoverInner({
   onShowFilter,
   renderTrigger
 }) {
-  const handleItemClick = React76.useCallback((event) => {
-    const key = event.currentTarget.dataset.key;
-    if (key != null) {
-      onShowFilter(key);
-    }
-  }, [onShowFilter]);
-  return /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Root, null, /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Trigger, {
-    className: renderTrigger == null ? AddFilterPopover_default.trigger : void 0
-  }, renderTrigger != null ? renderTrigger() : "+ Add filter"), /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Portal, null, /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Positioner, {
-    className: AddFilterPopover_default.positioner,
-    sideOffset: 4
-  }, /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Popup, {
-    className: AddFilterPopover_default.popup
-  }, hiddenDefinitions.map((item) => /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Item, {
-    key: item.key,
-    className: AddFilterPopover_default.menuItem,
-    "data-key": item.key,
-    onClick: handleItemClick
-  }, item.label))))));
+  return /* @__PURE__ */ React76__default.default.createElement(SearchableMenu, {
+    items: hiddenDefinitions,
+    onItemSelected: onShowFilter,
+    trigger: renderTrigger != null ? renderTrigger() : "+ Add filter",
+    triggerClassName: renderTrigger == null ? AddFilterPopover_default.trigger : void 0,
+    searchPlaceholder: "Search filters",
+    emptyMessage: "No matching filters"
+  });
 }
 var AddFilterPopover = /* @__PURE__ */ React76.memo(AddFilterPopoverInner);
 
@@ -834,7 +921,7 @@ function ContainsTextInputInner({
     onChangeRef.current(void 0);
   }, [debouncedOnChange]);
   return /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(ContainsTextInput_default.textInput, className),
+    className: classnames14__default.default(ContainsTextInput_default.textInput, className),
     style,
     "data-has-value": !!localValue
   }, /* @__PURE__ */ React76__default.default.createElement("div", {
@@ -876,9 +963,9 @@ function Switch({
   ...rest
 }) {
   return /* @__PURE__ */ React76__default.default.createElement(_switch.Switch.Root, _extends2({
-    className: classnames13__default.default(Switch_default.osdkSwitchRoot, className)
+    className: classnames14__default.default(Switch_default.osdkSwitchRoot, className)
   }, rest), /* @__PURE__ */ React76__default.default.createElement(_switch.Switch.Thumb, _extends2({}, thumbProps, {
-    className: classnames13__default.default(Switch_default.osdkSwitchThumb, thumbProps?.className)
+    className: classnames14__default.default(Switch_default.osdkSwitchThumb, thumbProps?.className)
   })));
 }
 
@@ -893,7 +980,7 @@ function ToggleInputInner({
   className,
   style
 }) {
-  const rootClassName = classnames13__default.default(ToggleInput_default.toggleInput, className);
+  const rootClassName = classnames14__default.default(ToggleInput_default.toggleInput, className);
   return /* @__PURE__ */ React76__default.default.createElement("div", {
     className: rootClassName,
     style,
@@ -1084,7 +1171,7 @@ function RangeInputInner({
     debouncedMaxChange(newValue);
   }, [debouncedMaxChange]);
   return /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(RangeInput_default.rangeInput, className),
+    className: classnames14__default.default(RangeInput_default.rangeInput, className),
     style,
     "data-loading": isLoading
   }, showHistogram && buckets.length === 0 && !isLoading && /* @__PURE__ */ React76__default.default.createElement("div", {
@@ -1187,11 +1274,11 @@ function Checkbox({
   ...rest
 }) {
   return /* @__PURE__ */ React76__default.default.createElement(checkbox.Checkbox.Root, _extends5({
-    className: classnames13__default.default(Checkbox_default.osdkCheckboxRoot, className),
+    className: classnames14__default.default(Checkbox_default.osdkCheckboxRoot, className),
     indeterminate,
     "data-excluding": isExcluding || void 0
   }, rest), /* @__PURE__ */ React76__default.default.createElement(checkbox.Checkbox.Indicator, _extends5({}, indicatorProps, {
-    className: classnames13__default.default(Checkbox_default.osdkCheckboxIndicator, indicatorProps?.className)
+    className: classnames14__default.default(Checkbox_default.osdkCheckboxIndicator, indicatorProps?.className)
   }), indeterminate ? /* @__PURE__ */ React76__default.default.createElement(icons.Minus, {
     size: 16
   }) : isExcluding ? /* @__PURE__ */ React76__default.default.createElement(icons.Cross, {
@@ -1216,7 +1303,7 @@ function SkeletonBar({
 }) {
   return /* @__PURE__ */ React76__default.default.createElement("div", {
     "aria-hidden": "true",
-    className: classnames13__default.default(SkeletonBar_default.skeletonBar, className),
+    className: classnames14__default.default(SkeletonBar_default.skeletonBar, className),
     style: {
       width,
       height,
@@ -1298,7 +1385,7 @@ function ListogramInputInner({
   }, [sortedValues, maxVisibleItems, isExpanded]);
   const hasMore = maxVisibleItems != null && sortedValues.length > maxVisibleItems;
   return /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(ListogramInput_default.listogram, className),
+    className: classnames14__default.default(ListogramInput_default.listogram, className),
     style,
     "data-loading": isLoading && filteredValues.length > 0
   }, error && /* @__PURE__ */ React76__default.default.createElement("div", {
@@ -1343,7 +1430,7 @@ function ListogramInputInner({
     })));
   }), hasMore && !isExpanded && /* @__PURE__ */ React76__default.default.createElement(button.Button, {
     type: "button",
-    className: ListogramInput_default.row,
+    className: ListogramInput_default.viewAllButton,
     onClick: () => setIsExpanded(true)
   }, "View all (", sortedValues.length, ")")));
 }
@@ -1384,7 +1471,7 @@ function MultiDateInputInner({
     }
   }, [addDate]);
   return /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(MultiDateInput_default.multiDate, className),
+    className: classnames14__default.default(MultiDateInput_default.multiDate, className),
     style
   }, selectedDates.length > 0 && /* @__PURE__ */ React76__default.default.createElement("div", {
     className: shared_default.tagContainer
@@ -1430,7 +1517,7 @@ function ComboboxSearchInput({
   ...rest
 }) {
   return /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(Combobox_default.osdkComboboxInputWrapper, className)
+    className: classnames14__default.default(Combobox_default.osdkComboboxInputWrapper, className)
   }, /* @__PURE__ */ React76__default.default.createElement(icons.Search, {
     className: Combobox_default.osdkComboboxSearchIcon
   }), /* @__PURE__ */ React76__default.default.createElement(combobox.Combobox.Input, _extends6({
@@ -1442,7 +1529,7 @@ function ComboboxInput({
   ...rest
 }) {
   return /* @__PURE__ */ React76__default.default.createElement(combobox.Combobox.Input, _extends6({
-    className: classnames13__default.default(Combobox_default.osdkComboboxInput, className)
+    className: classnames14__default.default(Combobox_default.osdkComboboxInput, className)
   }, rest));
 }
 function ComboboxPositioner({
@@ -1451,7 +1538,7 @@ function ComboboxPositioner({
   ...rest
 }) {
   return /* @__PURE__ */ React76__default.default.createElement(combobox.Combobox.Positioner, _extends6({
-    className: classnames13__default.default(Combobox_default.osdkComboboxPositioner, className),
+    className: classnames14__default.default(Combobox_default.osdkComboboxPositioner, className),
     sideOffset: 4
   }, rest), children);
 }
@@ -1461,7 +1548,7 @@ function ComboboxPopup({
   ...rest
 }) {
   return /* @__PURE__ */ React76__default.default.createElement(combobox.Combobox.Popup, _extends6({
-    className: classnames13__default.default(Combobox_default.osdkComboboxPopup, className)
+    className: classnames14__default.default(Combobox_default.osdkComboboxPopup, className)
   }, rest), children);
 }
 function ComboboxItem({
@@ -1470,7 +1557,7 @@ function ComboboxItem({
   ...rest
 }) {
   return /* @__PURE__ */ React76__default.default.createElement(combobox.Combobox.Item, _extends6({
-    className: classnames13__default.default(Combobox_default.osdkComboboxItem, className)
+    className: classnames14__default.default(Combobox_default.osdkComboboxItem, className)
   }, rest), children);
 }
 function ComboboxChips({
@@ -1479,7 +1566,7 @@ function ComboboxChips({
 }) {
   return /* @__PURE__ */ React76__default.default.createElement(combobox.Combobox.Chips, {
     render: (props) => /* @__PURE__ */ React76__default.default.createElement("div", _extends6({}, props, {
-      className: classnames13__default.default(Combobox_default.osdkComboboxInputWrapper, className)
+      className: classnames14__default.default(Combobox_default.osdkComboboxInputWrapper, className)
     }), props.children)
   }, children);
 }
@@ -1489,7 +1576,7 @@ function ComboboxChip({
   ...rest
 }) {
   return /* @__PURE__ */ React76__default.default.createElement(combobox.Combobox.Chip, _extends6({
-    className: classnames13__default.default(Combobox_default.osdkComboboxChip, className)
+    className: classnames14__default.default(Combobox_default.osdkComboboxChip, className)
   }, rest), children);
 }
 function ComboboxChipRemove({
@@ -1497,7 +1584,7 @@ function ComboboxChipRemove({
   ...rest
 }) {
   return /* @__PURE__ */ React76__default.default.createElement(combobox.Combobox.ChipRemove, _extends6({
-    className: classnames13__default.default(Combobox_default.osdkComboboxChipRemove, className),
+    className: classnames14__default.default(Combobox_default.osdkComboboxChipRemove, className),
     "aria-label": "Remove"
   }, rest), /* @__PURE__ */ React76__default.default.createElement(icons.Cross, null));
 }
@@ -1506,7 +1593,7 @@ function ComboboxClear({
   ...rest
 }) {
   return /* @__PURE__ */ React76__default.default.createElement(combobox.Combobox.Clear, _extends6({
-    className: classnames13__default.default(Combobox_default.osdkComboboxClear, className),
+    className: classnames14__default.default(Combobox_default.osdkComboboxClear, className),
     "aria-label": "Clear all"
   }, rest), /* @__PURE__ */ React76__default.default.createElement(icons.Cross, null));
 }
@@ -1515,7 +1602,7 @@ function ComboboxEmpty({
   className
 }) {
   return /* @__PURE__ */ React76__default.default.createElement(combobox.Combobox.Empty, {
-    className: classnames13__default.default(Combobox_default.osdkComboboxEmpty, className)
+    className: classnames14__default.default(Combobox_default.osdkComboboxEmpty, className)
   }, children);
 }
 function ComboboxList({
@@ -1524,9 +1611,21 @@ function ComboboxList({
   ...rest
 }) {
   return /* @__PURE__ */ React76__default.default.createElement(combobox.Combobox.List, _extends6({
-    className: classnames13__default.default(Combobox_default.osdkComboboxList, className)
+    className: classnames14__default.default(Combobox_default.osdkComboboxList, className)
   }, rest), children);
 }
+function ComboboxItemIndicator({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ React76__default.default.createElement(combobox.Combobox.ItemIndicator, _extends6({
+    className: classnames14__default.default(Combobox_default.osdkComboboxItemIndicator, className),
+    keepMounted: true
+  }, rest), children ?? /* @__PURE__ */ React76__default.default.createElement(icons.Tick, {
+    size: 16
+  }));
+}
 var Combobox = {
   Root: combobox.Combobox.Root,
   SearchInput: ComboboxSearchInput,
@@ -1536,6 +1635,7 @@ var Combobox = {
   Popup: ComboboxPopup,
   List: ComboboxList,
   Item: ComboboxItem,
+  ItemIndicator: ComboboxItemIndicator,
   Chips: ComboboxChips,
   Chip: ComboboxChip,
   ChipRemove: ComboboxChipRemove,
@@ -1557,23 +1657,35 @@ function MultiSelectInputInner({
   className,
   style,
   placeholder = "Select values...",
-  maxDisplayedTags = 3,
-  showClearAll = true,
   ariaLabel = "Search values"
 }) {
   const handleValueChange = React76.useCallback((newValues) => {
     onChange(newValues ?? []);
   }, [onChange]);
-  const removeValue = React76.useCallback((value) => {
-    onChange(selectedValues.filter((v) => v !== value));
-  }, [selectedValues, onChange]);
-  const clearAll = React76.useCallback(() => {
-    onChange([]);
-  }, [onChange]);
-  const displayedTags = selectedValues.slice(0, maxDisplayedTags);
-  const remainingCount = selectedValues.length - maxDisplayedTags;
+  const items = React76.useMemo(() => values.map(({
+    value
+  }) => value), [values]);
+  const countByValue = React76.useMemo(() => new Map(values.map(({
+    value,
+    count
+  }) => [value, count])), [values]);
+  const renderItem = React76.useCallback((value) => /* @__PURE__ */ React76__default.default.createElement(Combobox.Item, {
+    key: value,
+    value
+  }, /* @__PURE__ */ React76__default.default.createElement(Combobox.ItemIndicator, null), /* @__PURE__ */ React76__default.default.createElement("span", {
+    className: MultiSelectInput_default.itemLabel
+  }, value), /* @__PURE__ */ React76__default.default.createElement("span", {
+    className: MultiSelectInput_default.itemCount
+  }, "(", (countByValue.get(value) ?? 0).toLocaleString(), ")")), [countByValue]);
+  const renderChips = React76.useCallback((selectedItems) => /* @__PURE__ */ React76__default.default.createElement(React76__default.default.Fragment, null, selectedItems.map((value) => /* @__PURE__ */ React76__default.default.createElement(Combobox.Chip, {
+    key: value,
+    "aria-label": value
+  }, value, /* @__PURE__ */ React76__default.default.createElement(Combobox.ChipRemove, null))), /* @__PURE__ */ React76__default.default.createElement(Combobox.Input, {
+    placeholder: selectedItems.length > 0 ? "" : placeholder,
+    "aria-label": ariaLabel
+  })), [placeholder, ariaLabel]);
   return /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(MultiSelectInput_default.multiSelect, className),
+    className: classnames14__default.default(MultiSelectInput_default.multiSelect, className),
     style,
     "data-loading": isLoading
   }, error && /* @__PURE__ */ React76__default.default.createElement("div", {
@@ -1583,39 +1695,11 @@ function MultiSelectInputInner({
   }, isLoading ? "Loading options..." : "No options available"), (values.length > 0 || isLoading) && /* @__PURE__ */ React76__default.default.createElement(Combobox.Root, {
     multiple: true,
     value: selectedValues,
-    onValueChange: handleValueChange
+    onValueChange: handleValueChange,
+    items
   }, isLoading && /* @__PURE__ */ React76__default.default.createElement("div", {
     className: shared_default.loadingMessage
-  }, "Updating..."), selectedValues.length > 0 && /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: shared_default.tagContainer
-  }, displayedTags.map((value) => /* @__PURE__ */ React76__default.default.createElement("span", {
-    key: value,
-    className: shared_default.tag
-  }, value, /* @__PURE__ */ React76__default.default.createElement(button.Button, {
-    type: "button",
-    className: shared_default.tagRemove,
-    onClick: () => removeValue(value),
-    "aria-label": `Remove ${value}`
-  }, "\xD7"))), remainingCount > 0 && /* @__PURE__ */ React76__default.default.createElement("span", {
-    className: shared_default.tag
-  }, "+", remainingCount, " more")), /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: MultiSelectInput_default.inputRow
-  }, /* @__PURE__ */ React76__default.default.createElement(Combobox.SearchInput, {
-    placeholder: selectedValues.length > 0 ? `${selectedValues.length} selected` : placeholder,
-    "aria-label": ariaLabel
-  }), showClearAll && selectedValues.length > 0 && /* @__PURE__ */ React76__default.default.createElement(Combobox.Clear, {
-    className: MultiSelectInput_default.clearButton,
-    onClick: clearAll,
-    "aria-label": "Clear all selections"
-  })), /* @__PURE__ */ React76__default.default.createElement(Combobox.Portal, null, /* @__PURE__ */ React76__default.default.createElement(Combobox.Positioner, null, /* @__PURE__ */ React76__default.default.createElement(Combobox.Popup, null, values.length === 0 ? /* @__PURE__ */ React76__default.default.createElement(Combobox.Empty, null, "No options available") : values.map(({
-    value,
-    count
-  }) => /* @__PURE__ */ React76__default.default.createElement(Combobox.Item, {
-    key: value,
-    value
-  }, /* @__PURE__ */ React76__default.default.createElement("span", null, value), /* @__PURE__ */ React76__default.default.createElement("span", {
-    className: MultiSelectInput_default.itemCount
-  }, "(", count.toLocaleString(), ")"))))))));
+  }, "Updating..."), /* @__PURE__ */ React76__default.default.createElement(Combobox.Chips, null, /* @__PURE__ */ React76__default.default.createElement(Combobox.Value, null, renderChips)), /* @__PURE__ */ React76__default.default.createElement(Combobox.Portal, null, /* @__PURE__ */ React76__default.default.createElement(Combobox.Positioner, null, /* @__PURE__ */ React76__default.default.createElement(Combobox.Popup, null, /* @__PURE__ */ React76__default.default.createElement(Combobox.Empty, null, "No matching options"), /* @__PURE__ */ React76__default.default.createElement(Combobox.List, null, renderItem))))));
 }
 var MultiSelectInput = /* @__PURE__ */ React76.memo(MultiSelectInputInner);
 
@@ -1638,7 +1722,7 @@ function NullValueWrapperInner({
     onIncludeNullChange(!includeNull);
   }, [includeNull, onIncludeNullChange]);
   return /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(NullValueWrapper_default.nullWrapper, className),
+    className: classnames14__default.default(NullValueWrapper_default.nullWrapper, className),
     style
   }, children, /* @__PURE__ */ React76__default.default.createElement("div", {
     className: NullValueWrapper_default.nullValueRow,
@@ -1718,7 +1802,7 @@ function SingleDateInputInner({
     onChange(void 0);
   }, [onChange]);
   return /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(SingleDateInput_default.singleDate, className),
+    className: classnames14__default.default(SingleDateInput_default.singleDate, className),
     style
   }, /* @__PURE__ */ React76__default.default.createElement("div", {
     className: SingleDateInput_default.dateContainer
@@ -1739,80 +1823,6 @@ function SingleDateInputInner({
 }
 var SingleDateInput = /* @__PURE__ */ React76.memo(SingleDateInputInner);
 
-// src/base-components/select/Select.module.css
-var Select_default = {};
-
-// src/base-components/select/Select.tsx
-function _extends8() {
-  return _extends8 = Object.assign ? Object.assign.bind() : function(n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends8.apply(null, arguments);
-}
-function SelectRoot({
-  children,
-  ...rest
-}) {
-  return /* @__PURE__ */ React76__default.default.createElement(select.Select.Root, rest, children);
-}
-function SelectTrigger({
-  className,
-  placeholder,
-  children,
-  ...rest
-}) {
-  return /* @__PURE__ */ React76__default.default.createElement(select.Select.Trigger, _extends8({
-    className: classnames13__default.default(Select_default.osdkSelectTrigger, className)
-  }, rest), children ?? /* @__PURE__ */ React76__default.default.createElement(React76__default.default.Fragment, null, /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: Select_default.osdkSelectValueContainer
-  }, /* @__PURE__ */ React76__default.default.createElement(select.Select.Value, {
-    className: Select_default.osdkSelectValue
-  }), placeholder != null && /* @__PURE__ */ React76__default.default.createElement("span", {
-    className: Select_default.osdkSelectPlaceholder
-  }, placeholder)), /* @__PURE__ */ React76__default.default.createElement(select.Select.Icon, {
-    className: Select_default.osdkSelectIcon
-  }, /* @__PURE__ */ React76__default.default.createElement(icons.CaretDown, null))));
-}
-function SelectPositioner({
-  className,
-  children,
-  ...rest
-}) {
-  return /* @__PURE__ */ React76__default.default.createElement(select.Select.Positioner, _extends8({
-    className: classnames13__default.default(Select_default.osdkSelectPositioner, className),
-    sideOffset: 4
-  }, rest), children);
-}
-function SelectPopup({
-  className,
-  children,
-  ...rest
-}) {
-  return /* @__PURE__ */ React76__default.default.createElement(select.Select.Popup, _extends8({
-    className: classnames13__default.default(Select_default.osdkSelectPopup, className)
-  }, rest), children);
-}
-function SelectItem({
-  className,
-  children,
-  ...rest
-}) {
-  return /* @__PURE__ */ React76__default.default.createElement(select.Select.Item, _extends8({
-    className: classnames13__default.default(Select_default.osdkSelectItem, className)
-  }, rest), /* @__PURE__ */ React76__default.default.createElement(select.Select.ItemText, null, children));
-}
-var Select = {
-  Root: SelectRoot,
-  Trigger: SelectTrigger,
-  Portal: select.Select.Portal,
-  Positioner: SelectPositioner,
-  Popup: SelectPopup,
-  Item: SelectItem
-};
-
 // src/filter-list/base/inputs/SingleSelectInput.module.css
 var SingleSelectInput_default = {};
 
@@ -1833,21 +1843,23 @@ function SingleSelectInputInner({
   const handleValueChange = React76.useCallback((value) => {
     onChange(value ?? void 0);
   }, [onChange]);
-  const handleClear = React76.useCallback(() => {
-    onChange(void 0);
-  }, [onChange]);
-  const items = React76.useMemo(() => {
-    const result = {};
-    for (const {
-      value,
-      count
-    } of values) {
-      result[value] = showCounts ? `${value} (${count.toLocaleString()})` : value;
-    }
-    return result;
-  }, [values, showCounts]);
+  const items = React76.useMemo(() => values.map(({
+    value
+  }) => value), [values]);
+  const countByValue = React76.useMemo(() => new Map(values.map(({
+    value,
+    count
+  }) => [value, count])), [values]);
+  const renderItem = React76.useCallback((value) => /* @__PURE__ */ React76__default.default.createElement(Combobox.Item, {
+    key: value,
+    value
+  }, /* @__PURE__ */ React76__default.default.createElement(Combobox.ItemIndicator, null), /* @__PURE__ */ React76__default.default.createElement("span", {
+    className: SingleSelectInput_default.itemLabel
+  }, value), showCounts && /* @__PURE__ */ React76__default.default.createElement("span", {
+    className: SingleSelectInput_default.itemCount
+  }, "(", (countByValue.get(value) ?? 0).toLocaleString(), ")")), [countByValue, showCounts]);
   return /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(SingleSelectInput_default.singleSelect, className),
+    className: classnames14__default.default(SingleSelectInput_default.singleSelect, className),
     style,
     "data-loading": isLoading
   }, isLoading && /* @__PURE__ */ React76__default.default.createElement("div", {
@@ -1858,25 +1870,16 @@ function SingleSelectInputInner({
     className: shared_default.emptyMessage
   }, "No options available"), (values.length > 0 || isLoading) && /* @__PURE__ */ React76__default.default.createElement("div", {
     className: SingleSelectInput_default.selectContainer
-  }, /* @__PURE__ */ React76__default.default.createElement(Select.Root, {
+  }, /* @__PURE__ */ React76__default.default.createElement(Combobox.Root, {
     value: selectedValue ?? null,
     onValueChange: handleValueChange,
     items
-  }, /* @__PURE__ */ React76__default.default.createElement(Select.Trigger, {
+  }, /* @__PURE__ */ React76__default.default.createElement(Combobox.SearchInput, {
     placeholder,
     "aria-label": ariaLabel
-  }), /* @__PURE__ */ React76__default.default.createElement(Select.Portal, null, /* @__PURE__ */ React76__default.default.createElement(Select.Positioner, null, /* @__PURE__ */ React76__default.default.createElement(Select.Popup, null, values.map(({
-    value,
-    count
-  }) => /* @__PURE__ */ React76__default.default.createElement(Select.Item, {
-    key: value,
-    value
-  }, showCounts ? `${value} (${count.toLocaleString()})` : value)))))), showClearButton && selectedValue !== void 0 && /* @__PURE__ */ React76__default.default.createElement(button.Button, {
-    type: "button",
-    className: SingleSelectInput_default.clearButton,
-    onClick: handleClear,
-    "aria-label": "Clear selection"
-  }, /* @__PURE__ */ React76__default.default.createElement(icons.Cross, null))));
+  }), showClearButton && selectedValue !== void 0 && /* @__PURE__ */ React76__default.default.createElement(Combobox.Clear, {
+    className: SingleSelectInput_default.clearButton
+  }), /* @__PURE__ */ React76__default.default.createElement(Combobox.Portal, null, /* @__PURE__ */ React76__default.default.createElement(Combobox.Positioner, null, /* @__PURE__ */ React76__default.default.createElement(Combobox.Popup, null, /* @__PURE__ */ React76__default.default.createElement(Combobox.Empty, null, "No matching options"), /* @__PURE__ */ React76__default.default.createElement(Combobox.List, null, renderItem)))))));
 }
 var SingleSelectInput = /* @__PURE__ */ React76.memo(SingleSelectInputInner);
 
@@ -1960,7 +1963,7 @@ function TextTagsInputInner({
     }
   }, [tags, onChange]);
   return /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(TextTagsInput_default.textTags, className),
+    className: classnames14__default.default(TextTagsInput_default.textTags, className),
     style,
     "data-loading": isLoading
   }, error && /* @__PURE__ */ React76__default.default.createElement("div", {
@@ -2021,7 +2024,7 @@ function TimelineInputInner({
   const startInputMax = React76.useMemo(() => endDate ?? maxDate, [endDate, maxDate]);
   const endInputMin = React76.useMemo(() => startDate ?? minDate, [startDate, minDate]);
   return /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(TimelineInput_default.timeline, className)
+    className: classnames14__default.default(TimelineInput_default.timeline, className)
   }, /* @__PURE__ */ React76__default.default.createElement("div", {
     className: TimelineInput_default.labels
   }, /* @__PURE__ */ React76__default.default.createElement("span", null, formatDateForDisplay(startDate, "\u2014")), /* @__PURE__ */ React76__default.default.createElement("span", null, "to"), /* @__PURE__ */ React76__default.default.createElement("span", null, formatDateForDisplay(endDate, "\u2014")), (startDate || endDate) && /* @__PURE__ */ React76__default.default.createElement(button.Button, {
@@ -2387,7 +2390,7 @@ function LinkedPropertyInputInner({
     }
   })();
   return /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(LinkedPropertyInput_default.linkedProperty, className),
+    className: classnames14__default.default(LinkedPropertyInput_default.linkedProperty, className),
     style
   }, content);
 }
@@ -2659,11 +2662,18 @@ function ExcludeDropdownInner({
 var ExcludeDropdown = /* @__PURE__ */ React76.memo(ExcludeDropdownInner);
 
 // src/filter-list/base/FilterInputExcludeRow.tsx
+function getSelectedCount(filterState) {
+  if (!filterState) return 0;
+  if (filterState.type === "EXACT_MATCH") return filterState.values.length;
+  if (filterState.type === "SELECT") return filterState.selectedValues.length;
+  return 0;
+}
 function FilterInputExcludeRowInner({
   excludeRowOpen,
   filterState,
   onFilterStateChanged,
   totalValueCount,
+  onClearAll,
   children
 }) {
   const handleToggleExclude = React76.useCallback(() => {
@@ -2676,12 +2686,13 @@ function FilterInputExcludeRowInner({
   }, [filterState, onFilterStateChanged]);
   const isExcluding = filterState?.isExcluding ?? false;
   const isOpen = excludeRowOpen ?? false;
+  const selectedCount = React76.useMemo(() => getSelectedCount(filterState), [filterState]);
   if (!supportsExcluding(filterState)) {
     return /* @__PURE__ */ React76__default.default.createElement(React76__default.default.Fragment, null, children);
   }
   return /* @__PURE__ */ React76__default.default.createElement(React76__default.default.Fragment, null, /* @__PURE__ */ React76__default.default.createElement("div", {
     "data-exclude-row": true,
-    className: classnames13__default.default(FilterListItem_default.excludeRow, {
+    className: classnames14__default.default(FilterListItem_default.excludeRow, {
       [FilterListItem_default.excludeRowVisible]: isOpen
     })
   }, /* @__PURE__ */ React76__default.default.createElement(ExcludeDropdown, {
@@ -2690,7 +2701,10 @@ function FilterInputExcludeRowInner({
   }), totalValueCount != null && totalValueCount > 0 && /* @__PURE__ */ React76__default.default.createElement("span", {
     className: FilterListItem_default.excludeCountLabel,
     title: "Approximate count of unique values"
-  }, totalValueCount.toLocaleString(), " values")), children);
+  }, selectedCount.toLocaleString(), " of", " ", totalValueCount.toLocaleString(), " values"), onClearAll && selectedCount > 0 && /* @__PURE__ */ React76__default.default.createElement(button.Button, {
+    className: FilterListItem_default.clearAllButton,
+    onClick: onClearAll
+  }, "Clear all")), children);
 }
 var FilterInputExcludeRow = /* @__PURE__ */ React76.memo(FilterInputExcludeRowInner);
 function ContainsTextFilterInputInner({
@@ -2708,7 +2722,7 @@ function ContainsTextFilterInputInner({
   return /* @__PURE__ */ React76__default.default.createElement(ContainsTextInput, {
     value,
     onChange: handleChange,
-    placeholder: `Search ${propertyKey}...`
+    placeholder: "Search..."
   });
 }
 var ContainsTextFilterInput = /* @__PURE__ */ React76.memo(ContainsTextFilterInputInner);
@@ -2815,6 +2829,13 @@ function ListogramFilterInputInner({
 }) {
   const selectedValues = React76.useMemo(() => filterState?.type === "EXACT_MATCH" ? coerceToStringArray(filterState.values) : [], [filterState]);
   const isExcluding = filterState?.isExcluding ?? false;
+  const handleClearAll = React76.useCallback(() => {
+    onFilterStateChanged({
+      type: "EXACT_MATCH",
+      values: [],
+      isExcluding
+    });
+  }, [onFilterStateChanged, isExcluding]);
   const handleChange = React76.useCallback((values) => {
     onFilterStateChanged({
       type: "EXACT_MATCH",
@@ -2837,7 +2858,8 @@ function ListogramFilterInputInner({
     excludeRowOpen,
     filterState,
     onFilterStateChanged,
-    totalValueCount: data.length
+    totalValueCount: data.length,
+    onClearAll: handleClearAll
   }, /* @__PURE__ */ React76__default.default.createElement(ListogramInput, {
     values: data,
     maxCount,
@@ -2883,6 +2905,13 @@ function MultiSelectFilterInputInner({
 }) {
   const selectedValues = React76.useMemo(() => filterState?.type === "SELECT" ? coerceToStringArray(filterState.selectedValues) : [], [filterState]);
   const isExcluding = filterState?.isExcluding ?? false;
+  const handleClearAll = React76.useCallback(() => {
+    onFilterStateChanged({
+      type: "SELECT",
+      selectedValues: [],
+      isExcluding
+    });
+  }, [onFilterStateChanged, isExcluding]);
   const handleChange = React76.useCallback((selectedValues2) => {
     onFilterStateChanged({
       type: "SELECT",
@@ -2902,7 +2931,8 @@ function MultiSelectFilterInputInner({
     excludeRowOpen,
     filterState,
     onFilterStateChanged,
-    totalValueCount: data.length
+    totalValueCount: data.length,
+    onClearAll: handleClearAll
   }, /* @__PURE__ */ React76__default.default.createElement(MultiSelectInput, {
     values: data,
     isLoading,
@@ -3031,6 +3061,13 @@ function SingleSelectFilterInputInner({
 }) {
   const selectedValue = React76.useMemo(() => filterState?.type === "SELECT" ? coerceToString(filterState.selectedValues[0]) : void 0, [filterState]);
   const isExcluding = filterState?.isExcluding ?? false;
+  const handleClearAll = React76.useCallback(() => {
+    onFilterStateChanged({
+      type: "SELECT",
+      selectedValues: [],
+      isExcluding
+    });
+  }, [onFilterStateChanged, isExcluding]);
   const handleChange = React76.useCallback((value) => {
     onFilterStateChanged({
       type: "SELECT",
@@ -3050,7 +3087,8 @@ function SingleSelectFilterInputInner({
     excludeRowOpen,
     filterState,
     onFilterStateChanged,
-    totalValueCount: data.length
+    totalValueCount: data.length,
+    onClearAll: handleClearAll
   }, /* @__PURE__ */ React76__default.default.createElement(SingleSelectInput, {
     values: data,
     isLoading,
@@ -3072,6 +3110,13 @@ function TextTagsFilterInputInner({
 }) {
   const tags = React76.useMemo(() => filterState?.type === "EXACT_MATCH" ? coerceToStringArray(filterState.values) : [], [filterState]);
   const isExcluding = filterState?.isExcluding ?? false;
+  const handleClearAll = React76.useCallback(() => {
+    onFilterStateChanged({
+      type: "EXACT_MATCH",
+      values: [],
+      isExcluding
+    });
+  }, [onFilterStateChanged, isExcluding]);
   const handleChange = React76.useCallback((values) => {
     onFilterStateChanged({
       type: "EXACT_MATCH",
@@ -3091,7 +3136,8 @@ function TextTagsFilterInputInner({
     excludeRowOpen,
     filterState,
     onFilterStateChanged,
-    totalValueCount: data.length
+    totalValueCount: data.length,
+    onClearAll: handleClearAll
   }, /* @__PURE__ */ React76__default.default.createElement(TextTagsInput, {
     suggestions: data,
     isLoading,
@@ -3232,7 +3278,7 @@ function PropertyFilterInputInner({
         whereClause,
         colorMap: definition.colorMap,
         displayMode: definition.listogramConfig?.displayMode,
-        maxVisibleItems: definition.listogramConfig?.maxVisibleItems,
+        maxVisibleItems: definition.listogramConfig?.maxVisibleItems ?? 5,
         searchQuery,
         excludeRowOpen
       });
@@ -3808,6 +3854,13 @@ function useFilterListState(props) {
       onFilterStateChanged?.(definition, state);
     }
   }, [filterDefinitions, propertyTypes, onFilterClauseChanged, onFilterStateChanged]);
+  const clearFilterState = React76.useCallback((filterKey) => {
+    const clearedStates = new Map(filterStates);
+    clearedStates.delete(filterKey);
+    setFilterStates(clearedStates);
+    const newWhereClause = buildWhereClause(filterDefinitions, clearedStates, propertyTypes);
+    onFilterClauseChanged?.(newWhereClause);
+  }, [filterStates, filterDefinitions, propertyTypes, onFilterClauseChanged]);
   const whereClause = React76.useMemo(() => buildWhereClause(filterDefinitions, filterStates, propertyTypes), [filterDefinitions, filterStates, propertyTypes]);
   const perFilterWhereClauses = React76.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
@@ -3838,11 +3891,12 @@ function useFilterListState(props) {
   return React76.useMemo(() => ({
     filterStates,
     setFilterState,
+    clearFilterState,
     whereClause,
     perFilterWhereClauses,
     activeFilterCount,
     reset
-  }), [filterStates, setFilterState, whereClause, perFilterWhereClauses, activeFilterCount, reset]);
+  }), [filterStates, setFilterState, clearFilterState, whereClause, perFilterWhereClauses, activeFilterCount, reset]);
 }
 function useFilterVisibility(filterDefinitions, getFilterKey2, getIsVisible) {
   const [visibilityOverrides, setVisibilityOverrides] = React76.useState(() => /* @__PURE__ */ new Map());
@@ -3944,6 +3998,7 @@ function FilterList(props) {
   const {
     filterStates,
     setFilterState,
+    clearFilterState,
     perFilterWhereClauses,
     activeFilterCount,
     reset
@@ -3971,11 +4026,12 @@ function FilterList(props) {
   }, [filterDefinitions]);
   const effectiveVisibleDefinitions = uncontrolledAddFilterMode ? managedVisibleDefinitions : simpleVisibleDefinitions;
   const handleFilterRemoved = React76.useCallback((filterKey) => {
+    clearFilterState(filterKey);
     if (uncontrolledAddFilterMode) {
       hideFilter(filterKey);
     }
     onFilterRemoved?.(filterKey);
-  }, [uncontrolledAddFilterMode, hideFilter, onFilterRemoved]);
+  }, [clearFilterState, uncontrolledAddFilterMode, hideFilter, onFilterRemoved]);
   const handleFilterShown = React76.useCallback((filterKey) => {
     showFilter(filterKey);
     onFilterAdded?.(filterKey, filterDefinitions ?? []);
@@ -4074,7 +4130,7 @@ var TableCell_default = {};
 // src/object-table/LoadingCell.tsx
 function LoadingCellContent() {
   return /* @__PURE__ */ React76__default.default.createElement(SkeletonBar, {
-    className: classnames13__default.default(LoadingCell_default.osdkLoadingCell, LoadingCell_default.osdkCellSkeleton)
+    className: classnames14__default.default(LoadingCell_default.osdkLoadingCell, LoadingCell_default.osdkCellSkeleton)
   });
 }
 function LoadingCell({
@@ -4223,7 +4279,7 @@ function EditableCellInner({
   return /* @__PURE__ */ React76__default.default.createElement(chunkMRRRZN44_cjs.Tooltip.Provider, null, /* @__PURE__ */ React76__default.default.createElement(chunkMRRRZN44_cjs.Tooltip.Root, {
     disabled: !hasValidationError
   }, /* @__PURE__ */ React76__default.default.createElement(chunkMRRRZN44_cjs.Tooltip.Trigger, null, /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(EditableCell_default.osdkEditableCell, {
+    className: classnames14__default.default(EditableCell_default.osdkEditableCell, {
       [EditableCell_default.error]: hasValidationError,
       [EditableCell_default.osdkEditedInput]: isEdited
     })
@@ -5102,14 +5158,14 @@ var TableBody_default = {};
 var DraggableList_default = {};
 
 // src/base-components/draggable-list/DraggableList.tsx
-function _extends9() {
-  return _extends9 = Object.assign ? Object.assign.bind() : function(n) {
+function _extends8() {
+  return _extends8 = Object.assign ? Object.assign.bind() : function(n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends9.apply(null, arguments);
+  }, _extends8.apply(null, arguments);
 }
 function DraggableListItem({
   item,
@@ -5140,7 +5196,7 @@ function DraggableListItem({
     style,
     className: DraggableList_default.draggableItem,
     "data-dragging": isDragging
-  }, /* @__PURE__ */ React76__default.default.createElement("div", _extends9({
+  }, /* @__PURE__ */ React76__default.default.createElement("div", _extends8({
     className: DraggableList_default.dragHandle,
     "aria-label": `Reorder ${item.label}`
   }, attributes, listeners), /* @__PURE__ */ React76__default.default.createElement(icons.DragHandleVertical, {
@@ -5188,7 +5244,7 @@ function DraggableList({
   const DndContext2 = core.DndContext;
   return /* @__PURE__ */ React76__default.default.createElement("div", {
     ref: containerRef,
-    className: classnames13__default.default(DraggableList_default.draggableListContainer, className)
+    className: classnames14__default.default(DraggableList_default.draggableListContainer, className)
   }, /* @__PURE__ */ React76__default.default.createElement(DndContext2, {
     sensors,
     collisionDetection: core.closestCenter,
@@ -5232,33 +5288,6 @@ var useKeyboardEvents = (containerRef) => {
   }, [containerRef]);
 };
 
-// src/base-components/search-bar/SearchBar.module.css
-var SearchBar_default = {};
-
-// src/base-components/search-bar/SearchBar.tsx
-function SearchBar({
-  value,
-  onChange,
-  placeholder = "Search",
-  "aria-label": ariaLabel,
-  className,
-  onKeyDown
-}) {
-  return /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(SearchBar_default.searchBar, className)
-  }, /* @__PURE__ */ React76__default.default.createElement(icons.Search, {
-    className: SearchBar_default.searchIcon
-  }), /* @__PURE__ */ React76__default.default.createElement(input.Input, {
-    type: "text",
-    placeholder,
-    "aria-label": ariaLabel ?? placeholder,
-    value,
-    onChange,
-    className: SearchBar_default.searchInput,
-    onKeyDown
-  }));
-}
-
 // src/object-table/ColumnConfigDialog.module.css
 var ColumnConfigDialog_default = {};
 
@@ -5426,7 +5455,7 @@ function AvailableColumnsList({
   return /* @__PURE__ */ React76__default.default.createElement("div", {
     className: ColumnConfigDialog_default.availableColumnsContainer
   }, /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(ColumnConfigDialog_default.sectionHeader, ColumnConfigDialog_default.sectionTitle)
+    className: classnames14__default.default(ColumnConfigDialog_default.sectionHeader, ColumnConfigDialog_default.sectionTitle)
   }, "Add or Remove Columns"), /* @__PURE__ */ React76__default.default.createElement(SearchBar, {
     value: searchQuery,
     onChange: onSearchChange,
@@ -5513,7 +5542,6 @@ function MultiColumnSortDialog({
   columnOptions
 }) {
   const [selectedSortColumns, setSelectedSortColumns] = React76.useState([]);
-  const [menuSearchQuery, setMenuSearchQuery] = React76.useState("");
   React76.useEffect(() => {
     if (isOpen) {
       const selectedColumns = [];
@@ -5556,21 +5584,16 @@ function MultiColumnSortDialog({
     onClose();
   }, [selectedSortColumns, onApply, onClose]);
   const availableColumns = React76.useMemo(() => columnOptions.filter((col) => col.canSort && !selectedSortColumns.some((selected) => selected.id === col.id)), [columnOptions, selectedSortColumns]);
-  const filteredAvailableColumns = React76.useMemo(() => {
-    const query = menuSearchQuery.toLowerCase().trim();
-    if (!query) {
-      return availableColumns;
-    }
-    return availableColumns.filter((col) => col.name.toLowerCase().includes(query));
-  }, [availableColumns, menuSearchQuery]);
-  const handleMenuSearchChange = React76.useCallback((event) => {
-    setMenuSearchQuery(event.target.value);
-  }, []);
-  const handleMenuOpenChange = React76.useCallback((open) => {
-    if (open) {
-      setMenuSearchQuery("");
-    }
-  }, []);
+  const searchableMenuItems = React76.useMemo(() => availableColumns.map((col) => ({
+    key: col.id,
+    label: col.name
+  })), [availableColumns]);
+  const handleMenuItemSelected = React76.useCallback((key) => {
+    const column = availableColumns.find((col) => col.id === key);
+    if (column) {
+      handleAddColumn(column);
+    }
+  }, [availableColumns, handleAddColumn]);
   const sortableItems = React76.useMemo(() => {
     return selectedSortColumns.map((item) => ({
       id: item.id,
@@ -5578,7 +5601,7 @@ function MultiColumnSortDialog({
       content: /* @__PURE__ */ React76__default.default.createElement("div", {
         className: MultiColumnSortDialog_default.sortColumnItem
       }, /* @__PURE__ */ React76__default.default.createElement("span", {
-        className: classnames13__default.default(MultiColumnSortDialog_default.sortColumnName, MultiColumnSortDialog_default.truncate)
+        className: classnames14__default.default(MultiColumnSortDialog_default.sortColumnName, MultiColumnSortDialog_default.truncate)
       }, item.name), /* @__PURE__ */ React76__default.default.createElement(button.Button, {
         className: MultiColumnSortDialog_default.sortDirectionButton,
         onClick: () => handleToggleSortDirection(item.id),
@@ -5596,9 +5619,6 @@ function MultiColumnSortDialog({
     variant: "primary",
     onClick: handleApply
   }, "Apply")), [handleApply, onClose]);
-  const handleKeyDown = React76.useCallback((event) => {
-    event.stopPropagation();
-  }, []);
   return /* @__PURE__ */ React76__default.default.createElement(chunkMRRRZN44_cjs.Dialog, {
     isOpen,
     onOpenChange: onClose,
@@ -5611,49 +5631,23 @@ function MultiColumnSortDialog({
     onReorder: handleReorderSortColumns,
     onRemove: handleRemoveSortColumn,
     className: MultiColumnSortDialog_default.sortableList
-  }), /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Root, {
-    onOpenChange: handleMenuOpenChange
-  }, /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Trigger, {
-    className: MultiColumnSortDialog_default.addColumnButton,
+  }), /* @__PURE__ */ React76__default.default.createElement(SearchableMenu, {
+    items: searchableMenuItems,
+    onItemSelected: handleMenuItemSelected,
+    trigger: /* @__PURE__ */ React76__default.default.createElement(React76__default.default.Fragment, null, /* @__PURE__ */ React76__default.default.createElement(icons.Add, {
+      className: MultiColumnSortDialog_default.addIcon
+    }), /* @__PURE__ */ React76__default.default.createElement("span", {
+      className: MultiColumnSortDialog_default.addColumnText
+    }, "Add Column to Sort"), /* @__PURE__ */ React76__default.default.createElement(icons.CaretDown, null)),
+    triggerClassName: MultiColumnSortDialog_default.addColumnButton,
     disabled: availableColumns.length === 0,
-    "aria-label": "Add column to sort"
-  }, /* @__PURE__ */ React76__default.default.createElement(icons.Add, {
-    className: MultiColumnSortDialog_default.addIcon
-  }), /* @__PURE__ */ React76__default.default.createElement("span", {
-    className: MultiColumnSortDialog_default.addColumnText
-  }, "Add Column to Sort"), /* @__PURE__ */ React76__default.default.createElement(icons.CaretDown, null)), /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Portal, null, /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Positioner, {
-    className: MultiColumnSortDialog_default.menuPositioner,
-    sideOffset: 4
-  }, /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Popup, {
-    className: MultiColumnSortDialog_default.dropdownMenu
-  }, /* @__PURE__ */ React76__default.default.createElement(SearchBar, {
-    value: menuSearchQuery,
-    onChange: handleMenuSearchChange,
-    placeholder: "Search columns",
-    "aria-label": "Search columns to sort",
-    className: MultiColumnSortDialog_default.menuSearchContainer,
-    onKeyDown: handleKeyDown
-  }), filteredAvailableColumns.map((column) => /* @__PURE__ */ React76__default.default.createElement(AvailableColumnMenuItem, {
-    key: column.id,
-    column,
-    onAddColumn: handleAddColumn
-  })), filteredAvailableColumns.length === 0 && /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: MultiColumnSortDialog_default.menuEmptyState
-  }, "No matching columns")))))));
+    searchPlaceholder: "Search columns",
+    emptyMessage: "No matching columns"
+  })));
 }
 var DialogTitle2 = /* @__PURE__ */ React76__default.default.createElement("div", {
   className: MultiColumnSortDialog_default.title
 }, /* @__PURE__ */ React76__default.default.createElement(icons.Cog, null), "Sort on Multiple Columns");
-function AvailableColumnMenuItem({
-  column,
-  onAddColumn
-}) {
-  const onClick = React76.useCallback(() => onAddColumn(column), [onAddColumn, column]);
-  return /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Item, {
-    className: classnames13__default.default(MultiColumnSortDialog_default.dropdownItem, MultiColumnSortDialog_default.truncate),
-    onClick
-  }, column.name);
-}
 
 // src/object-table/TableHeader.module.css
 var TableHeader_default = {};
@@ -5682,7 +5676,7 @@ function HeaderMenuItem({
 }) {
   return /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Item, {
     closeOnClick: true,
-    className: classnames13__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderMenuItem, active && TableHeaderWithPopover_default.osdkHeaderActiveMenuItem),
+    className: classnames14__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderMenuItem, active && TableHeaderWithPopover_default.osdkHeaderActiveMenuItem),
     onClick
   }, /* @__PURE__ */ React76__default.default.createElement(Icon, {
     className: TableHeaderWithPopover_default.osdkHeaderIcon
@@ -5770,16 +5764,16 @@ function TableHeaderWithPopover({
     open: isOpen,
     onOpenChange: setIsOpen
   }, /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContainer),
+    className: classnames14__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContainer),
     onContextMenu: handleInteraction
   }, /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContentLeft)
+    className: classnames14__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContentLeft)
   }, isColumnPinned && /* @__PURE__ */ React76__default.default.createElement(icons.Pin, {
     className: TableHeaderWithPopover_default.osdkHeaderIcon
   }), /* @__PURE__ */ React76__default.default.createElement(TableHeaderContent, {
     header
   })), /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContentRight)
+    className: classnames14__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContentRight)
   }, isSorted && /* @__PURE__ */ React76__default.default.createElement("div", {
     className: TableHeaderWithPopover_default.osdkCenterContainer
   }, isSorted === "asc" ? /* @__PURE__ */ React76__default.default.createElement(icons.SortAlphabetical, {
@@ -5790,7 +5784,7 @@ function TableHeaderWithPopover({
     className: TableHeaderWithPopover_default.sortIndex
   }, sortIndex + 1)), hasAnyMenuItems && /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Trigger, {
     "aria-label": `Open header menu for column with id=${header.column.id}`,
-    className: classnames13__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkHeaderPopoverTrigger)
+    className: classnames14__default.default(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkHeaderPopoverTrigger)
   }, /* @__PURE__ */ React76__default.default.createElement(icons.ChevronDown, {
     className: TableHeaderWithPopover_default.osdkHeaderIcon
   }))), /* @__PURE__ */ React76__default.default.createElement(menu.Menu.Portal, {
@@ -5935,7 +5929,7 @@ function TableHeader({
     return /* @__PURE__ */ React76__default.default.createElement("th", {
       key: header.id,
       "data-pinned": header.column.getIsPinned(),
-      className: classnames13__default.default(TableHeader_default.osdkTableHeaderCell, {
+      className: classnames14__default.default(TableHeader_default.osdkTableHeaderCell, {
         [TableHeader_default.osdkTableSelectionHeaderCell]: isSelectColumn
       }),
       style: columnStyles
@@ -6029,7 +6023,7 @@ function LoadingStateTable({
         width
       }
     }, /* @__PURE__ */ React76__default.default.createElement(SkeletonBar, {
-      className: classnames13__default.default(TableHeader_default.osdkLoadingHeaderCell, LoadingCell_default.osdkCellSkeleton)
+      className: classnames14__default.default(TableHeader_default.osdkLoadingHeaderCell, LoadingCell_default.osdkCellSkeleton)
     }));
   }))), /* @__PURE__ */ React76__default.default.createElement("tbody", {
     className: TableBody_default.osdkTableBody,
@@ -6376,7 +6370,7 @@ function BaseTable({
     };
   }, []);
   return /* @__PURE__ */ React76__default.default.createElement("div", {
-    className: classnames13__default.default(Table_default.osdkTableWrapper, className)
+    className: classnames14__default.default(Table_default.osdkTableWrapper, className)
   }, /* @__PURE__ */ React76__default.default.createElement("div", {
     ref: tableContainerRef,
     className: Table_default.osdkTableContainer,
@@ -6608,7 +6602,7 @@ function AnnotationItem({
     handleClick,
     handleKeyDown
   } = useAnnotationHandlers(annotation, onClick);
-  const className = classnames13__default.default(PdfViewerAnnotationLayer_default.annotation, PdfViewerAnnotationLayer_default[annotation.type]);
+  const className = classnames14__default.default(PdfViewerAnnotationLayer_default.annotation, PdfViewerAnnotationLayer_default[annotation.type]);
   const multiRects = annotation.rects;
   const hasMultipleRects = multiRects != null && multiRects.length > 1;
   const style = React76.useMemo(() => computeRectStyle(annotation.rect, pageHeight, scale, annotation.color), [annotation, pageHeight, scale]);
@@ -6783,7 +6777,7 @@ function PdfViewerOutlineItem({
       onClick(item.pageNumber);
     }
   }, [onClick, item.pageNumber]);
-  const itemClassName = classnames13__default.default(PdfViewerOutlineSidebar_default.outlineItem, isActive && PdfViewerOutlineSidebar_default.outlineItemActive, item.bold && PdfViewerOutlineSidebar_default.outlineItemBold, item.italic && PdfViewerOutlineSidebar_default.outlineItemItalic);
+  const itemClassName = classnames14__default.default(PdfViewerOutlineSidebar_default.outlineItem, isActive && PdfViewerOutlineSidebar_default.outlineItemActive, item.bold && PdfViewerOutlineSidebar_default.outlineItemBold, item.italic && PdfViewerOutlineSidebar_default.outlineItemItalic);
   const paddingLeft = INDENT_PER_DEPTH * item.depth + 12;
   return /* @__PURE__ */ React76__default.default.createElement("div", {
     className: itemClassName,
@@ -6965,7 +6959,7 @@ function PdfViewerThumbnail({
       onClick();
     }
   }, [onClick]);
-  const containerClassName = classnames13__default.default(PdfViewerThumbnail_default.thumbnailContainer, isActive && PdfViewerThumbnail_default.active);
+  const containerClassName = classnames14__default.default(PdfViewerThumbnail_default.thumbnailContainer, isActive && PdfViewerThumbnail_default.active);
   return /* @__PURE__ */ React76__default.default.createElement("div", {
     className: containerClassName,
     onClick,
@@ -7198,7 +7192,7 @@ function PdfViewerToolbar({
   }))), enableHighlight && /* @__PURE__ */ React76__default.default.createElement(React76__default.default.Fragment, null, /* @__PURE__ */ React76__default.default.createElement("div", {
     className: PdfViewerToolbar_default.separator
   }), /* @__PURE__ */ React76__default.default.createElement(button.Button, {
-    className: classnames13__default.default(PdfViewerToolbar_default.toolbarButton, highlightModeActive && PdfViewerToolbar_default.toolbarButtonActive),
+    className: classnames14__default.default(PdfViewerToolbar_default.toolbarButton, highlightModeActive && PdfViewerToolbar_default.toolbarButtonActive),
     onClick: onHighlightToggle,
     "aria-label": highlightModeActive ? "Disable highlight mode" : "Enable highlight mode",
     title: highlightModeActive ? "Disable highlight mode" : "Enable highlight mode",
@@ -8376,7 +8370,7 @@ var BasePdfViewer = /* @__PURE__ */ React76.forwardRef(function BasePdfViewer2({
     onFormChange
   });
   const annotationsByPage = usePdfAnnotationsByPage(annotations);
-  const rootClassName = classnames13__default.default(PdfViewer_default.pdfViewer, className);
+  const rootClassName = classnames14__default.default(PdfViewer_default.pdfViewer, className);
   if (viewer.loading) {
     return /* @__PURE__ */ React76__default.default.createElement("div", {
       className: rootClassName
@@ -8513,7 +8507,7 @@ function PdfViewerContent({
   React76.useEffect(function clearInitialMount() {
     isInitialMountRef.current = false;
   }, []);
-  const rootClassName = classnames13__default.default(PdfViewer_default.pdfViewer, className);
+  const rootClassName = classnames14__default.default(PdfViewer_default.pdfViewer, className);
   if (viewer.loading) {
     return /* @__PURE__ */ React76__default.default.createElement("div", {
       className: rootClassName
@@ -8633,14 +8627,14 @@ function usePdfViewerInstance(options) {
     outlineIcons
   }), [viewer, highlightEnabled, highlightModeActive, toggleHighlightMode, hasFormFields, submitFormData, annotations, annotationsByPage, onAnnotationClick, enableDownload, enableFormSave, outlineIcons]);
 }
-function _extends10() {
-  return _extends10 = Object.assign ? Object.assign.bind() : function(n) {
+function _extends9() {
+  return _extends9 = Object.assign ? Object.assign.bind() : function(n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends10.apply(null, arguments);
+  }, _extends9.apply(null, arguments);
 }
 async function fetchMediaContents(media) {
   const result = await media.fetchContents();
@@ -8674,7 +8668,7 @@ function PdfViewer({
       cancelled = true;
     };
   }, [media]);
-  const rootClassName = classnames13__default.default(PdfViewer_default.pdfViewer, className);
+  const rootClassName = classnames14__default.default(PdfViewer_default.pdfViewer, className);
   if (loading) {
     return /* @__PURE__ */ React76__default.default.createElement("div", {
       className: rootClassName
@@ -8700,7 +8694,7 @@ function PdfViewer({
       className: PdfViewer_default.loadingContainer
     }, "No document"));
   }
-  return /* @__PURE__ */ React76__default.default.createElement(BasePdfViewer, _extends10({
+  return /* @__PURE__ */ React76__default.default.createElement(BasePdfViewer, _extends9({
     src,
     className
   }, pdfViewerProps));
@@ -8814,7 +8808,7 @@ function DatetimePickerField({
     onOpenChange: setIsOpen
   }, /* @__PURE__ */ React76__default.default.createElement(popover.Popover.Trigger, {
     id,
-    className: classnames13__default.default(DatetimePickerField_default.triggerButton, !hasValue && DatetimePickerField_default.triggerButtonPlaceholder),
+    className: classnames14__default.default(DatetimePickerField_default.triggerButton, !hasValue && DatetimePickerField_default.triggerButtonPlaceholder),
     "aria-label": hasValue ? void 0 : "Select date"
   }, displayText), /* @__PURE__ */ React76__default.default.createElement(popover.Popover.Portal, null, /* @__PURE__ */ React76__default.default.createElement(popover.Popover.Positioner, {
     sideOffset: 4
@@ -8828,6 +8822,82 @@ function DatetimePickerField({
     footer
   })))));
 }
+
+// src/base-components/select/Select.module.css
+var Select_default = {};
+
+// src/base-components/select/Select.tsx
+function _extends10() {
+  return _extends10 = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends10.apply(null, arguments);
+}
+function SelectRoot({
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ React76__default.default.createElement(select.Select.Root, rest, children);
+}
+function SelectTrigger({
+  className,
+  placeholder,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ React76__default.default.createElement(select.Select.Trigger, _extends10({
+    className: classnames14__default.default(Select_default.osdkSelectTrigger, className)
+  }, rest), children ?? /* @__PURE__ */ React76__default.default.createElement(React76__default.default.Fragment, null, /* @__PURE__ */ React76__default.default.createElement("div", {
+    className: Select_default.osdkSelectValueContainer
+  }, /* @__PURE__ */ React76__default.default.createElement(select.Select.Value, {
+    className: Select_default.osdkSelectValue
+  }), placeholder != null && /* @__PURE__ */ React76__default.default.createElement("span", {
+    className: Select_default.osdkSelectPlaceholder
+  }, placeholder)), /* @__PURE__ */ React76__default.default.createElement(select.Select.Icon, {
+    className: Select_default.osdkSelectIcon
+  }, /* @__PURE__ */ React76__default.default.createElement(icons.CaretDown, null))));
+}
+function SelectPositioner({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ React76__default.default.createElement(select.Select.Positioner, _extends10({
+    className: classnames14__default.default(Select_default.osdkSelectPositioner, className),
+    sideOffset: 4
+  }, rest), children);
+}
+function SelectPopup({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ React76__default.default.createElement(select.Select.Popup, _extends10({
+    className: classnames14__default.default(Select_default.osdkSelectPopup, className)
+  }, rest), children);
+}
+function SelectItem({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ React76__default.default.createElement(select.Select.Item, _extends10({
+    className: classnames14__default.default(Select_default.osdkSelectItem, className)
+  }, rest), /* @__PURE__ */ React76__default.default.createElement(select.Select.ItemText, null, children));
+}
+var Select = {
+  Root: SelectRoot,
+  Trigger: SelectTrigger,
+  Portal: select.Select.Portal,
+  Positioner: SelectPositioner,
+  Popup: SelectPopup,
+  Item: SelectItem
+};
+
+// src/action-form/fields/DropdownField.tsx
 function _extends11() {
   return _extends11 = Object.assign ? Object.assign.bind() : function(n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -8920,6 +8990,102 @@ function defaultItemToStringLabel(item) {
   return String(item);
 }
 
+// src/action-form/fields/NumberInputField.module.css
+var NumberInputField_default = {};
+
+// src/action-form/fields/NumberInputField.tsx
+var VALID_NUMERIC_REGEX = /^[+-.]?(\d+\.?\d*|\d*\.?\d+)?([eE][+-]?\d*)?$/;
+var DEFAULT_STEP = 1;
+var CHEVRON_SIZE = 12;
+function NumberInputField({
+  id,
+  value,
+  onChange,
+  placeholder,
+  min: _min,
+  max: _max,
+  step
+}) {
+  const [displayValue, setDisplayValue] = React76.useState(() => formatNumberForDisplay(value));
+  const prevValueRef = React76.useRef(value);
+  if (prevValueRef.current !== value) {
+    prevValueRef.current = value;
+    const currentParsed = parseNumericValue(displayValue);
+    if (value !== currentParsed) {
+      setDisplayValue(formatNumberForDisplay(value));
+    }
+  }
+  const handleValueChange = React76.useCallback((newValue) => {
+    if (!isValidInput(newValue)) {
+      return;
+    }
+    setDisplayValue(newValue);
+    onChange?.(parseNumericValue(newValue));
+  }, [onChange]);
+  const applyStep = React76.useCallback((direction) => {
+    const current = parseNumericValue(displayValue) ?? 0;
+    const delta = direction * (step ?? DEFAULT_STEP);
+    const next = current + delta;
+    const formatted = formatNumberForDisplay(next);
+    setDisplayValue(formatted);
+    onChange?.(next);
+  }, [displayValue, onChange, step]);
+  const handleKeyDown = React76.useCallback((e) => {
+    if (e.key !== "ArrowUp" && e.key !== "ArrowDown") {
+      return;
+    }
+    e.preventDefault();
+    applyStep(e.key === "ArrowUp" ? 1 : -1);
+  }, [applyStep]);
+  const handleStepUp = React76.useCallback(() => {
+    applyStep(1);
+  }, [applyStep]);
+  const handleStepDown = React76.useCallback(() => {
+    applyStep(-1);
+  }, [applyStep]);
+  return /* @__PURE__ */ React76__default.default.createElement("div", {
+    className: NumberInputField_default.osdkNumberInputWrapper
+  }, /* @__PURE__ */ React76__default.default.createElement(input.Input, {
+    id,
+    className: NumberInputField_default.osdkNumberInputField,
+    type: "text",
+    inputMode: "decimal",
+    value: displayValue,
+    onValueChange: handleValueChange,
+    onKeyDown: handleKeyDown,
+    placeholder
+  }), /* @__PURE__ */ React76__default.default.createElement("div", {
+    className: NumberInputField_default.osdkNumberInputStepper
+  }, /* @__PURE__ */ React76__default.default.createElement(button.Button, {
+    className: NumberInputField_default.osdkNumberInputStepButton,
+    "aria-label": "Increment",
+    tabIndex: -1,
+    onClick: handleStepUp
+  }, /* @__PURE__ */ React76__default.default.createElement(icons.ChevronUp, {
+    size: CHEVRON_SIZE
+  })), /* @__PURE__ */ React76__default.default.createElement(button.Button, {
+    className: NumberInputField_default.osdkNumberInputStepButton,
+    "aria-label": "Decrement",
+    tabIndex: -1,
+    onClick: handleStepDown
+  }, /* @__PURE__ */ React76__default.default.createElement(icons.ChevronDown, {
+    size: CHEVRON_SIZE
+  }))));
+}
+function isValidInput(text) {
+  return VALID_NUMERIC_REGEX.test(text);
+}
+function parseNumericValue(text) {
+  if (text === "") {
+    return null;
+  }
+  const parsed = Number(text);
+  return Number.isNaN(parsed) ? null : parsed;
+}
+function formatNumberForDisplay(value) {
+  return value != null ? String(value) : "";
+}
+
 // src/action-form/fields/RadioButtonsField.module.css
 var RadioButtonsField_default = {};
 
@@ -9093,6 +9259,12 @@ function renderFieldComponent(fieldDefinition, value, onChange) {
         onChange
       }, fieldDefinition.fieldComponentProps));
     case "NUMBER_INPUT":
+      return /* @__PURE__ */ React76__default.default.createElement(NumberInputField, _extends13({
+        id: fieldDefinition.fieldKey,
+        value: typeof value === "number" ? value : null,
+        onChange,
+        placeholder: fieldDefinition.placeholder
+      }, fieldDefinition.fieldComponentProps));
     case "FILE_PICKER":
     case "OBJECT_SET":
       return /* @__PURE__ */ React76__default.default.createElement("div", null, "Unsupported field type: ", fieldDefinition.fieldComponent);
@@ -9171,7 +9343,7 @@ var BaseForm = /* @__PURE__ */ React76.memo(function BaseFormFn({
     onSubmit(controlledFormState ?? rhfValues);
   }, [onSubmit, controlledFormState]);
   return /* @__PURE__ */ React76__default.default.createElement("form", {
-    className: classnames13__default.default(BaseForm_default.osdkForm, className),
+    className: classnames14__default.default(BaseForm_default.osdkForm, className),
     onSubmit: rhfHandleSubmit(onFormSubmit)
   }, formTitle != null && /* @__PURE__ */ React76__default.default.createElement(FormHeader, {
     title: formTitle