@vuu-ui/vuu-ui-controls 0.8.10-debug → 0.8.11-debug

package/cjs/index.js

@@ -57,6 +57,7 @@ __export(src_exports, {
   HeightOnly: () => HeightOnly,
   Highlighter: () => Highlighter,
   Home: () => Home,
+  InstrumentPicker: () => InstrumentPicker,
   InstrumentSearch: () => InstrumentSearch,
   LIST_FOCUS_VISIBLE: () => LIST_FOCUS_VISIBLE,
   List: () => List,
@@ -113,9 +114,11 @@ __export(src_exports, {
   isFocusable: () => isFocusable,
   isGroupNode: () => isGroupNode,
   isHeader: () => isHeader,
+  isMultiSelection: () => isMultiSelection,
   isNavigationKey: () => isNavigationKey,
   isParentPath: () => isParentPath,
   isSelected: () => isSelected,
+  isSingleSelection: () => isSingleSelection,
   itemToString: () => itemToString,
   listItemElement: () => listItemElement,
   listItemId: () => listItemId,
@@ -150,7 +153,7 @@ module.exports = __toCommonJS(src_exports);
 // src/combo-box/ComboBox.tsx
 var import_vuu_layout6 = require("@vuu-ui/vuu-layout");
 var import_core14 = require("@salt-ds/core");
-var import_react36 = require("react");
+var import_react38 = require("react");
 
 // src/common-hooks/collectionProvider.tsx
 var import_react = require("react");
@@ -312,15 +315,13 @@ function useResizeObserver(ref, dimensions2, onResize, reportInitialSize = false
 }
 
 // src/common-hooks/selectionTypes.ts
+var isSingleSelection = (s) => s === void 0 || s === "default" || s === "deselectable";
+var isMultiSelection = (s) => s === "multiple" || (s == null ? void 0 : s.startsWith("extended")) === true;
 var selectionIsDisallowed = (selection) => selection === "none";
 var allowMultipleSelection = (selectionStrategy, specialKey = false) => selectionStrategy === "multiple" || selectionStrategy === "multiple-special-key" && specialKey;
 var deselectionIsAllowed = (selection) => selection !== "none" && selection !== "default";
-var hasSelection = (selected) => {
-  return Array.isArray(selected) ? selected.length > 0 : selected !== null && selected !== void 0;
-};
-var getFirstSelectedItem = (selected) => {
-  return Array.isArray(selected) ? selected[0] : selected;
-};
+var hasSelection = (selected) => selected !== void 0 && selected.length > 0;
+var getFirstSelectedItem = (selected) => selected[0];
 
 // src/common-hooks/useCollectionItems.ts
 var import_react5 = require("react");
@@ -425,7 +426,7 @@ var sourceItems = (source, options) => {
     } else {
       return source.map(
         (item, index) => {
-          var _a, _b;
+          var _a2, _b;
           return {
             childNodes: sourceItems(
               item.childNodes,
@@ -434,7 +435,7 @@ var sourceItems = (source, options) => {
             description: item.description,
             expanded: item.expanded,
             value: item,
-            label: (_b = (_a = options == null ? void 0 : options.itemToString) == null ? void 0 : _a.call(options, item)) != null ? _b : itemToString(item)
+            label: (_b = (_a2 = options == null ? void 0 : options.itemToString) == null ? void 0 : _a2.call(options, item)) != null ? _b : itemToString(item)
           };
         }
       );
@@ -529,8 +530,8 @@ var getDefaultFilterRegex = (value) => new RegExp(`(${escapeRegExp(leftTrim(valu
 var getDefaultFilter = (inputValue = "", getFilterRegex = getDefaultFilterRegex) => (itemValue = "") => Boolean(itemValue.length) && Boolean(inputValue.length) && itemValue.match(getFilterRegex(inputValue)) !== null;
 
 // src/list/common-hooks/utils/isSelected.ts
-function isSelected(selected, item) {
-  const isSelected2 = Array.isArray(selected) ? selected.includes(item.id) : selected === item.id;
+function isSelected(selectedId, item) {
+  const isSelected2 = Array.isArray(selectedId) ? selectedId.includes(item.id) : selectedId === item.id;
   return isSelected2;
 }
 
@@ -597,14 +598,14 @@ var useCollectionItems = ({
   // revealSelected = false,
   source
 }) => {
-  var _a;
+  var _a2;
   const { getItemId } = options;
   const [, forceUpdate] = (0, import_react5.useState)(null);
   const inheritedCollectionHook = useCollection();
   const dataRef = (0, import_react5.useRef)([]);
   const flattenedDataRef = (0, import_react5.useRef)([]);
   const EMPTY_COLLECTION = (0, import_react5.useMemo)(() => [], []);
-  const filterPattern = (0, import_react5.useRef)((_a = options.filterPattern) != null ? _a : "");
+  const filterPattern = (0, import_react5.useRef)((_a2 = options.filterPattern) != null ? _a2 : "");
   const {
     getFilterRegex = getDefaultFilterRegex,
     noChildrenLabel,
@@ -616,13 +617,13 @@ var useCollectionItems = ({
   const addMetadataToItems = (0, import_react5.useCallback)(
     (items, indexer, level = 1, path = "", results = [], flattenedCollection2 = [], flattenedSource2 = []) => {
       items.forEach((item, i, all) => {
-        var _a2, _b;
+        var _a3, _b;
         const isCollapsibleHeader = item.header && options.collapsibleHeaders;
         const isNonCollapsibleGroupNode = item.childNodes && options.collapsibleHeaders === false;
         const isLeaf3 = !item.childNodes || item.childNodes.length === 0;
         const nonCollapsible = isNonCollapsibleGroupNode || isLeaf3 && !isCollapsibleHeader;
         const childPath = path ? `${path}.${i}` : `item-${i}`;
-        const id = (_a2 = item.id) != null ? _a2 : getItemId ? getItemId(i) : `${idRoot}-${childPath}`;
+        const id = (_a3 = item.id) != null ? _a3 : getItemId ? getItemId(i) : `${idRoot}-${childPath}`;
         const expanded = nonCollapsible ? void 0 : (_b = item.expanded) != null ? _b : isExpanded2();
         const normalisedItem = {
           ...item,
@@ -735,8 +736,8 @@ var useCollectionItems = ({
     (id, target = collectionItems) => {
       const sourceWithId = target.find(
         (i) => {
-          var _a2;
-          return i.id === id || ((_a2 = i == null ? void 0 : i.childNodes) == null ? void 0 : _a2.length) && isParentPath(i.id, id);
+          var _a3;
+          return i.id === id || ((_a3 = i == null ? void 0 : i.childNodes) == null ? void 0 : _a3.length) && isParentPath(i.id, id);
         }
       );
       if ((sourceWithId == null ? void 0 : sourceWithId.id) === id) {
@@ -748,15 +749,26 @@ var useCollectionItems = ({
     },
     [flattenedSource, collectionItems]
   );
+  const indexOfItemById = (0, import_react5.useCallback)(
+    (id, target = collectionItems) => {
+      const sourceWithId = target.find(
+        (i) => {
+          var _a3;
+          return i.id === id || ((_a3 = i == null ? void 0 : i.childNodes) == null ? void 0 : _a3.length) && isParentPath(i.id, id);
+        }
+      );
+      const idx = sourceWithId ? dataRef.current.indexOf(sourceWithId) : -1;
+      if (idx !== -1) {
+        return idx;
+      }
+      throw Error(`useCollectionData indexOfItemById, id ${id} not found `);
+    },
+    [collectionItems]
+  );
   const toCollectionItem = (0, import_react5.useCallback)(
     (item) => {
       const collectionItem = flattenedDataRef.current.find(
-        (i) => (
-          // const collectionItem = collectionItemsRef.current.find((i) =>
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          //@ts-ignore
-          (0, import_react5.isValidElement)(i.value) ? i.label === item : i.value === item
-        )
+        (i) => (0, import_react5.isValidElement)(i.value) ? i.label === item : i.value === item
       );
       if (collectionItem) {
         return collectionItem;
@@ -792,9 +804,9 @@ var useCollectionItems = ({
       if (Array.isArray(selectedCollectionItem)) {
         return selectedCollectionItem.map((i) => i.id);
       } else if (selectedCollectionItem) {
-        return selectedCollectionItem.id;
+        return [selectedCollectionItem.id];
       } else {
-        return null;
+        return [];
       }
     },
     [itemToCollectionItem]
@@ -874,6 +886,7 @@ var useCollectionItems = ({
     expandGroupItem,
     // why not toggle, or just rely on setdata ?
     setFilterPattern,
+    indexOfItemById,
     itemById,
     itemToId,
     toCollectionItem,
@@ -908,16 +921,16 @@ var useClickAway = ({
   (0, import_react6.useEffect)(() => {
     const [clickHandler, escapeKeyHandler] = isOpen ? [
       (evt) => {
-        var _a, _b;
+        var _a2, _b;
         const targetElement = evt.target;
-        if (!((_a = popperRef.current) == null ? void 0 : _a.contains(targetElement)) && !((_b = rootRef.current) == null ? void 0 : _b.contains(targetElement))) {
-          onClose();
+        if (!((_a2 = popperRef.current) == null ? void 0 : _a2.contains(targetElement)) && !((_b = rootRef.current) == null ? void 0 : _b.contains(targetElement))) {
+          onClose("click-away");
         }
       },
       (e) => {
         if (e.key === "Escape") {
           if (openRef.current) {
-            onClose();
+            onClose("Escape");
             e.stopPropagation();
           }
         }
@@ -954,7 +967,7 @@ var useDropdownBase = ({
   rootRef,
   width
 }) => {
-  var _a;
+  var _a2;
   const justFocused = (0, import_react7.useRef)(null);
   const popperRef = (0, import_react7.useRef)(null);
   const popperCallbackRef = (0, import_react7.useCallback)((element) => {
@@ -967,16 +980,19 @@ var useDropdownBase = ({
     state: "isOpen"
   });
   const [popup, setPopup] = (0, import_react7.useState)({
-    width: (_a = popupWidthProp != null ? popupWidthProp : width) != null ? _a : 0
+    width: (_a2 = popupWidthProp != null ? popupWidthProp : width) != null ? _a2 : 0
   });
   const showDropdown = (0, import_react7.useCallback)(() => {
     setIsOpen(true);
     onOpenChange == null ? void 0 : onOpenChange(true);
   }, [onOpenChange, setIsOpen]);
-  const hideDropdown = (0, import_react7.useCallback)(() => {
-    setIsOpen(false);
-    onOpenChange == null ? void 0 : onOpenChange(false);
-  }, [onOpenChange, setIsOpen]);
+  const hideDropdown = (0, import_react7.useCallback)(
+    (reason) => {
+      setIsOpen(false);
+      onOpenChange == null ? void 0 : onOpenChange(false, reason);
+    },
+    [onOpenChange, setIsOpen]
+  );
   useClickAway({
     popperRef,
     rootRef,
@@ -1008,12 +1024,15 @@ var useDropdownBase = ({
   );
   const handleKeydown = (0, import_react7.useCallback)(
     (evt) => {
-      if ((evt.key === "Tab" || evt.key === "Escape") && isOpen) {
+      if (
+        /* evt.key === "Tab" || */
+        evt.key === "Escape" && isOpen
+      ) {
         if (evt.key === "Escape") {
           evt.stopPropagation();
           evt.preventDefault();
         }
-        hideDropdown();
+        hideDropdown(evt.key);
       } else if (openKeys.includes(evt.key) && !isOpen) {
         evt.preventDefault();
         showDropdown();
@@ -1023,6 +1042,23 @@ var useDropdownBase = ({
     },
     [hideDropdown, isOpen, onKeyDownProp, openKeys, showDropdown]
   );
+  const handleBlur = (0, import_react7.useCallback)(
+    (evt) => {
+      var _a3;
+      console.log("useDropdownBase blur", {
+        popperRef: popperRef.current,
+        relatedTarget: evt.relatedTarget
+      });
+      if (isOpen) {
+        if ((_a3 = popperRef.current) == null ? void 0 : _a3.contains(evt.relatedTarget)) {
+        } else {
+          console.log("hide dropdown");
+          hideDropdown("blur");
+        }
+      }
+    },
+    [hideDropdown, isOpen]
+  );
   const fullWidth = fullWidthProp != null ? fullWidthProp : false;
   const measurements2 = fullWidth ? WidthOnly : NO_OBSERVER;
   useResizeObserver(rootRef, measurements2, setPopup, fullWidth);
@@ -1034,6 +1070,7 @@ var useDropdownBase = ({
     onClick: disabled || openOnFocus ? void 0 : handleTriggerToggle,
     onFocus: handleTriggerFocus,
     role: "listbox",
+    onBlur: handleBlur,
     onKeyDown: disabled ? void 0 : handleKeydown,
     style: { width: fullWidth ? void 0 : width }
   };
@@ -1041,7 +1078,7 @@ var useDropdownBase = ({
     id: componentId,
     width: popup.width
   };
-  const popupComponentRef = (0, import_core.useForkRef)(popperCallbackRef, popperRef);
+  const popupComponentRef = (0, import_core.useForkRef)(popperCallbackRef, popupComponent.ref);
   return {
     componentProps: dropdownComponentProps,
     popupComponentRef,
@@ -1058,6 +1095,7 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var classBase = "vuuDropdown";
 var DropdownBase = (0, import_react8.forwardRef)(
   function Dropdown({
+    PopupProps,
     "aria-labelledby": ariaLabelledByProp,
     children,
     className: classNameProp,
@@ -1070,7 +1108,7 @@ var DropdownBase = (0, import_react8.forwardRef)(
     onOpenChange,
     openKeys,
     openOnFocus,
-    placement = "below",
+    placement = "below-full-width",
     popupWidth,
     width,
     ...htmlAttributes
@@ -1134,13 +1172,21 @@ var DropdownBase = (0, import_react8.forwardRef)(
         className: (0, import_classnames.default)(className2, `${classBase}-popup-component`),
         id: id2,
         ref: popupComponentRef,
-        width: ownWidth != null ? ownWidth : width2
+        width: placement.endsWith("full-width") ? "100%" : ownWidth != null ? ownWidth : width2
       });
     };
     const ref = (0, import_core2.useForkRef)(rootRef, forwardedRef);
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ...htmlAttributes, className, id: idProp, ref, children: [
       getTriggerComponent(),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_vuu_popups.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_vuu_popups.PopupComponent, { anchorElement: rootRef, placement, children: getPopupComponent() }) })
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_vuu_popups.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_vuu_popups.PopupComponent,
+        {
+          ...PopupProps,
+          anchorElement: rootRef,
+          placement,
+          children: getPopupComponent()
+        }
+      ) })
     ] });
   }
 );
@@ -1206,7 +1252,7 @@ var DropdownButton = (0, import_react9.forwardRef)(function DropdownButton2({
 
 // src/dropdown/Dropdown.tsx
 var import_core12 = require("@salt-ds/core");
-var import_react34 = require("react");
+var import_react36 = require("react");
 var import_vuu_layout4 = require("@vuu-ui/vuu-layout");
 
 // src/list/common-hooks/keyUtils.ts
@@ -1439,9 +1485,9 @@ function nextItemIdx(count, key, idx) {
   }
 }
 var getIndexOfSelectedItem = (items, selected) => {
-  const selectedItem = getFirstSelectedItem(selected);
-  if (selectedItem) {
-    return items.indexOf(selectedItem);
+  const selectedItemId = Array.isArray(selected) ? getFirstSelectedItem(selected) : void 0;
+  if (selectedItemId) {
+    return items.findIndex((item) => item.id === selectedItemId);
   } else {
     return -1;
   }
@@ -1577,6 +1623,7 @@ var useKeyboardNavigation = ({
   const ignoreFocus = (0, import_react12.useRef)(false);
   const setIgnoreFocus = (value) => ignoreFocus.current = value;
   const handleFocus = (0, import_react12.useCallback)(() => {
+    console.trace(`List useKeyboard focus`);
     if (ignoreFocus.current) {
       ignoreFocus.current = false;
     } else {
@@ -1640,6 +1687,7 @@ var useKeyboardNavigation = ({
   );
   const handleKeyDown = (0, import_react12.useCallback)(
     (e) => {
+      console.log("handleKeyDown");
       if (itemCount > 0 && isNavigationKey(e)) {
         e.preventDefault();
         e.stopPropagation();
@@ -1733,23 +1781,18 @@ var useSelection = ({
     (evt) => selectionKeys.includes(evt.key),
     [selectionKeys]
   );
-  const emptyValue = (0, import_react13.useCallback)(() => {
-    return isMultipleSelect || isExtendedSelect ? [] : null;
-  }, [isMultipleSelect, isExtendedSelect]);
   const [selected, setSelected] = useControlled({
     controlled: selectedProp,
-    default: defaultSelected != null ? defaultSelected : emptyValue(),
+    default: defaultSelected != null ? defaultSelected : [],
     name: "UseSelection",
     state: "selected"
   });
   const isItemSelected = (0, import_react13.useCallback)(
-    (itemId) => {
-      return Array.isArray(selected) ? selected.includes(itemId) : selected === itemId;
-    },
+    (itemId) => selected.includes(itemId),
     [selected]
   );
   const selectDeselectable = (0, import_react13.useCallback)(
-    (itemId) => isItemSelected(itemId) ? null : itemId,
+    (itemId) => isItemSelected(itemId) ? [] : [itemId],
     [isItemSelected]
   );
   const selectMultiple = (0, import_react13.useCallback)(
@@ -1789,17 +1832,14 @@ var useSelection = ({
         if (preserveExistingSelection && !rangeSelect) {
           newSelected = selectMultiple(id);
         } else if (rangeSelect) {
-          newSelected = selectRange(
-            idx,
-            preserveExistingSelection
-          );
+          newSelected = selectRange(idx, preserveExistingSelection);
         } else {
           newSelected = [id];
         }
       } else if (isDeselectable) {
         newSelected = selectDeselectable(id);
       } else {
-        newSelected = id;
+        newSelected = [id];
       }
       if (newSelected !== selected) {
         setSelected(newSelected);
@@ -2124,17 +2164,17 @@ var Highlighter = (props) => {
 };
 
 // src/list/ListItem.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_classnames4 = __toESM(require("classnames"));
 
 // src/list/CheckboxIcon.tsx
+var import_react16 = __toESM(require("react"));
 var import_classnames3 = __toESM(require("classnames"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
 var classBase3 = "vuuCheckboxIcon";
 var CheckboxIcon = ({
   checked = false,
   ...htmlAttributes
-}) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+}) => /* @__PURE__ */ import_react16.default.createElement(
   "span",
   {
     ...htmlAttributes,
@@ -2143,13 +2183,13 @@ var CheckboxIcon = ({
 );
 
 // src/list/ListItem.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var classBase4 = "vuuListItem";
-var ListItemProxy = (0, import_react16.forwardRef)(function ListItemNextProxy({
+var ListItemProxy = (0, import_react17.forwardRef)(function ListItemNextProxy({
   height,
   ...htmlAttributes
 }, forwardedRef) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       ...htmlAttributes,
@@ -2160,7 +2200,7 @@ var ListItemProxy = (0, import_react16.forwardRef)(function ListItemNextProxy({
     }
   );
 });
-var ListItem = (0, import_react16.forwardRef)(
+var ListItem = (0, import_react17.forwardRef)(
   function ListItem2({
     children,
     className: classNameProp,
@@ -2184,7 +2224,7 @@ var ListItem = (0, import_react16.forwardRef)(
       ...styleProp,
       height: itemHeight
     } : styleProp;
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
         className,
@@ -2194,8 +2234,8 @@ var ListItem = (0, import_react16.forwardRef)(
         ref: forwardedRef,
         style,
         children: [
-          showCheckbox && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckboxIcon, { "aria-hidden": true, checked: selected }),
-          children && typeof children !== "string" ? children : itemTextHighlightPattern == null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${classBase4}-textWrapper`, children: label || children }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          showCheckbox && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckboxIcon, { "aria-hidden": true, checked: selected }),
+          children && typeof children !== "string" ? children : itemTextHighlightPattern == null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `${classBase4}-textWrapper`, children: label || children }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             Highlighter,
             {
               matchPattern: itemTextHighlightPattern,
@@ -2212,29 +2252,29 @@ var ListItem = (0, import_react16.forwardRef)(
 var import_vuu_layout3 = require("@vuu-ui/vuu-layout");
 var import_core9 = require("@salt-ds/core");
 var import_classnames6 = __toESM(require("classnames"));
-var import_react29 = require("react");
+var import_react31 = require("react");
 
 // src/list/useList.ts
 var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
-var import_react26 = require("react");
+var import_react28 = require("react");
 
 // src/drag-drop/dragDropTypesNext.ts
 var FWD = "fwd";
 var BWD = "bwd";
 
 // src/drag-drop/DragDropProvider.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/drag-drop/useGlobalDragDrop.ts
 var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
-var import_react17 = require("react");
+var import_react18 = require("react");
 var useGlobalDragDrop = ({
   onDragOverDropTarget
 }) => {
-  const measuredDropTargetsRef = (0, import_react17.useRef)();
-  const dragDropStateRef = (0, import_react17.useRef)(null);
-  const mousePosRef = (0, import_react17.useRef)({ x: 0, y: 0 });
-  const overDropTarget = (0, import_react17.useCallback)((x, y) => {
+  const measuredDropTargetsRef = (0, import_react18.useRef)();
+  const dragDropStateRef = (0, import_react18.useRef)(null);
+  const mousePosRef = (0, import_react18.useRef)({ x: 0, y: 0 });
+  const overDropTarget = (0, import_react18.useCallback)((x, y) => {
     const { current: dropTargets } = measuredDropTargetsRef;
     if (dropTargets) {
       for (const [id, measuredTarget] of Object.entries(dropTargets)) {
@@ -2245,7 +2285,7 @@ var useGlobalDragDrop = ({
     }
     return void 0;
   }, []);
-  const dragMouseMoveHandler = (0, import_react17.useCallback)(
+  const dragMouseMoveHandler = (0, import_react18.useCallback)(
     (evt) => {
       const { clientX, clientY } = evt;
       const { current: dragDropState } = dragDropStateRef;
@@ -2270,11 +2310,11 @@ var useGlobalDragDrop = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const dragMouseUpHandler = (0, import_react17.useCallback)(() => {
+  const dragMouseUpHandler = (0, import_react18.useCallback)(() => {
     document.removeEventListener("mousemove", dragMouseMoveHandler, false);
     document.removeEventListener("mouseup", dragMouseUpHandler, false);
   }, [dragMouseMoveHandler]);
-  const resumeDrag = (0, import_react17.useCallback)(
+  const resumeDrag = (0, import_react18.useCallback)(
     (dragDropState) => {
       console.log(`resume drag of `, {
         el: dragDropState.draggableElement
@@ -2293,14 +2333,14 @@ var useGlobalDragDrop = ({
 };
 
 // src/drag-drop/DragDropProvider.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var NO_DRAG_CONTEXT = {
   isDragSource: false,
   isDropTarget: false,
   register: () => void 0
 };
 var unconfiguredRegistrationCall = () => console.log(`have you forgotten to provide a DragDrop Provider ?`);
-var DragDropContext = (0, import_react18.createContext)({
+var DragDropContext = (0, import_react19.createContext)({
   registerDragDropParty: unconfiguredRegistrationCall
 });
 var measureDropTargets = (dropTargetIds = []) => {
@@ -2317,11 +2357,11 @@ var DragDropProvider = ({
   children,
   dragSources: dragSourcesProp
 }) => {
-  const resumeDragHandlers = (0, import_react18.useMemo)(
+  const resumeDragHandlers = (0, import_react19.useMemo)(
     () => /* @__PURE__ */ new Map(),
     []
   );
-  const handleDragOverDropTarget = (0, import_react18.useCallback)(
+  const handleDragOverDropTarget = (0, import_react19.useCallback)(
     (dropTargetId, dragDropState) => {
       const resumeDrag2 = resumeDragHandlers.get(dropTargetId);
       if (resumeDrag2) {
@@ -2335,7 +2375,7 @@ var DragDropProvider = ({
   const { measuredDropTargetsRef, resumeDrag } = useGlobalDragDrop({
     onDragOverDropTarget: handleDragOverDropTarget
   });
-  const [dragSources, dropTargets] = (0, import_react18.useMemo)(() => {
+  const [dragSources, dropTargets] = (0, import_react19.useMemo)(() => {
     const sources = /* @__PURE__ */ new Map();
     const targets = /* @__PURE__ */ new Map();
     for (const [sourceId, { dropTargets: dropTargets2 }] of Object.entries(dragSourcesProp)) {
@@ -2361,7 +2401,7 @@ var DragDropProvider = ({
     dragSources,
     dropTargets
   });
-  const onDragOut = (0, import_react18.useCallback)(
+  const onDragOut = (0, import_react19.useCallback)(
     (id, dragDropState) => {
       measuredDropTargetsRef.current = measureDropTargets(dragSources.get(id));
       resumeDrag(dragDropState);
@@ -2369,10 +2409,10 @@ var DragDropProvider = ({
     },
     [dragSources, measuredDropTargetsRef, resumeDrag]
   );
-  const onEndOfDragOperation = (0, import_react18.useCallback)((id) => {
+  const onEndOfDragOperation = (0, import_react19.useCallback)((id) => {
     console.log(`end of drag operation, id= ${id}`);
   }, []);
-  const registerDragDropParty = (0, import_react18.useCallback)(
+  const registerDragDropParty = (0, import_react19.useCallback)(
     (id, resumeDrag2) => {
       if (resumeDrag2) {
         resumeDragHandlers.set(id, resumeDrag2);
@@ -2380,7 +2420,7 @@ var DragDropProvider = ({
     },
     [resumeDragHandlers]
   );
-  const contextValue = (0, import_react18.useMemo)(
+  const contextValue = (0, import_react19.useMemo)(
     () => ({
       dragSources,
       dropTargets,
@@ -2396,19 +2436,19 @@ var DragDropProvider = ({
       registerDragDropParty
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DragDropContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DragDropContext.Provider, { value: contextValue, children });
 };
 var useDragDropProvider = (id) => {
-  var _a, _b;
+  var _a2, _b;
   const {
     dragSources,
     dropTargets,
     onDragOut,
     onEndOfDragOperation,
     registerDragDropParty
-  } = (0, import_react18.useContext)(DragDropContext);
+  } = (0, import_react19.useContext)(DragDropContext);
   if (id) {
-    const isDragSource = (_a = dragSources == null ? void 0 : dragSources.has(id)) != null ? _a : false;
+    const isDragSource = (_a2 = dragSources == null ? void 0 : dragSources.has(id)) != null ? _a2 : false;
     const isDropTarget = (_b = dropTargets == null ? void 0 : dropTargets.has(id)) != null ? _b : false;
     return {
       isDragSource,
@@ -2449,10 +2489,82 @@ var DragDropState = class {
 };
 
 // src/drag-drop/useDragDropNaturalMovementNext.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/drag-drop/useDragDisplacers.ts
+var import_react21 = require("react");
+
+// src/drag-drop/Draggable.tsx
+var import_core7 = require("@salt-ds/core");
+var import_classnames5 = __toESM(require("classnames"));
 var import_react20 = require("react");
+var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var makeClassNames = (classNames) => classNames.split(" ").map((className) => `vuuDraggable-${className}`);
+var Draggable = (0, import_react20.forwardRef)(function Draggable2({ wrapperClassName, element, onTransitionEnd, style, scale = 1 }, forwardedRef) {
+  const callbackRef = (0, import_react20.useCallback)(
+    (el) => {
+      if (el) {
+        el.innerHTML = "";
+        el.appendChild(element);
+        if (scale !== 1) {
+          el.style.transform = `scale(${scale},${scale})`;
+        }
+      }
+    },
+    [element, scale]
+  );
+  const forkedRef = (0, import_core7.useForkRef)(forwardedRef, callbackRef);
+  const position = (0, import_react20.useMemo)(
+    () => ({
+      left: 0,
+      top: 0
+    }),
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_vuu_popups2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_vuu_popups2.PopupComponent,
+    {
+      anchorElement: { current: document.body },
+      placement: "absolute",
+      position,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "div",
+        {
+          className: (0, import_classnames5.default)("vuuDraggable", ...makeClassNames(wrapperClassName)),
+          ref: forkedRef,
+          onTransitionEnd,
+          style
+        }
+      )
+    }
+  ) });
+});
+var createDragSpacer = (transitioning) => {
+  const spacer = document.createElement("div");
+  spacer.className = "vuuDraggable-spacer";
+  if (transitioning) {
+    spacer.addEventListener("transitionend", () => {
+      transitioning.current = false;
+    });
+  }
+  return spacer;
+};
+var createDropIndicatorPosition = () => {
+  const spacer = document.createElement("div");
+  spacer.className = "vuuDraggable-dropIndicatorPosition";
+  return spacer;
+};
+var createDropIndicator = (transitioning) => {
+  const spacer = document.createElement("div");
+  spacer.className = "vuuDraggable-dropIndicator";
+  if (transitioning) {
+    spacer.addEventListener("transitionend", () => {
+      transitioning.current = false;
+    });
+  }
+  return spacer;
+};
 
 // src/drag-drop/drop-target-utils.ts
 var LEFT_RIGHT = ["left", "right"];
@@ -2658,83 +2770,26 @@ function constrainRect(targetRect, constraintRect) {
 }
 var dropTargetsDebugString = (dropTargets) => dropTargets.map(
   (d, i) => {
-    var _a;
+    var _a2;
     return `
 ${d.isDraggedItem ? "*" : " "}[${i}] width : ${Math.floor(
       d.size
     )}    ${Math.floor(d.start)} - ${Math.floor(d.end)} (mid ${Math.floor(
       d.mid
-    )})  ${(_a = d.element) == null ? void 0 : _a.textContent} `;
+    )})  ${(_a2 = d.element) == null ? void 0 : _a2.textContent} `;
   }
 ).join("");
 
-// src/drag-drop/Draggable.tsx
-var import_core7 = require("@salt-ds/core");
-var import_classnames5 = __toESM(require("classnames"));
-var import_react19 = require("react");
-var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var makeClassNames = (classNames) => classNames.split(" ").map((className) => `vuuDraggable-${className}`);
-var Draggable = (0, import_react19.forwardRef)(function Draggable2({ wrapperClassName, element, onTransitionEnd, style, scale = 1 }, forwardedRef) {
-  const callbackRef = (0, import_react19.useCallback)(
-    (el) => {
-      if (el) {
-        el.innerHTML = "";
-        el.appendChild(element);
-        if (scale !== 1) {
-          el.style.transform = `scale(${scale},${scale})`;
-        }
-      }
-    },
-    [element, scale]
-  );
-  const forkedRef = (0, import_core7.useForkRef)(forwardedRef, callbackRef);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_vuu_popups2.PortalDeprecated, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    "div",
-    {
-      className: (0, import_classnames5.default)("vuuDraggable", ...makeClassNames(wrapperClassName)),
-      ref: forkedRef,
-      onTransitionEnd,
-      style
-    }
-  ) });
-});
-var createDragSpacer = (transitioning) => {
-  const spacer = document.createElement("div");
-  spacer.className = "vuuDraggable-spacer";
-  if (transitioning) {
-    spacer.addEventListener("transitionend", () => {
-      transitioning.current = false;
-    });
-  }
-  return spacer;
-};
-var createDropIndicatorPosition = () => {
-  const spacer = document.createElement("div");
-  spacer.className = "vuuDraggable-dropIndicatorPosition";
-  return spacer;
-};
-var createDropIndicator = (transitioning) => {
-  const spacer = document.createElement("div");
-  spacer.className = "vuuDraggable-dropIndicator";
-  if (transitioning) {
-    spacer.addEventListener("transitionend", () => {
-      transitioning.current = false;
-    });
-  }
-  return spacer;
-};
-
 // src/drag-drop/useDragDisplacers.ts
 var useDragDisplacers = (orientation = "horizontal") => {
-  const animationFrame = (0, import_react20.useRef)(0);
-  const transitioning = (0, import_react20.useRef)(false);
-  const spacers = (0, import_react20.useMemo)(
+  const animationFrame = (0, import_react21.useRef)(0);
+  const transitioning = (0, import_react21.useRef)(false);
+  const spacers = (0, import_react21.useMemo)(
     // We only need to listen for transition end on one of the spacers
     () => [createDragSpacer(transitioning), createDragSpacer()],
     []
   );
-  const animateTransition = (0, import_react20.useCallback)(
+  const animateTransition = (0, import_react21.useCallback)(
     (size, propertyName = "width") => {
       const [spacer1, spacer2] = spacers;
       animationFrame.current = requestAnimationFrame(() => {
@@ -2747,7 +2802,7 @@ var useDragDisplacers = (orientation = "horizontal") => {
     },
     [spacers]
   );
-  const clearSpacers = (0, import_react20.useCallback)(
+  const clearSpacers = (0, import_react21.useCallback)(
     (useTransition = false) => {
       if (useTransition === true) {
         const [spacer] = spacers;
@@ -2764,13 +2819,13 @@ var useDragDisplacers = (orientation = "horizontal") => {
     },
     [animateTransition, orientation, spacers]
   );
-  const cancelAnyPendingAnimation = (0, import_react20.useCallback)(() => {
+  const cancelAnyPendingAnimation = (0, import_react21.useCallback)(() => {
     if (animationFrame.current) {
       cancelAnimationFrame(animationFrame.current);
       animationFrame.current = 0;
     }
   }, []);
-  const displaceItem = (0, import_react20.useCallback)(
+  const displaceItem = (0, import_react21.useCallback)(
     (dropTargets, dropTarget, size, useTransition = false, direction = "static") => {
       if (dropTarget) {
         const propertyName = orientation === "horizontal" ? "width" : "height";
@@ -2817,7 +2872,7 @@ var useDragDisplacers = (orientation = "horizontal") => {
       spacers
     ]
   );
-  const displaceLastItem = (0, import_react20.useCallback)(
+  const displaceLastItem = (0, import_react21.useCallback)(
     (dropTargets, dropTarget, size, useTransition = false, direction = "static") => {
       const propertyName = orientation === "horizontal" ? "width" : "height";
       const [spacer1, spacer2] = spacers;
@@ -2870,22 +2925,22 @@ var useDragDropNaturalMovement = ({
   selected,
   viewportRange
 }) => {
-  const dragDirectionRef = (0, import_react21.useRef)();
-  const isScrollable = (0, import_react21.useRef)(false);
-  const dragPosRef = (0, import_react21.useRef)(-1);
-  const measuredDropTargets = (0, import_react21.useRef)([]);
-  const overflowMenuShowingRef = (0, import_react21.useRef)(false);
-  const [showOverflow, setShowOverflow] = (0, import_react21.useState)(false);
+  const dragDirectionRef = (0, import_react22.useRef)();
+  const isScrollable = (0, import_react22.useRef)(false);
+  const dragPosRef = (0, import_react22.useRef)(-1);
+  const measuredDropTargets = (0, import_react22.useRef)([]);
+  const overflowMenuShowingRef = (0, import_react22.useRef)(false);
+  const [showOverflow, setShowOverflow] = (0, import_react22.useState)(false);
   const { clearSpacers, displaceItem, displaceLastItem } = useDragDisplacers(orientation);
-  const draggedItemRef = (0, import_react21.useRef)();
+  const draggedItemRef = (0, import_react22.useRef)();
   const fullItemQuery = `:is(${itemQuery}${NOT_OVERFLOWED}${NOT_HIDDEN},.vuuOverflowContainer-OverflowIndicator)`;
   const indexOf = (dropTarget) => measuredDropTargets.current.findIndex((d) => d.id === dropTarget.id);
-  const rangeRef = (0, import_react21.useRef)();
+  const rangeRef = (0, import_react22.useRef)();
   rangeRef.current = viewportRange;
-  const handleScrollStart = (0, import_react21.useCallback)(() => {
+  const handleScrollStart = (0, import_react22.useCallback)(() => {
     clearSpacers();
   }, [clearSpacers]);
-  const handleScrollStop = (0, import_react21.useCallback)(
+  const handleScrollStop = (0, import_react22.useCallback)(
     (scrollDirection, _scrollPos, atEnd) => {
       const { current: container } = containerRef;
       const { current: draggedItem } = draggedItemRef;
@@ -2926,7 +2981,7 @@ var useDragDropNaturalMovement = ({
     },
     [containerRef, displaceItem, displaceLastItem, fullItemQuery, orientation]
   );
-  const beginDrag = (0, import_react21.useCallback)(
+  const beginDrag = (0, import_react22.useCallback)(
     (dragElement) => {
       if (
         //TODO need a different check for selected
@@ -3008,7 +3063,7 @@ var useDragDropNaturalMovement = ({
       viewportRange
     ]
   );
-  const [showPopup, hidePopup] = (0, import_react21.useMemo)(() => {
+  const [showPopup, hidePopup] = (0, import_react22.useMemo)(() => {
     let popupShowing = false;
     const show = (dropTarget) => {
       if (!popupShowing) {
@@ -3034,7 +3089,7 @@ var useDragDropNaturalMovement = ({
     };
     return [show, hide];
   }, []);
-  const drag = (0, import_react21.useCallback)(
+  const drag = (0, import_react22.useCallback)(
     (dragPos, mouseMoveDirection) => {
       const { current: draggedItem } = draggedItemRef;
       if (draggedItem) {
@@ -3075,8 +3130,8 @@ var useDragDropNaturalMovement = ({
     },
     [containerRef, displaceItem, displaceLastItem, hidePopup, showPopup]
   );
-  const drop = (0, import_react21.useCallback)(() => {
-    var _a;
+  const drop = (0, import_react22.useCallback)(() => {
+    var _a2;
     clearSpacers();
     const { current: dropTargets } = measuredDropTargets;
     const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);
@@ -3103,13 +3158,13 @@ var useDragDropNaturalMovement = ({
     }
     setShowOverflow(false);
     if (containerRef.current) {
-      const scrollTop = (_a = containerRef.current) == null ? void 0 : _a.scrollTop;
+      const scrollTop = (_a2 = containerRef.current) == null ? void 0 : _a2.scrollTop;
       if (indexOfDraggedItem < dropTargets.length) {
         containerRef.current.scrollTop = scrollTop;
       }
     }
   }, [clearSpacers, containerRef, onDrop]);
-  const releaseDrag = (0, import_react21.useCallback)(() => {
+  const releaseDrag = (0, import_react22.useCallback)(() => {
     clearSpacers(true);
   }, [clearSpacers]);
   return {
@@ -3124,14 +3179,14 @@ var useDragDropNaturalMovement = ({
 };
 
 // src/drag-drop/useDragDropIndicator.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/drag-drop/useDropIndicator.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 var useDropIndicator = () => {
-  const spacer = (0, import_react22.useMemo)(() => createDropIndicatorPosition(), []);
-  const clearSpacer = (0, import_react22.useCallback)(() => spacer.remove(), [spacer]);
-  const positionDropIndicator = (0, import_react22.useCallback)(
+  const spacer = (0, import_react23.useMemo)(() => createDropIndicatorPosition(), []);
+  const clearSpacer = (0, import_react23.useCallback)(() => spacer.remove(), [spacer]);
+  const positionDropIndicator = (0, import_react23.useCallback)(
     (dropTarget, dropZone2 = "end") => {
       if (dropZone2 === "end") {
         dropTarget.element.after(spacer);
@@ -3149,7 +3204,7 @@ var useDropIndicator = () => {
 };
 
 // src/drag-drop/useDragDropIndicator.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var NOT_OVERFLOWED2 = ':not([data-overflowed="true"])';
 var NOT_HIDDEN2 = ':not([aria-hidden="true"])';
 var useDragDropIndicator = ({
@@ -3160,18 +3215,18 @@ var useDragDropIndicator = ({
   selected,
   viewportRange
 }) => {
-  const dragDirectionRef = (0, import_react23.useRef)();
-  const dropIndicatorRef = (0, import_react23.useRef)(null);
-  const dropTargetRef = (0, import_react23.useRef)(null);
-  const dropZoneRef = (0, import_react23.useRef)("");
-  const isScrollable = (0, import_react23.useRef)(false);
-  const dragPosRef = (0, import_react23.useRef)(-1);
-  const measuredDropTargets = (0, import_react23.useRef)([]);
-  const overflowMenuShowingRef = (0, import_react23.useRef)(false);
-  const [showOverflow, setShowOverflow] = (0, import_react23.useState)(false);
-  const [dropIndicator, setDropIndicator] = (0, import_react23.useState)();
+  const dragDirectionRef = (0, import_react24.useRef)();
+  const dropIndicatorRef = (0, import_react24.useRef)(null);
+  const dropTargetRef = (0, import_react24.useRef)(null);
+  const dropZoneRef = (0, import_react24.useRef)("");
+  const isScrollable = (0, import_react24.useRef)(false);
+  const dragPosRef = (0, import_react24.useRef)(-1);
+  const measuredDropTargets = (0, import_react24.useRef)([]);
+  const overflowMenuShowingRef = (0, import_react24.useRef)(false);
+  const [showOverflow, setShowOverflow] = (0, import_react24.useState)(false);
+  const [dropIndicator, setDropIndicator] = (0, import_react24.useState)();
   const { clearSpacer, positionDropIndicator } = useDropIndicator();
-  const draggedItemRef = (0, import_react23.useRef)();
+  const draggedItemRef = (0, import_react24.useRef)();
   const fullItemQuery = `:is(${itemQuery}${NOT_OVERFLOWED2}${NOT_HIDDEN2},[data-overflow-indicator])`;
   const indexOf = (dropTarget) => measuredDropTargets.current.findIndex((d) => d.id === dropTarget.id);
   const reposition = (dropTarget, distance, indexShift) => {
@@ -3182,12 +3237,12 @@ var useDragDropIndicator = ({
       dropTarget.currentIndex += indexShift;
     }
   };
-  const rangeRef = (0, import_react23.useRef)();
+  const rangeRef = (0, import_react24.useRef)();
   rangeRef.current = viewportRange;
-  const handleScrollStart = (0, import_react23.useCallback)(() => {
+  const handleScrollStart = (0, import_react24.useCallback)(() => {
     clearSpacer();
   }, [clearSpacer]);
-  const handleScrollStop = (0, import_react23.useCallback)(
+  const handleScrollStop = (0, import_react24.useCallback)(
     (scrollDirection, _scrollPos, atEnd) => {
       const { current: container } = containerRef;
       const { current: draggedItem } = draggedItemRef;
@@ -3225,7 +3280,7 @@ var useDragDropIndicator = ({
       // setVizData,
     ]
   );
-  const beginDrag = (0, import_react23.useCallback)(
+  const beginDrag = (0, import_react24.useCallback)(
     (dragElement) => {
       if (dragElement.ariaSelected && Array.isArray(selected) && selected.length > 1) {
         console.log("its a selected element, and we have a multi select");
@@ -3271,7 +3326,7 @@ var useDragDropIndicator = ({
             height: 2
           };
           setDropIndicator(
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               Draggable,
               {
                 wrapperClassName: "dropIndicatorContainer",
@@ -3293,7 +3348,7 @@ var useDragDropIndicator = ({
       positionDropIndicator
     ]
   );
-  const drag = (0, import_react23.useCallback)(
+  const drag = (0, import_react24.useCallback)(
     (dragPos, mouseMoveDirection) => {
       const { current: currentDropTarget } = dropTargetRef;
       const { current: draggedItem } = draggedItemRef;
@@ -3339,7 +3394,7 @@ var useDragDropIndicator = ({
     },
     [containerRef, orientation, positionDropIndicator]
   );
-  const drop = (0, import_react23.useCallback)(() => {
+  const drop = (0, import_react24.useCallback)(() => {
     clearSpacer();
     const { current: draggedItem } = draggedItemRef;
     const { current: dropTarget } = dropTargetRef;
@@ -3384,7 +3439,7 @@ var useDragDropIndicator = ({
     }
     setShowOverflow(false);
   }, [clearSpacer, onDrop]);
-  const releaseDrag = (0, import_react23.useCallback)(() => {
+  const releaseDrag = (0, import_react24.useCallback)(() => {
   }, []);
   return {
     beginDrag,
@@ -3399,20 +3454,20 @@ var useDragDropIndicator = ({
 };
 
 // src/drag-drop/useDragDropNext.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/drag-drop/useAutoScroll.ts
-var import_react24 = require("react");
+var import_react25 = require("react");
 var useAutoScroll = ({
   containerRef,
   onScrollingStopped,
   orientation = "vertical"
 }) => {
-  const scrollTimer = (0, import_react24.useRef)(null);
-  const isScrolling = (0, import_react24.useRef)(false);
-  const scrollPosRef = (0, import_react24.useRef)(0);
-  const lastScrollDirectionRef = (0, import_react24.useRef)("fwd");
-  const stopScrolling = (0, import_react24.useCallback)(
+  const scrollTimer = (0, import_react25.useRef)(null);
+  const isScrolling = (0, import_react25.useRef)(false);
+  const scrollPosRef = (0, import_react25.useRef)(0);
+  const lastScrollDirectionRef = (0, import_react25.useRef)("fwd");
+  const stopScrolling = (0, import_react25.useCallback)(
     (atEnd = false) => {
       console.log("[useAutoScroll] stopScrolling");
       if (scrollTimer.current !== null) {
@@ -3428,7 +3483,7 @@ var useAutoScroll = ({
     },
     [onScrollingStopped]
   );
-  const startScrolling = (0, import_react24.useCallback)(
+  const startScrolling = (0, import_react25.useCallback)(
     (direction, scrollRate, scrollUnit = 30) => {
       const { current: container } = containerRef;
       if (container) {
@@ -3467,7 +3522,7 @@ var useAutoScroll = ({
 };
 
 // src/drag-drop/useDragDropNext.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var NULL_DRAG_DROP_RESULT = {
   beginDrag: () => void 0,
   drag: () => void 0,
@@ -3508,26 +3563,26 @@ var useDragDropNext = ({
   orientation,
   ...dragDropProps
 }) => {
-  const dragBoundaries = (0, import_react25.useRef)({
+  const dragBoundaries = (0, import_react26.useRef)({
     start: 0,
     end: 0,
     contraStart: 0,
     contraEnd: 0
   });
-  const [draggableStatus, setDraggableStatus] = (0, import_react25.useState)({
+  const [draggableStatus, setDraggableStatus] = (0, import_react26.useState)({
     draggable: void 0,
     draggedItemIndex: -1,
     isDragging: false
   });
-  const dragDropStateRef = (0, import_react25.useRef)(null);
-  const mouseDownTimer = (0, import_react25.useRef)(null);
-  const isScrollableRef = (0, import_react25.useRef)(false);
-  const mousePosRef = (0, import_react25.useRef)({ x: 0, y: 0 });
-  const startPosRef = (0, import_react25.useRef)({ x: 0, y: 0 });
-  const settlingItemRef = (0, import_react25.useRef)(null);
-  const dropPosRef = (0, import_react25.useRef)(-1);
-  const dropIndexRef = (0, import_react25.useRef)(-1);
-  const handleScrollStopRef = (0, import_react25.useRef)();
+  const dragDropStateRef = (0, import_react26.useRef)(null);
+  const mouseDownTimer = (0, import_react26.useRef)(null);
+  const isScrollableRef = (0, import_react26.useRef)(false);
+  const mousePosRef = (0, import_react26.useRef)({ x: 0, y: 0 });
+  const startPosRef = (0, import_react26.useRef)({ x: 0, y: 0 });
+  const settlingItemRef = (0, import_react26.useRef)(null);
+  const dropPosRef = (0, import_react26.useRef)(-1);
+  const dropIndexRef = (0, import_react26.useRef)(-1);
+  const handleScrollStopRef = (0, import_react26.useRef)();
   const {
     isDragSource,
     isDropTarget,
@@ -3535,9 +3590,10 @@ var useDragDropNext = ({
     onEndOfDragOperation,
     register
   } = useDragDropProvider(id);
-  const dragMouseMoveHandlerRef = (0, import_react25.useRef)();
-  const dragMouseUpHandlerRef = (0, import_react25.useRef)();
-  const attachDragHandlers = (0, import_react25.useCallback)(() => {
+  const dragMouseMoveHandlerRef = (0, import_react26.useRef)();
+  const dragMouseUpHandlerRef = (0, import_react26.useRef)();
+  const attachDragHandlers = (0, import_react26.useCallback)(() => {
+    console.log("attach drag handlers");
     const { current: dragMove } = dragMouseMoveHandlerRef;
     const { current: dragUp } = dragMouseUpHandlerRef;
     if (dragMove && dragUp) {
@@ -3545,15 +3601,17 @@ var useDragDropNext = ({
       document.addEventListener("mouseup", dragUp, false);
     }
   }, []);
-  const removeDragHandlers = (0, import_react25.useCallback)(() => {
+  const removeDragHandlers = (0, import_react26.useCallback)(() => {
+    console.log("remove drag handlers");
     const { current: dragMove } = dragMouseMoveHandlerRef;
     const { current: dragUp } = dragMouseUpHandlerRef;
     if (dragMove && dragUp) {
+      console.log("... we have both handlers");
       document.removeEventListener("mousemove", dragMove, false);
       document.removeEventListener("mouseup", dragUp, false);
     }
   }, []);
-  const setDragBoundaries = (0, import_react25.useCallback)(
+  const setDragBoundaries = (0, import_react26.useCallback)(
     (containerRect, draggableRect) => {
       const { current: container } = containerRef;
       if (container) {
@@ -3572,10 +3630,10 @@ var useDragDropNext = ({
     },
     [containerRef, itemQuery, orientation]
   );
-  const terminateDrag = (0, import_react25.useCallback)(() => {
-    var _a;
+  const terminateDrag = (0, import_react26.useCallback)(() => {
+    var _a2;
     const { current: toIndex } = dropIndexRef;
-    const droppedItem = (_a = containerRef.current) == null ? void 0 : _a.querySelector(
+    const droppedItem = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelector(
       `${itemQuery}[data-index="${toIndex}"]`
     );
     if (droppedItem) {
@@ -3588,7 +3646,7 @@ var useDragDropNext = ({
       draggable: void 0
     }));
   }, [containerRef, itemQuery, onDropSettle]);
-  const getScrollDirection = (0, import_react25.useCallback)(
+  const getScrollDirection = (0, import_react26.useCallback)(
     (mousePos) => {
       if (containerRef.current && dragDropStateRef.current) {
         const { mouseOffset } = dragDropStateRef.current;
@@ -3609,10 +3667,10 @@ var useDragDropNext = ({
     [containerRef, orientation]
   );
   const useDragDropHook = allowDragDrop === true || allowDragDrop === "natural-movement" ? useDragDropNaturalMovement : allowDragDrop === "drop-indicator" ? useDragDropIndicator : noDragDrop;
-  const onScrollingStopped = (0, import_react25.useCallback)(
+  const onScrollingStopped = (0, import_react26.useCallback)(
     (scrollDirection, scrollPos, atEnd) => {
-      var _a;
-      (_a = handleScrollStopRef.current) == null ? void 0 : _a.call(handleScrollStopRef, scrollDirection, scrollPos, atEnd);
+      var _a2;
+      (_a2 = handleScrollStopRef.current) == null ? void 0 : _a2.call(handleScrollStopRef, scrollDirection, scrollPos, atEnd);
     },
     []
   );
@@ -3621,14 +3679,14 @@ var useDragDropNext = ({
     onScrollingStopped,
     orientation
   });
-  const handleDrop = (0, import_react25.useCallback)(
+  const handleDrop = (0, import_react26.useCallback)(
     (fromIndex, toIndex, options) => {
-      var _a;
+      var _a2;
       dropPosRef.current = toIndex;
       if (options.isExternal) {
         onDrop == null ? void 0 : onDrop(fromIndex, toIndex, {
           ...options,
-          payload: (_a = dragDropStateRef.current) == null ? void 0 : _a.payload
+          payload: (_a2 = dragDropStateRef.current) == null ? void 0 : _a2.payload
         });
       } else {
         onDrop == null ? void 0 : onDrop(fromIndex, toIndex, options);
@@ -3660,7 +3718,7 @@ var useDragDropNext = ({
     orientation
   });
   handleScrollStopRef.current = handleScrollStop;
-  const dragHandedOvertoProvider = (0, import_react25.useCallback)(
+  const dragHandedOvertoProvider = (0, import_react26.useCallback)(
     (dragDistance, clientContraPos) => {
       const { CONTRA_POS } = dimensions(orientation);
       const lastClientContraPos = mousePosRef.current[CONTRA_POS];
@@ -3677,7 +3735,7 @@ var useDragDropNext = ({
     },
     [id, isDragSource, onDragOut, orientation, releaseDrag, removeDragHandlers]
   );
-  const dragMouseMoveHandler = (0, import_react25.useCallback)(
+  const dragMouseMoveHandler = (0, import_react26.useCallback)(
     (evt) => {
       const { CLIENT_POS, CONTRA_CLIENT_POS, POS } = dimensions(orientation);
       const { clientX, clientY } = evt;
@@ -3736,7 +3794,7 @@ var useDragDropNext = ({
       stopScrolling
     ]
   );
-  const dragMouseUpHandler = (0, import_react25.useCallback)(() => {
+  const dragMouseUpHandler = (0, import_react26.useCallback)(() => {
     removeDragHandlers();
     if (dragDropStateRef.current) {
       settlingItemRef.current = dragDropStateRef.current.draggableElement;
@@ -3750,12 +3808,11 @@ var useDragDropNext = ({
   }, [drop, removeDragHandlers]);
   dragMouseMoveHandlerRef.current = dragMouseMoveHandler;
   dragMouseUpHandlerRef.current = dragMouseUpHandler;
-  const resumeDrag = (0, import_react25.useCallback)(
+  const resumeDrag = (0, import_react26.useCallback)(
     (dragDropState) => {
       dragDropStateRef.current = dragDropState;
       const { draggableElement, mouseOffset, initialDragElement } = dragDropState;
       const { current: container } = containerRef;
-      console.log({ container, draggableElement, initialDragElement });
       if (container && draggableElement) {
         const containerRect = container.getBoundingClientRect();
         const draggableRect = draggableElement.getBoundingClientRect();
@@ -3771,7 +3828,7 @@ var useDragDropNext = ({
     },
     [attachDragHandlers, beginDrag, containerRef, setDragBoundaries]
   );
-  const dragStart = (0, import_react25.useCallback)(
+  const dragStart = (0, import_react26.useCallback)(
     (evt) => {
       const { target } = evt;
       const dragElement = getDraggableElement(target, itemQuery);
@@ -3793,7 +3850,7 @@ var useDragDropNext = ({
         } = dragElement;
         setDraggableStatus({
           isDragging: true,
-          draggable: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          draggable: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             Draggable,
             {
               element: cloneElement3(dragElement),
@@ -3821,7 +3878,7 @@ var useDragDropNext = ({
       terminateDrag
     ]
   );
-  const preDragMouseMoveHandler = (0, import_react25.useCallback)(
+  const preDragMouseMoveHandler = (0, import_react26.useCallback)(
     (evt) => {
       const { CLIENT_POS, POS } = dimensions(orientation);
       const { [CLIENT_POS]: clientPos } = evt;
@@ -3839,7 +3896,7 @@ var useDragDropNext = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [containerRef, beginDrag, orientation]
   );
-  const preDragMouseUpHandler = (0, import_react25.useCallback)(() => {
+  const preDragMouseUpHandler = (0, import_react26.useCallback)(() => {
     if (mouseDownTimer.current) {
       window.clearTimeout(mouseDownTimer.current);
       mouseDownTimer.current = null;
@@ -3847,7 +3904,7 @@ var useDragDropNext = ({
     document.removeEventListener("mousemove", preDragMouseMoveHandler, false);
     document.removeEventListener("mouseup", preDragMouseUpHandler, false);
   }, [preDragMouseMoveHandler]);
-  const mouseDownHandler = (0, import_react25.useCallback)(
+  const mouseDownHandler = (0, import_react26.useCallback)(
     (evt) => {
       const { current: container } = containerRef;
       evt.stopPropagation();
@@ -3872,7 +3929,7 @@ var useDragDropNext = ({
     [containerRef, dragStart, preDragMouseMoveHandler, preDragMouseUpHandler]
   );
   const { current: settlingItem } = settlingItemRef;
-  (0, import_react25.useLayoutEffect)(() => {
+  (0, import_react26.useLayoutEffect)(() => {
     if (settlingItem && containerRef.current) {
       const dropPos = dropPosRef.current;
       const droppedItem = containerRef.current.querySelector(
@@ -3897,7 +3954,7 @@ var useDragDropNext = ({
       settlingItemRef.current = null;
     }
   }, [containerRef, itemQuery, settlingItem, terminateDrag]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (id && (isDragSource || isDropTarget)) {
       register(id, resumeDrag);
     }
@@ -3910,6 +3967,90 @@ var useDragDropNext = ({
   };
 };
 
+// src/list/useListDrop.ts
+var import_react27 = require("react");
+var useListDrop = ({
+  dataHook,
+  onDrop,
+  onMoveListItem,
+  selected,
+  setHighlightedIndex,
+  setSelected
+}) => {
+  const selectedByIndexRef = (0, import_react27.useRef)([]);
+  const dataHookRef = (0, import_react27.useRef)(dataHook);
+  dataHookRef.current = dataHook;
+  const adjustIndex = (0, import_react27.useCallback)(
+    (index, fromIndex, toIndex) => {
+      if (index === fromIndex) {
+        return toIndex;
+      } else if (index < Math.min(fromIndex, toIndex) || index > Math.max(fromIndex, toIndex)) {
+        return index;
+      }
+      if (fromIndex < index) {
+        return index - 1;
+      } else {
+        return index + 1;
+      }
+    },
+    []
+  );
+  const reorderSelectedIndices = (0, import_react27.useCallback)(
+    (selected2, fromIndex, toIndex) => {
+      const selectedIndices = selected2.map(
+        (id) => dataHookRef.current.indexOfItemById(id)
+      );
+      return selectedIndices.map(
+        (item) => adjustIndex(item, fromIndex, toIndex)
+      );
+    },
+    [adjustIndex]
+  );
+  const handleDrop = (0, import_react27.useCallback)(
+    (fromIndex, toIndex, options) => {
+      if (hasSelection(selected)) {
+        selectedByIndexRef.current = reorderSelectedIndices(
+          selected,
+          fromIndex,
+          toIndex
+        );
+      }
+      if (options.isExternal) {
+        onDrop == null ? void 0 : onDrop(fromIndex, toIndex, options);
+      } else {
+        onMoveListItem == null ? void 0 : onMoveListItem(fromIndex, toIndex);
+      }
+      setHighlightedIndex(-1);
+    },
+    [
+      selected,
+      setHighlightedIndex,
+      reorderSelectedIndices,
+      onDrop,
+      onMoveListItem
+    ]
+  );
+  const handleDropSettle = (0, import_react27.useCallback)(
+    (toIndex) => {
+      setHighlightedIndex(toIndex);
+    },
+    [setHighlightedIndex]
+  );
+  (0, import_react27.useEffect)(() => {
+    const { current: selectedByIndex } = selectedByIndexRef;
+    if (hasSelection(selectedByIndex)) {
+      selectedByIndexRef.current = [];
+      const postDropSelected = Array.isArray(selectedByIndex) ? selectedByIndex.map((i) => dataHook.data[i].id) : dataHook.data[selectedByIndex].id;
+      selectedByIndexRef.current = [];
+      setSelected(postDropSelected);
+    }
+  }, [dataHook.data, setSelected]);
+  return {
+    handleDrop,
+    onDropSettle: handleDropSettle
+  };
+};
+
 // src/list/useList.ts
 var useList = ({
   allowDragDrop = false,
@@ -3944,14 +4085,15 @@ var useList = ({
   tabToSelect,
   viewportRange
 }) => {
-  const selectedByIndexRef = (0, import_react26.useRef)(null);
-  const lastSelection = (0, import_react26.useRef)(selected || defaultSelected);
+  const lastSelection = (0, import_react28.useRef)(
+    selected || defaultSelected
+  );
   const handleKeyboardNavigation = (evt, nextIndex) => {
-    var _a, _b;
-    (_b = (_a = selectionHook.listHandlers).onKeyboardNavigation) == null ? void 0 : _b.call(_a, evt, nextIndex);
+    var _a2, _b;
+    (_b = (_a2 = selectionHook.listHandlers).onKeyboardNavigation) == null ? void 0 : _b.call(_a2, evt, nextIndex);
     onKeyboardNavigation == null ? void 0 : onKeyboardNavigation(evt, nextIndex);
   };
-  const handleSelect = (0, import_react26.useCallback)(
+  const handleSelect = (0, import_react28.useCallback)(
     (evt, selectedId) => {
       if (onSelect) {
         if (selectedId !== null) {
@@ -3961,29 +4103,35 @@ var useList = ({
     },
     [dataHook, onSelect]
   );
-  const scrollContainer = (0, import_react26.useMemo)(() => {
-    var _a, _b;
+  const scrollContainer = (0, import_react28.useMemo)(() => {
+    var _a2, _b;
     if (scrollContainerRef) {
       return scrollContainerRef;
     } else {
       return {
-        current: (_b = (_a = containerRef.current) == null ? void 0 : _a.querySelector(".vuuList-scrollContainer")) != null ? _b : null
+        current: (_b = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelector(".vuuList-scrollContainer")) != null ? _b : null
       };
     }
-  }, []);
-  const handleSelectionChange = (0, import_react26.useCallback)(
+  }, [containerRef, scrollContainerRef]);
+  const handleSelectionChange = (0, import_react28.useCallback)(
     (evt, selected2) => {
       if (onSelectionChange) {
-        if (Array.isArray(selected2)) {
+        if (isSingleSelection(selectionStrategy)) {
+          const [selectedItem] = selected2;
+          onSelectionChange(
+            evt,
+            dataHook.itemById(selectedItem)
+          );
+        } else if (isMultiSelection(selectionStrategy)) {
           const selectedItems = selected2.map((id2) => dataHook.itemById(id2));
-          onSelectionChange(evt, selectedItems);
-        } else if (selected2) {
-          const item = dataHook.itemById(selected2);
-          onSelectionChange(evt, item);
+          onSelectionChange(
+            evt,
+            selectedItems
+          );
         }
       }
     },
-    [dataHook, onSelectionChange]
+    [dataHook, onSelectionChange, selectionStrategy]
   );
   const {
     highlightedIndex,
@@ -4013,7 +4161,7 @@ var useList = ({
     highlightedIdx: highlightedIndex,
     collectionHook: dataHook
   });
-  const handleDragStart = (0, import_react26.useCallback)(
+  const handleDragStart = (0, import_react28.useCallback)(
     (dragDropState) => {
       setHighlightedIndex(-1);
       onDragStart == null ? void 0 : onDragStart(dragDropState);
@@ -4033,76 +4181,20 @@ var useList = ({
     selectionKeys,
     tabToSelect
   });
-  const adjustIndex = (0, import_react26.useCallback)(
-    (item, fromIndex, toIndex) => {
-      const index = dataHook.data.indexOf(item);
-      if (index === fromIndex) {
-        return toIndex;
-      } else if (index < Math.min(fromIndex, toIndex) || index > Math.max(fromIndex, toIndex)) {
-        return index;
-      }
-      if (fromIndex < index) {
-        return index - 1;
-      } else {
-        return index + 1;
-      }
-    },
-    [dataHook.data]
-  );
-  const reorderSelectedIndices = (0, import_react26.useCallback)(
-    (selected2, fromIndex, toIndex) => {
-      if (Array.isArray(selected2)) {
-        return selected2.map((item) => adjustIndex(item, fromIndex, toIndex));
-      } else {
-        return adjustIndex(selected2, fromIndex, toIndex);
-      }
-    },
-    [adjustIndex]
-  );
-  const handleDrop = (0, import_react26.useCallback)(
-    (fromIndex, toIndex, options) => {
-      if (hasSelection(selectionHook.selected)) {
-        selectedByIndexRef.current = reorderSelectedIndices(
-          selectionHook.selected,
-          fromIndex,
-          toIndex
-        );
-      }
-      if (options.isExternal) {
-        onDrop == null ? void 0 : onDrop(fromIndex, toIndex, options);
-      } else {
-        onMoveListItem == null ? void 0 : onMoveListItem(fromIndex, toIndex);
-      }
-      setHighlightedIndex(-1);
-    },
-    [
-      selectionHook.selected,
-      setHighlightedIndex,
-      reorderSelectedIndices,
-      onDrop,
-      onMoveListItem
-    ]
-  );
-  const handleDropSettle = (0, import_react26.useCallback)(
-    (toIndex) => {
-      setHighlightedIndex(toIndex);
-    },
-    [setHighlightedIndex]
-  );
+  const { handleDrop, onDropSettle } = useListDrop({
+    dataHook,
+    onDrop,
+    onMoveListItem,
+    selected: selectionHook.selected,
+    setHighlightedIndex,
+    setSelected: selectionHook.setSelected
+  });
   const { setSelected } = selectionHook;
-  (0, import_react26.useEffect)(() => {
-    const { current: selectedByIndex } = selectedByIndexRef;
-    if (hasSelection(selectedByIndex)) {
-      const postDropSelected = Array.isArray(selectedByIndex) ? selectedByIndex.map((i) => dataHook.data[i]) : dataHook.data[selectedByIndex];
-      selectedByIndexRef.current = null;
-      setSelected(postDropSelected);
-    }
-  }, [dataHook.data, setSelected]);
   (0, import_vuu_layout2.useLayoutEffectSkipFirst)(() => {
     if (hasSelection(lastSelection.current)) {
-      setSelected(Array.isArray(lastSelection.current) ? [] : null);
+      setSelected([]);
     }
-  }, [setSelected, dataHook.data]);
+  }, [selected, dataHook.data, setSelected]);
   const {
     onMouseDown,
     isDragging,
@@ -4117,8 +4209,7 @@ var useList = ({
     itemQuery: ".vuuListItem",
     onDragStart: handleDragStart,
     onDrop: handleDrop,
-    onDropSettle: handleDropSettle,
-    // selected: selectionHook.selected,
+    onDropSettle,
     viewportRange
   });
   const { onKeyDown: typeaheadOnKeyDown } = useTypeahead({
@@ -4128,15 +4219,15 @@ var useList = ({
     typeToNavigate: true,
     items: dataHook.data
   });
-  const handleKeyDown = (0, import_react26.useCallback)(
+  const handleKeyDown = (0, import_react28.useCallback)(
     (evt) => {
-      var _a, _b, _c;
+      var _a2, _b, _c;
       if (!evt.defaultPrevented) {
         typeaheadOnKeyDown == null ? void 0 : typeaheadOnKeyDown(evt);
       }
       navigationKeyDown(evt);
       if (!evt.defaultPrevented) {
-        (_b = (_a = selectionHook.listHandlers).onKeyDown) == null ? void 0 : _b.call(_a, evt);
+        (_b = (_a2 = selectionHook.listHandlers).onKeyDown) == null ? void 0 : _b.call(_a2, evt);
       }
       if (!evt.defaultPrevented) {
         (_c = collapsibleHook == null ? void 0 : collapsibleHook.onKeyDown) == null ? void 0 : _c.call(collapsibleHook, evt);
@@ -4161,7 +4252,7 @@ var useList = ({
     stickyHeaders
   });
   const isScrolling = isViewportScrolling.current || isDragDropScrolling.current;
-  const handleMouseMove = (0, import_react26.useCallback)(
+  const handleMouseMove = (0, import_react28.useCallback)(
     (evt) => {
       if (!isScrolling && !disabled && !isDragging) {
         navigationMouseMove();
@@ -4187,8 +4278,8 @@ var useList = ({
     ]
   );
   const getActiveDescendant = () => {
-    var _a;
-    return highlightedIndex === void 0 || highlightedIndex === -1 || disableAriaActiveDescendant ? void 0 : (_a = dataHook.data[highlightedIndex]) == null ? void 0 : _a.id;
+    var _a2;
+    return highlightedIndex === void 0 || highlightedIndex === -1 || disableAriaActiveDescendant ? void 0 : (_a2 = dataHook.data[highlightedIndex]) == null ? void 0 : _a2.id;
   };
   lastSelection.current = selectionHook.selected;
   const listControlProps = {
@@ -4216,6 +4307,7 @@ var useList = ({
     listItemHeaderHandlers: collapsibleHook,
     listControlProps,
     scrollIntoView,
+    //TODO given that we firs onSelect and onSelectionCHange with Item(s), should we return Item(s) here ?
     selected: selectionHook.selected,
     setHighlightedIndex,
     setIgnoreFocus: keyboardHook.setIgnoreFocus,
@@ -4225,7 +4317,7 @@ var useList = ({
 };
 
 // src/list/useListHeight.ts
-var import_react27 = require("react");
+var import_react29 = require("react");
 var getContentHeight = (itemCount, itemHeight, itemGapSize = 0) => {
   if (itemCount === 0) {
     return 0;
@@ -4245,14 +4337,13 @@ var useListHeight = ({
   itemHeight: itemHeightProp = 36,
   size
 }) => {
-  const [measuredItemHeight, setMeasuredItemHeight] = (0, import_react27.useState)(itemHeightProp);
-  const [, forceUpdate] = (0, import_react27.useState)({});
-  const proxyItemRef = (0, import_react27.useRef)(null);
-  const [contentHeight, computedListHeight] = (0, import_react27.useMemo)(() => {
+  const [measuredItemHeight, setMeasuredItemHeight] = (0, import_react29.useState)(itemHeightProp);
+  const [, forceUpdate] = (0, import_react29.useState)({});
+  const proxyItemRef = (0, import_react29.useRef)(null);
+  const [contentHeight, computedListHeight] = (0, import_react29.useMemo)(() => {
     let result = 0;
     const itemHeight = measuredItemHeight != null ? measuredItemHeight : itemHeightProp;
     const contentHeight2 = getContentHeight(itemCount, itemHeight, itemGapSize);
-    console.log(`contentHeight ${contentHeight2}`);
     if (height !== void 0) {
       return [contentHeight2, void 0];
     }
@@ -4277,12 +4368,12 @@ var useListHeight = ({
     itemHeightProp,
     measuredItemHeight
   ]);
-  const handleRowHeight = (0, import_react27.useCallback)(({ height: height2 }) => {
+  const handleRowHeight = (0, import_react29.useCallback)(({ height: height2 }) => {
     if (typeof height2 === "number") {
       setMeasuredItemHeight(height2);
     }
   }, []);
-  const rowHeightProxyRef = (0, import_react27.useCallback)((el) => {
+  const rowHeightProxyRef = (0, import_react29.useCallback)((el) => {
     proxyItemRef.current = el;
     forceUpdate({});
   }, []);
@@ -4298,7 +4389,7 @@ var useListHeight = ({
 
 // src/list/useScrollPosition.ts
 var import_core8 = require("@salt-ds/core");
-var import_react28 = require("react");
+var import_react30 = require("react");
 var getRange = (scrollPos, height, itemCount, itemHeight) => {
   const viewportRowCount = Math.ceil(height / itemHeight);
   const from = Math.floor(scrollPos / itemHeight);
@@ -4317,10 +4408,10 @@ var useScrollPosition = ({
   itemSize: listItemHeight,
   onViewportScroll
 }) => {
-  const firstVisibleRowRef = (0, import_react28.useRef)(0);
-  const lastVisibleRowRef = (0, import_react28.useRef)(0);
-  const scrollPosRef = (0, import_react28.useRef)(0);
-  const range = (0, import_react28.useMemo)(() => {
+  const firstVisibleRowRef = (0, import_react30.useRef)(0);
+  const lastVisibleRowRef = (0, import_react30.useRef)(0);
+  const scrollPosRef = (0, import_react30.useRef)(0);
+  const range = (0, import_react30.useMemo)(() => {
     return getRange(
       scrollPosRef.current,
       listHeight,
@@ -4328,11 +4419,11 @@ var useScrollPosition = ({
       listItemHeight + listItemGapSize
     );
   }, [listHeight, listItemCount, listItemHeight, listItemGapSize]);
-  const [viewportRange, setViewportRange] = (0, import_react28.useState)(range);
+  const [viewportRange, setViewportRange] = (0, import_react30.useState)(range);
   (0, import_core8.useIsomorphicLayoutEffect)(() => {
     setViewportRange(range);
   }, [range]);
-  const handleVerticalScroll = (0, import_react28.useCallback)(
+  const handleVerticalScroll = (0, import_react30.useCallback)(
     (e) => {
       const scrollTop = e.target.scrollTop;
       if (scrollTop !== scrollPosRef.current) {
@@ -4367,11 +4458,11 @@ var useScrollPosition = ({
 };
 
 // src/list/List.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var import_react30 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react32 = require("react");
 var defaultEmptyMessage = "No data to display";
 var classBase5 = "vuuList";
-var List = (0, import_react29.forwardRef)(function List2({
+var List = (0, import_react31.forwardRef)(function List2({
   ListItem: ListItem4 = ListItem,
   ListPlaceholder,
   allowDragDrop,
@@ -4417,16 +4508,17 @@ var List = (0, import_react29.forwardRef)(function List2({
   source,
   style: styleProp,
   stickyHeaders,
+  tabIndex = 0,
   tabToSelect,
   ...htmlAttributes
 }, forwardedRef) {
-  var _a, _b;
+  var _a2, _b;
   const id = (0, import_vuu_layout3.useId)(idProp);
-  const containerRef = (0, import_react29.useRef)(null);
-  const scrollContainerRef = (0, import_react29.useRef)(null);
-  const contentContainerRef = (0, import_react29.useRef)(null);
-  const [size, setSize] = (0, import_react29.useState)();
-  const handleResize = (0, import_react29.useCallback)((size2) => {
+  const containerRef = (0, import_react31.useRef)(null);
+  const scrollContainerRef = (0, import_react31.useRef)(null);
+  const contentContainerRef = (0, import_react31.useRef)(null);
+  const [size, setSize] = (0, import_react31.useState)();
+  const handleResize = (0, import_react31.useCallback)((size2) => {
     setSize(size2);
   }, []);
   const collectionHook = useCollectionItems({
@@ -4459,7 +4551,7 @@ var List = (0, import_react29.forwardRef)(function List2({
   const { onVerticalScroll, viewportRange } = useScrollPosition({
     containerSize: (
       // TODO whats the right way to handle string values - ie percentages
-      (_b = (_a = listClientHeight != null ? listClientHeight : computedListHeight) != null ? _a : size == null ? void 0 : size.height) != null ? _b : 0
+      (_b = (_a2 = listClientHeight != null ? listClientHeight : computedListHeight) != null ? _a2 : size == null ? void 0 : size.height) != null ? _b : 0
     ),
     itemCount: collectionHook.data.length,
     itemGapSize,
@@ -4514,7 +4606,7 @@ var List = (0, import_react29.forwardRef)(function List2({
   });
   const appliedFocusVisible = focusVisibleProp != null ? focusVisibleProp : focusVisible;
   const createHeader = function createHeader2(idx, headerId, title, expanded) {
-    const header = /* @__PURE__ */ (0, import_react30.createElement)(
+    const header = /* @__PURE__ */ (0, import_react32.createElement)(
       ListItem4,
       {
         ...listItemHeaderHandlers,
@@ -4537,13 +4629,13 @@ var List = (0, import_react29.forwardRef)(function List2({
   };
   const getItemHeight = getItemHeightProp === void 0 ? () => itemHeightProp : getItemHeightProp;
   function renderCollectionItem(list, item, idx) {
-    var _a2, _b2;
+    var _a3, _b2;
     const { disabled, value, id: itemId, label } = item;
-    const isChildItem = (0, import_react29.isValidElement)(value);
+    const isChildItem = (0, import_react31.isValidElement)(value);
     const listItemProps = {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore until we refactor this whole section
-      className: (0, import_classnames6.default)((_a2 = value == null ? void 0 : value.props) == null ? void 0 : _a2.className, {
+      className: (0, import_classnames6.default)((_a3 = value == null ? void 0 : value.props) == null ? void 0 : _a3.className, {
         vuuHighlighted: idx.value === highlightedIndex,
         vuuFocusVisible: appliedFocusVisible === idx.value,
         [`vuuDraggable-dragAway`]: draggedItemIndex === idx.value
@@ -4561,7 +4653,7 @@ var List = (0, import_react29.forwardRef)(function List2({
       showCheckbox: checkable
     };
     list.push(
-      isChildItem ? (0, import_react29.cloneElement)(value, listItemProps) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ListItem4, { ...listItemProps })
+      isChildItem ? (0, import_react31.cloneElement)(value, listItemProps) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ListItem4, { ...listItemProps })
     );
     idx.value += 1;
   }
@@ -4572,7 +4664,7 @@ var List = (0, import_react29.forwardRef)(function List2({
       renderCollectionItems(items, idx, idx.value + count) || []
     ) : header;
     list.push(
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { role: "group", children: childItems2 }, id2)
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { role: "group", children: childItems2 }, id2)
     );
   };
   const renderCollectionItems = (items, idx = { value: 0 }, end = items.length) => {
@@ -4593,13 +4685,14 @@ var List = (0, import_react29.forwardRef)(function List2({
   };
   function renderEmpty() {
     if (emptyMessage || showEmptyMessage) {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `${classBase5}-empty-message`, children: emptyMessage != null ? emptyMessage : defaultEmptyMessage });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${classBase5}-empty-message`, children: emptyMessage != null ? emptyMessage : defaultEmptyMessage });
     } else {
       return null;
     }
   }
+  const isEmpty = collectionHook.data.length === 0;
   const renderContent = () => {
-    if (collectionHook.data.length) {
+    if (!isEmpty) {
       const itemsToRender = collectionHook.data;
       return renderCollectionItems(itemsToRender);
     } else {
@@ -4616,7 +4709,7 @@ var List = (0, import_react29.forwardRef)(function List2({
     maxWidth,
     maxHeight
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     import_vuu_layout3.MeasuredContainer,
     {
       "aria-multiselectable": selectionStrategy === "multiple" || selectionStrategy === "extended" || selectionStrategy === "extended-multi-range" || void 0,
@@ -4626,6 +4719,7 @@ var List = (0, import_react29.forwardRef)(function List2({
       className: (0, import_classnames6.default)(classBase5, className, {
         [`${classBase5}-collapsible`]: collapsibleHeaders,
         [`${classBase5}-contentSized`]: computedListHeight !== void 0,
+        [`${classBase5}-empty`]: isEmpty,
         vuuFocusVisible: highlightedIndex === LIST_FOCUS_VISIBLE
       }),
       height: computedListHeight != null ? computedListHeight : height,
@@ -4635,10 +4729,10 @@ var List = (0, import_react29.forwardRef)(function List2({
       role: "listbox",
       onScroll: onVerticalScroll,
       style: { ...styleProp, ...sizeStyles },
-      tabIndex: listDisabled || disableFocus ? void 0 : 0,
+      tabIndex: listDisabled || disableFocus ? void 0 : tabIndex,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ListItemProxy, { ref: rowHeightProxyRef, height: itemHeightProp }),
-        collectionHook.data.length === 0 && ListPlaceholder !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ListPlaceholder, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `${classBase5}-viewport`, ref: scrollContainerRef, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ListItemProxy, { ref: rowHeightProxyRef, height: itemHeightProp }),
+        collectionHook.data.length === 0 && ListPlaceholder !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ListPlaceholder, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `${classBase5}-viewport`, ref: scrollContainerRef, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "div",
           {
             className: `${classBase5}-scrollingContentContainer`,
@@ -4680,10 +4774,10 @@ function clsx() {
 }
 
 // src/list/VirtualizedList.tsx
-var import_react32 = require("react");
+var import_react34 = require("react");
 
 // src/list/useVirtualization.ts
-var import_react31 = require("react");
+var import_react33 = require("react");
 
 // src/list/keyset.ts
 var KeySet = class {
@@ -4732,7 +4826,7 @@ var useVirtualization = ({
   listItemHeight,
   viewportRange
 }) => {
-  const keys = (0, import_react31.useMemo)(() => new KeySet(0, 1), []);
+  const keys = (0, import_react33.useMemo)(() => new KeySet(0, 1), []);
   const rowHeightWithGap = listItemHeight + listItemGapSize;
   const lo = Math.max(0, viewportRange.from - renderBuffer);
   const hi = Math.min(data.length, viewportRange.to + renderBuffer);
@@ -4749,11 +4843,11 @@ var useVirtualization = ({
 };
 
 // src/list/VirtualizedList.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var defaultEmptyMessage2 = "No data to display";
 var withBaseName2 = (0, import_core10.makePrefixer)("saltList");
-var ListItem3 = (0, import_react32.memo)(ListItem);
-var VirtualizedList = (0, import_react32.forwardRef)(function List3({
+var ListItem3 = (0, import_react34.memo)(ListItem);
+var VirtualizedList = (0, import_react34.forwardRef)(function List3({
   borderless,
   children,
   className,
@@ -4799,8 +4893,8 @@ var VirtualizedList = (0, import_react32.forwardRef)(function List3({
   ...htmlAttributes
 }, forwardedRef) {
   const id = (0, import_core10.useIdMemo)(idProp);
-  const rootRef = (0, import_react32.useRef)(null);
-  const rowHeightProxyRef = (0, import_react32.useRef)(null);
+  const rootRef = (0, import_react34.useRef)(null);
+  const rowHeightProxyRef = (0, import_react34.useRef)(null);
   const collectionHook = useCollectionItems({
     id,
     label: "List",
@@ -4836,9 +4930,7 @@ var VirtualizedList = (0, import_react32.forwardRef)(function List3({
     collectionHook,
     containerRef: rootRef,
     defaultHighlightedIndex: defaultHighlightedIdx,
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    defaultSelected: collectionHook.itemToCollectionItem(defaultSelected),
+    defaultSelected: collectionHook.itemToCollectionItemId(defaultSelected),
     disabled: listDisabled,
     disableTypeToSelect,
     highlightedIndex: highlightedIdxProp,
@@ -4847,9 +4939,7 @@ var VirtualizedList = (0, import_react32.forwardRef)(function List3({
     onSelectionChange,
     onHighlight,
     restoreLastFocus,
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    selected: collectionHook.itemToCollectionItem(selectedProp),
+    selected: collectionHook.itemToCollectionItemId(selectedProp),
     selectionStrategy,
     selectionKeys,
     stickyHeaders,
@@ -4878,7 +4968,7 @@ var VirtualizedList = (0, import_react32.forwardRef)(function List3({
     const [key, offset, pos, item] = row;
     const index = pos - 1;
     list.push(
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         ListItem3,
         {
           "aria-setsize": collectionHook.data.length,
@@ -4911,7 +5001,7 @@ var VirtualizedList = (0, import_react32.forwardRef)(function List3({
   }
   function renderEmpty() {
     if (emptyMessage || showEmptyMessage) {
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: withBaseName2("empty-message"), children: emptyMessage != null ? emptyMessage : defaultEmptyMessage2 });
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: withBaseName2("empty-message"), children: emptyMessage != null ? emptyMessage : defaultEmptyMessage2 });
     } else {
       return null;
     }
@@ -4932,7 +5022,7 @@ var VirtualizedList = (0, import_react32.forwardRef)(function List3({
     maxWidth: maxWidth != null ? maxWidth : width,
     maxHeight: maxHeight != null ? maxHeight : listHeight
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "div",
     {
       ...htmlAttributes,
@@ -4945,13 +5035,13 @@ var VirtualizedList = (0, import_react32.forwardRef)(function List3({
       onScroll: onVerticalScroll,
       style: { ...styleProp, ...sizeStyles },
       tabIndex: listDisabled || disableFocus ? void 0 : 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         "div",
         {
           className: withBaseName2("scrollingContentContainer"),
           style: { height: contentHeight },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ListItemProxy, { ref: rowHeightProxyRef }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ListItemProxy, { ref: rowHeightProxyRef }),
             renderContent()
           ]
         }
@@ -4962,12 +5052,12 @@ var VirtualizedList = (0, import_react32.forwardRef)(function List3({
 
 // src/list/RadioIcon.tsx
 var import_classnames7 = __toESM(require("classnames"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var classBase6 = "vuuRadioIcon";
 var RadioIcon = ({
   checked = false,
   ...htmlAttributes
-}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   "span",
   {
     ...htmlAttributes,
@@ -4977,7 +5067,7 @@ var RadioIcon = ({
 
 // src/dropdown/useDropdown.ts
 var import_core11 = require("@salt-ds/core");
-var import_react33 = require("react");
+var import_react35 = require("react");
 var useDropdown = ({
   collectionHook,
   defaultHighlightedIndex: defaultHighlightedIndexProp,
@@ -4994,23 +5084,36 @@ var useDropdown = ({
   selected,
   selectionStrategy
 }) => {
-  const isMultiSelect = selectionStrategy === "multiple" || selectionStrategy === "extended";
+  const isMultiSelect = isMultiSelection(selectionStrategy);
   const [isOpen, setIsOpen] = (0, import_core11.useControlled)({
     controlled: isOpenProp,
     default: defaultIsOpen != null ? defaultIsOpen : false,
     name: "useDropdownList"
   });
-  const handleSelectionChange = (0, import_react33.useCallback)(
+  const handleSelectionChange = (0, import_react35.useCallback)(
     (evt, selected2) => {
+      console.log(`useDropdown onSelectionChange`, {
+        selected: selected2
+      });
       if (!isMultiSelect) {
         setIsOpen(false);
         onOpenChange == null ? void 0 : onOpenChange(false);
       }
-      onSelectionChange == null ? void 0 : onSelectionChange(evt, selected2);
+      if (Array.isArray(selected2)) {
+        onSelectionChange == null ? void 0 : onSelectionChange(
+          null,
+          selected2
+        );
+      } else if (selected2) {
+        onSelectionChange == null ? void 0 : onSelectionChange(
+          null,
+          selected2
+        );
+      }
     },
     [isMultiSelect, onOpenChange, onSelectionChange, setIsOpen]
   );
-  const handleSelect = (0, import_react33.useCallback)(
+  const handleSelect = (0, import_react35.useCallback)(
     (evt, selected2) => {
       if (!isMultiSelect) {
         setIsOpen(false);
@@ -5034,15 +5137,15 @@ var useDropdown = ({
     selectionStrategy,
     tabToSelect: !isMultiSelect
   });
-  const handleOpenChange = (0, import_react33.useCallback)(
+  const handleOpenChange = (0, import_react35.useCallback)(
     (open) => {
       setIsOpen(open);
       onOpenChange == null ? void 0 : onOpenChange(open);
     },
     [onOpenChange, setIsOpen]
   );
-  const triggerLabel = (0, import_react33.useMemo)(() => {
-    if (isMultiSelect && Array.isArray(listHook.selected)) {
+  const triggerLabel = (0, import_react35.useMemo)(() => {
+    if (Array.isArray(listHook.selected)) {
       const selectedItems = listHook.selected.map(
         (id) => collectionHook.itemById(id)
       );
@@ -5054,11 +5157,8 @@ var useDropdown = ({
       } else {
         return `${selectedItems.length} items selected`;
       }
-    } else {
-      const selectedItem = listHook.selected;
-      return selectedItem == null ? void 0 : itemToString2(collectionHook.itemById(selectedItem));
     }
-  }, [collectionHook, isMultiSelect, itemToString2, listHook.selected]);
+  }, [collectionHook, itemToString2, listHook.selected]);
   return {
     isOpen,
     onOpenChange: handleOpenChange,
@@ -5068,8 +5168,8 @@ var useDropdown = ({
 };
 
 // src/dropdown/Dropdown.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Dropdown2 = (0, import_react34.forwardRef)(function Dropdown3({
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Dropdown2 = (0, import_react36.forwardRef)(function Dropdown3({
   "aria-label": ariaLabel,
   children,
   defaultIsOpen,
@@ -5090,8 +5190,8 @@ var Dropdown2 = (0, import_react34.forwardRef)(function Dropdown3({
   ...props
 }, forwardedRef) {
   const id = (0, import_vuu_layout4.useId)(idProp);
-  const rootRef = (0, import_react34.useRef)(null);
-  const listRef = (0, import_react34.useRef)(null);
+  const rootRef = (0, import_react36.useRef)(null);
+  const listRef = (0, import_react36.useRef)(null);
   const forkedRef = (0, import_core12.useForkRef)(rootRef, forwardedRef);
   const collectionHook = useCollectionItems({
     id,
@@ -5116,7 +5216,6 @@ var Dropdown2 = (0, import_react34.forwardRef)(function Dropdown3({
     highlightedIndex: ListProps3 == null ? void 0 : ListProps3.highlightedIndex,
     isOpen: isOpenProp,
     itemToString: itemToString2,
-    label: "Dropdown",
     listRef,
     onHighlight: ListProps3 == null ? void 0 : ListProps3.onHighlight,
     onOpenChange,
@@ -5125,14 +5224,13 @@ var Dropdown2 = (0, import_react34.forwardRef)(function Dropdown3({
     selected: collectionHook.itemToCollectionItemId(selectedProp),
     selectionStrategy
   });
-  const collectionItemsToItem = (0, import_react34.useCallback)(
-    (itemIdOrItemIds) => {
-      if (Array.isArray(itemIdOrItemIds)) {
-        return itemIdOrItemIds.map(
-          (id2) => collectionHook.itemById(id2)
-        );
-      } else if (itemIdOrItemIds) {
-        return collectionHook.itemById(itemIdOrItemIds);
+  const itemIdToItem = (0, import_react36.useCallback)(
+    (itemId) => {
+      if (Array.isArray(itemId)) {
+        const items = itemId.map((id2) => collectionHook.itemById(id2));
+        return items;
+      } else {
+        return collectionHook.itemById(itemId);
       }
     },
     [collectionHook]
@@ -5144,7 +5242,7 @@ var Dropdown2 = (0, import_react34.forwardRef)(function Dropdown3({
     };
     if (triggerComponent) {
       const ownProps = triggerComponent.props;
-      return (0, import_react34.cloneElement)(
+      return (0, import_react36.cloneElement)(
         triggerComponent,
         forwardCallbackProps(ownProps, {
           ...dropdownListHook.isOpen ? listControlProps : {},
@@ -5152,7 +5250,7 @@ var Dropdown2 = (0, import_react34.forwardRef)(function Dropdown3({
         })
       );
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         DropdownButton,
         {
           label: triggerLabel,
@@ -5162,7 +5260,7 @@ var Dropdown2 = (0, import_react34.forwardRef)(function Dropdown3({
       );
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CollectionProvider, { collectionHook, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CollectionProvider, { collectionHook, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     DropdownBase,
     {
       ...props,
@@ -5174,7 +5272,7 @@ var Dropdown2 = (0, import_react34.forwardRef)(function Dropdown3({
       width,
       children: [
         getTriggerComponent(),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           List,
           {
             ListItem: ListItem4,
@@ -5185,7 +5283,7 @@ var Dropdown2 = (0, import_react34.forwardRef)(function Dropdown3({
             onSelectionChange,
             onSelect,
             ref: listRef,
-            selected: collectionItemsToItem(selected),
+            selected: selected === void 0 ? void 0 : itemIdToItem(selected),
             selectionStrategy
           }
         )
@@ -5197,13 +5295,14 @@ var Dropdown2 = (0, import_react34.forwardRef)(function Dropdown3({
 // src/combo-box/useCombobox.ts
 var import_core13 = require("@salt-ds/core");
 var import_vuu_layout5 = require("@vuu-ui/vuu-layout");
-var import_react35 = require("react");
+var import_react37 = require("react");
 var EnterOnly = ["Enter"];
 var useCombobox = ({
   allowFreeText,
   ariaLabel,
   collectionHook,
   defaultIsOpen,
+  defaultSelected,
   defaultValue,
   onBlur,
   onFocus,
@@ -5212,12 +5311,15 @@ var useCombobox = ({
   id,
   initialHighlightedIndex = -1,
   isOpen: isOpenProp,
+  itemCount,
+  itemsToString,
   itemToString: itemToString2 = itemToString,
   listRef,
   onOpenChange,
   onSelectionChange,
+  onSetSelectedText,
+  selected: selectedProp,
   selectionStrategy,
-  stringToItem,
   value: valueProp,
   InputProps: inputProps = {
     onBlur,
@@ -5226,21 +5328,11 @@ var useCombobox = ({
     onSelect
   }
 }) => {
-  var _a;
-  const isMultiSelect = selectionStrategy === "multiple" || selectionStrategy === "extended";
-  const selectedValue = (_a = collectionHook.stringToCollectionItem(
-    valueProp != null ? valueProp : defaultValue
-  )) != null ? _a : null;
-  const {
-    data: indexPositions,
-    itemToCollectionItem,
-    setFilterPattern,
-    stringToCollectionItem
-  } = collectionHook;
-  const setHighlightedIndexRef = (0, import_react35.useRef)(null);
-  const setSelectedRef = (0, import_react35.useRef)(null);
-  const ignoreSelectOnFocus = (0, import_react35.useRef)(true);
-  const selectedRef = (0, import_react35.useRef)(selectedValue);
+  const isMultiSelect = isMultiSelection(selectionStrategy);
+  const { setFilterPattern } = collectionHook;
+  const setHighlightedIndexRef = (0, import_react37.useRef)(null);
+  const selectedRef = (0, import_react37.useRef)(isMultiSelect ? [] : null);
+  const ignoreSelectOnFocus = (0, import_react37.useRef)(true);
   const [isOpen, setIsOpen] = (0, import_core13.useControlled)({
     controlled: isOpenProp,
     default: defaultIsOpen != null ? defaultIsOpen : false,
@@ -5248,116 +5340,138 @@ var useCombobox = ({
   });
   const [value, setValue] = (0, import_core13.useControlled)({
     controlled: void 0,
-    default: defaultValue != null ? defaultValue : "",
+    default: defaultValue != null ? defaultValue : valueProp,
     name: "ComboBox",
     state: "value"
   });
-  const collectionItemsToItem = (0, import_react35.useCallback)(
-    (sel) => {
-      if (Array.isArray(sel)) {
-        return sel.map((i) => i.value);
-      } else if (sel) {
-        return sel.value;
-      } else {
-        return sel;
-      }
-    },
-    []
-  );
-  const [disableAriaActiveDescendant, setDisableAriaActiveDescendant] = (0, import_react35.useState)(true);
-  const [quickSelection, setQuickSelection] = (0, import_react35.useState)(false);
-  const highlightSelectedItem = (0, import_react35.useCallback)(
-    (selected2 = selectedRef.current) => {
-      var _a2, _b;
-      if (Array.isArray(selected2)) {
-        console.log("TODO multi selection");
-      } else if (selected2 == null) {
-        (_a2 = setHighlightedIndexRef.current) == null ? void 0 : _a2.call(setHighlightedIndexRef, -1);
-      } else {
-        const indexOfSelectedItem = indexPositions.indexOf(selected2);
-        (_b = setHighlightedIndexRef.current) == null ? void 0 : _b.call(setHighlightedIndexRef, indexOfSelectedItem);
-      }
-    },
-    [indexPositions]
-  );
-  const setTextValue = (0, import_react35.useCallback)(
-    (value2) => {
+  const [disableAriaActiveDescendant, setDisableAriaActiveDescendant] = (0, import_react37.useState)(true);
+  const highlightSelectedItem = (0, import_react37.useCallback)((selected2) => {
+    var _a2;
+    if (Array.isArray(selected2)) {
+      console.log("TODO multi selection");
+    } else if (selected2 == null) {
+      (_a2 = setHighlightedIndexRef.current) == null ? void 0 : _a2.call(setHighlightedIndexRef, -1);
+    }
+  }, []);
+  const setTextValue = (0, import_react37.useCallback)(
+    (value2, applyFilter = true) => {
       setValue(value2);
-      setFilterPattern(value2 === "" ? void 0 : value2);
+      if (applyFilter) {
+        setFilterPattern(value2 === "" ? void 0 : value2);
+      }
     },
     [setFilterPattern, setValue]
   );
-  const reconcileInput = (0, import_react35.useCallback)(
-    (selected2 = selectedRef.current) => {
-      var _a2;
-      let value2 = "";
+  const reconcileInput = (0, import_react37.useCallback)(
+    (selected2) => {
+      let newValue = allowFreeText ? value != null ? value : "" : "";
       if (Array.isArray(selected2)) {
-        console.log("TODO multi selection");
-      } else if (selected2 != null && selected2.value !== null) {
-        value2 = itemToString2(selected2.value);
+        if (selected2.length === 1) {
+          newValue = itemToString2(selected2[0]);
+        } else if (selected2.length > 1) {
+          newValue = (itemsToString == null ? void 0 : itemsToString(selected2)) || "";
+        }
+      } else if (selected2) {
+        newValue = itemToString2(selected2);
       }
-      setTextValue(value2);
-      if (value2 === "") {
-        (_a2 = setHighlightedIndexRef.current) == null ? void 0 : _a2.call(setHighlightedIndexRef, -1);
+      if (newValue !== value) {
+        setTextValue(newValue, !isMultiSelect);
+        onSetSelectedText == null ? void 0 : onSetSelectedText(newValue);
+        return true;
       } else {
-        highlightSelectedItem(selected2);
+        return false;
       }
     },
-    [highlightSelectedItem, itemToString2, setTextValue]
+    [
+      allowFreeText,
+      isMultiSelect,
+      itemToString2,
+      itemsToString,
+      onSetSelectedText,
+      setTextValue,
+      value
+    ]
   );
-  const applySelection = (0, import_react35.useCallback)(
-    (evt, selected2) => {
-      if (!isMultiSelect) {
-        setIsOpen(false);
+  const applySelection = (0, import_react37.useCallback)(() => {
+    const { current: selected2 } = selectedRef;
+    if (reconcileInput(selected2)) {
+      if (selected2) {
+        if (Array.isArray(selected2)) {
+          onSelectionChange == null ? void 0 : onSelectionChange(
+            null,
+            selected2
+          );
+        } else if (selected2) {
+          onSelectionChange == null ? void 0 : onSelectionChange(
+            null,
+            selected2
+          );
+        }
+      }
+    }
+  }, [onSelectionChange, reconcileInput]);
+  const selectFreeTextInputValue = (0, import_react37.useCallback)(() => {
+    if (allowFreeText) {
+      const text = value == null ? void 0 : value.trim();
+      const { current: selected2 } = selectedRef;
+      if (text) {
+        if (itemCount === 0 && text) {
+          if (isMultiSelect) {
+            onSelectionChange == null ? void 0 : onSelectionChange(null, [
+              text
+            ]);
+          } else {
+            onSelectionChange == null ? void 0 : onSelectionChange(null, text);
+          }
+          selectedRef.current = null;
+          return true;
+        } else if (selected2 && !isMultiSelect) {
+          if (selected2 && !Array.isArray(selected2) && itemToString2(selected2) === text) {
+          }
+        }
+      }
+    }
+    return false;
+  }, [
+    allowFreeText,
+    value,
+    itemCount,
+    isMultiSelect,
+    onSelectionChange,
+    itemToString2
+  ]);
+  const handleOpenChange = (0, import_react37.useCallback)(
+    (open, closeReason) => {
+      if (open && isMultiSelect) {
+        setTextValue("", false);
+      }
+      setIsOpen(open);
+      onOpenChange == null ? void 0 : onOpenChange(open);
+      if (!open && closeReason !== "Escape") {
+        if (!selectFreeTextInputValue()) {
+          applySelection();
+        }
       }
-      selectedRef.current = selected2;
-      reconcileInput(selected2);
-      onSelectionChange == null ? void 0 : onSelectionChange(evt, collectionItemsToItem(selected2 != null ? selected2 : null));
     },
     [
-      collectionItemsToItem,
+      applySelection,
       isMultiSelect,
-      onSelectionChange,
-      reconcileInput,
-      setIsOpen
+      onOpenChange,
+      selectFreeTextInputValue,
+      setIsOpen,
+      setTextValue
     ]
   );
-  const handleSelectionChange = (0, import_react35.useCallback)(
+  const handleSelectionChange = (0, import_react37.useCallback)(
     (evt, selected2) => {
+      selectedRef.current = selected2;
       if (!isMultiSelect) {
-        const selectedCollectionItem = itemToCollectionItem(selected2);
-        applySelection(evt, selectedCollectionItem);
-      }
-    },
-    [applySelection, isMultiSelect, itemToCollectionItem]
-  );
-  const handleFirstItemSelection = (0, import_react35.useCallback)(
-    (evt) => {
-      if (!allowFreeText && evt.key === "Enter" && quickSelection) {
-        const [firstItem] = indexPositions;
-        applySelection(evt, firstItem);
+        handleOpenChange(false, "select");
       }
     },
-    [allowFreeText, applySelection, indexPositions, quickSelection]
+    [handleOpenChange, isMultiSelect]
   );
-  const handleInputKeyDown = (0, import_react35.useCallback)(
-    (evt) => {
-      if ("Escape" === evt.key) {
-        if (allowFreeText) {
-          setTextValue("");
-        } else {
-          reconcileInput();
-        }
-      } else if ("Tab" === evt.key) {
-        if (!allowFreeText) {
-          reconcileInput();
-        }
-      }
-      handleFirstItemSelection(evt);
-    },
-    [allowFreeText, handleFirstItemSelection, reconcileInput, setTextValue]
-  );
-  const handleKeyboardNavigation = (0, import_react35.useCallback)(() => {
+  const handleKeyboardNavigation = (0, import_react37.useCallback)(() => {
     setDisableAriaActiveDescendant(false);
   }, []);
   const {
@@ -5366,41 +5480,26 @@ var useCombobox = ({
     highlightedIndex,
     listControlProps,
     listHandlers: listHookListHandlers,
-    selected,
-    setSelected
+    selected
   } = useList({
     collectionHook,
     containerRef: listRef,
     defaultHighlightedIndex: initialHighlightedIndex,
+    defaultSelected: collectionHook.itemToCollectionItemId(defaultSelected),
     disableAriaActiveDescendant,
     disableHighlightOnFocus: true,
     disableTypeToSelect: true,
-    label: "useComboBox",
     onKeyboardNavigation: handleKeyboardNavigation,
-    onKeyDown: handleInputKeyDown,
+    // onKeyDown: handleInputKeyDown,
     onSelectionChange: handleSelectionChange,
-    // we are controlling selection from a ref value - is this right ?
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    selected: selectedRef.current,
+    selected: collectionHook.itemToCollectionItemId(selectedProp),
     selectionKeys: EnterOnly,
     selectionStrategy,
     tabToSelect: !isMultiSelect
   });
   setHighlightedIndexRef.current = setHighlightedIndex;
-  setSelectedRef.current = setSelected;
-  const handleOpenChange = (0, import_react35.useCallback)(
-    (open) => {
-      setIsOpen(open);
-      if (!open) {
-        setQuickSelection(false);
-      }
-      onOpenChange == null ? void 0 : onOpenChange(open);
-    },
-    [onOpenChange, setIsOpen]
-  );
   const { onClick: listHandlersOnClick } = listHookListHandlers;
-  const handleListClick = (0, import_react35.useCallback)(
+  const handleListClick = (0, import_react37.useCallback)(
     (evt) => {
       var _a2;
       (_a2 = document.getElementById(`${id}-input`)) == null ? void 0 : _a2.focus();
@@ -5408,7 +5507,7 @@ var useCombobox = ({
     },
     [id, listHandlersOnClick]
   );
-  const handleInputChange = (0, import_react35.useCallback)(
+  const handleInputChange = (0, import_react37.useCallback)(
     (evt) => {
       const newValue = evt.target.value;
       setValue(newValue);
@@ -5416,20 +5515,14 @@ var useCombobox = ({
         setFilterPattern(newValue);
       } else {
         setFilterPattern(void 0);
-        selectedRef.current = null;
-        onSelectionChange == null ? void 0 : onSelectionChange(
-          evt,
-          null
-        );
       }
       setIsOpen(true);
-      setQuickSelection(newValue.length > 0 && !allowFreeText);
     },
-    [allowFreeText, onSelectionChange, setFilterPattern, setIsOpen, setValue]
+    [setFilterPattern, setIsOpen, setValue]
   );
   const { onFocus: inputOnFocus = onFocus } = inputProps;
   const { onFocus: listOnFocus } = listControlProps;
-  const handleInputFocus = (0, import_react35.useCallback)(
+  const handleInputFocus = (0, import_react37.useCallback)(
     (evt) => {
       setDisableAriaActiveDescendant(false);
       listOnFocus == null ? void 0 : listOnFocus(evt);
@@ -5437,70 +5530,29 @@ var useCombobox = ({
     },
     [inputOnFocus, listOnFocus]
   );
-  const listFocused = (0, import_react35.useCallback)(
+  const listFocused = (0, import_react37.useCallback)(
     (evt) => {
       const element = evt.relatedTarget;
       return (element == null ? void 0 : element.id) === `${id}-list`;
     },
     [id]
   );
-  const selectInputValue = (0, import_react35.useCallback)(
-    (evt) => {
-      var _a2;
-      const text = value.trim();
-      if (text) {
-        const selectedCollectionItem = stringToCollectionItem(
-          text
-        );
-        if (selectedCollectionItem) {
-          if (Array.isArray(selectedCollectionItem)) {
-          } else if (selectedCollectionItem !== selected) {
-            (_a2 = setSelectedRef.current) == null ? void 0 : _a2.call(setSelectedRef, selectedCollectionItem);
-            onSelectionChange == null ? void 0 : onSelectionChange(
-              evt,
-              selectedCollectionItem.value
-            );
-          }
-        } else if (stringToItem) {
-          const item = stringToItem(text);
-          if (item) {
-            console.log("we have a new item");
-          }
-        }
-      }
-    },
-    [onSelectionChange, selected, stringToItem, stringToCollectionItem, value]
-  );
   const { onBlur: inputOnBlur = onBlur } = inputProps;
   const { onBlur: listOnBlur } = listControlProps;
-  const handleInputBlur = (0, import_react35.useCallback)(
+  const handleInputBlur = (0, import_react37.useCallback)(
     (evt) => {
       if (listFocused(evt)) {
       } else {
         listOnBlur == null ? void 0 : listOnBlur(evt);
         inputOnBlur == null ? void 0 : inputOnBlur(evt);
-        if (allowFreeText) {
-          selectInputValue(evt);
-        } else {
-          reconcileInput();
-        }
         setDisableAriaActiveDescendant(true);
         ignoreSelectOnFocus.current = true;
-        setIsOpen(false);
       }
     },
-    [
-      listFocused,
-      listOnBlur,
-      inputOnBlur,
-      allowFreeText,
-      setIsOpen,
-      selectInputValue,
-      reconcileInput
-    ]
+    [listFocused, listOnBlur, inputOnBlur]
   );
   const { onSelect: inputOnSelect } = inputProps;
-  const handleInputSelect = (0, import_react35.useCallback)(
+  const handleInputSelect = (0, import_react37.useCallback)(
     (event) => {
       if (ignoreSelectOnFocus.current) {
         ignoreSelectOnFocus.current = false;
@@ -5513,16 +5565,13 @@ var useCombobox = ({
   );
   (0, import_vuu_layout5.useLayoutEffectSkipFirst)(() => {
     if (hasSelection(selected)) {
-      highlightSelectedItem();
+      highlightSelectedItem(selected);
     } else {
       setHighlightedIndex(initialHighlightedIndex);
     }
-    if (indexPositions.length === 0) {
-      setIsOpen(false);
-    }
   }, [
     highlightSelectedItem,
-    indexPositions.length,
+    itemCount,
     initialHighlightedIndex,
     selected,
     setHighlightedIndex,
@@ -5531,7 +5580,8 @@ var useCombobox = ({
   const mergedInputProps = {
     ...inputProps.inputProps,
     // "aria-owns": listId,
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    autoComplete: "off"
   };
   return {
     focusVisible,
@@ -5548,7 +5598,6 @@ var useCombobox = ({
       role: "combobox",
       value
     },
-    // listControlProps,
     listControlProps: {
       ...listControlProps,
       onBlur: handleInputBlur,
@@ -5558,57 +5607,69 @@ var useCombobox = ({
       ...listHookListHandlers,
       onClick: handleListClick
     },
-    selected
+    selected: selectedRef.current
   };
 };
 
 // src/list/ChevronIcon.tsx
 var import_classnames8 = __toESM(require("classnames"));
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var classBase7 = "vuuChevronIcon";
 var ChevronIcon = (props) => {
   const { direction, ...htmlAttributes } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { ...htmlAttributes, className: (0, import_classnames8.default)(classBase7, direction) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { ...htmlAttributes, className: (0, import_classnames8.default)(classBase7, direction) });
 };
 
 // src/combo-box/ComboBox.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var ComboBox = (0, import_react36.forwardRef)(function Combobox({
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ComboBox = (0, import_react38.forwardRef)(function Combobox({
   InputProps: InputProps5,
   ListProps: ListProps3,
+  PopupProps,
   ListItem: ListItem4,
   "aria-label": ariaLabel,
   allowFreeText,
   children,
   defaultIsOpen,
+  defaultSelected,
   defaultValue,
   disabled,
   onBlur,
   onFocus,
   onChange,
   onSelect,
+  onSetSelectedText,
   getFilterRegex,
   id: idProp,
   initialHighlightedIndex = -1,
   isOpen: isOpenProp,
-  itemToString: itemToString2,
+  itemToString: itemToString2 = itemToString,
+  itemsToString,
   onOpenChange: onOpenChangeProp,
   onSelectionChange,
+  selected: selectedProp,
   selectionStrategy,
   source,
-  stringToItem,
   value: valueProp,
   width = 180,
   ...props
 }, forwardedRef) {
   const id = (0, import_vuu_layout6.useId)(idProp);
-  const listRef = (0, import_react36.useRef)(null);
+  const listRef = (0, import_react38.useRef)(null);
+  const valueFromSelected = (item) => {
+    return Array.isArray(item) && item.length > 0 ? item[0] : void 0;
+  };
+  const getInitialValue = (items1, items2) => {
+    const item = items1 ? valueFromSelected(items1) : items2 ? valueFromSelected(items2) : void 0;
+    return item ? itemToString2(item) : "";
+  };
+  const initialValue = getInitialValue(selectedProp, defaultSelected);
   const collectionHook = useCollectionItems({
     id,
     source,
     children,
     options: {
-      filterPattern: valueProp != null ? valueProp : defaultValue,
+      filterPattern: initialValue,
       getFilterRegex,
       itemToString: itemToString2
     }
@@ -5628,9 +5689,12 @@ var ComboBox = (0, import_react36.forwardRef)(function Combobox({
     ariaLabel,
     collectionHook,
     defaultIsOpen,
+    defaultSelected,
     defaultValue,
     disabled,
     initialHighlightedIndex,
+    itemCount: collectionHook.data.length,
+    label: props.title,
     listRef,
     onBlur,
     onFocus,
@@ -5639,39 +5703,33 @@ var ComboBox = (0, import_react36.forwardRef)(function Combobox({
     id,
     isOpen: isOpenProp,
     itemToString: itemToString2,
-    label: "ComboBox",
+    itemsToString,
     onOpenChange: onOpenChangeProp,
     onSelectionChange,
+    onSetSelectedText,
+    selected: selectedProp,
     selectionStrategy,
-    stringToItem,
-    value: valueProp
+    value: initialValue
   });
-  const collectionItemsToItem = (0, import_react36.useCallback)(
-    (sel) => {
-      if (Array.isArray(sel)) {
-        return sel.map((i) => i.value);
-      } else if (sel) {
-        return sel.value;
-      } else {
-        return sel;
-      }
-    },
-    []
-  );
-  const endAdornment = endAdornmentProp === null ? null : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const handleDropdownIconClick = (0, import_react38.useCallback)(() => {
+    if (isOpen) {
+      onOpenChange(false, "toggle");
+    } else {
+      onOpenChange(true);
+    }
+  }, [isOpen, onOpenChange]);
+  const endAdornment = endAdornmentProp === null ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     ChevronIcon,
     {
       direction: isOpen ? "up" : "down",
-      onClick: () => {
-        onOpenChange(!isOpen);
-      }
+      onClick: handleDropdownIconClick
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CollectionProvider, { collectionHook, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CollectionProvider, { collectionHook, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     DropdownBase,
     {
       ...props,
-      fullWidth: true,
+      PopupProps,
       id,
       isOpen,
       onOpenChange,
@@ -5679,7 +5737,7 @@ var ComboBox = (0, import_react36.forwardRef)(function Combobox({
       ref: forwardedRef,
       width,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           import_core14.Input,
           {
             ...inputProps,
@@ -5688,11 +5746,12 @@ var ComboBox = (0, import_react36.forwardRef)(function Combobox({
             endAdornment
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           List,
           {
             ...ListProps3,
             ListItem: ListItem4,
+            defaultSelected: void 0,
             focusVisible,
             highlightedIndex,
             itemTextHighlightPattern: String(inputProps.value) || void 0,
@@ -5700,8 +5759,9 @@ var ComboBox = (0, import_react36.forwardRef)(function Combobox({
             listHandlers,
             onSelectionChange,
             ref: listRef,
-            selected: collectionItemsToItem(selected),
-            selectionStrategy
+            selected,
+            selectionStrategy,
+            tabIndex: -1
           }
         )
       ]
@@ -5745,7 +5805,7 @@ function applyRules(rules, value) {
 }
 
 // src/editable/useEditableText.ts
-var import_react37 = require("react");
+var import_react39 = require("react");
 var dispatchCommitEvent = (el) => {
   const commitEvent = new Event("vuu-commit");
   el.dispatchEvent(commitEvent);
@@ -5755,15 +5815,15 @@ var useEditableText = ({
   initialValue,
   onCommit
 }) => {
-  const [message, setMessage] = (0, import_react37.useState)();
-  const [value, setValue] = (0, import_react37.useState)(initialValue);
-  const initialValueRef = (0, import_react37.useRef)(initialValue);
-  const isDirtyRef = (0, import_react37.useRef)(false);
-  const hasCommittedRef = (0, import_react37.useRef)(false);
-  const handleBlur = (0, import_react37.useCallback)(() => {
+  const [message, setMessage] = (0, import_react39.useState)();
+  const [value, setValue] = (0, import_react39.useState)(initialValue);
+  const initialValueRef = (0, import_react39.useRef)(initialValue);
+  const isDirtyRef = (0, import_react39.useRef)(false);
+  const hasCommittedRef = (0, import_react39.useRef)(false);
+  const handleBlur = (0, import_react39.useCallback)(() => {
     console.log("blur");
   }, []);
-  const handleKeyDown = (0, import_react37.useCallback)(
+  const handleKeyDown = (0, import_react39.useCallback)(
     (evt) => {
       if (evt.key === "Enter") {
         evt.stopPropagation();
@@ -5795,7 +5855,7 @@ var useEditableText = ({
     },
     [clientSideEditValidationCheck, onCommit, value]
   );
-  const handleChange = (0, import_react37.useCallback)(
+  const handleChange = (0, import_react39.useCallback)(
     (evt) => {
       const { value: value2 } = evt.target;
       isDirtyRef.current = value2 !== initialValueRef.current;
@@ -5822,11 +5882,11 @@ var useEditableText = ({
 
 // src/editable-label/EditableLabel.tsx
 var import_classnames9 = __toESM(require("classnames"));
-var import_react38 = require("react");
+var import_react40 = require("react");
 var import_core15 = require("@salt-ds/core");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var classBase8 = "vuuEditableLabel";
-var EditableLabel = (0, import_react38.forwardRef)(function EditableLabel2({
+var EditableLabel = (0, import_react40.forwardRef)(function EditableLabel2({
   className: classNameProp,
   defaultEditing,
   defaultValue,
@@ -5837,8 +5897,8 @@ var EditableLabel = (0, import_react38.forwardRef)(function EditableLabel2({
   value: valueProp,
   ...restProps
 }, forwardedRef) {
-  const inputRef = (0, import_react38.useRef)(null);
-  const editingRef = (0, import_react38.useRef)(false);
+  const inputRef = (0, import_react40.useRef)(null);
+  const editingRef = (0, import_react40.useRef)(false);
   const [value, setValue] = (0, import_core15.useControlled)({
     controlled: valueProp,
     default: defaultValue != null ? defaultValue : "",
@@ -5851,14 +5911,14 @@ var EditableLabel = (0, import_react38.forwardRef)(function EditableLabel2({
     name: "EditableLabel",
     state: "editing"
   });
-  const setEditing = (0, import_react38.useCallback)(
+  const setEditing = (0, import_react40.useCallback)(
     (value2) => {
       _setEditing(editingRef.current = value2);
     },
     [_setEditing]
   );
-  const initialValue = (0, import_react38.useRef)(value);
-  (0, import_react38.useLayoutEffect)(() => {
+  const initialValue = (0, import_react40.useRef)(value);
+  (0, import_react40.useLayoutEffect)(() => {
     if (editing) {
       if (inputRef.current !== null) {
         inputRef.current.select();
@@ -5866,7 +5926,7 @@ var EditableLabel = (0, import_react38.forwardRef)(function EditableLabel2({
       }
     }
   }, [editing, inputRef]);
-  const enterEditMode = (0, import_react38.useCallback)(() => {
+  const enterEditMode = (0, import_react40.useCallback)(() => {
     setEditing(true);
     onEnterEditMode && onEnterEditMode();
   }, [onEnterEditMode, setEditing]);
@@ -5911,7 +5971,7 @@ var EditableLabel = (0, import_react38.forwardRef)(function EditableLabel2({
   const className = (0, import_classnames9.default)(classBase8, classNameProp, {
     [`${classBase8}-editing`]: editing
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       ...restProps,
@@ -5919,7 +5979,7 @@ var EditableLabel = (0, import_react38.forwardRef)(function EditableLabel2({
       onDoubleClick: handleDoubleClick,
       "data-text": value,
       ref: forwardedRef,
-      children: editing ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      children: editing ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         import_core15.Input,
         {
           inputProps: { className: `${classBase8}-input`, spellCheck: false },
@@ -5932,7 +5992,7 @@ var EditableLabel = (0, import_react38.forwardRef)(function EditableLabel2({
           textAlign: "left",
           variant: "secondary"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: `${classBase8}-label`, children: value })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `${classBase8}-label`, children: value })
     }
   );
 });
@@ -5940,11 +6000,11 @@ var EditableLabel = (0, import_react38.forwardRef)(function EditableLabel2({
 // src/expando-input/ExpandoInput.tsx
 var import_core16 = require("@salt-ds/core");
 var import_classnames10 = __toESM(require("classnames"));
-var import_react39 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react41 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var classBase9 = "vuuExpandoInput";
-var ExpandoInput = (0, import_react39.forwardRef)(function ExpandoInput2({ className: classNameProp, value, inputProps, ...InputProps5 }, forwardedRef) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_classnames10.default)(classBase9, classNameProp), "data-text": value, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var ExpandoInput = (0, import_react41.forwardRef)(function ExpandoInput2({ className: classNameProp, value, inputProps, ...InputProps5 }, forwardedRef) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_classnames10.default)(classBase9, classNameProp), "data-text": value, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_core16.Input,
     {
       ...InputProps5,
@@ -5959,17 +6019,17 @@ var ExpandoInput = (0, import_react39.forwardRef)(function ExpandoInput2({ class
 });
 
 // src/inputs/Checkbox.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var Checkbox = (props) => {
   const { onToggle, checked, label } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
       className: "vuuCheckbox",
       onClick: onToggle,
       onKeyUp: (e) => e.key === " " && onToggle(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CheckboxIcon, { tabIndex: 0, checked }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CheckboxIcon, { tabIndex: 0, checked }),
         label
       ]
     }
@@ -5977,28 +6037,27 @@ var Checkbox = (props) => {
 };
 
 // src/inputs/RadioButton.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var RadioButton = (props) => {
   const { onClick, checked, label, groupName } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "vuuRadioButton", onClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "radio", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("input", { type: "radio", name: groupName }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RadioIcon, { checked })
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "vuuRadioButton", onClick, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "radio", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { type: "radio", name: groupName }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RadioIcon, { checked })
     ] }),
     label
   ] });
 };
 
-// src/instrument-search/InstrumentSearch.tsx
+// src/instrument-picker/InstrumentPicker.tsx
 var import_vuu_layout7 = require("@vuu-ui/vuu-layout");
 var import_vuu_table = require("@vuu-ui/vuu-table");
 var import_core17 = require("@salt-ds/core");
-var import_classnames11 = __toESM(require("classnames"));
-var import_react40 = require("react");
+var import_react43 = require("react");
 
-// src/instrument-search/SearchCell.tsx
+// src/instrument-picker/SearchCell.tsx
 var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var classBase10 = "vuuSearchCell";
 var SearchCell = ({
   column,
@@ -6007,8 +6066,8 @@ var SearchCell = ({
 }) => {
   const key = columnMap[column.name];
   const value = row[key];
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: classBase10, tabIndex: -1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { "data-icon": "draggable" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: classBase10, tabIndex: -1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { "data-icon": "draggable" }),
     value
   ] });
 };
@@ -6017,9 +6076,176 @@ console.log("register SearchCell");
   serverDataType: "private"
 });
 
+// src/instrument-picker/useInstrumentPicker.ts
+var import_react42 = require("react");
+var useInstrumentPicker = ({
+  columnMap,
+  dataSource,
+  defaultIsOpen,
+  isOpen: isOpenProp,
+  onSelect,
+  searchColumns
+}) => {
+  const [value, setValue] = (0, import_react42.useState)("");
+  const [isOpen, setIsOpen] = useControlled({
+    controlled: isOpenProp,
+    default: defaultIsOpen != null ? defaultIsOpen : false,
+    name: "useDropdownList"
+  });
+  console.log({ dataSource });
+  const baseFilterPattern = (0, import_react42.useMemo)(
+    // TODO make this contains once server supports it
+    () => searchColumns.map((col) => `${col} starts "__VALUE__"`).join(" or "),
+    [searchColumns]
+  );
+  const handleOpenChange = (0, import_react42.useCallback)(
+    (open) => {
+      setIsOpen(open);
+    },
+    [setIsOpen]
+  );
+  const handleInputChange = (0, import_react42.useCallback)(
+    (evt) => {
+      const { value: value2 } = evt.target;
+      setValue(value2);
+      if (value2 && value2.trim().length) {
+        const filter = baseFilterPattern.replaceAll("__VALUE__", value2);
+        dataSource.filter = {
+          filter
+        };
+      } else {
+        dataSource.filter = {
+          filter: ""
+        };
+      }
+      setIsOpen(true);
+    },
+    [baseFilterPattern, dataSource, setIsOpen]
+  );
+  const handleSelectRow = (0, import_react42.useCallback)(
+    (row) => {
+      const { name } = columnMap;
+      const { [name]: value2 } = row;
+      setValue(value2);
+      setIsOpen(false);
+      onSelect(row);
+    },
+    [columnMap, onSelect, setIsOpen]
+  );
+  const inputProps = {
+    onChange: handleInputChange
+  };
+  const controlProps = {};
+  const tableHandlers = {
+    onSelect: handleSelectRow
+  };
+  return {
+    controlProps,
+    inputProps,
+    isOpen,
+    onOpenChange: handleOpenChange,
+    tableHandlers,
+    value
+  };
+};
+
+// src/instrument-picker/InstrumentPicker.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var classBase11 = "vuuInstrumentPicker";
+var InstrumentPicker = (0, import_react43.forwardRef)(function InstrumentPicker2({
+  TableProps: { dataSource, ...TableProps3 },
+  className,
+  columnMap,
+  disabled,
+  id: idProp,
+  onSelect,
+  schema,
+  searchColumns,
+  width,
+  ...htmlAttributes
+}, forwardedRef) {
+  const id = (0, import_vuu_layout7.useId)(idProp);
+  const {
+    controlProps,
+    inputProps,
+    isOpen,
+    onOpenChange,
+    tableHandlers,
+    value
+  } = useInstrumentPicker({ columnMap, dataSource, onSelect, searchColumns });
+  const endAdornment = (0, import_react43.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { "data-icon": "chevron-down" }), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    DropdownBase,
+    {
+      ...htmlAttributes,
+      fullWidth: true,
+      id,
+      isOpen,
+      onOpenChange,
+      openOnFocus: true,
+      placement: "below-full-width",
+      ref: forwardedRef,
+      width,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          import_core17.Input,
+          {
+            ...inputProps,
+            disabled,
+            ...controlProps,
+            endAdornment,
+            value
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          import_vuu_table.TableNext,
+          {
+            rowHeight: 25,
+            renderBufferSize: 100,
+            ...TableProps3,
+            ...tableHandlers,
+            className: `${classBase11}-list`,
+            height: 200,
+            dataSource,
+            showColumnHeaders: false
+          }
+        )
+      ]
+    }
+  );
+});
+
 // src/instrument-search/InstrumentSearch.tsx
+var import_vuu_layout8 = require("@vuu-ui/vuu-layout");
+var import_vuu_table2 = require("@vuu-ui/vuu-table");
+var import_core18 = require("@salt-ds/core");
+var import_classnames11 = __toESM(require("classnames"));
+var import_react44 = require("react");
+
+// src/instrument-search/SearchCell.tsx
+var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var classBase11 = "vuuInstrumentSearch";
+var classBase12 = "vuuSearchCell";
+var SearchCell2 = ({
+  column,
+  columnMap,
+  row
+}) => {
+  const key = columnMap[column.name];
+  const value = row[key];
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: classBase12, tabIndex: -1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "data-icon": "draggable" }),
+    value
+  ] });
+};
+console.log("register SearchCell");
+(0, import_vuu_utils7.registerComponent)("search-cell", SearchCell2, "cell-renderer", {
+  serverDataType: "private"
+});
+
+// src/instrument-search/InstrumentSearch.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var classBase13 = "vuuInstrumentSearch";
 var defaultTableConfig = {
   columns: [
     { name: "bbg", hidden: true },
@@ -6036,16 +6262,16 @@ var defaultTableConfig = {
   ],
   rowSeparators: true
 };
-var searchIcon = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "data-icon": "search" });
+var searchIcon = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { "data-icon": "search" });
 var InstrumentSearch = ({
-  TableProps: TableProps2,
+  TableProps: TableProps3,
   className,
   dataSource,
   searchColumn = "description",
   ...htmlAttributes
 }) => {
-  const [searchState, setSearchState] = (0, import_react40.useState)({ searchText: "", filter: "" });
-  const handleChange = (0, import_react40.useCallback)(
+  const [searchState, setSearchState] = (0, import_react44.useState)({ searchText: "", filter: "" });
+  const handleChange = (0, import_react44.useCallback)(
     (evt) => {
       const { value } = evt.target;
       const filter = `name starts "${value}"`;
@@ -6064,11 +6290,11 @@ var InstrumentSearch = ({
     },
     [dataSource, searchColumn]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ...htmlAttributes, className: (0, import_classnames11.default)(classBase11, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core17.FormField, { className: `${classBase11}-inputField`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core17.FormFieldLabel, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-        import_core17.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { ...htmlAttributes, className: (0, import_classnames11.default)(classBase13, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core18.FormField, { className: `${classBase13}-inputField`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core18.FormFieldLabel, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        import_core18.Input,
         {
           endAdornment: searchIcon,
           value: searchState.searchText,
@@ -6076,29 +6302,30 @@ var InstrumentSearch = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      import_vuu_table.TableNext,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      import_vuu_table2.TableNext,
       {
         rowHeight: 25,
         config: defaultTableConfig,
         renderBufferSize: 100,
-        ...TableProps2,
-        className: `${classBase11}-list`,
+        ...TableProps3,
+        className: `${classBase13}-list`,
         dataSource,
         showColumnHeaders: false
       }
     )
   ] });
 };
-(0, import_vuu_layout7.registerComponent)("InstrumentSearch", InstrumentSearch, "view");
+var _a;
+(_a = import_vuu_layout8.registerComponent) == null ? void 0 : _a("InstrumentSearch", InstrumentSearch, "view");
 
 // src/price-ticker/PriceTicker.tsx
-var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
-var import_react41 = require("react");
+var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
+var import_react45 = require("react");
 var import_classnames12 = __toESM(require("classnames"));
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var classBase12 = "vuuPriceTicker";
-var getValueFormatter = (decimals) => (0, import_vuu_utils7.numericFormatter)({
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var classBase14 = "vuuPriceTicker";
+var getValueFormatter = (decimals) => (0, import_vuu_utils8.numericFormatter)({
   type: {
     name: "number",
     formatting: {
@@ -6108,7 +6335,7 @@ var getValueFormatter = (decimals) => (0, import_vuu_utils7.numericFormatter)({
   }
 });
 var INITIAL_VALUE = [void 0, void 0];
-var PriceTicker = (0, import_react41.memo)(
+var PriceTicker = (0, import_react45.memo)(
   ({
     className,
     decimals = 2,
@@ -6116,28 +6343,28 @@ var PriceTicker = (0, import_react41.memo)(
     showArrow,
     ...htmlAttributes
   }) => {
-    const ref = (0, import_react41.useRef)(INITIAL_VALUE);
+    const ref = (0, import_react45.useRef)(INITIAL_VALUE);
     const [prevValue, prevDirection] = ref.current;
-    const formatNumber = (0, import_react41.useMemo)(() => getValueFormatter(decimals), [decimals]);
-    const direction = (0, import_vuu_utils7.isValidNumber)(prevValue) ? (0, import_vuu_utils7.getMovingValueDirection)(price, prevDirection, prevValue, decimals) : "";
+    const formatNumber = (0, import_react45.useMemo)(() => getValueFormatter(decimals), [decimals]);
+    const direction = (0, import_vuu_utils8.isValidNumber)(prevValue) ? (0, import_vuu_utils8.getMovingValueDirection)(price, prevDirection, prevValue, decimals) : "";
     ref.current = [price, direction];
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { ...htmlAttributes, className: (0, import_classnames12.default)(classBase12, className, direction), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { ...htmlAttributes, className: (0, import_classnames12.default)(classBase14, className, direction), children: [
       formatNumber(price),
-      showArrow ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { "data-icon": "price-arrow" }) : null
+      showArrow ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { "data-icon": "price-arrow" }) : null
     ] });
   }
 );
 PriceTicker.displayName = "PriceTicker";
 
 // src/tabstrip/Tabstrip.tsx
-var import_vuu_layout8 = require("@vuu-ui/vuu-layout");
-var import_core20 = require("@salt-ds/core");
+var import_vuu_layout9 = require("@vuu-ui/vuu-layout");
+var import_core21 = require("@salt-ds/core");
 var import_classnames13 = __toESM(require("classnames"));
-var import_react46 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 
 // src/tabstrip/useTabstrip.ts
-var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
-var import_react45 = require("react");
+var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
+var import_react49 = require("react");
 
 // src/tabstrip/TabMenuOptions.ts
 var isTabMenuOptions = (options) => typeof options === "object" && options !== null && "tabIndex" in options && typeof options.tabIndex === "number";
@@ -6155,13 +6382,13 @@ var renameCommand = (options) => ({
 });
 
 // src/tabstrip/tabstrip-dom-utils.ts
-var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
 var getIndexOfItem = (container, query) => {
   if (container) {
     const targetTab = container.querySelector(
       `[data-index]:has(${query})`
     );
-    return (0, import_vuu_utils8.getElementDataIndex)(targetTab);
+    return (0, import_vuu_utils9.getElementDataIndex)(targetTab);
   }
   return -1;
 };
@@ -6169,44 +6396,44 @@ var getIndexOfSelectedTab = (container) => getIndexOfItem(container, '[aria-sele
 var getIndexOfEditedItem = (container) => getIndexOfItem(container, ".vuuEditableLabel-editing");
 
 // src/tabstrip/useAnimatedSelectionThumb.ts
-var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
-var import_react42 = require("react");
+var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
+var import_react46 = require("react");
 var useAnimatedSelectionThumb = (containerRef, activeTabIndex, orientation = "horizontal") => {
-  const animationSuspendedRef = (0, import_react42.useRef)(false);
-  const suspendAnimation = (0, import_react42.useCallback)(() => {
+  const animationSuspendedRef = (0, import_react46.useRef)(false);
+  const suspendAnimation = (0, import_react46.useCallback)(() => {
     animationSuspendedRef.current = true;
   }, []);
-  const resumeAnimation = (0, import_react42.useCallback)(() => {
+  const resumeAnimation = (0, import_react46.useCallback)(() => {
     animationSuspendedRef.current = false;
   }, []);
-  const onTransitionEnd = (0, import_react42.useCallback)(() => {
-    var _a, _b;
-    (_a = containerRef.current) == null ? void 0 : _a.style.setProperty("--tab-thumb-transition", "none");
+  const onTransitionEnd = (0, import_react46.useCallback)(() => {
+    var _a2, _b;
+    (_a2 = containerRef.current) == null ? void 0 : _a2.style.setProperty("--tab-thumb-transition", "none");
     (_b = containerRef.current) == null ? void 0 : _b.removeEventListener("transitionend", onTransitionEnd);
   }, [containerRef]);
-  const lastSelectedRef = (0, import_react42.useRef)(-1);
-  return (0, import_react42.useMemo)(() => {
-    var _a, _b;
+  const lastSelectedRef = (0, import_react46.useRef)(-1);
+  return (0, import_react46.useMemo)(() => {
+    var _a2, _b;
     let offset = 0;
     let size = 0;
     if (lastSelectedRef.current !== -1) {
-      const oldSelected = (_a = containerRef.current) == null ? void 0 : _a.querySelector(".vuuTab-selected");
+      const oldSelected = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelector(".vuuTab-selected");
       const newSelected = (_b = containerRef.current) == null ? void 0 : _b.querySelector(
         `[data-index="${activeTabIndex}"] .vuuTab`
       );
-      const { positionProp, sizeProp } = import_vuu_utils9.MEASURES[orientation];
+      const { positionProp, sizeProp } = import_vuu_utils10.MEASURES[orientation];
       if (oldSelected && newSelected && !animationSuspendedRef.current) {
         const { [positionProp]: oldPosition, [sizeProp]: oldSize } = oldSelected.getBoundingClientRect();
         const { [positionProp]: newPosition } = newSelected.getBoundingClientRect();
-        if ((0, import_vuu_utils9.isValidNumber)(oldPosition) && (0, import_vuu_utils9.isValidNumber)(newPosition) && (0, import_vuu_utils9.isValidNumber)(oldSize)) {
+        if ((0, import_vuu_utils10.isValidNumber)(oldPosition) && (0, import_vuu_utils10.isValidNumber)(newPosition) && (0, import_vuu_utils10.isValidNumber)(oldSize)) {
           console.log({ orientation, positionProp, oldPosition, newPosition });
           offset = oldPosition - newPosition;
           size = oldSize;
           const speed = orientation === "horizontal" ? 1100 : 700;
           const duration = Math.abs(offset / speed);
           requestAnimationFrame(() => {
-            var _a2, _b2, _c, _d;
-            (_a2 = containerRef.current) == null ? void 0 : _a2.style.setProperty(
+            var _a3, _b2, _c, _d;
+            (_a3 = containerRef.current) == null ? void 0 : _a3.style.setProperty(
               "--tab-thumb-offset",
               "0px"
             );
@@ -6254,26 +6481,26 @@ var useAnimatedSelectionThumb = (containerRef, activeTabIndex, orientation = "ho
 };
 
 // src/tabstrip/useKeyboardNavigation.ts
-var import_core18 = require("@salt-ds/core");
-var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
-var import_react43 = require("react");
+var import_core19 = require("@salt-ds/core");
 var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
+var import_react47 = require("react");
+var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
 var navigation = {
   horizontal: {
-    [import_vuu_utils11.Home]: "start",
-    [import_vuu_utils11.End]: "end",
-    [import_vuu_utils11.ArrowLeft]: "bwd",
-    [import_vuu_utils11.ArrowRight]: "fwd"
+    [import_vuu_utils12.Home]: "start",
+    [import_vuu_utils12.End]: "end",
+    [import_vuu_utils12.ArrowLeft]: "bwd",
+    [import_vuu_utils12.ArrowRight]: "fwd"
   },
   vertical: {
-    [import_vuu_utils11.Home]: "start",
-    [import_vuu_utils11.End]: "end",
-    [import_vuu_utils11.ArrowUp]: "bwd",
-    [import_vuu_utils11.ArrowDown]: "fwd"
+    [import_vuu_utils12.Home]: "start",
+    [import_vuu_utils12.End]: "end",
+    [import_vuu_utils12.ArrowUp]: "bwd",
+    [import_vuu_utils12.ArrowDown]: "fwd"
   }
 };
 var isNavigationKey2 = (key, orientation = "horizontal") => navigation[orientation][key] !== void 0;
-var isMenuActivationKey = (key) => key === import_vuu_utils11.ArrowDown;
+var isMenuActivationKey = (key) => key === import_vuu_utils12.ArrowDown;
 function nextItemIdx2(count, direction, idx) {
   if (direction === "start") {
     return 0;
@@ -6306,23 +6533,23 @@ var useKeyboardNavigation2 = ({
   selectedIndex: selectedTabIndex = 0
 }) => {
   const manualActivation = keyBoardActivation === "manual";
-  const mouseClickPending = (0, import_react43.useRef)(false);
-  const focusedRef = (0, import_react43.useRef)(-1);
-  const [hasFocus, setHasFocus] = (0, import_react43.useState)(false);
-  const [, forceRefresh] = (0, import_react43.useState)({});
-  const [highlightedIdx, _setHighlightedIdx] = (0, import_core18.useControlled)({
+  const mouseClickPending = (0, import_react47.useRef)(false);
+  const focusedRef = (0, import_react47.useRef)(-1);
+  const [hasFocus, setHasFocus] = (0, import_react47.useState)(false);
+  const [, forceRefresh] = (0, import_react47.useState)({});
+  const [highlightedIdx, _setHighlightedIdx] = (0, import_core19.useControlled)({
     controlled: highlightedIdxProp,
     default: defaultHighlightedIdx,
     name: "UseKeyboardNavigation"
   });
-  const setHighlightedIdx = (0, import_react43.useCallback)(
+  const setHighlightedIdx = (0, import_react47.useCallback)(
     (value) => {
       _setHighlightedIdx(focusedRef.current = value);
     },
     [_setHighlightedIdx]
   );
-  const keyboardNavigation = (0, import_react43.useRef)(false);
-  const focusTab = (0, import_react43.useCallback)(
+  const keyboardNavigation = (0, import_react47.useRef)(false);
+  const focusTab = (0, import_react47.useCallback)(
     (tabIndex, immediateFocus = false, withKeyboard, delay = 70) => {
       setHighlightedIdx(tabIndex);
       if (withKeyboard === true && !keyboardNavigation.current) {
@@ -6331,7 +6558,7 @@ var useKeyboardNavigation2 = ({
       const setFocus = () => {
         const element = getElementByPosition(containerRef.current, tabIndex);
         if (element) {
-          const focussableElement = (0, import_vuu_utils10.getFocusableElement)(element);
+          const focussableElement = (0, import_vuu_utils11.getFocusableElement)(element);
           focussableElement == null ? void 0 : focussableElement.focus();
         }
       };
@@ -6362,14 +6589,14 @@ var useKeyboardNavigation2 = ({
       }
     }
   };
-  const getIndexCount = (0, import_react43.useCallback)(
+  const getIndexCount = (0, import_react47.useCallback)(
     () => {
-      var _a, _b;
-      return (_b = (_a = containerRef.current) == null ? void 0 : _a.querySelectorAll(`[data-index]`).length) != null ? _b : 0;
+      var _a2, _b;
+      return (_b = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelectorAll(`[data-index]`).length) != null ? _b : 0;
     },
     [containerRef]
   );
-  const nextFocusableItemIdx = (0, import_react43.useCallback)(
+  const nextFocusableItemIdx = (0, import_react47.useCallback)(
     (direction = "fwd", idx) => {
       const indexCount = getIndexCount();
       const index = typeof idx === "number" ? idx : indexCount;
@@ -6389,7 +6616,7 @@ var useKeyboardNavigation2 = ({
     },
     [containerRef, getIndexCount]
   );
-  const navigateChildItems = (0, import_react43.useCallback)(
+  const navigateChildItems = (0, import_react47.useCallback)(
     (e, forceFocusVisible = false) => {
       const direction = navigation[orientation][e.key];
       const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
@@ -6411,22 +6638,22 @@ var useKeyboardNavigation2 = ({
       orientation
     ]
   );
-  const highlightedTabHasMenu = (0, import_react43.useCallback)(() => {
+  const highlightedTabHasMenu = (0, import_react47.useCallback)(() => {
     const el = getElementByPosition(containerRef.current, highlightedIdx);
     if (el) {
       return el.querySelector(".vuuPopupMenu") != null;
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const activateTabMenu = (0, import_react43.useCallback)(() => {
+  const activateTabMenu = (0, import_react47.useCallback)(() => {
     const el = getElementByPosition(containerRef.current, highlightedIdx);
     const menuEl = el == null ? void 0 : el.querySelector(".vuuPopupMenu");
     if (menuEl) {
-      (0, import_vuu_utils10.dispatchMouseEvent)(menuEl, "click");
+      (0, import_vuu_utils11.dispatchMouseEvent)(menuEl, "click");
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const handleKeyDown = (0, import_react43.useCallback)(
+  const handleKeyDown = (0, import_react47.useCallback)(
     (e) => {
       if (getIndexCount() > 0 && isNavigationKey2(e.key, orientation)) {
         e.preventDefault();
@@ -6451,7 +6678,7 @@ var useKeyboardNavigation2 = ({
   const handleItemClick = (_, tabIndex) => {
     setHighlightedIdx(tabIndex);
   };
-  const handleFocus = (0, import_react43.useCallback)(() => {
+  const handleFocus = (0, import_react47.useCallback)(() => {
     if (!hasFocus) {
       setHasFocus(true);
       if (!mouseClickPending.current) {
@@ -6461,7 +6688,7 @@ var useKeyboardNavigation2 = ({
       }
     }
   }, [hasFocus]);
-  const handleContainerMouseDown = (0, import_react43.useCallback)(() => {
+  const handleContainerMouseDown = (0, import_react47.useCallback)(() => {
     if (!hasFocus) {
       mouseClickPending.current = true;
     }
@@ -6498,8 +6725,8 @@ var useKeyboardNavigation2 = ({
 };
 
 // src/tabstrip/useSelection.ts
-var import_core19 = require("@salt-ds/core");
-var import_react44 = require("react");
+var import_core20 = require("@salt-ds/core");
+var import_react48 = require("react");
 var defaultSelectionKeys2 = ["Enter", " "];
 var isTabElement = (el) => el && el.matches('[class*="vuuTab "]');
 var useSelection2 = ({
@@ -6508,24 +6735,24 @@ var useSelection2 = ({
   onSelectionChange,
   selected: selectedProp
 }) => {
-  const [selected, setSelected, isControlled] = (0, import_core19.useControlled)({
+  const [selected, setSelected, isControlled] = (0, import_core20.useControlled)({
     controlled: selectedProp,
     default: defaultSelected != null ? defaultSelected : 0,
     name: "Tabstrip",
     state: "value"
   });
-  const isSelectionEvent = (0, import_react44.useCallback)(
+  const isSelectionEvent = (0, import_react48.useCallback)(
     (evt) => defaultSelectionKeys2.includes(evt.key),
     []
   );
-  const selectItem = (0, import_react44.useCallback)(
+  const selectItem = (0, import_react48.useCallback)(
     (tabIndex) => {
       setSelected(tabIndex);
       onSelectionChange == null ? void 0 : onSelectionChange(tabIndex);
     },
     [onSelectionChange, setSelected]
   );
-  const handleKeyDown = (0, import_react44.useCallback)(
+  const handleKeyDown = (0, import_react48.useCallback)(
     (e) => {
       const targetElement = e.target;
       if (isSelectionEvent(e) && highlightedIdx !== selected && isTabElement(targetElement)) {
@@ -6536,7 +6763,7 @@ var useSelection2 = ({
     },
     [isSelectionEvent, highlightedIdx, selected, selectItem]
   );
-  const onClick = (0, import_react44.useCallback)(
+  const onClick = (0, import_react48.useCallback)(
     (e, tabIndex) => {
       if (tabIndex !== selected) {
         selectItem(tabIndex);
@@ -6576,7 +6803,7 @@ var useTabstrip = ({
   orientation,
   keyBoardActivation
 }) => {
-  const lastSelection = (0, import_react45.useRef)(activeTabIndexProp);
+  const lastSelection = (0, import_react49.useRef)(activeTabIndexProp);
   const {
     focusTab: keyboardHookFocusTab,
     highlightedIdx,
@@ -6606,7 +6833,7 @@ var useTabstrip = ({
     animateSelectionThumb ? selectionHookSelected : -1,
     orientation
   );
-  const handleDrop = (0, import_react45.useCallback)(
+  const handleDrop = (0, import_react49.useCallback)(
     (fromIndex, toIndex) => {
       const { current: selected } = lastSelection;
       console.log(
@@ -6648,7 +6875,7 @@ var useTabstrip = ({
     orientation: "horizontal",
     itemQuery: ".vuuOverflowContainer-item"
   });
-  const handleExitEditMode = (0, import_react45.useCallback)(
+  const handleExitEditMode = (0, import_react49.useCallback)(
     (originalValue, editedValue, allowDeactivation, tabIndex) => {
       console.log(
         `handleExitEditMode ${originalValue} ${editedValue} ${allowDeactivation} ${tabIndex}`
@@ -6660,7 +6887,7 @@ var useTabstrip = ({
     },
     [keyboardHookFocusTab, onExitEditMode]
   );
-  const handleClick = (0, import_react45.useCallback)(
+  const handleClick = (0, import_react49.useCallback)(
     (evt, tabIndex) => {
       keyboardHookHandleClick(evt, tabIndex);
       selectionHookHandleClick(evt, tabIndex);
@@ -6668,7 +6895,7 @@ var useTabstrip = ({
     // [dragDropHook.isDragging, keyboardHook, selectionHook]
     [keyboardHookHandleClick, selectionHookHandleClick]
   );
-  const getEditableLabel = (0, import_react45.useCallback)(
+  const getEditableLabel = (0, import_react49.useCallback)(
     (tabIndex = highlightedIdx) => {
       const targetEl = getElementWithIndex(containerRef.current, tabIndex);
       if (targetEl) {
@@ -6677,7 +6904,7 @@ var useTabstrip = ({
     },
     [containerRef, highlightedIdx]
   );
-  const tabInEditMode = (0, import_react45.useCallback)(
+  const tabInEditMode = (0, import_react49.useCallback)(
     (tabIndex = highlightedIdx) => {
       const editableLabel = getEditableLabel(tabIndex);
       if (editableLabel) {
@@ -6687,16 +6914,16 @@ var useTabstrip = ({
     },
     [getEditableLabel, highlightedIdx]
   );
-  const editTab = (0, import_react45.useCallback)(
+  const editTab = (0, import_react49.useCallback)(
     (tabIndex = highlightedIdx) => {
       const editableLabelEl = getEditableLabel(tabIndex);
       if (editableLabelEl) {
-        (0, import_vuu_utils12.dispatchMouseEvent)(editableLabelEl, "dblclick");
+        (0, import_vuu_utils13.dispatchMouseEvent)(editableLabelEl, "dblclick");
       }
     },
     [getEditableLabel, highlightedIdx]
   );
-  const handleKeyDown = (0, import_react45.useCallback)(
+  const handleKeyDown = (0, import_react49.useCallback)(
     (evt) => {
       keyboardHookHandleKeyDown(evt);
       if (!evt.defaultPrevented) {
@@ -6708,7 +6935,7 @@ var useTabstrip = ({
     },
     [editTab, keyboardHookHandleKeyDown, selectionHookHandleKeyDown]
   );
-  const handleCloseTabFromMenu = (0, import_react45.useCallback)(
+  const handleCloseTabFromMenu = (0, import_react49.useCallback)(
     (tabIndex) => {
       const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);
       const newActiveTabIndex = selectedTabIndex > tabIndex ? selectedTabIndex - 1 : selectedTabIndex === tabIndex ? 0 : selectedTabIndex;
@@ -6721,14 +6948,14 @@ var useTabstrip = ({
     },
     [containerRef, onCloseTab, resumeAnimation, suspendAnimation]
   );
-  const handleRenameTabFromMenu = (0, import_react45.useCallback)(
+  const handleRenameTabFromMenu = (0, import_react49.useCallback)(
     (tabIndex) => {
       editTab(tabIndex);
       return true;
     },
     [editTab]
   );
-  const handleTabMenuAction = (0, import_react45.useCallback)(
+  const handleTabMenuAction = (0, import_react49.useCallback)(
     (action) => {
       if (isTabMenuOptions(action.options)) {
         switch (action.menuId) {
@@ -6744,7 +6971,7 @@ var useTabstrip = ({
     },
     [handleCloseTabFromMenu, handleRenameTabFromMenu]
   );
-  const handleTabMenuClose = (0, import_react45.useCallback)(() => {
+  const handleTabMenuClose = (0, import_react49.useCallback)(() => {
     if (!tabInEditMode()) {
       keyboardHookFocusTab(highlightedIdx);
     } else {
@@ -6756,7 +6983,7 @@ var useTabstrip = ({
     keyboardHookSetHighlightedIndex,
     tabInEditMode
   ]);
-  const onSwitchWrappedItemIntoView = (0, import_react45.useCallback)(
+  const onSwitchWrappedItemIntoView = (0, import_react49.useCallback)(
     (item) => {
       const index = parseInt(item.index);
       if (!isNaN(index)) {
@@ -6769,7 +6996,7 @@ var useTabstrip = ({
     onFocus: keyboardHook.onFocus,
     onKeyDown: handleKeyDown
   };
-  const handleAddTabClick = (0, import_react45.useCallback)(() => {
+  const handleAddTabClick = (0, import_react49.useCallback)(() => {
     onAddTab == null ? void 0 : onAddTab();
     requestAnimationFrame(() => {
       const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);
@@ -6802,9 +7029,9 @@ var useTabstrip = ({
 };
 
 // src/tabstrip/Tabstrip.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var import_react47 = require("react");
-var classBase13 = "vuuTabstrip";
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react51 = require("react");
+var classBase15 = "vuuTabstrip";
 var Tabstrip = ({
   activeTabIndex: activeTabIndexProp,
   allowAddTab,
@@ -6827,7 +7054,7 @@ var Tabstrip = ({
   style: styleProp,
   ...htmlAttributes
 }) => {
-  const rootRef = (0, import_react46.useRef)(null);
+  const rootRef = (0, import_react50.useRef)(null);
   const {
     activeTabIndex,
     focusVisible,
@@ -6849,14 +7076,14 @@ var Tabstrip = ({
     onMoveTab,
     orientation
   });
-  const id = (0, import_vuu_layout8.useId)(idProp);
-  const className = (0, import_classnames13.default)(classBase13, `${classBase13}-${orientation}`, classNameProp);
+  const id = (0, import_vuu_layout9.useId)(idProp);
+  const className = (0, import_classnames13.default)(classBase15, `${classBase15}-${orientation}`, classNameProp);
   const style = styleProp || containerStyle ? {
     ...styleProp,
     ...containerStyle
   } : void 0;
-  const tabs = (0, import_react46.useMemo)(
-    () => (0, import_vuu_layout8.asReactElements)(children).map((child, index) => {
+  const tabs = (0, import_react50.useMemo)(
+    () => (0, import_vuu_layout9.asReactElements)(children).map((child, index) => {
       const {
         id: tabId = `${id}-tab-${index}`,
         closeable = allowCloseTab,
@@ -6865,7 +7092,7 @@ var Tabstrip = ({
         showMenuButton = showTabMenuButton
       } = child.props;
       const selected = index === activeTabIndex;
-      return import_react46.default.cloneElement(child, {
+      return import_react50.default.cloneElement(child, {
         ...tabProps,
         ...tabstripHook.navigationProps,
         closeable,
@@ -6882,12 +7109,12 @@ var Tabstrip = ({
         tabIndex: selected ? 0 : -1
       });
     }).concat(
-      allowAddTab ? /* @__PURE__ */ (0, import_react47.createElement)(
-        import_core20.Button,
+      allowAddTab ? /* @__PURE__ */ (0, import_react51.createElement)(
+        import_core21.Button,
         {
           ...tabstripHook.navigationProps,
           "aria-label": "Create Tab",
-          className: `${classBase13}-addTabButton`,
+          className: `${classBase15}-addTabButton`,
           "data-icon": "add",
           "data-overflow-priority": "1",
           key: "addButton",
@@ -6913,9 +7140,9 @@ var Tabstrip = ({
       tabstripHook.navigationProps
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      import_vuu_layout8.OverflowContainer,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      import_vuu_layout9.OverflowContainer,
       {
         ...htmlAttributes,
         ...tabstripHook.containerProps,
@@ -6934,16 +7161,16 @@ var Tabstrip = ({
 };
 
 // src/tabstrip/Tab.tsx
-var import_core21 = require("@salt-ds/core");
+var import_core22 = require("@salt-ds/core");
 var import_classnames15 = __toESM(require("classnames"));
-var import_react49 = require("react");
+var import_react53 = require("react");
 
 // src/tabstrip/TabMenu.tsx
 var import_vuu_popups3 = require("@vuu-ui/vuu-popups");
-var import_react48 = require("react");
+var import_react52 = require("react");
 var import_classnames14 = __toESM(require("classnames"));
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var classBase14 = "vuuTabMenu";
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var classBase16 = "vuuTabMenu";
 var TabMenu = ({
   allowClose,
   allowRename,
@@ -6953,7 +7180,7 @@ var TabMenu = ({
   onMenuClose,
   index
 }) => {
-  const [menuBuilder, menuOptions] = (0, import_react48.useMemo)(
+  const [menuBuilder, menuOptions] = (0, import_react52.useMemo)(
     () => [
       (_location, options) => {
         const menuItems = [];
@@ -6972,10 +7199,10 @@ var TabMenu = ({
     ],
     [allowClose, allowRename, controlledComponentId, index]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_vuu_popups3.PopupMenu,
     {
-      className: classBase14,
+      className: classBase16,
       menuBuilder,
       menuActionHandler: onMenuAction,
       menuLocation: (0, import_classnames14.default)("tab", location),
@@ -6987,10 +7214,10 @@ var TabMenu = ({
 };
 
 // src/tabstrip/Tab.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var classBase15 = "vuuTab";
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var classBase17 = "vuuTab";
 var noop = () => void 0;
-var Tab = (0, import_react49.forwardRef)(function Tab2({
+var Tab = (0, import_react53.forwardRef)(function Tab2({
   ariaControls,
   children,
   className,
@@ -7019,10 +7246,10 @@ var Tab = (0, import_react49.forwardRef)(function Tab2({
   if (showMenuButton && typeof onMenuAction !== "function") {
     throw Error("Tab onMenuAction must be provided if showMenuButton is set");
   }
-  const rootRef = (0, import_react49.useRef)(null);
-  const editableRef = (0, import_react49.useRef)(null);
-  const setForkRef = (0, import_core21.useForkRef)(ref, rootRef);
-  const handleClick = (0, import_react49.useCallback)(
+  const rootRef = (0, import_react53.useRef)(null);
+  const editableRef = (0, import_react53.useRef)(null);
+  const setForkRef = (0, import_core22.useForkRef)(ref, rootRef);
+  const handleClick = (0, import_react53.useCallback)(
     (e) => {
       if (!editing) {
         e.preventDefault();
@@ -7047,7 +7274,7 @@ var Tab = (0, import_react49.forwardRef)(function Tab2({
   };
   const getLabel = () => {
     if (editable) {
-      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         EditableLabel,
         {
           editing,
@@ -7072,18 +7299,18 @@ var Tab = (0, import_react49.forwardRef)(function Tab2({
     }
     onFocusProp == null ? void 0 : onFocusProp(evt);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
       ...props,
       "aria-controls": ariaControls,
       "aria-selected": selected,
-      className: (0, import_classnames15.default)(classBase15, {
-        [`${classBase15}-closeable`]: closeable,
+      className: (0, import_classnames15.default)(classBase17, {
+        [`${classBase17}-closeable`]: closeable,
         "vuuDraggable-dragAway": dragging,
-        [`${classBase15}-editing`]: editing,
-        [`${classBase15}-selected`]: selected || void 0,
-        [`${classBase15}-vertical`]: orientation === "vertical",
+        [`${classBase17}-editing`]: editing,
+        [`${classBase17}-selected`]: selected || void 0,
+        [`${classBase17}-vertical`]: orientation === "vertical",
         [`vuuFocusVisible`]: focusVisible
       }),
       onClick: handleClick,
@@ -7093,15 +7320,15 @@ var Tab = (0, import_react49.forwardRef)(function Tab2({
       role: "tab",
       tabIndex,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `${classBase15}-main`, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: `${classBase17}-main`, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "span",
           {
-            className: `${classBase15}-text`,
+            className: `${classBase17}-text`,
             "data-text": editable ? void 0 : label,
             children: children != null ? children : getLabel()
           }
         ) }),
-        showMenuButton ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        showMenuButton ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           TabMenu,
           {
             allowClose: closeable,
@@ -7119,18 +7346,18 @@ var Tab = (0, import_react49.forwardRef)(function Tab2({
 });
 
 // src/tree/Tree.tsx
-var import_core24 = require("@salt-ds/core");
+var import_core25 = require("@salt-ds/core");
 var import_classnames16 = __toESM(require("classnames"));
-var import_react58 = require("react");
+var import_react62 = require("react");
 
 // src/tree/list-dom-utils.ts
 function listItemIndex2(listItemEl) {
-  var _a;
+  var _a2;
   if (listItemEl) {
     let idx = listItemEl.dataset.idx;
     if (idx) {
       return parseInt(idx, 10);
-    } else if (idx = (_a = listItemEl.ariaPosInSet) != null ? _a : "-1") {
+    } else if (idx = (_a2 = listItemEl.ariaPosInSet) != null ? _a2 : "-1") {
       return parseInt(idx, 10) - 1;
     }
   }
@@ -7139,7 +7366,7 @@ var closestListItem2 = (el) => el.closest("[data-idx],[aria-posinset]");
 var closestListItemIndex2 = (el) => listItemIndex2(closestListItem2(el));
 
 // src/tree/use-items-with-ids.ts
-var import_react50 = require("react");
+var import_react54 = require("react");
 var PathSeparators2 = /* @__PURE__ */ new Set(["/", "-", "."]);
 var isPathSeparator2 = (char) => PathSeparators2.has(char);
 var isParentPath2 = (parentPath, childPath) => childPath.startsWith(parentPath) && isPathSeparator2(childPath[parentPath.length]);
@@ -7163,7 +7390,7 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
       return 0;
     }
   };
-  const isExpanded2 = (0, import_react50.useCallback)(
+  const isExpanded2 = (0, import_react54.useCallback)(
     (path) => {
       if (Array.isArray(revealSelected)) {
         return revealSelected.some((id) => isParentPath2(path, id));
@@ -7172,17 +7399,17 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
     },
     [defaultExpanded, revealSelected]
   );
-  const normalizeItems = (0, import_react50.useCallback)(
+  const normalizeItems = (0, import_react54.useCallback)(
     (items, indexer, level = 1, path = "", results = [], flattenedSource2 = []) => {
       let count2 = 0;
       items.forEach((item, i, all) => {
-        var _a;
+        var _a2;
         const isCollapsibleHeader = item.header && collapsibleHeaders;
         const isNonCollapsibleGroupNode = item.childNodes && collapsibleHeaders === false;
         const isLeaf3 = !item.childNodes || item.childNodes.length === 0;
         const nonCollapsible = isNonCollapsibleGroupNode || isLeaf3 && !isCollapsibleHeader;
         const childPath = path ? `${path}.${i}` : `${i}`;
-        const id = (_a = item.id) != null ? _a : `${idRoot}-${childPath}`;
+        const id = (_a2 = item.id) != null ? _a2 : `${idRoot}-${childPath}`;
         const expanded = nonCollapsible ? void 0 : isExpanded2(id);
         const normalisedItem = {
           ...item,
@@ -7216,15 +7443,15 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
     },
     [collapsibleHeaders, idRoot, isExpanded2]
   );
-  const [count, sourceWithIds, flattenedSource] = (0, import_react50.useMemo)(() => {
+  const [count, sourceWithIds, flattenedSource] = (0, import_react54.useMemo)(() => {
     return normalizeItems(sourceProp, { index: 0 });
   }, [normalizeItems, sourceProp]);
-  const sourceItemById = (0, import_react50.useCallback)(
+  const sourceItemById = (0, import_react54.useCallback)(
     (id, target = sourceWithIds) => {
       const sourceWithId = target.find(
         (i) => {
-          var _a;
-          return i.id === id || ((_a = i == null ? void 0 : i.childNodes) == null ? void 0 : _a.length) && isParentPath2(i.id, id);
+          var _a2;
+          return i.id === id || ((_a2 = i == null ? void 0 : i.childNodes) == null ? void 0 : _a2.length) && isParentPath2(i.id, id);
         }
       );
       if ((sourceWithId == null ? void 0 : sourceWithId.id) === id) {
@@ -7239,8 +7466,8 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
 };
 
 // src/tree/use-selection.ts
-var import_react51 = require("react");
-var import_core22 = require("@salt-ds/core");
+var import_react55 = require("react");
+var import_core23 = require("@salt-ds/core");
 var SINGLE = "single";
 var CHECKBOX2 = "checkbox";
 var MULTI = "multi";
@@ -7261,17 +7488,17 @@ var useSelection3 = ({
   const singleSelect = selection === SINGLE;
   const multiSelect = selection === MULTI || selection.startsWith(CHECKBOX2);
   const extendedSelect = selection === EXTENDED;
-  const lastActive = (0, import_react51.useRef)(-1);
-  const isSelectionEvent = (0, import_react51.useCallback)(
+  const lastActive = (0, import_react55.useRef)(-1);
+  const isSelectionEvent = (0, import_react55.useCallback)(
     (evt) => selectionKeys.includes(evt.key),
     [selectionKeys]
   );
-  const [selected, setSelected] = (0, import_core22.useControlled)({
+  const [selected, setSelected] = (0, import_core23.useControlled)({
     controlled: selectedProp,
     default: defaultSelected != null ? defaultSelected : [],
     name: "selected"
   });
-  const selectItemAtIndex = (0, import_react51.useCallback)(
+  const selectItemAtIndex = (0, import_react55.useCallback)(
     (evt, idx, id, rangeSelect, preserveExistingSelection = false) => {
       const { current: active } = lastActive;
       const isSelected2 = selected == null ? void 0 : selected.includes(id);
@@ -7312,7 +7539,7 @@ var useSelection3 = ({
       singleSelect
     ]
   );
-  const handleKeyDown = (0, import_react51.useCallback)(
+  const handleKeyDown = (0, import_react55.useCallback)(
     (evt) => {
       if (~highlightedIdx && isSelectionEvent(evt)) {
         evt.preventDefault();
@@ -7337,7 +7564,7 @@ var useSelection3 = ({
       selectItemAtIndex
     ]
   );
-  const handleKeyboardNavigation = (0, import_react51.useCallback)(
+  const handleKeyboardNavigation = (0, import_react55.useCallback)(
     (evt, currentIndex) => {
       if (extendedSelect && evt.shiftKey) {
         const item = treeNodes[currentIndex];
@@ -7350,7 +7577,7 @@ var useSelection3 = ({
     onKeyDown: handleKeyDown,
     onKeyboardNavigation: handleKeyboardNavigation
   };
-  const handleClick = (0, import_react51.useCallback)(
+  const handleClick = (0, import_react55.useCallback)(
     (evt) => {
       if (highlightedIdx !== -1) {
         const item = treeNodes[highlightedIdx];
@@ -7384,14 +7611,14 @@ var useSelection3 = ({
 };
 
 // src/tree/use-viewport-tracking.ts
-var import_react52 = require("react");
+var import_react56 = require("react");
 var HeightOnly3 = ["height", "scrollHeight"];
 var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
-  const scrollTop = (0, import_react52.useRef)(0);
-  const scrolling = (0, import_react52.useRef)(false);
-  const rootHeight = (0, import_react52.useRef)(0);
-  const rootScrollHeight = (0, import_react52.useRef)(0);
-  const scrollIntoView = (0, import_react52.useCallback)(
+  const scrollTop = (0, import_react56.useRef)(0);
+  const scrolling = (0, import_react56.useRef)(false);
+  const rootHeight = (0, import_react56.useRef)(0);
+  const rootScrollHeight = (0, import_react56.useRef)(0);
+  const scrollIntoView = (0, import_react56.useCallback)(
     (el) => {
       const targetEl = el.ariaExpanded ? el.firstChild : el;
       const headerHeight = stickyHeaders ? 30 : 0;
@@ -7412,10 +7639,10 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
     },
     [root, stickyHeaders]
   );
-  const scrollHandler = (0, import_react52.useCallback)((e) => {
+  const scrollHandler = (0, import_react56.useCallback)((e) => {
     scrollTop.current = e.target.scrollTop;
   }, []);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     const { current: rootEl } = root;
     if (rootEl) {
       rootEl.addEventListener("scroll", scrollHandler);
@@ -7426,7 +7653,7 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
       }
     };
   }, [root, scrollHandler]);
-  (0, import_react52.useLayoutEffect)(() => {
+  (0, import_react56.useLayoutEffect)(() => {
     if (highlightedIdx !== -1 && rootScrollHeight.current > rootHeight.current) {
       if (root.current) {
         const item = root.current.querySelector(`
@@ -7443,9 +7670,9 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
       }
     }
   }, [highlightedIdx, root, scrollIntoView]);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
   }, [stickyHeaders]);
-  const onResize = (0, import_react52.useCallback)(({ height, scrollHeight }) => {
+  const onResize = (0, import_react56.useCallback)(({ height, scrollHeight }) => {
     rootHeight.current = height;
     rootScrollHeight.current = scrollHeight;
   }, []);
@@ -7454,10 +7681,10 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
 };
 
 // src/tree/useTree.ts
-var import_react57 = require("react");
+var import_react61 = require("react");
 
 // src/tree/use-keyboard-navigation.ts
-var import_react53 = require("react");
+var import_react57 = require("react");
 
 // src/tree/hierarchical-data-utils.ts
 var getNodeParentPath = ({ id }) => {
@@ -7524,7 +7751,7 @@ var replaceNode = (nodes, id, props) => {
 };
 
 // src/tree/use-keyboard-navigation.ts
-var import_core23 = require("@salt-ds/core");
+var import_core24 = require("@salt-ds/core");
 
 // src/tree/key-code.ts
 function union2(set1, ...sets) {
@@ -7607,26 +7834,26 @@ var useKeyboardNavigation3 = ({
   onKeyboardNavigation,
   selected = []
 }) => {
-  const { bwd: ArrowBwd, fwd: ArrowFwd } = (0, import_react53.useMemo)(
+  const { bwd: ArrowBwd, fwd: ArrowFwd } = (0, import_react57.useMemo)(
     () => ({
       bwd: ArrowUp3,
       fwd: ArrowDown3
     }),
     []
   );
-  const [highlightedIdx, setHighlightedIdx, isControlledHighlighting] = (0, import_core23.useControlled)({
+  const [highlightedIdx, setHighlightedIdx, isControlledHighlighting] = (0, import_core24.useControlled)({
     controlled: highlightedIdxProp,
     default: defaultHighlightedIdx,
     name: "highlightedIdx"
   });
-  const setHighlightedIndex = (0, import_react53.useCallback)(
+  const setHighlightedIndex = (0, import_react57.useCallback)(
     (idx) => {
       onHighlight == null ? void 0 : onHighlight(idx);
       setHighlightedIdx(idx);
     },
     [onHighlight, setHighlightedIdx]
   );
-  const nextFocusableItemIdx = (0, import_react53.useCallback)(
+  const nextFocusableItemIdx = (0, import_react57.useCallback)(
     (key = ArrowFwd, idx = key === ArrowFwd ? -1 : treeNodes.length) => {
       let nextIdx = nextItemIdx3(treeNodes.length, key, idx);
       while (nextIdx !== -1 && (key === ArrowFwd && nextIdx < treeNodes.length || key === ArrowBwd && nextIdx > 0) && !isFocusable3(treeNodes[nextIdx])) {
@@ -7636,10 +7863,10 @@ var useKeyboardNavigation3 = ({
     },
     [ArrowBwd, ArrowFwd, treeNodes]
   );
-  const keyBoardNavigation = (0, import_react53.useRef)(true);
-  const ignoreFocus = (0, import_react53.useRef)(false);
+  const keyBoardNavigation = (0, import_react57.useRef)(true);
+  const ignoreFocus = (0, import_react57.useRef)(false);
   const setIgnoreFocus = (value) => ignoreFocus.current = value;
-  const handleFocus = (0, import_react53.useCallback)(() => {
+  const handleFocus = (0, import_react57.useCallback)(() => {
     if (ignoreFocus.current) {
       ignoreFocus.current = false;
     } else if (selected.length > 0) {
@@ -7652,7 +7879,7 @@ var useKeyboardNavigation3 = ({
       setHighlightedIndex(nextFocusableItemIdx());
     }
   }, [treeNodes, nextFocusableItemIdx, selected, setHighlightedIndex]);
-  const navigateChildItems = (0, import_react53.useCallback)(
+  const navigateChildItems = (0, import_react57.useCallback)(
     (e) => {
       const nextIdx = nextFocusableItemIdx(e.key, highlightedIdx);
       if (nextIdx !== highlightedIdx) {
@@ -7667,7 +7894,7 @@ var useKeyboardNavigation3 = ({
       setHighlightedIndex
     ]
   );
-  const handleKeyDown = (0, import_react53.useCallback)(
+  const handleKeyDown = (0, import_react57.useCallback)(
     (e) => {
       if (treeNodes.length > 0 && isNavigationKey3(e, "vertical")) {
         e.preventDefault();
@@ -7678,7 +7905,7 @@ var useKeyboardNavigation3 = ({
     },
     [treeNodes, navigateChildItems]
   );
-  const listProps = (0, import_react53.useMemo)(
+  const listProps = (0, import_react57.useMemo)(
     () => ({
       onBlur: () => {
         setHighlightedIndex(-1);
@@ -7716,7 +7943,7 @@ var useKeyboardNavigation3 = ({
 };
 
 // src/tree/use-hierarchical-data.ts
-var import_react54 = require("react");
+var import_react58 = require("react");
 var populateIndices = (nodes, results = [], idx = { value: 0 }) => {
   let skipToNextHeader = false;
   for (const node of nodes) {
@@ -7738,10 +7965,10 @@ var populateIndices = (nodes, results = [], idx = { value: 0 }) => {
   return results;
 };
 var useHierarchicalData = (source) => {
-  const externalSource = (0, import_react54.useRef)(source);
-  const statefulSource = (0, import_react54.useRef)(source);
-  const indexPositions = (0, import_react54.useRef)(populateIndices(source));
-  const [, forceUpdate] = (0, import_react54.useState)({});
+  const externalSource = (0, import_react58.useRef)(source);
+  const statefulSource = (0, import_react58.useRef)(source);
+  const indexPositions = (0, import_react58.useRef)(populateIndices(source));
+  const [, forceUpdate] = (0, import_react58.useState)({});
   if (source !== externalSource.current) {
     externalSource.current = source;
     statefulSource.current = source;
@@ -7761,7 +7988,7 @@ var useHierarchicalData = (source) => {
 };
 
 // src/tree/use-collapsible-groups.ts
-var import_react55 = require("react");
+var import_react59 = require("react");
 var NO_HANDLERS4 = {};
 var isToggleElement = (element) => element && element.hasAttribute("aria-expanded");
 var useCollapsibleGroups2 = ({
@@ -7771,23 +7998,23 @@ var useCollapsibleGroups2 = ({
   setVisibleData,
   source
 }) => {
-  const fullSource = (0, import_react55.useRef)(source);
-  const stateSource = (0, import_react55.useRef)(fullSource.current);
-  const setSource = (0, import_react55.useCallback)(
+  const fullSource = (0, import_react59.useRef)(source);
+  const stateSource = (0, import_react59.useRef)(fullSource.current);
+  const setSource = (0, import_react59.useCallback)(
     (value) => {
       setVisibleData(stateSource.current = value);
     },
     [setVisibleData]
   );
-  const expandNode = (0, import_react55.useCallback)(
+  const expandNode = (0, import_react59.useCallback)(
     (nodeList, { id }) => replaceNode(nodeList, id, { expanded: true }),
     []
   );
-  const collapseNode = (0, import_react55.useCallback)(
+  const collapseNode = (0, import_react59.useCallback)(
     (nodeList, { id }) => replaceNode(nodeList, id, { expanded: false }),
     []
   );
-  const handleKeyDown = (0, import_react55.useCallback)(
+  const handleKeyDown = (0, import_react59.useCallback)(
     (e) => {
       if (e.key === ArrowRight3 || e.key === Enter2) {
         const node = treeNodes[highlightedIdx];
@@ -7813,7 +8040,7 @@ var useCollapsibleGroups2 = ({
   const listHandlers = collapsibleHeaders ? {
     onKeyDown: handleKeyDown
   } : NO_HANDLERS4;
-  const handleClick = (0, import_react55.useCallback)(
+  const handleClick = (0, import_react59.useCallback)(
     (evt) => {
       const el = closestListItem2(evt.target);
       if (isToggleElement(el)) {
@@ -7839,14 +8066,14 @@ var useCollapsibleGroups2 = ({
 };
 
 // src/tree/use-tree-keyboard-navigation.ts
-var import_react56 = require("react");
+var import_react60 = require("react");
 var useTreeKeyboardNavigation = ({
   highlightedIdx,
   hiliteItemAtIndex,
   indexPositions,
   source
 }) => {
-  const handleKeyDown = (0, import_react56.useCallback)(
+  const handleKeyDown = (0, import_react60.useCallback)(
     (e) => {
       if (e.key === ArrowLeft3) {
         const node = indexPositions[highlightedIdx];
@@ -7883,11 +8110,11 @@ var useTree = ({
   selected: selectedProp,
   selection
 }) => {
-  const lastSelection = (0, import_react57.useRef)(EMPTY_ARRAY2);
+  const lastSelection = (0, import_react61.useRef)(EMPTY_ARRAY2);
   const dataHook = useHierarchicalData(sourceWithIds);
   const handleKeyboardNavigation = (evt, nextIdx) => {
-    var _a, _b;
-    (_b = (_a = selectionHook.listHandlers).onKeyboardNavigation) == null ? void 0 : _b.call(_a, evt, nextIdx);
+    var _a2, _b;
+    (_b = (_a2 = selectionHook.listHandlers).onKeyboardNavigation) == null ? void 0 : _b.call(_a2, evt, nextIdx);
   };
   const { highlightedIdx, ...keyboardHook } = useKeyboardNavigation3({
     treeNodes: dataHook.indexPositions,
@@ -7916,20 +8143,20 @@ var useTree = ({
     hiliteItemAtIndex: keyboardHook.hiliteItemAtIndex,
     indexPositions: dataHook.indexPositions
   });
-  const handleClick = (0, import_react57.useCallback)(
+  const handleClick = (0, import_react61.useCallback)(
     (evt) => {
-      var _a, _b, _c;
-      (_a = collapsibleHook.listItemHandlers) == null ? void 0 : _a.onClick(evt);
+      var _a2, _b, _c;
+      (_a2 = collapsibleHook.listItemHandlers) == null ? void 0 : _a2.onClick(evt);
       if (!evt.defaultPrevented) {
         (_c = (_b = selectionHook.listItemHandlers) == null ? void 0 : _b.onClick) == null ? void 0 : _c.call(_b, evt);
       }
     },
     [collapsibleHook, selectionHook]
   );
-  const handleKeyDown = (0, import_react57.useCallback)(
+  const handleKeyDown = (0, import_react61.useCallback)(
     (evt) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
-      (_b = (_a = keyboardHook.listProps).onKeyDown) == null ? void 0 : _b.call(_a, evt);
+      var _a2, _b, _c, _d, _e, _f, _g, _h;
+      (_b = (_a2 = keyboardHook.listProps).onKeyDown) == null ? void 0 : _b.call(_a2, evt);
       if (!evt.defaultPrevented) {
         (_d = (_c = selectionHook.listHandlers).onKeyDown) == null ? void 0 : _d.call(_c, evt);
       }
@@ -7948,8 +8175,8 @@ var useTree = ({
     ]
   );
   const getActiveDescendant = () => {
-    var _a;
-    return highlightedIdx === void 0 || highlightedIdx === -1 ? void 0 : (_a = dataHook.indexPositions[highlightedIdx]) == null ? void 0 : _a.id;
+    var _a2;
+    return highlightedIdx === void 0 || highlightedIdx === -1 ? void 0 : (_a2 = dataHook.indexPositions[highlightedIdx]) == null ? void 0 : _a2.id;
   };
   lastSelection.current = selectionHook.selected;
   const listProps = {
@@ -7976,14 +8203,14 @@ var useTree = ({
 };
 
 // src/tree/Tree.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var import_react59 = require("react");
-var classBase16 = "vuuTree";
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react63 = require("react");
+var classBase18 = "vuuTree";
 var isExpanded = (node) => node.expanded === true;
 var TreeNode = ({ children, idx, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("li", { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { ...props, children });
 };
-var Tree = (0, import_react58.forwardRef)(function Tree2({
+var Tree = (0, import_react62.forwardRef)(function Tree2({
   allowDragDrop,
   className,
   defaultSelected,
@@ -7997,11 +8224,11 @@ var Tree = (0, import_react58.forwardRef)(function Tree2({
   source,
   ...htmlAttributes
 }, forwardedRef) {
-  var _a;
-  const id = (0, import_core24.useIdMemo)(idProp);
-  const rootRef = (0, import_react58.useRef)(null);
+  var _a2;
+  const id = (0, import_core25.useIdMemo)(idProp);
+  const rootRef = (0, import_react62.useRef)(null);
   const [, sourceWithIds, sourceItemById] = useItemsWithIds(source, id, {
-    revealSelected: revealSelected ? (_a = selectedProp != null ? selectedProp : defaultSelected) != null ? _a : false : void 0
+    revealSelected: revealSelected ? (_a2 = selectedProp != null ? selectedProp : defaultSelected) != null ? _a2 : false : void 0
   });
   const handleSelectionChange = (evt, selected2) => {
     if (onSelectionChange) {
@@ -8042,14 +8269,14 @@ var Tree = (0, import_react58.forwardRef)(function Tree2({
   const allowGroupSelect = groupSelectionEnabled2(groupSelection);
   function addLeafNode(list, item, idx) {
     list.push(
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         TreeNode,
         {
           ...propsCommonToAllListItems,
           ...getListItemProps(item, idx, highlightedIdx, selected, focusVisible),
           children: [
-            item.icon ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: `${classBase16}Node-icon`, "data-icon": item.icon }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: item.label })
+            item.icon ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: `${classBase18}Node-icon`, "data-icon": item.icon }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: item.label })
           ]
         }
       )
@@ -8060,16 +8287,16 @@ var Tree = (0, import_react58.forwardRef)(function Tree2({
     const { value: i } = idx;
     idx.value += 1;
     list.push(
-      /* @__PURE__ */ (0, import_react59.createElement)(
+      /* @__PURE__ */ (0, import_react63.createElement)(
         TreeNode,
         {
           ...listItemHandlers,
           "aria-expanded": child.expanded,
           "aria-level": child.level,
           "aria-selected": selected.includes(id2) || void 0,
-          className: (0, import_classnames16.default)(`${classBase16}Node`, {
+          className: (0, import_classnames16.default)(`${classBase18}Node`, {
             focusVisible: focusVisible === i,
-            [`${classBase16}Node-toggle`]: !allowGroupSelect
+            [`${classBase18}Node-toggle`]: !allowGroupSelect
           }),
           "data-idx": i,
           "data-highlighted": i === highlightedIdx || void 0,
@@ -8077,20 +8304,20 @@ var Tree = (0, import_react58.forwardRef)(function Tree2({
           id: id2,
           key: `header-${i}`
         },
-        allowGroupSelect ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: `${classBase16}Node-label`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: `${classBase16}Node-toggle` }),
+        allowGroupSelect ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: `${classBase18}Node-label`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: `${classBase18}Node-toggle` }),
           title
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: `${classBase16}Node-label`, children: [
-          child.icon ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: `${classBase18}Node-label`, children: [
+          child.icon ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "span",
             {
-              className: `${classBase16}Node-icon`,
+              className: `${classBase18}Node-icon`,
               "data-icon": child.icon
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: title })
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: title })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("ul", { role: "group", children: isExpanded(child) ? renderSourceContent(child.childNodes, idx) : "" })
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { role: "group", children: isExpanded(child) ? renderSourceContent(child.childNodes, idx) : "" })
       )
     );
   }
@@ -8107,14 +8334,14 @@ var Tree = (0, import_react58.forwardRef)(function Tree2({
       return listItems;
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "ul",
     {
       ...htmlAttributes,
       ...listProps,
-      className: (0, import_classnames16.default)(classBase16, className),
+      className: (0, import_classnames16.default)(classBase18, className),
       id: `Tree-${id}`,
-      ref: (0, import_core24.useForkRef)(rootRef, forwardedRef),
+      ref: (0, import_core25.useForkRef)(rootRef, forwardedRef),
       role: "tree",
       tabIndex: 0,
       children: renderSourceContent(visibleData)
@@ -8136,39 +8363,61 @@ Tree.displayName = "Tree";
 var Tree_default = Tree;
 
 // src/vuu-input/VuuInput.tsx
-var import_core25 = require("@salt-ds/core");
+var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
+var import_core26 = require("@salt-ds/core");
 var import_classnames17 = __toESM(require("classnames"));
-var import_react60 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var classBase17 = "vuuInput";
+var import_react64 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var classBase19 = "vuuInput";
 var VuuInput = ({
   className,
   onCommit,
   onKeyDown,
+  type,
   ...props
 }) => {
-  const handleKeyDown = (0, import_react60.useCallback)(
+  const commitValue = (0, import_react64.useCallback)(
+    (evt, value) => {
+      console.log(`commit value ${value}`);
+      if (type === "number") {
+        const numericValue = parseFloat(value);
+        if ((0, import_vuu_utils14.isValidNumber)(numericValue)) {
+          onCommit(evt, numericValue);
+        } else {
+          throw Error("Invalid value");
+        }
+      } else if (type === "boolean") {
+        onCommit(evt, Boolean(value));
+      } else {
+        onCommit(evt, value);
+      }
+    },
+    [onCommit, type]
+  );
+  const handleKeyDown = (0, import_react64.useCallback)(
     (evt) => {
       if (evt.key === "Enter") {
         evt.preventDefault();
         evt.stopPropagation();
-        onCommit(evt);
+        const { value } = evt.target;
+        commitValue(evt, value);
       }
       onKeyDown == null ? void 0 : onKeyDown(evt);
     },
-    [onCommit, onKeyDown]
+    [commitValue, onKeyDown]
   );
-  const handleBlur = (0, import_react60.useCallback)(
+  const handleBlur = (0, import_react64.useCallback)(
     (evt) => {
-      onCommit(evt);
+      const { value } = evt.target;
+      commitValue(evt, value);
     },
-    [onCommit]
+    [commitValue]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    import_core25.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_core26.Input,
     {
       ...props,
-      className: (0, import_classnames17.default)(classBase17, className),
+      className: (0, import_classnames17.default)(classBase19, className),
       onBlur: handleBlur,
       onKeyDown: handleKeyDown
     }