@vuu-ui/vuu-ui-controls 0.8.23-debug → 0.8.24-debug

package/cjs/index.js

@@ -62,6 +62,8 @@ __export(src_exports, {
   HeightOnly: () => HeightOnly,
   Highlighter: () => Highlighter,
   Home: () => Home,
+  Icon: () => Icon,
+  IconButton: () => IconButton,
   InstrumentPicker: () => InstrumentPicker,
   InstrumentSearch: () => InstrumentSearch,
   LIST_FOCUS_VISIBLE: () => LIST_FOCUS_VISIBLE,
@@ -2647,9 +2649,9 @@ var getNonWrappedAndWrappedItems = (container, orientation = "horizontal") => {
   }
   return [nonWrappedItems, wrappedItems];
 };
-var applyOverflowClassToWrappedItems = (container, overflowedItems, classBase24) => {
+var applyOverflowClassToWrappedItems = (container, overflowedItems, classBase26) => {
   let ignoreOverflow = false;
-  const className = classBase24 ? `${classBase24}-overflowed` : "overflow";
+  const className = classBase26 ? `${classBase26}-overflowed` : "overflow";
   if (overflowedItems.find(({ index }) => index === "overflow")) {
     if (overflowedItems.length === 1) {
       ignoreOverflow = true;
@@ -10174,18 +10176,53 @@ var ExpandoInput = (0, import_react63.forwardRef)(function ExpandoInput2({
   );
 });
 
-// src/inputs/Checkbox.tsx
+// src/icon-button/Icon.tsx
+var import_clsx26 = __toESM(require("clsx"));
 var import_jsx_runtime33 = require("react/jsx-runtime");
+var classBase13 = "vuuIcon";
+var Icon = ({
+  className,
+  name,
+  size,
+  style: styleProp,
+  ...htmlAttributes
+}) => {
+  const style = typeof size === "number" ? { ...styleProp, "--vuu-icon-size": `${size}px` } : styleProp;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "span",
+    {
+      ...htmlAttributes,
+      className: (0, import_clsx26.default)(classBase13, className),
+      "data-icon": name,
+      style
+    }
+  );
+};
+
+// src/icon-button/IconButton.tsx
+var import_clsx27 = __toESM(require("clsx"));
+var import_core27 = require("@salt-ds/core");
+var import_react64 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var classBase14 = "vuuIconButton";
+var IconButton = (0, import_react64.forwardRef)(
+  function IconButton2({ className, icon, ...buttonProps }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core27.Button, { ...buttonProps, className: (0, import_clsx27.default)(classBase14, className), ref, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: icon }) });
+  }
+);
+
+// src/inputs/Checkbox.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var Checkbox = (props) => {
   const { onToggle, checked, label } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "div",
     {
       className: "vuuCheckbox",
       onClick: onToggle,
       onKeyUp: (e) => e.key === " " && onToggle(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CheckboxIcon, { tabIndex: 0, checked }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CheckboxIcon, { tabIndex: 0, checked }),
         label
       ]
     }
@@ -10193,13 +10230,13 @@ var Checkbox = (props) => {
 };
 
 // src/inputs/RadioButton.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var RadioButton = (props) => {
   const { onClick, checked, label, groupName } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "vuuRadioButton", onClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "radio", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("input", { type: "radio", name: groupName }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RadioIcon, { checked })
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "vuuRadioButton", onClick, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "radio", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("input", { type: "radio", name: groupName }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadioIcon, { checked })
     ] }),
     label
   ] });
@@ -10208,13 +10245,13 @@ var RadioButton = (props) => {
 // src/instrument-picker/InstrumentPicker.tsx
 var import_vuu_table2 = require("@vuu-ui/vuu-table");
 var import_vuu_utils23 = require("@vuu-ui/vuu-utils");
-var import_core27 = require("@salt-ds/core");
-var import_react65 = require("react");
+var import_core28 = require("@salt-ds/core");
+var import_react66 = require("react");
 
 // src/instrument-picker/SearchCell.tsx
 var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var classBase13 = "vuuSearchCell";
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var classBase15 = "vuuSearchCell";
 var SearchCell = ({
   column,
   columnMap,
@@ -10222,8 +10259,8 @@ var SearchCell = ({
 }) => {
   const key = columnMap[column.name];
   const value = row[key];
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: classBase13, tabIndex: -1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { "data-icon": "draggable" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: classBase15, tabIndex: -1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "data-icon": "draggable" }),
     value
   ] });
 };
@@ -10233,7 +10270,7 @@ var SearchCell = ({
 
 // src/instrument-picker/useInstrumentPicker.ts
 var import_vuu_table = require("@vuu-ui/vuu-table");
-var import_react64 = require("react");
+var import_react65 = require("react");
 var defaultItemToString = (columns, columnMap) => (row) => {
   return columns.map(({ name }) => row[columnMap[name]]).join(" ");
 };
@@ -10248,26 +10285,26 @@ var useInstrumentPicker = ({
   onSelect,
   searchColumns
 }) => {
-  const [value, setValue] = (0, import_react64.useState)("");
+  const [value, setValue] = (0, import_react65.useState)("");
   const [isOpen, setIsOpen] = useControlled({
     controlled: isOpenProp,
     default: defaultIsOpen != null ? defaultIsOpen : false,
     name: "useDropdownList"
   });
   const { highlightedIndexRef, onKeyDown, tableRef } = (0, import_vuu_table.useControlledTableNavigation)(-1, dataSource.size);
-  const baseFilterPattern = (0, import_react64.useMemo)(
+  const baseFilterPattern = (0, import_react65.useMemo)(
     // TODO make this contains once server supports it
     () => searchColumns.map((col) => `${col} starts "__VALUE__"`).join(" or "),
     [searchColumns]
   );
-  const handleOpenChange = (0, import_react64.useCallback)(
+  const handleOpenChange = (0, import_react65.useCallback)(
     (open, closeReason) => {
       setIsOpen(open);
       onOpenChange == null ? void 0 : onOpenChange(open, closeReason);
     },
     [onOpenChange, setIsOpen]
   );
-  const handleInputChange = (0, import_react64.useCallback)(
+  const handleInputChange = (0, import_react65.useCallback)(
     (evt) => {
       const { value: value2 } = evt.target;
       setValue(value2);
@@ -10285,7 +10322,7 @@ var useInstrumentPicker = ({
     },
     [baseFilterPattern, dataSource, setIsOpen]
   );
-  const handleSelectRow = (0, import_react64.useCallback)(
+  const handleSelectRow = (0, import_react65.useCallback)(
     (row) => {
       const value2 = itemToString2(row);
       setValue(value2);
@@ -10316,12 +10353,12 @@ var useInstrumentPicker = ({
 };
 
 // src/instrument-picker/InstrumentPicker.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var classBase14 = "vuuInstrumentPicker";
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var classBase16 = "vuuInstrumentPicker";
 if (typeof SearchCell !== "function") {
   console.warn("Instrument Picker: SearchCell module not loaded ");
 }
-var InstrumentPicker = (0, import_react65.forwardRef)(function InstrumentPicker2({
+var InstrumentPicker = (0, import_react66.forwardRef)(function InstrumentPicker2({
   TableProps: { dataSource, ...TableProps3 },
   className,
   columnMap,
@@ -10353,7 +10390,7 @@ var InstrumentPicker = (0, import_react65.forwardRef)(function InstrumentPicker2
     onSelect,
     searchColumns
   });
-  const endAdornment = (0, import_react65.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "data-icon": "chevron-down" }), []);
+  const endAdornment = (0, import_react66.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "data-icon": "chevron-down" }), []);
   const tableProps = {
     ...TableProps3,
     config: {
@@ -10361,7 +10398,7 @@ var InstrumentPicker = (0, import_react65.forwardRef)(function InstrumentPicker2
       zebraStripes: false
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     DropdownBase,
     {
       ...htmlAttributes,
@@ -10374,8 +10411,8 @@ var InstrumentPicker = (0, import_react65.forwardRef)(function InstrumentPicker2
       ref: forwardedRef,
       width,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-          import_core27.Input,
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          import_core28.Input,
           {
             ...inputProps,
             disabled,
@@ -10383,14 +10420,14 @@ var InstrumentPicker = (0, import_react65.forwardRef)(function InstrumentPicker2
             value
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           import_vuu_table2.Table,
           {
             rowHeight: 25,
             renderBufferSize: 100,
             ...tableProps,
             ...tableHandlers,
-            className: `${classBase14}-list`,
+            className: `${classBase16}-list`,
             height: 200,
             highlightedIndex,
             dataSource,
@@ -10407,14 +10444,14 @@ var InstrumentPicker = (0, import_react65.forwardRef)(function InstrumentPicker2
 // src/instrument-search/InstrumentSearch.tsx
 var import_vuu_layout = require("@vuu-ui/vuu-layout");
 var import_vuu_table3 = require("@vuu-ui/vuu-table");
-var import_core28 = require("@salt-ds/core");
-var import_clsx26 = __toESM(require("clsx"));
-var import_react67 = require("react");
+var import_core29 = require("@salt-ds/core");
+var import_clsx28 = __toESM(require("clsx"));
+var import_react68 = require("react");
 
 // src/instrument-search/SearchCell.tsx
 var import_vuu_utils24 = require("@vuu-ui/vuu-utils");
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var classBase15 = "vuuSearchCell";
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var classBase17 = "vuuSearchCell";
 var SearchCell2 = ({
   column,
   columnMap,
@@ -10422,8 +10459,8 @@ var SearchCell2 = ({
 }) => {
   const key = columnMap[column.name];
   const value = row[key];
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: classBase15, tabIndex: -1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "data-icon": "draggable" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: classBase17, tabIndex: -1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "data-icon": "draggable" }),
     value
   ] });
 };
@@ -10432,18 +10469,18 @@ var SearchCell2 = ({
 });
 
 // src/instrument-search/useInstrumentSearch.ts
-var import_react66 = require("react");
+var import_react67 = require("react");
 var useInstrumentSearch = ({
   dataSource,
   searchColumns = ["description"]
 }) => {
-  const [searchState, setSearchState] = (0, import_react66.useState)({ searchText: "", filter: "" });
-  const baseFilterPattern = (0, import_react66.useMemo)(
+  const [searchState, setSearchState] = (0, import_react67.useState)({ searchText: "", filter: "" });
+  const baseFilterPattern = (0, import_react67.useMemo)(
     // TODO make this contains once server supports it
     () => searchColumns.map((col) => `${col} starts "__VALUE__"`).join(" or "),
     [searchColumns]
   );
-  const handleChange = (0, import_react66.useCallback)(
+  const handleChange = (0, import_react67.useCallback)(
     (evt) => {
       const { value } = evt.target;
       const filter = baseFilterPattern.replaceAll("__VALUE__", value);
@@ -10467,8 +10504,8 @@ var useInstrumentSearch = ({
 };
 
 // src/instrument-search/InstrumentSearch.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var classBase16 = "vuuInstrumentSearch";
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var classBase18 = "vuuInstrumentSearch";
 if (typeof SearchCell2 !== "function") {
   console.warn("Instrument Search: SearchCell module not loaded ");
 }
@@ -10488,7 +10525,7 @@ var defaultTableConfig = {
   ],
   rowSeparators: true
 };
-var searchIcon = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "data-icon": "search" });
+var searchIcon = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "data-icon": "search" });
 var InstrumentSearch = ({
   TableProps: TableProps3,
   autoFocus = false,
@@ -10504,15 +10541,15 @@ var InstrumentSearch = ({
     searchColumns
   });
   const { highlightedIndexRef, onHighlight, onKeyDown, tableRef } = (0, import_vuu_table3.useControlledTableNavigation)(-1, (_a2 = dataSource == null ? void 0 : dataSource.size) != null ? _a2 : 0);
-  const searchCallbackRef = (0, import_react67.useCallback)((el) => {
+  const searchCallbackRef = (0, import_react68.useCallback)((el) => {
     setTimeout(() => {
       var _a3;
       (_a3 = el == null ? void 0 : el.querySelector("input")) == null ? void 0 : _a3.focus();
     }, 100);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { ...htmlAttributes, className: (0, import_clsx26.default)(classBase16, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `${classBase16}-inputField`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-      import_core28.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ...htmlAttributes, className: (0, import_clsx28.default)(classBase18, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: `${classBase18}-inputField`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      import_core29.Input,
       {
         inputProps: { onKeyDown },
         endAdornment: searchIcon,
@@ -10522,7 +10559,7 @@ var InstrumentSearch = ({
         onChange
       }
     ) }),
-    dataSource ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    dataSource ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       import_vuu_table3.Table,
       {
         disableFocus: true,
@@ -10532,7 +10569,7 @@ var InstrumentSearch = ({
         highlightedIndex: highlightedIndexRef.current,
         renderBufferSize: 100,
         ...TableProps3,
-        className: `${classBase16}-list`,
+        className: `${classBase18}-list`,
         dataSource,
         navigationStyle: "row",
         onHighlight,
@@ -10547,10 +10584,10 @@ var _a;
 
 // src/price-ticker/PriceTicker.tsx
 var import_vuu_utils25 = require("@vuu-ui/vuu-utils");
-var import_react68 = require("react");
-var import_clsx27 = __toESM(require("clsx"));
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var classBase17 = "vuuPriceTicker";
+var import_react69 = require("react");
+var import_clsx29 = __toESM(require("clsx"));
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var classBase19 = "vuuPriceTicker";
 var getValueFormatter = (decimals) => (0, import_vuu_utils25.numericFormatter)({
   type: {
     name: "number",
@@ -10561,7 +10598,7 @@ var getValueFormatter = (decimals) => (0, import_vuu_utils25.numericFormatter)({
   }
 });
 var INITIAL_VALUE = [void 0, void 0];
-var PriceTicker = (0, import_react68.memo)(
+var PriceTicker = (0, import_react69.memo)(
   ({
     className,
     decimals = 2,
@@ -10569,14 +10606,14 @@ var PriceTicker = (0, import_react68.memo)(
     showArrow,
     ...htmlAttributes
   }) => {
-    const ref = (0, import_react68.useRef)(INITIAL_VALUE);
+    const ref = (0, import_react69.useRef)(INITIAL_VALUE);
     const [prevValue, prevDirection] = ref.current;
-    const formatNumber = (0, import_react68.useMemo)(() => getValueFormatter(decimals), [decimals]);
+    const formatNumber = (0, import_react69.useMemo)(() => getValueFormatter(decimals), [decimals]);
     const direction = (0, import_vuu_utils25.isValidNumber)(prevValue) ? (0, import_vuu_utils25.getMovingValueDirection)(price, prevDirection, prevValue, decimals) : "";
     ref.current = [price, direction];
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ...htmlAttributes, className: (0, import_clsx27.default)(classBase17, className, direction), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ...htmlAttributes, className: (0, import_clsx29.default)(classBase19, className, direction), children: [
       formatNumber(price),
-      showArrow ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "data-icon": "price-arrow" }) : null
+      showArrow ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { "data-icon": "price-arrow" }) : null
     ] });
   }
 );
@@ -10584,128 +10621,141 @@ PriceTicker.displayName = "PriceTicker";
 
 // src/split-button/SplitButton.tsx
 var import_vuu_popups5 = require("@vuu-ui/vuu-popups");
-var import_core29 = require("@salt-ds/core");
+var import_core30 = require("@salt-ds/core");
 
 // src/split-button/useSplitButton.ts
 var import_vuu_utils26 = require("@vuu-ui/vuu-utils");
-var import_react69 = require("react");
+var import_react70 = require("react");
 var useSplitButton = ({
   ButtonProps: ButtonPropsProp,
   PopupMenuProps: PopupMenuProps3,
-  classBase: classBase24,
+  classBase: classBase26,
   onClick,
   segmented
 }) => {
-  const buttonRef = (0, import_react69.useRef)(null);
-  const rootRef = (0, import_react69.useRef)(null);
-  const onMenuClose = (0, import_react69.useCallback)((reason) => {
+  const buttonRef = (0, import_react70.useRef)(null);
+  const rootRef = (0, import_react70.useRef)(null);
+  const onMenuClose = (0, import_react70.useCallback)((reason) => {
     var _a2;
     if ((reason == null ? void 0 : reason.type) !== "tab-away") {
-      (_a2 = rootRef.current) == null ? void 0 : _a2.focus();
+      const buttonMain = (_a2 = rootRef.current) == null ? void 0 : _a2.querySelector(
+        ".vuuSplitButton-main"
+      );
+      buttonMain == null ? void 0 : buttonMain.focus();
     }
   }, []);
   const menuProps = {
     ...PopupMenuProps3,
     anchorElement: rootRef,
-    menuClassName: `${classBase24}-menu`,
+    menuClassName: `${classBase26}-menu`,
     onMenuClose,
     popupPlacement: "below-full-width"
   };
-  const handleRootFocus = (0, import_react69.useCallback)(
-    (evt) => {
-      var _a2;
-      const { classList } = evt.target;
-      if (!segmented && classList.contains(classBase24)) {
-        (_a2 = buttonRef.current) == null ? void 0 : _a2.focus();
+  const handleRootFocus = (0, import_react70.useCallback)(() => {
+    const { current: splitButton } = rootRef;
+    if (!(splitButton == null ? void 0 : splitButton.classList.contains("vuuFocusVisible"))) {
+      splitButton == null ? void 0 : splitButton.classList.add("vuuFocusVisible");
+    }
+  }, []);
+  const handleRootBlur = (0, import_react70.useCallback)((evt) => {
+    const { current: splitButton } = rootRef;
+    const target = evt.relatedTarget;
+    if (!(splitButton == null ? void 0 : splitButton.contains(target))) {
+      if (splitButton == null ? void 0 : splitButton.classList.contains("vuuFocusVisible")) {
+        splitButton.classList.remove("vuuFocusVisible");
       }
-    },
-    [classBase24, segmented]
-  );
-  const handleButtonKeyDown = (0, import_react69.useCallback)(
+    }
+  }, []);
+  const handleButtonKeyDown = (0, import_react70.useCallback)(
     (evt) => {
       var _a2;
       if (evt.key === "ArrowDown") {
         const popupTrigger = (_a2 = rootRef.current) == null ? void 0 : _a2.querySelector(
-          `.${classBase24}-secondary`
+          `.${classBase26}-trigger`
         );
         if (popupTrigger) {
           (0, import_vuu_utils26.dispatchMouseEvent)(popupTrigger, "click");
         }
       }
     },
-    [classBase24]
+    [classBase26]
   );
-  const handleClick = (0, import_react69.useCallback)(
+  const handleClick = (0, import_react70.useCallback)(
     (evt) => {
       onClick == null ? void 0 : onClick(evt);
     },
     [onClick]
   );
-  const ButtonProps5 = {
+  const ButtonProps6 = {
     ...ButtonPropsProp,
     onClick: segmented ? handleClick : void 0,
     onKeyDown: handleButtonKeyDown
   };
   return {
-    ButtonProps: ButtonProps5,
+    ButtonProps: ButtonProps6,
     PopupMenuProps: menuProps,
     buttonRef,
     rootRef,
     onClick: segmented ? void 0 : handleClick,
+    onBlur: handleRootBlur,
     onFocus: handleRootFocus
   };
 };
 
 // src/split-button/SplitButton.tsx
-var import_clsx28 = __toESM(require("clsx"));
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var classBase18 = "vuuSplitButton";
+var import_clsx30 = __toESM(require("clsx"));
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var classBase20 = "vuuSplitButton";
 var SplitButton = ({
   ButtonProps: ButtonPropsProp,
   PopupMenuProps: PopupMenuPropsProp,
   buttonText,
+  disabled = false,
   onClick,
   segmented = false,
+  variant = "primary",
   ...htmlAttributes
 }) => {
   var _a2;
-  const { ButtonProps: ButtonProps5, buttonRef, rootRef, PopupMenuProps: PopupMenuProps3, ...rootProps } = useSplitButton({
+  const { ButtonProps: ButtonProps6, buttonRef, rootRef, PopupMenuProps: PopupMenuProps3, ...rootProps } = useSplitButton({
     ButtonProps: ButtonPropsProp,
     PopupMenuProps: PopupMenuPropsProp,
-    classBase: classBase18,
+    classBase: classBase20,
     onClick,
     segmented
   });
-  console.log({ ButtonProps: ButtonProps5 });
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
       ...htmlAttributes,
       ...rootProps,
-      className: (0, import_clsx28.default)(classBase18, {
-        [`${classBase18}-segmented`]: segmented
+      className: (0, import_clsx30.default)(classBase20, `${classBase20}-${variant}`, {
+        [`${classBase20}-disabled`]: disabled,
+        [`${classBase20}-segmented`]: segmented
       }),
       ref: rootRef,
       "data-showcase-center": true,
-      tabIndex: segmented ? void 0 : 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-          import_core29.Button,
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          import_core30.Button,
           {
-            ...ButtonProps5,
-            className: `${classBase18}-primary`,
+            ...ButtonProps6,
+            className: `${classBase20}-main`,
+            disabled,
             ref: buttonRef,
-            variant: "secondary",
+            variant,
             children: buttonText
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           import_vuu_popups5.PopupMenu,
           {
             ...PopupMenuProps3,
-            className: `${classBase18}-secondary`,
+            className: `${classBase20}-trigger`,
+            disabled,
             icon: (_a2 = PopupMenuProps3 == null ? void 0 : PopupMenuProps3.icon) != null ? _a2 : "chevron-down",
-            tabIndex: segmented ? 0 : -1
+            tabIndex: segmented ? 0 : -1,
+            variant
           }
         )
       ]
@@ -10715,13 +10765,12 @@ var SplitButton = ({
 
 // src/tabstrip/Tabstrip.tsx
 var import_vuu_utils32 = require("@vuu-ui/vuu-utils");
-var import_core32 = require("@salt-ds/core");
-var import_clsx29 = __toESM(require("clsx"));
-var import_react74 = __toESM(require("react"));
+var import_clsx31 = __toESM(require("clsx"));
+var import_react75 = __toESM(require("react"));
 
 // src/tabstrip/useTabstrip.ts
 var import_vuu_utils31 = require("@vuu-ui/vuu-utils");
-var import_react73 = require("react");
+var import_react74 = require("react");
 
 // src/tabstrip/TabMenuOptions.ts
 var isTabMenuOptions = (options) => typeof options === "object" && options !== null && "tabIndex" in options && typeof options.tabIndex === "number";
@@ -10754,22 +10803,22 @@ var getIndexOfEditedItem = (container) => getIndexOfItem(container, ".vuuEditabl
 
 // src/tabstrip/useAnimatedSelectionThumb.ts
 var import_vuu_utils28 = require("@vuu-ui/vuu-utils");
-var import_react70 = require("react");
+var import_react71 = require("react");
 var useAnimatedSelectionThumb = (containerRef, activeTabIndex, orientation = "horizontal") => {
-  const animationSuspendedRef = (0, import_react70.useRef)(false);
-  const suspendAnimation = (0, import_react70.useCallback)(() => {
+  const animationSuspendedRef = (0, import_react71.useRef)(false);
+  const suspendAnimation = (0, import_react71.useCallback)(() => {
     animationSuspendedRef.current = true;
   }, []);
-  const resumeAnimation = (0, import_react70.useCallback)(() => {
+  const resumeAnimation = (0, import_react71.useCallback)(() => {
     animationSuspendedRef.current = false;
   }, []);
-  const onTransitionEnd = (0, import_react70.useCallback)(() => {
+  const onTransitionEnd = (0, import_react71.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_react70.useRef)(-1);
-  return (0, import_react70.useMemo)(() => {
+  const lastSelectedRef = (0, import_react71.useRef)(-1);
+  return (0, import_react71.useMemo)(() => {
     var _a2, _b;
     let offset = 0;
     let size = 0;
@@ -10837,9 +10886,9 @@ var useAnimatedSelectionThumb = (containerRef, activeTabIndex, orientation = "ho
 };
 
 // src/tabstrip/useKeyboardNavigation.ts
-var import_core30 = require("@salt-ds/core");
+var import_core31 = require("@salt-ds/core");
 var import_vuu_utils29 = require("@vuu-ui/vuu-utils");
-var import_react71 = require("react");
+var import_react72 = require("react");
 var import_vuu_utils30 = require("@vuu-ui/vuu-utils");
 var navigation = {
   horizontal: {
@@ -10889,23 +10938,23 @@ var useKeyboardNavigation2 = ({
   selectedIndex: selectedTabIndex = 0
 }) => {
   const manualActivation = keyBoardActivation === "manual";
-  const mouseClickPending = (0, import_react71.useRef)(false);
-  const focusedRef = (0, import_react71.useRef)(-1);
-  const [hasFocus, setHasFocus] = (0, import_react71.useState)(false);
-  const [, forceRefresh] = (0, import_react71.useState)({});
-  const [highlightedIdx, _setHighlightedIdx] = (0, import_core30.useControlled)({
+  const mouseClickPending = (0, import_react72.useRef)(false);
+  const focusedRef = (0, import_react72.useRef)(-1);
+  const [hasFocus, setHasFocus] = (0, import_react72.useState)(false);
+  const [, forceRefresh] = (0, import_react72.useState)({});
+  const [highlightedIdx, _setHighlightedIdx] = (0, import_core31.useControlled)({
     controlled: highlightedIdxProp,
     default: defaultHighlightedIdx,
     name: "UseKeyboardNavigation"
   });
-  const setHighlightedIdx = (0, import_react71.useCallback)(
+  const setHighlightedIdx = (0, import_react72.useCallback)(
     (value) => {
       _setHighlightedIdx(focusedRef.current = value);
     },
     [_setHighlightedIdx]
   );
-  const keyboardNavigation = (0, import_react71.useRef)(false);
-  const focusTab = (0, import_react71.useCallback)(
+  const keyboardNavigation = (0, import_react72.useRef)(false);
+  const focusTab = (0, import_react72.useCallback)(
     (tabIndex, immediateFocus = false, withKeyboard, delay = 70) => {
       setHighlightedIdx(tabIndex);
       if (withKeyboard === true && !keyboardNavigation.current) {
@@ -10945,14 +10994,14 @@ var useKeyboardNavigation2 = ({
       }
     }
   };
-  const getIndexCount = (0, import_react71.useCallback)(
+  const getIndexCount = (0, import_react72.useCallback)(
     () => {
       var _a2, _b;
       return (_b = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelectorAll(`[data-index]`).length) != null ? _b : 0;
     },
     [containerRef]
   );
-  const nextFocusableItemIdx = (0, import_react71.useCallback)(
+  const nextFocusableItemIdx = (0, import_react72.useCallback)(
     (direction = "fwd", idx) => {
       const indexCount = getIndexCount();
       const index = typeof idx === "number" ? idx : indexCount;
@@ -10972,7 +11021,7 @@ var useKeyboardNavigation2 = ({
     },
     [containerRef, getIndexCount]
   );
-  const navigateChildItems = (0, import_react71.useCallback)(
+  const navigateChildItems = (0, import_react72.useCallback)(
     (e, forceFocusVisible = false) => {
       const direction = navigation[orientation][e.key];
       const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
@@ -10994,14 +11043,14 @@ var useKeyboardNavigation2 = ({
       orientation
     ]
   );
-  const highlightedTabHasMenu = (0, import_react71.useCallback)(() => {
+  const highlightedTabHasMenu = (0, import_react72.useCallback)(() => {
     const el = getElementByPosition(containerRef.current, highlightedIdx);
     if (el) {
       return el.querySelector(".vuuPopupMenu") != null;
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const activateTabMenu = (0, import_react71.useCallback)(() => {
+  const activateTabMenu = (0, import_react72.useCallback)(() => {
     const el = getElementByPosition(containerRef.current, highlightedIdx);
     const menuEl = el == null ? void 0 : el.querySelector(".vuuPopupMenu");
     if (menuEl) {
@@ -11009,7 +11058,7 @@ var useKeyboardNavigation2 = ({
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const handleKeyDown = (0, import_react71.useCallback)(
+  const handleKeyDown = (0, import_react72.useCallback)(
     (e) => {
       if (getIndexCount() > 0 && isNavigationKey2(e.key, orientation)) {
         e.preventDefault();
@@ -11034,7 +11083,7 @@ var useKeyboardNavigation2 = ({
   const handleItemClick = (_, tabIndex) => {
     setHighlightedIdx(tabIndex);
   };
-  const handleFocus = (0, import_react71.useCallback)(() => {
+  const handleFocus = (0, import_react72.useCallback)(() => {
     if (!hasFocus) {
       setHasFocus(true);
       if (!mouseClickPending.current) {
@@ -11044,7 +11093,7 @@ var useKeyboardNavigation2 = ({
       }
     }
   }, [hasFocus]);
-  const handleContainerMouseDown = (0, import_react71.useCallback)(() => {
+  const handleContainerMouseDown = (0, import_react72.useCallback)(() => {
     if (!hasFocus) {
       mouseClickPending.current = true;
     }
@@ -11081,8 +11130,8 @@ var useKeyboardNavigation2 = ({
 };
 
 // src/tabstrip/useSelection.ts
-var import_core31 = require("@salt-ds/core");
-var import_react72 = require("react");
+var import_core32 = require("@salt-ds/core");
+var import_react73 = require("react");
 var defaultSelectionKeys2 = ["Enter", " "];
 var isTabElement = (el) => el && el.matches('[class*="vuuTab "]');
 var useSelection2 = ({
@@ -11091,24 +11140,24 @@ var useSelection2 = ({
   onSelectionChange,
   selected: selectedProp
 }) => {
-  const [selected, setSelected, isControlled] = (0, import_core31.useControlled)({
+  const [selected, setSelected, isControlled] = (0, import_core32.useControlled)({
     controlled: selectedProp,
     default: defaultSelected != null ? defaultSelected : 0,
     name: "Tabstrip",
     state: "value"
   });
-  const isSelectionEvent = (0, import_react72.useCallback)(
+  const isSelectionEvent = (0, import_react73.useCallback)(
     (evt) => defaultSelectionKeys2.includes(evt.key),
     []
   );
-  const selectItem = (0, import_react72.useCallback)(
+  const selectItem = (0, import_react73.useCallback)(
     (tabIndex) => {
       setSelected(tabIndex);
       onSelectionChange == null ? void 0 : onSelectionChange(tabIndex);
     },
     [onSelectionChange, setSelected]
   );
-  const handleKeyDown = (0, import_react72.useCallback)(
+  const handleKeyDown = (0, import_react73.useCallback)(
     (e) => {
       const targetElement = e.target;
       if (isSelectionEvent(e) && highlightedIdx !== selected && isTabElement(targetElement)) {
@@ -11119,7 +11168,7 @@ var useSelection2 = ({
     },
     [isSelectionEvent, highlightedIdx, selected, selectItem]
   );
-  const onClick = (0, import_react72.useCallback)(
+  const onClick = (0, import_react73.useCallback)(
     (e, tabIndex) => {
       if (tabIndex !== selected) {
         selectItem(tabIndex);
@@ -11159,7 +11208,7 @@ var useTabstrip = ({
   orientation,
   keyBoardActivation
 }) => {
-  const lastSelection = (0, import_react73.useRef)(activeTabIndexProp);
+  const lastSelection = (0, import_react74.useRef)(activeTabIndexProp);
   const {
     focusTab: keyboardHookFocusTab,
     highlightedIdx,
@@ -11189,7 +11238,7 @@ var useTabstrip = ({
     animateSelectionThumb ? selectionHookSelected : -1,
     orientation
   );
-  const handleDrop = (0, import_react73.useCallback)(
+  const handleDrop = (0, import_react74.useCallback)(
     ({ fromIndex, toIndex }) => {
       const { current: selected } = lastSelection;
       console.log(
@@ -11231,7 +11280,7 @@ var useTabstrip = ({
     orientation: "horizontal",
     itemQuery: ".vuuOverflowContainer-item"
   });
-  const handleExitEditMode = (0, import_react73.useCallback)(
+  const handleExitEditMode = (0, import_react74.useCallback)(
     (originalValue, editedValue, allowDeactivation, tabIndex) => {
       console.log(
         `handleExitEditMode ${originalValue} ${editedValue} ${allowDeactivation} ${tabIndex}`
@@ -11243,7 +11292,7 @@ var useTabstrip = ({
     },
     [keyboardHookFocusTab, onExitEditMode]
   );
-  const handleClick = (0, import_react73.useCallback)(
+  const handleClick = (0, import_react74.useCallback)(
     (evt, tabIndex) => {
       keyboardHookHandleClick(evt, tabIndex);
       selectionHookHandleClick(evt, tabIndex);
@@ -11251,7 +11300,7 @@ var useTabstrip = ({
     // [dragDropHook.isDragging, keyboardHook, selectionHook]
     [keyboardHookHandleClick, selectionHookHandleClick]
   );
-  const getEditableLabel = (0, import_react73.useCallback)(
+  const getEditableLabel = (0, import_react74.useCallback)(
     (tabIndex = highlightedIdx) => {
       const targetEl = getElementWithIndex(containerRef.current, tabIndex);
       if (targetEl) {
@@ -11260,7 +11309,7 @@ var useTabstrip = ({
     },
     [containerRef, highlightedIdx]
   );
-  const tabInEditMode = (0, import_react73.useCallback)(
+  const tabInEditMode = (0, import_react74.useCallback)(
     (tabIndex = highlightedIdx) => {
       const editableLabel = getEditableLabel(tabIndex);
       if (editableLabel) {
@@ -11270,7 +11319,7 @@ var useTabstrip = ({
     },
     [getEditableLabel, highlightedIdx]
   );
-  const editTab = (0, import_react73.useCallback)(
+  const editTab = (0, import_react74.useCallback)(
     (tabIndex = highlightedIdx) => {
       const editableLabelEl = getEditableLabel(tabIndex);
       if (editableLabelEl) {
@@ -11279,7 +11328,7 @@ var useTabstrip = ({
     },
     [getEditableLabel, highlightedIdx]
   );
-  const handleKeyDown = (0, import_react73.useCallback)(
+  const handleKeyDown = (0, import_react74.useCallback)(
     (evt) => {
       keyboardHookHandleKeyDown(evt);
       if (!evt.defaultPrevented) {
@@ -11291,7 +11340,7 @@ var useTabstrip = ({
     },
     [editTab, keyboardHookHandleKeyDown, selectionHookHandleKeyDown]
   );
-  const handleCloseTabFromMenu = (0, import_react73.useCallback)(
+  const handleCloseTabFromMenu = (0, import_react74.useCallback)(
     (tabIndex) => {
       const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);
       const newActiveTabIndex = selectedTabIndex > tabIndex ? selectedTabIndex - 1 : selectedTabIndex === tabIndex ? 0 : selectedTabIndex;
@@ -11304,14 +11353,14 @@ var useTabstrip = ({
     },
     [containerRef, onCloseTab, resumeAnimation, suspendAnimation]
   );
-  const handleRenameTabFromMenu = (0, import_react73.useCallback)(
+  const handleRenameTabFromMenu = (0, import_react74.useCallback)(
     (tabIndex) => {
       editTab(tabIndex);
       return true;
     },
     [editTab]
   );
-  const handleTabMenuAction = (0, import_react73.useCallback)(
+  const handleTabMenuAction = (0, import_react74.useCallback)(
     (action) => {
       if (isTabMenuOptions(action.options)) {
         switch (action.menuId) {
@@ -11327,7 +11376,7 @@ var useTabstrip = ({
     },
     [handleCloseTabFromMenu, handleRenameTabFromMenu]
   );
-  const handleTabMenuClose = (0, import_react73.useCallback)(() => {
+  const handleTabMenuClose = (0, import_react74.useCallback)(() => {
     if (!tabInEditMode()) {
       keyboardHookFocusTab(highlightedIdx);
     } else {
@@ -11339,7 +11388,7 @@ var useTabstrip = ({
     keyboardHookSetHighlightedIndex,
     tabInEditMode
   ]);
-  const onSwitchWrappedItemIntoView = (0, import_react73.useCallback)(
+  const onSwitchWrappedItemIntoView = (0, import_react74.useCallback)(
     (item) => {
       const index = parseInt(item.index);
       if (!isNaN(index)) {
@@ -11352,7 +11401,7 @@ var useTabstrip = ({
     onFocus: keyboardHook.onFocus,
     onKeyDown: handleKeyDown
   };
-  const handleAddTabClick = (0, import_react73.useCallback)(() => {
+  const handleAddTabClick = (0, import_react74.useCallback)(() => {
     onAddTab == null ? void 0 : onAddTab();
     requestAnimationFrame(() => {
       const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);
@@ -11385,9 +11434,9 @@ var useTabstrip = ({
 };
 
 // src/tabstrip/Tabstrip.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var import_react75 = require("react");
-var classBase19 = "vuuTabstrip";
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_react76 = require("react");
+var classBase21 = "vuuTabstrip";
 var Tabstrip = ({
   activeTabIndex: activeTabIndexProp,
   allowAddTab,
@@ -11411,7 +11460,7 @@ var Tabstrip = ({
   tabClassName,
   ...htmlAttributes
 }) => {
-  const rootRef = (0, import_react74.useRef)(null);
+  const rootRef = (0, import_react75.useRef)(null);
   const {
     activeTabIndex,
     focusVisible,
@@ -11434,12 +11483,12 @@ var Tabstrip = ({
     orientation
   });
   const id = (0, import_vuu_utils32.useId)(idProp);
-  const className = (0, import_clsx29.default)(classBase19, `${classBase19}-${orientation}`, classNameProp);
+  const className = (0, import_clsx31.default)(classBase21, `${classBase21}-${orientation}`, classNameProp);
   const style = styleProp || containerStyle ? {
     ...styleProp,
     ...containerStyle
   } : void 0;
-  const tabs = (0, import_react74.useMemo)(
+  const tabs = (0, import_react75.useMemo)(
     () => (0, import_vuu_utils32.asReactElements)(children).map((child, index) => {
       const {
         id: tabId = `${id}-tab-${index}`,
@@ -11450,10 +11499,10 @@ var Tabstrip = ({
         showMenuButton = showTabMenuButton
       } = child.props;
       const selected = index === activeTabIndex;
-      return import_react74.default.cloneElement(child, {
+      return import_react75.default.cloneElement(child, {
         ...tabProps,
         ...tabstripHook.navigationProps,
-        className: (0, import_clsx29.default)(className2, tabClassName),
+        className: (0, import_clsx31.default)(className2, tabClassName),
         closeable,
         "data-overflow-priority": selected ? "1" : void 0,
         dragging: draggedItemIndex === index,
@@ -11462,19 +11511,19 @@ var Tabstrip = ({
         id: tabId,
         index,
         key: index,
-        location: (0, import_clsx29.default)(location, tabLocation),
+        location: (0, import_clsx31.default)(location, tabLocation),
         selected,
         showMenuButton,
         tabIndex: selected ? 0 : -1
       });
     }).concat(
-      allowAddTab ? /* @__PURE__ */ (0, import_react75.createElement)(
-        import_core32.Button,
+      allowAddTab ? /* @__PURE__ */ (0, import_react76.createElement)(
+        IconButton,
         {
           ...tabstripHook.navigationProps,
           "aria-label": "Create Tab",
-          className: `${classBase19}-addTabButton`,
-          "data-icon": "add",
+          className: `${classBase21}-addTabButton`,
+          icon: "add",
           "data-overflow-priority": "1",
           key: "addButton",
           onClick: onClickAddTab,
@@ -11500,8 +11549,8 @@ var Tabstrip = ({
       location
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       OverflowContainer,
       {
         ...htmlAttributes,
@@ -11523,15 +11572,15 @@ var Tabstrip = ({
 
 // src/tabstrip/Tab.tsx
 var import_core33 = require("@salt-ds/core");
-var import_clsx31 = __toESM(require("clsx"));
-var import_react77 = require("react");
+var import_clsx33 = __toESM(require("clsx"));
+var import_react78 = require("react");
 
 // src/tabstrip/TabMenu.tsx
 var import_vuu_popups6 = require("@vuu-ui/vuu-popups");
-var import_react76 = require("react");
-var import_clsx30 = __toESM(require("clsx"));
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var classBase20 = "vuuTabMenu";
+var import_react77 = require("react");
+var import_clsx32 = __toESM(require("clsx"));
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var classBase22 = "vuuTabMenu";
 var TabMenu = ({
   allowClose,
   allowRename,
@@ -11542,7 +11591,7 @@ var TabMenu = ({
   onMenuClose,
   index
 }) => {
-  const [menuBuilder, menuOptions] = (0, import_react76.useMemo)(
+  const [menuBuilder, menuOptions] = (0, import_react77.useMemo)(
     () => [
       (_location, options) => {
         const menuItems = [];
@@ -11568,13 +11617,13 @@ var TabMenu = ({
       index
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     import_vuu_popups6.PopupMenu,
     {
-      className: classBase20,
+      className: classBase22,
       menuBuilder,
       menuActionHandler: onMenuAction,
-      menuLocation: (0, import_clsx30.default)("tab", location),
+      menuLocation: (0, import_clsx32.default)("tab", location),
       menuOptions,
       onMenuClose,
       tabIndex: -1,
@@ -11584,10 +11633,10 @@ var TabMenu = ({
 };
 
 // src/tabstrip/Tab.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var classBase21 = "vuuTab";
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var classBase23 = "vuuTab";
 var noop2 = () => void 0;
-var Tab = (0, import_react77.forwardRef)(function Tab2({
+var Tab = (0, import_react78.forwardRef)(function Tab2({
   ariaControls,
   children,
   className,
@@ -11616,10 +11665,10 @@ var Tab = (0, import_react77.forwardRef)(function Tab2({
   if (showMenuButton && typeof onMenuAction !== "function") {
     throw Error("Tab onMenuAction must be provided if showMenuButton is set");
   }
-  const rootRef = (0, import_react77.useRef)(null);
-  const editableRef = (0, import_react77.useRef)(null);
+  const rootRef = (0, import_react78.useRef)(null);
+  const editableRef = (0, import_react78.useRef)(null);
   const setForkRef = (0, import_core33.useForkRef)(ref, rootRef);
-  const handleClick = (0, import_react77.useCallback)(
+  const handleClick = (0, import_react78.useCallback)(
     (e) => {
       if (!editing) {
         e.preventDefault();
@@ -11644,7 +11693,7 @@ var Tab = (0, import_react77.forwardRef)(function Tab2({
   };
   const getLabel = () => {
     if (editable) {
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         EditableLabel,
         {
           editing,
@@ -11669,18 +11718,18 @@ var Tab = (0, import_react77.forwardRef)(function Tab2({
     }
     onFocusProp == null ? void 0 : onFocusProp(evt);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
       ...props,
       "aria-controls": ariaControls,
       "aria-selected": selected,
-      className: (0, import_clsx31.default)(classBase21, className, {
-        [`${classBase21}-closeable`]: closeable,
+      className: (0, import_clsx33.default)(classBase23, className, {
+        [`${classBase23}-closeable`]: closeable,
         "vuuDraggable-dragAway": dragging,
-        [`${classBase21}-editing`]: editing,
-        [`${classBase21}-selected`]: selected || void 0,
-        [`${classBase21}-vertical`]: orientation === "vertical",
+        [`${classBase23}-editing`]: editing,
+        [`${classBase23}-selected`]: selected || void 0,
+        [`${classBase23}-vertical`]: orientation === "vertical",
         [`vuuFocusVisible`]: focusVisible
       }),
       onClick: handleClick,
@@ -11690,15 +11739,15 @@ var Tab = (0, import_react77.forwardRef)(function Tab2({
       role: "tab",
       tabIndex,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: `${classBase21}-main`, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: `${classBase23}-main`, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "span",
           {
-            className: `${classBase21}-text`,
+            className: `${classBase23}-text`,
             "data-text": editable ? void 0 : label,
             children: children != null ? children : getLabel()
           }
         ) }),
-        showMenuButton ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        showMenuButton ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           TabMenu,
           {
             allowClose: closeable,
@@ -11718,17 +11767,17 @@ var Tab = (0, import_react77.forwardRef)(function Tab2({
 
 // src/toolbar/Toolbar.tsx
 var import_vuu_utils38 = require("@vuu-ui/vuu-utils");
-var import_clsx32 = __toESM(require("clsx"));
-var import_react81 = __toESM(require("react"));
+var import_clsx34 = __toESM(require("clsx"));
+var import_react82 = __toESM(require("react"));
 
 // src/toolbar/useToolbar.ts
 var import_vuu_utils37 = require("@vuu-ui/vuu-utils");
-var import_react80 = require("react");
+var import_react81 = require("react");
 
 // src/toolbar/useKeyboardNavigation.ts
 var import_core34 = require("@salt-ds/core");
 var import_vuu_utils34 = require("@vuu-ui/vuu-utils");
-var import_react78 = require("react");
+var import_react79 = require("react");
 var import_vuu_utils35 = require("@vuu-ui/vuu-utils");
 
 // src/toolbar/toolbar-dom-utils.ts
@@ -11827,22 +11876,22 @@ var useKeyboardNavigation3 = ({
   onNavigateOutOfBounds,
   orientation
 }) => {
-  const mouseClickPending = (0, import_react78.useRef)(false);
-  const focusedRef = (0, import_react78.useRef)(-1);
-  const [hasFocus, setHasFocus] = (0, import_react78.useState)(false);
+  const mouseClickPending = (0, import_react79.useRef)(false);
+  const focusedRef = (0, import_react79.useRef)(-1);
+  const [hasFocus, setHasFocus] = (0, import_react79.useState)(false);
   const [highlightedIdx, _setHighlightedIdx] = (0, import_core34.useControlled)({
     controlled: highlightedIdxProp,
     default: defaultHighlightedIdx,
     name: "UseKeyboardNavigation"
   });
-  const setHighlightedIdx = (0, import_react78.useCallback)(
+  const setHighlightedIdx = (0, import_react79.useCallback)(
     (value) => {
       _setHighlightedIdx(focusedRef.current = value);
     },
     [_setHighlightedIdx]
   );
-  const keyboardNavigation = (0, import_react78.useRef)(false);
-  const focusItem = (0, import_react78.useCallback)(
+  const keyboardNavigation = (0, import_react79.useRef)(false);
+  const focusItem = (0, import_react79.useCallback)(
     (itemIndex, immediateFocus = false, withKeyboard, delay = 70) => {
       console.log(`focus item ${itemIndex}`);
       setHighlightedIdx(itemIndex);
@@ -11884,14 +11933,14 @@ var useKeyboardNavigation3 = ({
       }
     }
   };
-  const getIndexCount = (0, import_react78.useCallback)(
+  const getIndexCount = (0, import_react79.useCallback)(
     () => {
       var _a2, _b;
       return (_b = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelectorAll(`[data-index]`).length) != null ? _b : 0;
     },
     [containerRef]
   );
-  const nextFocusableItemIdx = (0, import_react78.useCallback)(
+  const nextFocusableItemIdx = (0, import_react79.useCallback)(
     (direction = "fwd", idx) => {
       var _a2;
       const indexCount = getIndexCount();
@@ -11919,7 +11968,7 @@ var useKeyboardNavigation3 = ({
     },
     [containerRef, getIndexCount]
   );
-  const navigateChildItems = (0, import_react78.useCallback)(
+  const navigateChildItems = (0, import_react79.useCallback)(
     (e) => {
       const direction = navigation2[orientation][e.key];
       const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
@@ -11939,21 +11988,21 @@ var useKeyboardNavigation3 = ({
       onNavigateOutOfBounds
     ]
   );
-  const highlightedItemHasMenu = (0, import_react78.useCallback)(() => {
+  const highlightedItemHasMenu = (0, import_react79.useCallback)(() => {
     const el = getElementByPosition2(containerRef.current, highlightedIdx);
     if (el) {
       return el.querySelector(".vuuPopupMenu") != null;
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const highlightedItemInEditState = (0, import_react78.useCallback)(() => {
+  const highlightedItemInEditState = (0, import_react79.useCallback)(() => {
     const el = getElementByPosition2(containerRef.current, highlightedIdx);
     if (el) {
       return el.querySelector(".vuuEditableLabel-input") != null;
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const activateItemMenu = (0, import_react78.useCallback)(() => {
+  const activateItemMenu = (0, import_react79.useCallback)(() => {
     const el = getElementByPosition2(containerRef.current, highlightedIdx);
     const menuEl = el == null ? void 0 : el.querySelector(".vuuPopupMenu");
     if (menuEl) {
@@ -11961,7 +12010,7 @@ var useKeyboardNavigation3 = ({
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const handleKeyDown = (0, import_react78.useCallback)(
+  const handleKeyDown = (0, import_react79.useCallback)(
     (e) => {
       if (getIndexCount() > 0 && isNavigationKey3(e.key, orientation)) {
         e.preventDefault();
@@ -11987,7 +12036,7 @@ var useKeyboardNavigation3 = ({
   const handleItemClick = (_, itemIndex) => {
     setHighlightedIdx(itemIndex);
   };
-  const handleFocus = (0, import_react78.useCallback)(() => {
+  const handleFocus = (0, import_react79.useCallback)(() => {
     if (!hasFocus) {
       setHasFocus(true);
       if (!mouseClickPending.current) {
@@ -11997,13 +12046,13 @@ var useKeyboardNavigation3 = ({
       }
     }
   }, [hasFocus]);
-  const handleContainerMouseDown = (0, import_react78.useCallback)(() => {
+  const handleContainerMouseDown = (0, import_react79.useCallback)(() => {
     if (!hasFocus) {
       mouseClickPending.current = true;
     }
     keyboardNavigation.current = false;
   }, [hasFocus]);
-  const handleOverflowMenuClose = (0, import_react78.useCallback)(
+  const handleOverflowMenuClose = (0, import_react79.useCallback)(
     (closeReason) => {
       if ((closeReason == null ? void 0 : closeReason.type) === "escape") {
         const index = getIndexOfOverflowItem(containerRef.current);
@@ -12048,7 +12097,7 @@ var useKeyboardNavigation3 = ({
 
 // src/toolbar/useSelection.ts
 var import_vuu_utils36 = require("@vuu-ui/vuu-utils");
-var import_react79 = require("react");
+var import_react80 = require("react");
 var defaultSelectionKeys3 = ["Enter", " "];
 var NO_SELECTION_HANDLERS = {};
 var useSelection3 = ({
@@ -12064,11 +12113,11 @@ var useSelection3 = ({
     name: "useSelection",
     state: "selected"
   });
-  const isSelectionEvent = (0, import_react79.useCallback)(
+  const isSelectionEvent = (0, import_react80.useCallback)(
     (evt) => defaultSelectionKeys3.includes(evt.key),
     []
   );
-  const selectItem = (0, import_react79.useCallback)(
+  const selectItem = (0, import_react80.useCallback)(
     (itemIndex, specialKey = false) => {
       const newSelected = allowMultipleSelection(selectionStrategy, specialKey) ? selected.concat(itemIndex) : [itemIndex];
       setSelected(newSelected);
@@ -12076,7 +12125,7 @@ var useSelection3 = ({
     },
     [onSelectionChange, selected, selectionStrategy, setSelected]
   );
-  const deselectItem = (0, import_react79.useCallback)(
+  const deselectItem = (0, import_react80.useCallback)(
     (itemIndex, specialKey = false) => {
       const newSelected = selectionStrategy === "deselectable" || selectionStrategy === "multiple-special-key" && !specialKey ? [] : selected.filter((index) => index !== itemIndex);
       setSelected(newSelected);
@@ -12084,7 +12133,7 @@ var useSelection3 = ({
     },
     [onSelectionChange, selected, selectionStrategy, setSelected]
   );
-  const handleKeyDown = (0, import_react79.useCallback)(
+  const handleKeyDown = (0, import_react80.useCallback)(
     (e) => {
       if (isSelectionEvent(e) && (0, import_vuu_utils36.isSelectableElement)(e.target)) {
         if (!selected.includes(highlightedIdx)) {
@@ -12107,7 +12156,7 @@ var useSelection3 = ({
       deselectItem
     ]
   );
-  const handleClick = (0, import_react79.useCallback)(
+  const handleClick = (0, import_react80.useCallback)(
     (e, itemIndex) => {
       const element = (0, import_vuu_utils36.getClosestIndexItem)(e.target);
       if ((0, import_vuu_utils36.isSelectableElement)(element)) {
@@ -12143,7 +12192,7 @@ var useToolbar = ({
   orientation,
   selectionStrategy
 }) => {
-  const lastSelection = (0, import_react80.useRef)(activeItemIndexProp);
+  const lastSelection = (0, import_react81.useRef)(activeItemIndexProp);
   const {
     focusItem: keyboardHookFocusItem,
     highlightedIdx,
@@ -12170,7 +12219,7 @@ var useToolbar = ({
     selectionStrategy
   });
   lastSelection.current = selectionHookSelected;
-  const handleClick = (0, import_react80.useCallback)(
+  const handleClick = (0, import_react81.useCallback)(
     (evt) => {
       var _a2;
       const target = evt.target;
@@ -12185,7 +12234,7 @@ var useToolbar = ({
     },
     [keyboardHookHandleClick, onClick]
   );
-  const handleKeyDown = (0, import_react80.useCallback)(
+  const handleKeyDown = (0, import_react81.useCallback)(
     (evt) => {
       keyboardHookHandleKeyDown(evt);
       if (!evt.defaultPrevented) {
@@ -12194,7 +12243,7 @@ var useToolbar = ({
     },
     [keyboardHookHandleKeyDown, onKeyDown]
   );
-  const onSwitchWrappedItemIntoView = (0, import_react80.useCallback)(
+  const onSwitchWrappedItemIntoView = (0, import_react81.useCallback)(
     (item) => {
       const index = parseInt(item.index);
       if (!isNaN(index)) {
@@ -12226,8 +12275,8 @@ var useToolbar = ({
 };
 
 // src/toolbar/Toolbar.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var classBase22 = "vuuToolbar";
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var classBase24 = "vuuToolbar";
 var Toolbar = ({
   activeItemIndex: activeItemIndexProp,
   alignItems = "start",
@@ -12242,7 +12291,7 @@ var Toolbar = ({
   showSeparators = false,
   ...props
 }) => {
-  const rootRef = (0, import_react81.useRef)(null);
+  const rootRef = (0, import_react82.useRef)(null);
   const {
     activeItemIndex,
     focusableIdx,
@@ -12259,7 +12308,7 @@ var Toolbar = ({
     selectionStrategy
   });
   const id = (0, import_vuu_utils38.useId)(idProp);
-  const items = (0, import_react81.useMemo)(
+  const items = (0, import_react82.useMemo)(
     () => (0, import_vuu_utils38.asReactElements)(children).map((child, index) => {
       const {
         id: itemId = `${id}-tab-${index}`,
@@ -12267,9 +12316,9 @@ var Toolbar = ({
         ...ownProps
       } = child.props;
       const selected = activeItemIndex.includes(index);
-      return import_react81.default.cloneElement(child, {
+      return import_react82.default.cloneElement(child, {
         ...forwardCallbackProps(ownProps, itemProps),
-        className: (0, import_clsx32.default)("vuuToolbarItem", itemClassName),
+        className: (0, import_clsx34.default)("vuuToolbarItem", itemClassName),
         "data-overflow-priority": selected ? "1" : void 0,
         id: itemId,
         key: index,
@@ -12279,15 +12328,15 @@ var Toolbar = ({
     }),
     [activeItemIndex, children, focusableIdx, id, itemProps]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     OverflowContainer,
     {
       ...props,
       ...toolbarHook.containerProps,
-      className: (0, import_clsx32.default)(className, classBase22, `${classBase22}-${orientation}`, {
-        [`${classBase22}-alignCenter`]: alignItems === "center",
-        [`${classBase22}-alignEnd`]: alignItems === "end",
-        [`${classBase22}-withSeparators`]: showSeparators
+      className: (0, import_clsx34.default)(className, classBase24, `${classBase24}-${orientation}`, {
+        [`${classBase24}-alignCenter`]: alignItems === "center",
+        [`${classBase24}-alignEnd`]: alignItems === "end",
+        [`${classBase24}-withSeparators`]: showSeparators
       }),
       ...props,
       ref: rootRef,
@@ -12298,8 +12347,8 @@ var Toolbar = ({
 
 // src/tree/Tree.tsx
 var import_core37 = require("@salt-ds/core");
-var import_clsx33 = __toESM(require("clsx"));
-var import_react90 = require("react");
+var import_clsx35 = __toESM(require("clsx"));
+var import_react91 = require("react");
 
 // src/tree/list-dom-utils.ts
 function listItemIndex2(listItemEl) {
@@ -12317,7 +12366,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_react82 = require("react");
+var import_react83 = require("react");
 var PathSeparators2 = /* @__PURE__ */ new Set(["/", "-", "."]);
 var isPathSeparator2 = (char) => PathSeparators2.has(char);
 var isParentPath2 = (parentPath, childPath) => childPath.startsWith(parentPath) && isPathSeparator2(childPath[parentPath.length]);
@@ -12341,7 +12390,7 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
       return 0;
     }
   };
-  const isExpanded2 = (0, import_react82.useCallback)(
+  const isExpanded2 = (0, import_react83.useCallback)(
     (path) => {
       if (Array.isArray(revealSelected)) {
         return revealSelected.some((id) => isParentPath2(path, id));
@@ -12350,7 +12399,7 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
     },
     [defaultExpanded, revealSelected]
   );
-  const normalizeItems = (0, import_react82.useCallback)(
+  const normalizeItems = (0, import_react83.useCallback)(
     (items, indexer, level = 1, path = "", results = [], flattenedSource2 = []) => {
       let count2 = 0;
       items.forEach((item, i, all) => {
@@ -12394,10 +12443,10 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
     },
     [collapsibleHeaders, idRoot, isExpanded2]
   );
-  const [count, sourceWithIds, flattenedSource] = (0, import_react82.useMemo)(() => {
+  const [count, sourceWithIds, flattenedSource] = (0, import_react83.useMemo)(() => {
     return normalizeItems(sourceProp, { index: 0 });
   }, [normalizeItems, sourceProp]);
-  const sourceItemById = (0, import_react82.useCallback)(
+  const sourceItemById = (0, import_react83.useCallback)(
     (id, target = sourceWithIds) => {
       const sourceWithId = target.find(
         (i) => {
@@ -12417,7 +12466,7 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
 };
 
 // src/tree/use-selection.ts
-var import_react83 = require("react");
+var import_react84 = require("react");
 var import_core35 = require("@salt-ds/core");
 var SINGLE = "single";
 var CHECKBOX2 = "checkbox";
@@ -12439,8 +12488,8 @@ var useSelection4 = ({
   const singleSelect = selection === SINGLE;
   const multiSelect = selection === MULTI || selection.startsWith(CHECKBOX2);
   const extendedSelect = selection === EXTENDED;
-  const lastActive = (0, import_react83.useRef)(-1);
-  const isSelectionEvent = (0, import_react83.useCallback)(
+  const lastActive = (0, import_react84.useRef)(-1);
+  const isSelectionEvent = (0, import_react84.useCallback)(
     (evt) => selectionKeys.includes(evt.key),
     [selectionKeys]
   );
@@ -12449,7 +12498,7 @@ var useSelection4 = ({
     default: defaultSelected != null ? defaultSelected : [],
     name: "selected"
   });
-  const selectItemAtIndex = (0, import_react83.useCallback)(
+  const selectItemAtIndex = (0, import_react84.useCallback)(
     (evt, idx, id, rangeSelect, preserveExistingSelection = false) => {
       const { current: active } = lastActive;
       const isSelected2 = selected == null ? void 0 : selected.includes(id);
@@ -12490,7 +12539,7 @@ var useSelection4 = ({
       singleSelect
     ]
   );
-  const handleKeyDown = (0, import_react83.useCallback)(
+  const handleKeyDown = (0, import_react84.useCallback)(
     (evt) => {
       if (~highlightedIdx && isSelectionEvent(evt)) {
         evt.preventDefault();
@@ -12515,7 +12564,7 @@ var useSelection4 = ({
       selectItemAtIndex
     ]
   );
-  const handleKeyboardNavigation = (0, import_react83.useCallback)(
+  const handleKeyboardNavigation = (0, import_react84.useCallback)(
     (evt, currentIndex) => {
       if (extendedSelect && evt.shiftKey) {
         const item = treeNodes[currentIndex];
@@ -12528,7 +12577,7 @@ var useSelection4 = ({
     onKeyDown: handleKeyDown,
     onKeyboardNavigation: handleKeyboardNavigation
   };
-  const handleClick = (0, import_react83.useCallback)(
+  const handleClick = (0, import_react84.useCallback)(
     (evt) => {
       if (highlightedIdx !== -1) {
         const item = treeNodes[highlightedIdx];
@@ -12562,14 +12611,14 @@ var useSelection4 = ({
 };
 
 // src/tree/use-viewport-tracking.ts
-var import_react84 = require("react");
+var import_react85 = require("react");
 var HeightOnly4 = ["height", "scrollHeight"];
 var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
-  const scrollTop = (0, import_react84.useRef)(0);
-  const scrolling = (0, import_react84.useRef)(false);
-  const rootHeight = (0, import_react84.useRef)(0);
-  const rootScrollHeight = (0, import_react84.useRef)(0);
-  const scrollIntoView = (0, import_react84.useCallback)(
+  const scrollTop = (0, import_react85.useRef)(0);
+  const scrolling = (0, import_react85.useRef)(false);
+  const rootHeight = (0, import_react85.useRef)(0);
+  const rootScrollHeight = (0, import_react85.useRef)(0);
+  const scrollIntoView = (0, import_react85.useCallback)(
     (el) => {
       const targetEl = el.ariaExpanded ? el.firstChild : el;
       const headerHeight = stickyHeaders ? 30 : 0;
@@ -12590,10 +12639,10 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
     },
     [root, stickyHeaders]
   );
-  const scrollHandler = (0, import_react84.useCallback)((e) => {
+  const scrollHandler = (0, import_react85.useCallback)((e) => {
     scrollTop.current = e.target.scrollTop;
   }, []);
-  (0, import_react84.useEffect)(() => {
+  (0, import_react85.useEffect)(() => {
     const { current: rootEl } = root;
     if (rootEl) {
       rootEl.addEventListener("scroll", scrollHandler);
@@ -12604,7 +12653,7 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
       }
     };
   }, [root, scrollHandler]);
-  (0, import_react84.useLayoutEffect)(() => {
+  (0, import_react85.useLayoutEffect)(() => {
     if (highlightedIdx !== -1 && rootScrollHeight.current > rootHeight.current) {
       if (root.current) {
         const item = root.current.querySelector(`
@@ -12621,9 +12670,9 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
       }
     }
   }, [highlightedIdx, root, scrollIntoView]);
-  (0, import_react84.useEffect)(() => {
+  (0, import_react85.useEffect)(() => {
   }, [stickyHeaders]);
-  const onResize = (0, import_react84.useCallback)(({ height, scrollHeight }) => {
+  const onResize = (0, import_react85.useCallback)(({ height, scrollHeight }) => {
     rootHeight.current = height;
     rootScrollHeight.current = scrollHeight;
   }, []);
@@ -12632,10 +12681,10 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
 };
 
 // src/tree/useTree.ts
-var import_react89 = require("react");
+var import_react90 = require("react");
 
 // src/tree/use-keyboard-navigation.ts
-var import_react85 = require("react");
+var import_react86 = require("react");
 
 // src/tree/hierarchical-data-utils.ts
 var getNodeParentPath = ({ id }) => {
@@ -12785,7 +12834,7 @@ var useKeyboardNavigation4 = ({
   onKeyboardNavigation,
   selected = []
 }) => {
-  const { bwd: ArrowBwd, fwd: ArrowFwd } = (0, import_react85.useMemo)(
+  const { bwd: ArrowBwd, fwd: ArrowFwd } = (0, import_react86.useMemo)(
     () => ({
       bwd: ArrowUp4,
       fwd: ArrowDown4
@@ -12797,14 +12846,14 @@ var useKeyboardNavigation4 = ({
     default: defaultHighlightedIdx,
     name: "highlightedIdx"
   });
-  const setHighlightedIndex = (0, import_react85.useCallback)(
+  const setHighlightedIndex = (0, import_react86.useCallback)(
     (idx) => {
       onHighlight == null ? void 0 : onHighlight(idx);
       setHighlightedIdx(idx);
     },
     [onHighlight, setHighlightedIdx]
   );
-  const nextFocusableItemIdx = (0, import_react85.useCallback)(
+  const nextFocusableItemIdx = (0, import_react86.useCallback)(
     (key = ArrowFwd, idx = key === ArrowFwd ? -1 : treeNodes.length) => {
       let nextIdx = nextItemIdx4(treeNodes.length, key, idx);
       while (nextIdx !== -1 && (key === ArrowFwd && nextIdx < treeNodes.length || key === ArrowBwd && nextIdx > 0) && !isFocusable3(treeNodes[nextIdx])) {
@@ -12814,10 +12863,10 @@ var useKeyboardNavigation4 = ({
     },
     [ArrowBwd, ArrowFwd, treeNodes]
   );
-  const keyBoardNavigation = (0, import_react85.useRef)(true);
-  const ignoreFocus = (0, import_react85.useRef)(false);
+  const keyBoardNavigation = (0, import_react86.useRef)(true);
+  const ignoreFocus = (0, import_react86.useRef)(false);
   const setIgnoreFocus = (value) => ignoreFocus.current = value;
-  const handleFocus = (0, import_react85.useCallback)(() => {
+  const handleFocus = (0, import_react86.useCallback)(() => {
     if (ignoreFocus.current) {
       ignoreFocus.current = false;
     } else if (selected.length > 0) {
@@ -12830,7 +12879,7 @@ var useKeyboardNavigation4 = ({
       setHighlightedIndex(nextFocusableItemIdx());
     }
   }, [treeNodes, nextFocusableItemIdx, selected, setHighlightedIndex]);
-  const navigateChildItems = (0, import_react85.useCallback)(
+  const navigateChildItems = (0, import_react86.useCallback)(
     (e) => {
       const nextIdx = nextFocusableItemIdx(e.key, highlightedIdx);
       if (nextIdx !== highlightedIdx) {
@@ -12845,7 +12894,7 @@ var useKeyboardNavigation4 = ({
       setHighlightedIndex
     ]
   );
-  const handleKeyDown = (0, import_react85.useCallback)(
+  const handleKeyDown = (0, import_react86.useCallback)(
     (e) => {
       if (treeNodes.length > 0 && isNavigationKey4(e, "vertical")) {
         e.preventDefault();
@@ -12856,7 +12905,7 @@ var useKeyboardNavigation4 = ({
     },
     [treeNodes, navigateChildItems]
   );
-  const listProps = (0, import_react85.useMemo)(
+  const listProps = (0, import_react86.useMemo)(
     () => ({
       onBlur: () => {
         setHighlightedIndex(-1);
@@ -12894,7 +12943,7 @@ var useKeyboardNavigation4 = ({
 };
 
 // src/tree/use-hierarchical-data.ts
-var import_react86 = require("react");
+var import_react87 = require("react");
 var populateIndices = (nodes, results = [], idx = { value: 0 }) => {
   let skipToNextHeader = false;
   for (const node of nodes) {
@@ -12916,10 +12965,10 @@ var populateIndices = (nodes, results = [], idx = { value: 0 }) => {
   return results;
 };
 var useHierarchicalData = (source) => {
-  const externalSource = (0, import_react86.useRef)(source);
-  const statefulSource = (0, import_react86.useRef)(source);
-  const indexPositions = (0, import_react86.useRef)(populateIndices(source));
-  const [, forceUpdate] = (0, import_react86.useState)({});
+  const externalSource = (0, import_react87.useRef)(source);
+  const statefulSource = (0, import_react87.useRef)(source);
+  const indexPositions = (0, import_react87.useRef)(populateIndices(source));
+  const [, forceUpdate] = (0, import_react87.useState)({});
   if (source !== externalSource.current) {
     externalSource.current = source;
     statefulSource.current = source;
@@ -12939,7 +12988,7 @@ var useHierarchicalData = (source) => {
 };
 
 // src/tree/use-collapsible-groups.ts
-var import_react87 = require("react");
+var import_react88 = require("react");
 var NO_HANDLERS4 = {};
 var isToggleElement = (element) => element && element.hasAttribute("aria-expanded");
 var useCollapsibleGroups2 = ({
@@ -12949,23 +12998,23 @@ var useCollapsibleGroups2 = ({
   setVisibleData,
   source
 }) => {
-  const fullSource = (0, import_react87.useRef)(source);
-  const stateSource = (0, import_react87.useRef)(fullSource.current);
-  const setSource = (0, import_react87.useCallback)(
+  const fullSource = (0, import_react88.useRef)(source);
+  const stateSource = (0, import_react88.useRef)(fullSource.current);
+  const setSource = (0, import_react88.useCallback)(
     (value) => {
       setVisibleData(stateSource.current = value);
     },
     [setVisibleData]
   );
-  const expandNode = (0, import_react87.useCallback)(
+  const expandNode = (0, import_react88.useCallback)(
     (nodeList, { id }) => replaceNode(nodeList, id, { expanded: true }),
     []
   );
-  const collapseNode = (0, import_react87.useCallback)(
+  const collapseNode = (0, import_react88.useCallback)(
     (nodeList, { id }) => replaceNode(nodeList, id, { expanded: false }),
     []
   );
-  const handleKeyDown = (0, import_react87.useCallback)(
+  const handleKeyDown = (0, import_react88.useCallback)(
     (e) => {
       if (e.key === ArrowRight4 || e.key === Enter2) {
         const node = treeNodes[highlightedIdx];
@@ -12991,7 +13040,7 @@ var useCollapsibleGroups2 = ({
   const listHandlers = collapsibleHeaders ? {
     onKeyDown: handleKeyDown
   } : NO_HANDLERS4;
-  const handleClick = (0, import_react87.useCallback)(
+  const handleClick = (0, import_react88.useCallback)(
     (evt) => {
       const el = closestListItem2(evt.target);
       if (isToggleElement(el)) {
@@ -13017,14 +13066,14 @@ var useCollapsibleGroups2 = ({
 };
 
 // src/tree/use-tree-keyboard-navigation.ts
-var import_react88 = require("react");
+var import_react89 = require("react");
 var useTreeKeyboardNavigation = ({
   highlightedIdx,
   hiliteItemAtIndex,
   indexPositions,
   source
 }) => {
-  const handleKeyDown = (0, import_react88.useCallback)(
+  const handleKeyDown = (0, import_react89.useCallback)(
     (e) => {
       if (e.key === ArrowLeft4) {
         const node = indexPositions[highlightedIdx];
@@ -13061,7 +13110,7 @@ var useTree = ({
   selected: selectedProp,
   selection
 }) => {
-  const lastSelection = (0, import_react89.useRef)(EMPTY_ARRAY2);
+  const lastSelection = (0, import_react90.useRef)(EMPTY_ARRAY2);
   const dataHook = useHierarchicalData(sourceWithIds);
   const handleKeyboardNavigation = (evt, nextIdx) => {
     var _a2, _b;
@@ -13094,7 +13143,7 @@ var useTree = ({
     hiliteItemAtIndex: keyboardHook.hiliteItemAtIndex,
     indexPositions: dataHook.indexPositions
   });
-  const handleClick = (0, import_react89.useCallback)(
+  const handleClick = (0, import_react90.useCallback)(
     (evt) => {
       var _a2, _b, _c;
       (_a2 = collapsibleHook.listItemHandlers) == null ? void 0 : _a2.onClick(evt);
@@ -13104,7 +13153,7 @@ var useTree = ({
     },
     [collapsibleHook, selectionHook]
   );
-  const handleKeyDown = (0, import_react89.useCallback)(
+  const handleKeyDown = (0, import_react90.useCallback)(
     (evt) => {
       var _a2, _b, _c, _d, _e, _f, _g, _h;
       (_b = (_a2 = keyboardHook.listProps).onKeyDown) == null ? void 0 : _b.call(_a2, evt);
@@ -13154,14 +13203,14 @@ var useTree = ({
 };
 
 // src/tree/Tree.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var import_react91 = require("react");
-var classBase23 = "vuuTree";
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_react92 = require("react");
+var classBase25 = "vuuTree";
 var isExpanded = (node) => node.expanded === true;
 var TreeNode = ({ children, idx, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("li", { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("li", { ...props, children });
 };
-var Tree = (0, import_react90.forwardRef)(function Tree2({
+var Tree = (0, import_react91.forwardRef)(function Tree2({
   allowDragDrop,
   className,
   defaultSelected,
@@ -13177,7 +13226,7 @@ var Tree = (0, import_react90.forwardRef)(function Tree2({
 }, forwardedRef) {
   var _a2;
   const id = (0, import_core37.useIdMemo)(idProp);
-  const rootRef = (0, import_react90.useRef)(null);
+  const rootRef = (0, import_react91.useRef)(null);
   const [, sourceWithIds, sourceItemById] = useItemsWithIds(source, id, {
     revealSelected: revealSelected ? (_a2 = selectedProp != null ? selectedProp : defaultSelected) != null ? _a2 : false : void 0
   });
@@ -13220,14 +13269,14 @@ var Tree = (0, import_react90.forwardRef)(function Tree2({
   const allowGroupSelect = groupSelectionEnabled2(groupSelection);
   function addLeafNode(list, item, idx) {
     list.push(
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
         TreeNode,
         {
           ...propsCommonToAllListItems,
           ...getListItemProps(item, idx, highlightedIdx, selected, focusVisible),
           children: [
-            item.icon ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: `${classBase23}Node-icon`, "data-icon": item.icon }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: item.label })
+            item.icon ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: `${classBase25}Node-icon`, "data-icon": item.icon }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: item.label })
           ]
         }
       )
@@ -13238,16 +13287,16 @@ var Tree = (0, import_react90.forwardRef)(function Tree2({
     const { value: i } = idx;
     idx.value += 1;
     list.push(
-      /* @__PURE__ */ (0, import_react91.createElement)(
+      /* @__PURE__ */ (0, import_react92.createElement)(
         TreeNode,
         {
           ...listItemHandlers,
           "aria-expanded": child.expanded,
           "aria-level": child.level,
           "aria-selected": selected.includes(id2) || void 0,
-          className: (0, import_clsx33.default)(`${classBase23}Node`, {
+          className: (0, import_clsx35.default)(`${classBase25}Node`, {
             focusVisible: focusVisible === i,
-            [`${classBase23}Node-toggle`]: !allowGroupSelect
+            [`${classBase25}Node-toggle`]: !allowGroupSelect
           }),
           "data-idx": i,
           "data-highlighted": i === highlightedIdx || void 0,
@@ -13255,20 +13304,20 @@ var Tree = (0, import_react90.forwardRef)(function Tree2({
           id: id2,
           key: `header-${i}`
         },
-        allowGroupSelect ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: `${classBase23}Node-label`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: `${classBase23}Node-toggle` }),
+        allowGroupSelect ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: `${classBase25}Node-label`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: `${classBase25}Node-toggle` }),
           title
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: `${classBase23}Node-label`, children: [
-          child.icon ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: `${classBase25}Node-label`, children: [
+          child.icon ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             "span",
             {
-              className: `${classBase23}Node-icon`,
+              className: `${classBase25}Node-icon`,
               "data-icon": child.icon
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: title })
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: title })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("ul", { role: "group", children: isExpanded(child) ? renderSourceContent(child.childNodes, idx) : "" })
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("ul", { role: "group", children: isExpanded(child) ? renderSourceContent(child.childNodes, idx) : "" })
       )
     );
   }
@@ -13285,12 +13334,12 @@ var Tree = (0, import_react90.forwardRef)(function Tree2({
       return listItems;
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     "ul",
     {
       ...htmlAttributes,
       ...listProps,
-      className: (0, import_clsx33.default)(classBase23, className),
+      className: (0, import_clsx35.default)(classBase25, className),
       id: `Tree-${id}`,
       ref: (0, import_core37.useForkRef)(rootRef, forwardedRef),
       role: "tree",
@@ -13306,7 +13355,7 @@ var getListItemProps = (item, idx, highlightedIdx, selected, focusVisible, class
   "aria-selected": selected.includes(item.id) || void 0,
   "data-idx": idx.value,
   "data-highlighted": idx.value === highlightedIdx || void 0,
-  className: (0, import_clsx33.default)("vuuTreeNode", className, {
+  className: (0, import_clsx35.default)("vuuTreeNode", className, {
     focusVisible: focusVisible === idx.value
   })
 });