@vuu-ui/vuu-ui-controls 0.8.27-debug → 0.8.28-debug

package/cjs/index.js

@@ -44,10 +44,8 @@ __export(src_exports, {
   ComboBox: () => ComboBox,
   CycleStateButton: () => CycleStateButton,
   DateInput: () => DateInput,
-  DatePicker: () => DatePicker,
   DatePopup: () => DatePopup,
   DateRangeInput: () => DateRangeInput,
-  DateRangePicker: () => DateRangePicker,
   DragDropProvider: () => DragDropProvider,
   DragDropState: () => DragDropState,
   Dropdown: () => Dropdown2,
@@ -79,6 +77,7 @@ __export(src_exports, {
   NOT_HIDDEN: () => NOT_HIDDEN,
   NOT_OVERFLOWED: () => NOT_OVERFLOWED,
   NO_WRAPPED_ITEMS: () => NO_WRAPPED_ITEMS,
+  NullEditAPI: () => NullEditAPI,
   OverflowContainer: () => OverflowContainer,
   PageDown: () => PageDown,
   PageUp: () => PageUp,
@@ -916,10 +915,6 @@ function useResizeObserver(ref, dimensions2, onResize, reportInitialSize = false
     }
     if (target) {
       if (observedMap.has(target)) {
-        console.log(
-          "useResizeObserver attemping to observe same element twice",
-          { target }
-        );
       }
       registerObserver();
     }
@@ -1056,9 +1051,6 @@ var useDropdownBase = ({
   var _a2;
   const justFocused = (0, import_react8.useRef)(null);
   const popperRef = (0, import_react8.useRef)(null);
-  const popperCallbackRef = (0, import_react8.useCallback)((element) => {
-    popperRef.current = element;
-  }, []);
   const [isOpen, setIsOpen] = (0, import_core.useControlled)({
     controlled: isOpenProp,
     default: Boolean(defaultIsOpen),
@@ -1074,11 +1066,45 @@ var useDropdownBase = ({
   }, [onOpenChange, setIsOpen]);
   const hideDropdown = (0, import_react8.useCallback)(
     (reason) => {
+      console.log(`hide dropdown ${reason}`);
       setIsOpen(false);
       onOpenChange == null ? void 0 : onOpenChange(false, reason);
     },
     [onOpenChange, setIsOpen]
   );
+  const handleComponentFocusOut = (0, import_react8.useCallback)(
+    (evt) => {
+      var _a3;
+      const target = evt.relatedTarget;
+      if (target === null) {
+        requestAnimationFrame(() => {
+          var _a4;
+          if (!((_a4 = popperRef.current) == null ? void 0 : _a4.contains(document.activeElement))) {
+            hideDropdown("Tab");
+          }
+        });
+      } else if (!((_a3 = popperRef.current) == null ? void 0 : _a3.contains(target))) {
+        if (!targetWithinSubPopup(popperRef.current, target)) {
+          hideDropdown("Tab");
+        }
+      }
+    },
+    [hideDropdown]
+  );
+  const popperCallbackRef = (0, import_react8.useCallback)(
+    (element) => {
+      if (element) {
+        element.addEventListener("focusout", handleComponentFocusOut);
+      } else if (popperRef.current) {
+        popperRef.current.removeEventListener(
+          "focusout",
+          handleComponentFocusOut
+        );
+      }
+      popperRef.current = element;
+    },
+    [handleComponentFocusOut]
+  );
   useClickAway({
     popperRef,
     rootRef,
@@ -2671,9 +2697,9 @@ var getNonWrappedAndWrappedItems = (container, orientation) => {
   }
   return [nonWrappedItems, wrappedItems];
 };
-var applyOverflowClassToWrappedItems = (container, overflowedItems, classBase30) => {
+var applyOverflowClassToWrappedItems = (container, overflowedItems, classBase31) => {
   let ignoreOverflow = false;
-  const className = classBase30 ? `${classBase30}-overflowed` : "overflow";
+  const className = classBase31 ? `${classBase31}-overflowed` : "overflow";
   if (overflowedItems.find(({ index }) => index === "overflow")) {
     if (overflowedItems.length === 1) {
       ignoreOverflow = true;
@@ -9236,7 +9262,8 @@ var useCombobox = ({
   const handleInputKeyDown = (0, import_react51.useCallback)(
     (e) => {
       var _a3, _b;
-      if (e.key === "Enter" && value !== void 0 && value !== "" && allowEnterCommitsText) {
+      if (e.key === "Enter" && value !== void 0 && value !== "" && // TODO this whole allowEnterCommitsText isquestionable
+      allowEnterCommitsText) {
         setIsOpen(false);
       }
       (_b = (_a3 = InputProps4.inputProps) == null ? void 0 : _a3.onKeyDown) == null ? void 0 : _b.call(_a3, e);
@@ -9346,7 +9373,9 @@ var useCombobox = ({
 };
 
 // src/combo-box/ComboBox.tsx
+var import_clsx19 = __toESM(require("clsx"));
 var import_jsx_runtime25 = require("react/jsx-runtime");
+var classBase11 = "vuuCombobox";
 var ComboBox = (0, import_react52.forwardRef)(function Combobox({
   InputProps: InputPropsProp,
   ListProps: ListProps3,
@@ -9357,6 +9386,7 @@ var ComboBox = (0, import_react52.forwardRef)(function Combobox({
   allowEnterCommitsText,
   allowFreeText,
   children,
+  className,
   defaultIsOpen,
   defaultSelected,
   defaultValue,
@@ -9470,6 +9500,7 @@ var ComboBox = (0, import_react52.forwardRef)(function Combobox({
     {
       ...props,
       PopupProps,
+      className: (0, import_clsx19.default)(classBase11, className),
       id,
       isOpen: isOpen && collectionHook.data.length > 0,
       onOpenChange,
@@ -9510,12 +9541,12 @@ var ComboBox = (0, import_react52.forwardRef)(function Combobox({
 
 // src/cycle-state-button/CycleStateButton.tsx
 var import_core24 = require("@salt-ds/core");
-var import_clsx19 = __toESM(require("clsx"));
+var import_clsx20 = __toESM(require("clsx"));
 var import_react53 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var classBase11 = "vuuCycleStateButton";
+var classBase12 = "vuuCycleStateButton";
 var getNextValue = (value, valueList) => {
-  const index = valueList.indexOf(value.toUpperCase());
+  const index = valueList.map((v) => v.toUpperCase()).indexOf(value.toUpperCase());
   if (index === valueList.length - 1) {
     return valueList[0];
   } else {
@@ -9524,6 +9555,7 @@ var getNextValue = (value, valueList) => {
 };
 var CycleStateButton = (0, import_react53.forwardRef)(function CycleStateButton2({
   className,
+  onChange,
   onCommit,
   value = "",
   values,
@@ -9532,22 +9564,23 @@ var CycleStateButton = (0, import_react53.forwardRef)(function CycleStateButton2
   const handleClick = (0, import_react53.useCallback)(
     (evt) => {
       const nextValue = getNextValue(value, values);
-      onCommit(evt, nextValue).then((response) => {
+      onChange == null ? void 0 : onChange(nextValue);
+      onCommit == null ? void 0 : onCommit(evt, nextValue).then((response) => {
         if (response !== true) {
           console.error(response);
         }
       });
     },
-    [onCommit, value, values]
+    [onChange, onCommit, value, values]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_core24.Button,
     {
       ...buttonProps,
-      className: (0, import_clsx19.default)(
-        classBase11,
+      className: (0, import_clsx20.default)(
+        classBase12,
         className,
-        `${classBase11}-${value.toLowerCase()}`
+        `${classBase12}-${value.toLowerCase()}`
       ),
       onClick: handleClick,
       ref: forwardedRef,
@@ -9558,12 +9591,12 @@ var CycleStateButton = (0, import_react53.forwardRef)(function CycleStateButton2
 
 // src/date-input/DateInput.tsx
 var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
-var import_clsx21 = require("clsx");
+var import_clsx22 = require("clsx");
 var import_react57 = require("react");
 
 // src/date-popup/DatePopup.tsx
 var import_core25 = require("@salt-ds/core");
-var import_clsx20 = __toESM(require("clsx"));
+var import_clsx21 = __toESM(require("clsx"));
 var import_react55 = require("react");
 
 // src/date-popup/useDatePopup.ts
@@ -9643,7 +9676,7 @@ var useDatePopup = ({
 
 // src/date-popup/DatePopup.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var classBase12 = "vuuDatePopup";
+var classBase13 = "vuuDatePopup";
 var tz = $14e0f24ef4ac5c92$export$aa8b41735afcabd2();
 var today = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3(tz);
 var DatePopup = (0, import_react55.forwardRef)(
@@ -9676,7 +9709,7 @@ var DatePopup = (0, import_react55.forwardRef)(
       DropdownBase,
       {
         ...htmlAttributes,
-        className: classBase12,
+        className: classBase13,
         isOpen,
         placement: "below",
         onOpenChange: handleOpenChange,
@@ -9688,7 +9721,7 @@ var DatePopup = (0, import_react55.forwardRef)(
               icon: "date",
               ref: (0, import_core25.useForkRef)(forwardedRef, triggererRef),
               variant: "secondary",
-              className: (0, import_clsx20.default)({ "saltButton-active": isOpen })
+              className: (0, import_clsx21.default)({ "saltButton-active": isOpen })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
@@ -9700,7 +9733,7 @@ var DatePopup = (0, import_react55.forwardRef)(
               selectionVariant: "default",
               onSelectedDateChange,
               onVisibleMonthChange,
-              className: `${classBase12}-calendar`
+              className: `${classBase13}-calendar`
             }
           )
         ]
@@ -9727,8 +9760,9 @@ function useDatePicker({ onBlur }) {
 
 // src/date-input/DateInput.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var classBase13 = "vuuDateInput";
+var classBase14 = "vuuDateInput";
 var DateInput = ({
+  inputProps,
   selectedDate,
   onChange,
   onBlur,
@@ -9744,31 +9778,37 @@ var DateInput = ({
       if (v === "")
         return;
       else
-        onChange((0, import_vuu_utils18.toCalendarDate)(new Date(v)));
+        onChange((0, import_vuu_utils18.toCalendarDate)(new Date(v)), "input");
     },
     [onChange]
   );
   const onKeyDown = (0, import_react57.useCallback)((e) => {
     if (e.key === "Tab" && !e.shiftKey) {
-      console.log({ button: popupRef.current });
       requestAnimationFrame(() => {
         var _a3;
         (_a3 = popupRef.current) == null ? void 0 : _a3.focus();
       });
     }
   }, []);
+  const onChangeCalendar = (0, import_react57.useCallback)(
+    (date) => {
+      onChange(date, "calendar");
+    },
+    [onChange]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "div",
     {
       ...htmlAttributes,
-      className: (0, import_clsx21.clsx)(classBase13, className),
+      className: (0, import_clsx22.clsx)(classBase14, className),
       onBlur: handleOnBlur,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "input",
           {
+            ...inputProps,
             "aria-label": "date-input",
-            className: (0, import_clsx21.clsx)("saltInput-input", classBase13, className),
+            className: (0, import_clsx22.clsx)("saltInput-input", classBase14),
             type: "date",
             value: (_a2 = selectedDate == null ? void 0 : selectedDate.toString()) != null ? _a2 : "",
             onChange: onInputChange,
@@ -9781,7 +9821,7 @@ var DateInput = ({
           {
             "data-embedded": true,
             onBlur,
-            onChange,
+            onChange: onChangeCalendar,
             ref: popupRef,
             selectedDate,
             selectionVariant: "default"
@@ -9794,10 +9834,10 @@ var DateInput = ({
 
 // src/date-input/DateRangeInput.tsx
 var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
-var import_clsx22 = __toESM(require("clsx"));
+var import_clsx23 = __toESM(require("clsx"));
 var import_react58 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var classBase14 = "vuuDateInput";
+var classBase15 = "vuuDateInput";
 var DateRangeInput = ({
   selectedDateRange,
   onChange,
@@ -9824,13 +9864,13 @@ var DateRangeInput = ({
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
-      className: (0, import_clsx22.default)("saltInput saltInput-primary", classBase14, className),
+      className: (0, import_clsx23.default)("saltInput saltInput-primary", classBase15, className),
       onBlur: handleOnBlur,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "input",
           {
-            className: (0, import_clsx22.default)("saltInput-input", classBase14, className),
+            className: (0, import_clsx23.default)("saltInput-input", classBase15, className),
             type: "date",
             value: (_b = (_a2 = selectedDateRange == null ? void 0 : selectedDateRange["startDate"]) == null ? void 0 : _a2.toString()) != null ? _b : "",
             onChange: getHandleInputChange("startDate"),
@@ -9842,7 +9882,7 @@ var DateRangeInput = ({
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "input",
           {
-            className: (0, import_clsx22.default)("saltInput-input", classBase14, className),
+            className: (0, import_clsx23.default)("saltInput-input", classBase15, className),
             type: "date",
             value: (_d = (_c = selectedDateRange == null ? void 0 : selectedDateRange["endDate"]) == null ? void 0 : _c.toString()) != null ? _d : "",
             onChange: getHandleInputChange("endDate"),
@@ -9864,331 +9904,13 @@ var DateRangeInput = ({
   );
 };
 
-// src/date-picker/DatePicker.tsx
-var import_react63 = require("react");
-var import_clsx25 = require("clsx");
-
-// src/date-picker/input/DatePickerInput.tsx
-var import_react59 = require("react");
-var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
-var import_clsx23 = require("clsx");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var baseClass2 = "vuuDatePickerInput";
-var DatePickerInput = (props) => {
-  var _a2;
-  const { value, onChange, className } = props;
-  const onInputChange = (0, import_react59.useCallback)(
-    (e) => {
-      const v = e.target.value;
-      if (v === "")
-        return;
-      else
-        onChange((0, import_vuu_utils20.toCalendarDate)(new Date(v)));
-    },
-    [onChange]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-    "input",
-    {
-      className: (0, import_clsx23.clsx)("saltInput-input", baseClass2, className),
-      type: "date",
-      value: (_a2 = value == null ? void 0 : value.toString()) != null ? _a2 : "",
-      onChange: onInputChange,
-      "aria-label": "date-input",
-      max: "9999-12-31"
-    }
-  );
-};
-
-// src/date-picker/internal/CalendarIconButton.tsx
-var import_core26 = require("@salt-ds/core");
-var import_icons2 = require("@salt-ds/icons");
-var import_react60 = require("react");
-var import_clsx24 = __toESM(require("clsx"));
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var baseClass3 = "vuuDatePicker-calendarIconButton";
-var CalendarIconButton = (0, import_react60.forwardRef)(function CalendarIconButton2({ className, ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    import_core26.Button,
-    {
-      className: (0, import_clsx24.default)(baseClass3, className),
-      variant: "secondary",
-      "aria-label": "calendar-icon-button",
-      ref,
-      ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons2.CalendarIcon, {})
-    }
-  );
-});
-
-// src/date-picker/useBaseDatePicker.ts
-var import_react61 = require("react");
-function useBaseDatePicker(props) {
-  var _a2;
-  const { onBlur } = props;
-  const [visibleMonth, setVisibleMonth] = (0, import_react61.useState)(
-    props.variant === "default" ? props.selectedDate : (_a2 = props.selectedDate) == null ? void 0 : _a2.startDate
-  );
-  const handleOnBlur = (0, import_react61.useCallback)(
-    (e) => {
-      if (!e.currentTarget.contains(e.relatedTarget)) {
-        onBlur == null ? void 0 : onBlur();
-      }
-    },
-    [onBlur]
-  );
-  return {
-    handleOnBlur,
-    visibleMonth,
-    handleVisibleMonthChange: setVisibleMonth
-  };
-}
-
-// src/date-picker/useBaseDatePickerDropdown.ts
-var import_react62 = require("react");
-function useBaseDatePickerDropdown({
-  onVisibleMonthChange,
-  onSelectedDateChange,
-  shouldCloseOnSelectionChange
-}) {
-  const [isOpen, setIsOpen] = (0, import_react62.useState)(false);
-  const triggererRef = (0, import_react62.useRef)(null);
-  const handleDateSelection = (0, import_react62.useCallback)(
-    (_, d) => {
-      var _a2;
-      onSelectedDateChange(d);
-      if (shouldCloseOnSelectionChange(d))
-        setIsOpen(false);
-      (_a2 = triggererRef.current) == null ? void 0 : _a2.focus();
-    },
-    [onSelectedDateChange, shouldCloseOnSelectionChange]
-  );
-  const handleVisibleMonthChange = (0, import_react62.useCallback)(
-    (_, d) => {
-      var _a2;
-      onVisibleMonthChange(d);
-      (_a2 = triggererRef.current) == null ? void 0 : _a2.focus();
-    },
-    [onVisibleMonthChange]
-  );
-  return {
-    isOpen,
-    handleOpenChange: setIsOpen,
-    triggererRef,
-    handleVisibleMonthChange,
-    handleDateSelection
-  };
-}
-
-// src/date-picker/DatePicker.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var baseClass4 = "vuuDatePicker";
-var DatePicker = (props) => {
-  const { selectedDate, onSelectedDateChange, onBlur, className } = props;
-  const { visibleMonth, handleVisibleMonthChange, handleOnBlur } = useBaseDatePicker({ variant: "default", selectedDate, onBlur });
-  const handleInputChange = (0, import_react63.useCallback)(
-    (d) => {
-      onSelectedDateChange(d);
-      handleVisibleMonthChange(d);
-    },
-    [onSelectedDateChange, handleVisibleMonthChange]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-    "div",
-    {
-      className: (0, import_clsx25.clsx)("saltInput saltInput-primary", baseClass4, className),
-      onBlur: handleOnBlur,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DatePickerInput, { value: selectedDate, onChange: handleInputChange }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-          DatePickerDropdown,
-          {
-            visibleMonth,
-            onVisibleMonthChange: handleVisibleMonthChange,
-            ...props
-          }
-        )
-      ]
-    }
-  );
-};
-var DatePickerDropdown = (props) => {
-  const {
-    closeOnSelection,
-    onSelectedDateChange,
-    onVisibleMonthChange,
-    className,
-    ...rest
-  } = props;
-  const shouldCloseOnSelectionChange = (0, import_react63.useCallback)(
-    () => !!closeOnSelection,
-    [closeOnSelection]
-  );
-  const {
-    triggererRef,
-    isOpen,
-    handleOpenChange,
-    handleVisibleMonthChange,
-    handleDateSelection
-  } = useBaseDatePickerDropdown({
-    onVisibleMonthChange,
-    onSelectedDateChange,
-    shouldCloseOnSelectionChange
-  });
-  const defaultSelectedDate = (0, import_react63.useMemo)(() => $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-    DropdownBase,
-    {
-      placement: "below",
-      isOpen,
-      onOpenChange: handleOpenChange,
-      className,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CalendarIconButton, { ref: triggererRef }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-          Calendar,
-          {
-            selectionVariant: "default",
-            onVisibleMonthChange: handleVisibleMonthChange,
-            onSelectedDateChange: handleDateSelection,
-            defaultSelectedDate,
-            className: `${baseClass4}-calendar`,
-            ...rest
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/date-picker/DateRangePicker.tsx
-var import_react65 = require("react");
-var import_clsx27 = require("clsx");
-
-// src/date-picker/input/DateRangePickerInput.tsx
-var import_react64 = require("react");
-var import_clsx26 = require("clsx");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var baseClass5 = "vuuDateRangePickerInput";
-var DateRangePickerInput = (props) => {
-  const { value, onChange, className } = props;
-  const getHandleInputChange = (0, import_react64.useCallback)(
-    (k) => (d) => {
-      onChange({ ...value, [k]: d });
-    },
-    [value, onChange]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: (0, import_clsx26.clsx)(baseClass5, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      DatePickerInput,
-      {
-        value: value == null ? void 0 : value["startDate"],
-        onChange: getHandleInputChange("startDate")
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: "\u2014" }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      DatePickerInput,
-      {
-        value: value == null ? void 0 : value["endDate"],
-        onChange: getHandleInputChange("endDate")
-      }
-    )
-  ] });
-};
-
-// src/date-picker/DateRangePicker.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var baseClass6 = "vuuDatePicker";
-var DateRangePicker = (props) => {
-  const { selectedDate, onSelectedDateChange, className, onBlur } = props;
-  const { visibleMonth, handleVisibleMonthChange, handleOnBlur } = useBaseDatePicker({ variant: "range", selectedDate, onBlur });
-  const handleInputChange = (0, import_react65.useCallback)(
-    (r) => {
-      var _a2;
-      onSelectedDateChange(r);
-      handleVisibleMonthChange((_a2 = r.endDate) != null ? _a2 : r.startDate);
-    },
-    [onSelectedDateChange, handleVisibleMonthChange]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-    "div",
-    {
-      className: (0, import_clsx27.clsx)("saltInput saltInput-primary", baseClass6, className),
-      onBlur: handleOnBlur,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DateRangePickerInput, { value: selectedDate, onChange: handleInputChange }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-          DateRangePickerDropdown,
-          {
-            ...props,
-            visibleMonth,
-            onVisibleMonthChange: handleVisibleMonthChange
-          }
-        )
-      ]
-    }
-  );
-};
-var DateRangePickerDropdown = (props) => {
-  const {
-    onVisibleMonthChange,
-    onSelectedDateChange,
-    closeOnSelection,
-    className,
-    ...rest
-  } = props;
-  const shouldCloseOnSelectionChange = (0, import_react65.useCallback)(
-    (r) => !!(closeOnSelection && r.endDate),
-    [closeOnSelection]
-  );
-  const {
-    triggererRef,
-    isOpen,
-    handleOpenChange,
-    handleVisibleMonthChange,
-    handleDateSelection
-  } = useBaseDatePickerDropdown({
-    onVisibleMonthChange,
-    onSelectedDateChange,
-    shouldCloseOnSelectionChange
-  });
-  const defaultSelectedDate = (0, import_react65.useMemo)(
-    () => ({ startDate: $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()) }),
-    []
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-    DropdownBase,
-    {
-      placement: "below",
-      isOpen,
-      className,
-      onOpenChange: handleOpenChange,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CalendarIconButton, { ref: triggererRef }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-          Calendar,
-          {
-            selectionVariant: "range",
-            onVisibleMonthChange: handleVisibleMonthChange,
-            onSelectedDateChange: handleDateSelection,
-            defaultSelectedDate,
-            className: `${baseClass6}-calendar`,
-            ...rest
-          }
-        )
-      ]
-    }
-  );
-};
-
 // src/editable/editable-utils.ts
-var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
 var buildValidationChecker = (rules) => (value) => applyRules(rules, value);
 function applyRules(rules, value) {
   let result = void 0;
   for (const rule of rules) {
-    const editRuleValidator = (0, import_vuu_utils21.getEditRuleValidator)(rule.name);
+    const editRuleValidator = (0, import_vuu_utils20.getEditRuleValidator)(rule.name);
     if (editRuleValidator) {
       const ruleResult = editRuleValidator(rule, value);
       switch (ruleResult) {
@@ -10216,9 +9938,9 @@ function applyRules(rules, value) {
 }
 
 // src/editable/useEditableText.ts
+var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
 var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
-var import_vuu_utils23 = require("@vuu-ui/vuu-utils");
-var import_react66 = require("react");
+var import_react59 = require("react");
 var WarnCommit = () => {
   console.warn(
     "onCommit handler has not been provided to InputCell cell renderer"
@@ -10231,15 +9953,15 @@ var useEditableText = ({
   onCommit,
   type
 }) => {
-  const [message, setMessage] = (0, import_react66.useState)();
-  const [value, setValue] = (0, import_react66.useState)(initialValue);
-  const initialValueRef = (0, import_react66.useRef)(initialValue);
-  const isDirtyRef = (0, import_react66.useRef)(false);
-  const hasCommittedRef = (0, import_react66.useRef)(false);
-  (0, import_vuu_utils22.useLayoutEffectSkipFirst)(() => {
+  const [message, setMessage] = (0, import_react59.useState)();
+  const [value, setValue] = (0, import_react59.useState)(initialValue);
+  const initialValueRef = (0, import_react59.useRef)(initialValue);
+  const isDirtyRef = (0, import_react59.useRef)(false);
+  const hasCommittedRef = (0, import_react59.useRef)(false);
+  (0, import_vuu_utils21.useLayoutEffectSkipFirst)(() => {
     setValue(initialValue);
   }, [initialValue]);
-  const commit = (0, import_react66.useCallback)(
+  const commit = (0, import_react59.useCallback)(
     (target) => {
       if (isDirtyRef.current) {
         hasCommittedRef.current = true;
@@ -10252,20 +9974,20 @@ var useEditableText = ({
           onCommit(value).then((response) => {
             if (response === true) {
               isDirtyRef.current = false;
-              (0, import_vuu_utils23.dispatchCustomEvent)(target, "vuu-commit");
+              (0, import_vuu_utils22.dispatchCustomEvent)(target, "vuu-commit");
             } else {
               setMessage(response);
             }
           });
         }
       } else {
-        (0, import_vuu_utils23.dispatchCustomEvent)(target, "vuu-commit");
+        (0, import_vuu_utils22.dispatchCustomEvent)(target, "vuu-commit");
         hasCommittedRef.current = false;
       }
     },
     [clientSideEditValidationCheck, onCommit, value]
   );
-  const handleKeyDown = (0, import_react66.useCallback)(
+  const handleKeyDown = (0, import_react59.useCallback)(
     (evt) => {
       if (evt.key === "Enter") {
         commit(evt.target);
@@ -10281,7 +10003,7 @@ var useEditableText = ({
     },
     [commit]
   );
-  const handleBlur = (0, import_react66.useCallback)(
+  const handleBlur = (0, import_react59.useCallback)(
     (evt) => {
       if (isDirtyRef.current) {
         commit(evt.target);
@@ -10289,7 +10011,7 @@ var useEditableText = ({
     },
     [commit]
   );
-  const handleChange = (0, import_react66.useCallback)(
+  const handleChange = (0, import_react59.useCallback)(
     (evt) => {
       let typedValue = evt.target.value;
       if (type === "number" && !isNaN(parseFloat(typedValue))) {
@@ -10318,15 +10040,19 @@ var useEditableText = ({
 };
 
 // src/editable-label/EditableLabel.tsx
-var import_clsx28 = __toESM(require("clsx"));
-var import_react67 = require("react");
-var import_core27 = require("@salt-ds/core");
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var classBase15 = "vuuEditableLabel";
-var EditableLabel = (0, import_react67.forwardRef)(function EditableLabel2({
+var import_clsx24 = __toESM(require("clsx"));
+var import_react60 = require("react");
+var import_core26 = require("@salt-ds/core");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var classBase16 = "vuuEditableLabel";
+var NullEditAPI = {
+  beginEdit: () => void 0
+};
+var EditableLabel = (0, import_react60.forwardRef)(function EditableLabel2({
   className: classNameProp,
   defaultEditing,
   defaultValue,
+  editLabelApiRef,
   editing: editingProp,
   onChange,
   onEnterEditMode,
@@ -10334,28 +10060,28 @@ var EditableLabel = (0, import_react67.forwardRef)(function EditableLabel2({
   value: valueProp,
   ...restProps
 }, forwardedRef) {
-  const inputRef = (0, import_react67.useRef)(null);
-  const editingRef = (0, import_react67.useRef)(false);
-  const [value, setValue] = (0, import_core27.useControlled)({
+  const inputRef = (0, import_react60.useRef)(null);
+  const editingRef = (0, import_react60.useRef)(false);
+  const [value, setValue] = (0, import_core26.useControlled)({
     controlled: valueProp,
     default: defaultValue != null ? defaultValue : "",
     name: "EditableLabel",
     state: "value"
   });
-  const [editing, _setEditing] = (0, import_core27.useControlled)({
+  const [editing, _setEditing] = (0, import_core26.useControlled)({
     controlled: editingProp,
     default: defaultEditing != null ? defaultEditing : false,
     name: "EditableLabel",
     state: "editing"
   });
-  const setEditing = (0, import_react67.useCallback)(
+  const setEditing = (0, import_react60.useCallback)(
     (value2) => {
       _setEditing(editingRef.current = value2);
     },
     [_setEditing]
   );
-  const initialValue = (0, import_react67.useRef)(value);
-  (0, import_react67.useLayoutEffect)(() => {
+  const initialValue = (0, import_react60.useRef)(value);
+  (0, import_react60.useLayoutEffect)(() => {
     if (editing) {
       if (inputRef.current !== null) {
         inputRef.current.select();
@@ -10363,10 +10089,17 @@ var EditableLabel = (0, import_react67.forwardRef)(function EditableLabel2({
       }
     }
   }, [editing, inputRef]);
-  const enterEditMode = (0, import_react67.useCallback)(() => {
+  const beginEdit = (0, import_react60.useCallback)(() => {
     setEditing(true);
-    onEnterEditMode && onEnterEditMode();
+    onEnterEditMode == null ? void 0 : onEnterEditMode();
   }, [onEnterEditMode, setEditing]);
+  (0, import_react60.useImperativeHandle)(
+    editLabelApiRef,
+    () => ({
+      beginEdit
+    }),
+    [beginEdit]
+  );
   const exitEditMode = ({
     cancelEdit = false,
     allowDeactivation = false
@@ -10387,9 +10120,6 @@ var EditableLabel = (0, import_react67.forwardRef)(function EditableLabel2({
     setValue(value2);
     onChange && onChange(value2);
   };
-  const handleDoubleClick = () => {
-    enterEditMode();
-  };
   const handleBlur = () => {
     if (editingRef.current) {
       exitEditMode({ allowDeactivation: true });
@@ -10405,21 +10135,20 @@ var EditableLabel = (0, import_react67.forwardRef)(function EditableLabel2({
       exitEditMode({ cancelEdit: true });
     }
   };
-  const className = (0, import_clsx28.default)(classBase15, classNameProp, {
-    [`${classBase15}-editing`]: editing
+  const className = (0, import_clsx24.default)(classBase16, classNameProp, {
+    [`${classBase16}-editing`]: editing
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       ...restProps,
       className,
-      onDoubleClick: handleDoubleClick,
       "data-text": value,
       ref: forwardedRef,
-      children: editing ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-        import_core27.Input,
+      children: editing ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        import_core26.Input,
         {
-          inputProps: { className: `${classBase15}-input`, spellCheck: false },
+          inputProps: { className: `${classBase16}-input`, spellCheck: false },
           value,
           onBlur: handleBlur,
           onChange: handleChange,
@@ -10429,27 +10158,27 @@ var EditableLabel = (0, import_react67.forwardRef)(function EditableLabel2({
           textAlign: "left",
           variant: "secondary"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: `${classBase15}-label`, children: value })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: `${classBase16}-label`, children: value })
     }
   );
 });
 
 // src/expando-input/ExpandoInput.tsx
-var import_clsx30 = __toESM(require("clsx"));
-var import_react69 = require("react");
+var import_clsx26 = __toESM(require("clsx"));
+var import_react62 = require("react");
 
 // src/vuu-input/VuuInput.tsx
 var import_vuu_popups4 = require("@vuu-ui/vuu-popups");
-var import_vuu_utils24 = require("@vuu-ui/vuu-utils");
-var import_core28 = require("@salt-ds/core");
-var import_clsx29 = __toESM(require("clsx"));
-var import_react68 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var classBase16 = "vuuInput";
+var import_vuu_utils23 = require("@vuu-ui/vuu-utils");
+var import_core27 = require("@salt-ds/core");
+var import_clsx25 = __toESM(require("clsx"));
+var import_react61 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var classBase17 = "vuuInput";
 var constantInputProps = {
   autoComplete: "off"
 };
-var VuuInput = (0, import_react68.forwardRef)(function VuuInput2({
+var VuuInput = (0, import_react61.forwardRef)(function VuuInput2({
   className,
   errorMessage,
   id: idProp,
@@ -10458,16 +10187,16 @@ var VuuInput = (0, import_react68.forwardRef)(function VuuInput2({
   type,
   ...props
 }, forwardedRef) {
-  const id = (0, import_vuu_utils24.useId)(idProp);
+  const id = (0, import_vuu_utils23.useId)(idProp);
   const { anchorProps, tooltipProps } = (0, import_vuu_popups4.useTooltip)({
     id,
     tooltipContent: errorMessage
   });
-  const commitValue = (0, import_react68.useCallback)(
+  const commitValue = (0, import_react61.useCallback)(
     (evt, value) => {
       if (type === "number") {
         const numericValue = parseFloat(value);
-        if ((0, import_vuu_utils24.isValidNumber)(numericValue)) {
+        if ((0, import_vuu_utils23.isValidNumber)(numericValue)) {
           onCommit(evt, numericValue);
         } else {
           throw Error("Invalid value");
@@ -10480,7 +10209,7 @@ var VuuInput = (0, import_react68.forwardRef)(function VuuInput2({
     },
     [onCommit, type]
   );
-  const handleKeyDown = (0, import_react68.useCallback)(
+  const handleKeyDown = (0, import_react61.useCallback)(
     (evt) => {
       if (evt.key === "Enter") {
         evt.preventDefault();
@@ -10492,24 +10221,24 @@ var VuuInput = (0, import_react68.forwardRef)(function VuuInput2({
     },
     [commitValue, onKeyDown]
   );
-  const handleBlur = (0, import_react68.useCallback)(
+  const handleBlur = (0, import_react61.useCallback)(
     (evt) => {
       const { value } = evt.target;
       commitValue(evt, value);
     },
     [commitValue]
   );
-  const endAdornment = errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  const endAdornment = errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "span",
     {
       ...anchorProps,
-      className: `${classBase16}-errorIcon`,
+      className: `${classBase17}-errorIcon`,
       "data-icon": "error"
     }
   ) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      import_core28.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      import_core27.Input,
       {
         ...props,
         endAdornment,
@@ -10518,23 +10247,23 @@ var VuuInput = (0, import_react68.forwardRef)(function VuuInput2({
           ...constantInputProps,
           ...props.inputProps
         },
-        className: (0, import_clsx29.default)(classBase16, className, {
-          [`${classBase16}-errror`]: errorMessage
+        className: (0, import_clsx25.default)(classBase17, className, {
+          [`${classBase17}-errror`]: errorMessage
         }),
         onBlur: handleBlur,
         ref: forwardedRef,
         onKeyDown: handleKeyDown
       }
     ),
-    tooltipProps ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_vuu_popups4.Tooltip, { ...tooltipProps, status: "error" }) : null
+    tooltipProps ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_vuu_popups4.Tooltip, { ...tooltipProps, status: "error" }) : null
   ] });
 });
 
 // src/expando-input/ExpandoInput.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var classBase17 = "vuuExpandoInput";
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var classBase18 = "vuuExpandoInput";
 var noop = () => void 0;
-var ExpandoInput = (0, import_react69.forwardRef)(function ExpandoInput2({
+var ExpandoInput = (0, import_react62.forwardRef)(function ExpandoInput2({
   className: classNameProp,
   errorMessage,
   value,
@@ -10542,19 +10271,19 @@ var ExpandoInput = (0, import_react69.forwardRef)(function ExpandoInput2({
   onCommit = noop,
   ...props
 }, forwardedRef) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
-      className: (0, import_clsx30.default)(classBase17, classNameProp, {
-        [`${classBase17}-error`]: errorMessage
+      className: (0, import_clsx26.default)(classBase18, classNameProp, {
+        [`${classBase18}-error`]: errorMessage
       }),
       "data-text": value,
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         VuuInput,
         {
           ...props,
           errorMessage,
-          inputProps: { ...inputProps, className: `${classBase17}-input` },
+          inputProps: { ...inputProps, className: `${classBase18}-input` },
           onCommit,
           ref: forwardedRef,
           style: { padding: 0 },
@@ -10568,17 +10297,17 @@ var ExpandoInput = (0, import_react69.forwardRef)(function ExpandoInput2({
 });
 
 // src/inputs/Checkbox.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var Checkbox = (props) => {
   const { onToggle, checked, label } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "div",
     {
       className: "vuuCheckbox",
       onClick: onToggle,
       onKeyUp: (e) => e.key === " " && onToggle(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckboxIcon, { tabIndex: 0, checked }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CheckboxIcon, { tabIndex: 0, checked }),
         label
       ]
     }
@@ -10586,13 +10315,13 @@ var Checkbox = (props) => {
 };
 
 // src/inputs/RadioButton.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var RadioButton = (props) => {
   const { onClick, checked, label, groupName } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "vuuRadioButton", onClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "radio", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "radio", name: groupName }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(RadioIcon, { checked })
+  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 })
     ] }),
     label
   ] });
@@ -10600,14 +10329,14 @@ var RadioButton = (props) => {
 
 // src/instrument-picker/InstrumentPicker.tsx
 var import_vuu_table2 = require("@vuu-ui/vuu-table");
-var import_vuu_utils26 = require("@vuu-ui/vuu-utils");
-var import_core29 = require("@salt-ds/core");
-var import_react71 = require("react");
+var import_vuu_utils25 = require("@vuu-ui/vuu-utils");
+var import_core28 = require("@salt-ds/core");
+var import_react64 = require("react");
 
 // src/instrument-picker/SearchCell.tsx
-var import_vuu_utils25 = require("@vuu-ui/vuu-utils");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var classBase18 = "vuuSearchCell";
+var import_vuu_utils24 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var classBase19 = "vuuSearchCell";
 var SearchCell = ({
   column,
   columnMap,
@@ -10615,18 +10344,18 @@ var SearchCell = ({
 }) => {
   const key = columnMap[column.name];
   const value = row[key];
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: classBase18, tabIndex: -1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "data-icon": "draggable" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: classBase19, tabIndex: -1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { "data-icon": "draggable" }),
     value
   ] });
 };
-(0, import_vuu_utils25.registerComponent)("search-cell", SearchCell, "cell-renderer", {
+(0, import_vuu_utils24.registerComponent)("search-cell", SearchCell, "cell-renderer", {
   serverDataType: "private"
 });
 
 // src/instrument-picker/useInstrumentPicker.ts
 var import_vuu_table = require("@vuu-ui/vuu-table");
-var import_react70 = require("react");
+var import_react63 = require("react");
 var defaultItemToString = (row) => Object.values(row.data).join(" ");
 var useInstrumentPicker = ({
   dataSource,
@@ -10637,26 +10366,26 @@ var useInstrumentPicker = ({
   onSelect,
   searchColumns
 }) => {
-  const [value, setValue] = (0, import_react70.useState)("");
+  const [value, setValue] = (0, import_react63.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_react70.useMemo)(
+  const baseFilterPattern = (0, import_react63.useMemo)(
     // TODO make this contains once server supports it
     () => searchColumns.map((col) => `${col} starts "__VALUE__"`).join(" or "),
     [searchColumns]
   );
-  const handleOpenChange = (0, import_react70.useCallback)(
+  const handleOpenChange = (0, import_react63.useCallback)(
     (open, closeReason) => {
       setIsOpen(open);
       onOpenChange == null ? void 0 : onOpenChange(open, closeReason);
     },
     [onOpenChange, setIsOpen]
   );
-  const handleInputChange = (0, import_react70.useCallback)(
+  const handleInputChange = (0, import_react63.useCallback)(
     (evt) => {
       const { value: value2 } = evt.target;
       setValue(value2);
@@ -10674,7 +10403,7 @@ var useInstrumentPicker = ({
     },
     [baseFilterPattern, dataSource, setIsOpen]
   );
-  const handleSelectRow = (0, import_react70.useCallback)(
+  const handleSelectRow = (0, import_react63.useCallback)(
     (row) => {
       const value2 = row === null ? "" : itemToString2(row);
       setValue(value2);
@@ -10705,12 +10434,12 @@ var useInstrumentPicker = ({
 };
 
 // src/instrument-picker/InstrumentPicker.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var classBase19 = "vuuInstrumentPicker";
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var classBase20 = "vuuInstrumentPicker";
 if (typeof SearchCell !== "function") {
   console.warn("Instrument Picker: SearchCell module not loaded ");
 }
-var InstrumentPicker = (0, import_react71.forwardRef)(function InstrumentPicker2({
+var InstrumentPicker = (0, import_react64.forwardRef)(function InstrumentPicker2({
   TableProps: { dataSource, ...TableProps3 },
   className,
   columnMap,
@@ -10724,7 +10453,7 @@ var InstrumentPicker = (0, import_react71.forwardRef)(function InstrumentPicker2
   width,
   ...htmlAttributes
 }, forwardedRef) {
-  const id = (0, import_vuu_utils26.useId)(idProp);
+  const id = (0, import_vuu_utils25.useId)(idProp);
   const {
     highlightedIndex,
     inputProps,
@@ -10742,7 +10471,7 @@ var InstrumentPicker = (0, import_react71.forwardRef)(function InstrumentPicker2
     onSelect,
     searchColumns
   });
-  const endAdornment = (0, import_react71.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { "data-icon": "chevron-down" }), []);
+  const endAdornment = (0, import_react64.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "data-icon": "chevron-down" }), []);
   const tableProps = {
     ...TableProps3,
     config: {
@@ -10750,7 +10479,7 @@ var InstrumentPicker = (0, import_react71.forwardRef)(function InstrumentPicker2
       zebraStripes: false
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     DropdownBase,
     {
       ...htmlAttributes,
@@ -10763,8 +10492,8 @@ var InstrumentPicker = (0, import_react71.forwardRef)(function InstrumentPicker2
       ref: forwardedRef,
       width,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-          import_core29.Input,
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          import_core28.Input,
           {
             ...inputProps,
             disabled,
@@ -10772,14 +10501,14 @@ var InstrumentPicker = (0, import_react71.forwardRef)(function InstrumentPicker2
             value
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           import_vuu_table2.Table,
           {
             rowHeight: 25,
             renderBufferSize: 100,
             ...tableProps,
             ...tableHandlers,
-            className: `${classBase19}-list`,
+            className: `${classBase20}-list`,
             height: 200,
             highlightedIndex,
             dataSource,
@@ -10796,14 +10525,14 @@ var InstrumentPicker = (0, import_react71.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_core30 = require("@salt-ds/core");
-var import_clsx31 = __toESM(require("clsx"));
-var import_react73 = require("react");
+var import_core29 = require("@salt-ds/core");
+var import_clsx27 = __toESM(require("clsx"));
+var import_react66 = require("react");
 
 // src/instrument-search/SearchCell.tsx
-var import_vuu_utils27 = require("@vuu-ui/vuu-utils");
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var classBase20 = "vuuSearchCell";
+var import_vuu_utils26 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var classBase21 = "vuuSearchCell";
 var SearchCell2 = ({
   column,
   columnMap,
@@ -10811,28 +10540,28 @@ var SearchCell2 = ({
 }) => {
   const key = columnMap[column.name];
   const value = row[key];
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: classBase20, tabIndex: -1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { "data-icon": "draggable" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: classBase21, tabIndex: -1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "data-icon": "draggable" }),
     value
   ] });
 };
-(0, import_vuu_utils27.registerComponent)("search-cell", SearchCell2, "cell-renderer", {
+(0, import_vuu_utils26.registerComponent)("search-cell", SearchCell2, "cell-renderer", {
   serverDataType: "private"
 });
 
 // src/instrument-search/useInstrumentSearch.ts
-var import_react72 = require("react");
+var import_react65 = require("react");
 var useInstrumentSearch = ({
   dataSource,
   searchColumns = ["description"]
 }) => {
-  const [searchState, setSearchState] = (0, import_react72.useState)({ searchText: "", filter: "" });
-  const baseFilterPattern = (0, import_react72.useMemo)(
+  const [searchState, setSearchState] = (0, import_react65.useState)({ searchText: "", filter: "" });
+  const baseFilterPattern = (0, import_react65.useMemo)(
     // TODO make this contains once server supports it
     () => searchColumns.map((col) => `${col} starts "__VALUE__"`).join(" or "),
     [searchColumns]
   );
-  const handleChange = (0, import_react72.useCallback)(
+  const handleChange = (0, import_react65.useCallback)(
     (evt) => {
       const { value } = evt.target;
       const filter = baseFilterPattern.replaceAll("__VALUE__", value);
@@ -10856,8 +10585,8 @@ var useInstrumentSearch = ({
 };
 
 // src/instrument-search/InstrumentSearch.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var classBase21 = "vuuInstrumentSearch";
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var classBase22 = "vuuInstrumentSearch";
 if (typeof SearchCell2 !== "function") {
   console.warn("Instrument Search: SearchCell module not loaded ");
 }
@@ -10877,7 +10606,7 @@ var defaultTableConfig = {
   ],
   rowSeparators: true
 };
-var searchIcon = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { "data-icon": "search" });
+var searchIcon = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "data-icon": "search" });
 var InstrumentSearch = ({
   TableProps: TableProps3,
   autoFocus = false,
@@ -10893,15 +10622,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_react73.useCallback)((el) => {
+  const searchCallbackRef = (0, import_react66.useCallback)((el) => {
     setTimeout(() => {
       var _a3;
       (_a3 = el == null ? void 0 : el.querySelector("input")) == null ? void 0 : _a3.focus();
     }, 100);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { ...htmlAttributes, className: (0, import_clsx31.default)(classBase21, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: `${classBase21}-inputField`, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      import_core30.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { ...htmlAttributes, className: (0, import_clsx27.default)(classBase22, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `${classBase22}-inputField`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      import_core29.Input,
       {
         inputProps: { onKeyDown },
         endAdornment: searchIcon,
@@ -10911,7 +10640,7 @@ var InstrumentSearch = ({
         onChange
       }
     ) }),
-    dataSource ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    dataSource ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       import_vuu_table3.Table,
       {
         disableFocus: true,
@@ -10921,7 +10650,7 @@ var InstrumentSearch = ({
         highlightedIndex: highlightedIndexRef.current,
         renderBufferSize: 100,
         ...TableProps3,
-        className: `${classBase21}-list`,
+        className: `${classBase22}-list`,
         dataSource,
         navigationStyle: "row",
         onHighlight,
@@ -10935,12 +10664,12 @@ var _a;
 (_a = import_vuu_layout.registerComponent) == null ? void 0 : _a("InstrumentSearch", InstrumentSearch, "view");
 
 // src/price-ticker/PriceTicker.tsx
-var import_vuu_utils28 = require("@vuu-ui/vuu-utils");
-var import_react74 = require("react");
-var import_clsx32 = __toESM(require("clsx"));
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var classBase22 = "vuuPriceTicker";
-var getValueFormatter = (decimals) => (0, import_vuu_utils28.numericFormatter)({
+var import_vuu_utils27 = require("@vuu-ui/vuu-utils");
+var import_react67 = require("react");
+var import_clsx28 = __toESM(require("clsx"));
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var classBase23 = "vuuPriceTicker";
+var getValueFormatter = (decimals) => (0, import_vuu_utils27.numericFormatter)({
   type: {
     name: "number",
     formatting: {
@@ -10950,7 +10679,7 @@ var getValueFormatter = (decimals) => (0, import_vuu_utils28.numericFormatter)({
   }
 });
 var INITIAL_VALUE = [void 0, void 0];
-var PriceTicker = (0, import_react74.memo)(
+var PriceTicker = (0, import_react67.memo)(
   ({
     className,
     decimals = 2,
@@ -10958,14 +10687,14 @@ var PriceTicker = (0, import_react74.memo)(
     showArrow,
     ...htmlAttributes
   }) => {
-    const ref = (0, import_react74.useRef)(INITIAL_VALUE);
+    const ref = (0, import_react67.useRef)(INITIAL_VALUE);
     const [prevValue, prevDirection] = ref.current;
-    const formatNumber = (0, import_react74.useMemo)(() => getValueFormatter(decimals), [decimals]);
-    const direction = (0, import_vuu_utils28.isValidNumber)(prevValue) ? (0, import_vuu_utils28.getMovingValueDirection)(price, prevDirection, prevValue, decimals) : "";
+    const formatNumber = (0, import_react67.useMemo)(() => getValueFormatter(decimals), [decimals]);
+    const direction = (0, import_vuu_utils27.isValidNumber)(prevValue) ? (0, import_vuu_utils27.getMovingValueDirection)(price, prevDirection, prevValue, decimals) : "";
     ref.current = [price, direction];
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { ...htmlAttributes, className: (0, import_clsx32.default)(classBase22, className, direction), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ...htmlAttributes, className: (0, import_clsx28.default)(classBase23, className, direction), children: [
       formatNumber(price),
-      showArrow ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { "data-icon": "price-arrow" }) : null
+      showArrow ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "data-icon": "price-arrow" }) : null
     ] });
   }
 );
@@ -10973,12 +10702,12 @@ PriceTicker.displayName = "PriceTicker";
 
 // src/split-button/SplitButton.tsx
 var import_vuu_popups5 = require("@vuu-ui/vuu-popups");
-var import_core31 = require("@salt-ds/core");
-var import_react76 = require("react");
+var import_core30 = require("@salt-ds/core");
+var import_react69 = require("react");
 
 // src/split-button/useSplitButton.ts
-var import_vuu_utils29 = require("@vuu-ui/vuu-utils");
-var import_react75 = require("react");
+var import_vuu_utils28 = require("@vuu-ui/vuu-utils");
+var import_react68 = require("react");
 var focusTargetIsEditableLabel = (target) => {
   if (target.tagName === "INPUT") {
     return true;
@@ -10988,12 +10717,12 @@ var focusTargetIsEditableLabel = (target) => {
 var useSplitButton = ({
   ButtonProps: ButtonPropsProp,
   PopupMenuProps: PopupMenuProps3,
-  classBase: classBase30,
+  classBase: classBase31,
   onClick
 }) => {
-  const buttonRef = (0, import_react75.useRef)(null);
-  const rootRef = (0, import_react75.useRef)(null);
-  const onMenuClose = (0, import_react75.useCallback)((reason) => {
+  const buttonRef = (0, import_react68.useRef)(null);
+  const rootRef = (0, import_react68.useRef)(null);
+  const onMenuClose = (0, import_react68.useCallback)((reason) => {
     var _a2;
     if ((reason == null ? void 0 : reason.type) !== "tab-away") {
       const buttonMain = (_a2 = rootRef.current) == null ? void 0 : _a2.querySelector(
@@ -11005,11 +10734,11 @@ var useSplitButton = ({
   const menuProps = {
     ...PopupMenuProps3,
     anchorElement: rootRef,
-    menuClassName: `${classBase30}-menu`,
+    menuClassName: `${classBase31}-menu`,
     onMenuClose,
     popupPlacement: "below-full-width"
   };
-  const handleRootFocus = (0, import_react75.useCallback)((evt) => {
+  const handleRootFocus = (0, import_react68.useCallback)((evt) => {
     const { current: splitButton } = rootRef;
     if (!(splitButton == null ? void 0 : splitButton.classList.contains("vuuFocusVisible"))) {
       splitButton == null ? void 0 : splitButton.classList.add("vuuFocusVisible");
@@ -11021,7 +10750,7 @@ var useSplitButton = ({
       }
     }
   }, []);
-  const handleRootBlur = (0, import_react75.useCallback)((evt) => {
+  const handleRootBlur = (0, import_react68.useCallback)((evt) => {
     const { current: splitButton } = rootRef;
     const target = evt.relatedTarget;
     if (!(splitButton == null ? void 0 : splitButton.contains(target))) {
@@ -11030,19 +10759,19 @@ var useSplitButton = ({
       }
     }
   }, []);
-  const handleButtonKeyDown = (0, import_react75.useCallback)(
+  const handleButtonKeyDown = (0, import_react68.useCallback)(
     (evt) => {
       var _a2;
       if (evt.key === "ArrowDown") {
         const popupTrigger = (_a2 = rootRef.current) == null ? void 0 : _a2.querySelector(
-          `.${classBase30}-trigger`
+          `.${classBase31}-trigger`
         );
         if (popupTrigger) {
-          (0, import_vuu_utils29.dispatchMouseEvent)(popupTrigger, "click");
+          (0, import_vuu_utils28.dispatchMouseEvent)(popupTrigger, "click");
         }
       }
     },
-    [classBase30]
+    [classBase31]
   );
   const ButtonProps6 = {
     ...ButtonPropsProp,
@@ -11060,10 +10789,10 @@ var useSplitButton = ({
 };
 
 // src/split-button/SplitButton.tsx
-var import_clsx33 = __toESM(require("clsx"));
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var classBase23 = "vuuSplitButton";
-var SplitButton = (0, import_react76.forwardRef)(
+var import_clsx29 = __toESM(require("clsx"));
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var classBase24 = "vuuSplitButton";
+var SplitButton = (0, import_react69.forwardRef)(
   function SplitButton2({
     ButtonProps: ButtonPropsProp,
     PopupMenuProps: PopupMenuPropsProp,
@@ -11079,39 +10808,39 @@ var SplitButton = (0, import_react76.forwardRef)(
     const { ButtonProps: ButtonProps6, buttonRef, rootRef, PopupMenuProps: PopupMenuProps3, ...rootProps } = useSplitButton({
       ButtonProps: ButtonPropsProp,
       PopupMenuProps: PopupMenuPropsProp,
-      classBase: classBase23,
+      classBase: classBase24,
       onClick,
       segmented
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "div",
       {
         ...htmlAttributes,
         ...rootProps,
-        className: (0, import_clsx33.default)(classBase23, `${classBase23}-${variant}`, className, {
-          [`${classBase23}-disabled`]: disabled,
-          [`${classBase23}-segmented`]: segmented
+        className: (0, import_clsx29.default)(classBase24, `${classBase24}-${variant}`, className, {
+          [`${classBase24}-disabled`]: disabled,
+          [`${classBase24}-segmented`]: segmented
         }),
-        ref: (0, import_core31.useForkRef)(forwardedRef, rootRef),
+        ref: (0, import_core30.useForkRef)(forwardedRef, rootRef),
         "data-showcase-center": true,
         tabIndex: -1,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            import_core31.Button,
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            import_core30.Button,
             {
               ...ButtonProps6,
-              className: `${classBase23}-main`,
+              className: `${classBase24}-main`,
               disabled,
               ref: buttonRef,
               variant,
               children
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             import_vuu_popups5.PopupMenu,
             {
               ...PopupMenuProps3,
-              className: `${classBase23}-trigger`,
+              className: `${classBase24}-trigger`,
               disabled,
               icon: (_a2 = PopupMenuProps3 == null ? void 0 : PopupMenuProps3.icon) != null ? _a2 : "chevron-down",
               tabIndex: segmented ? 0 : -1,
@@ -11125,30 +10854,30 @@ var SplitButton = (0, import_react76.forwardRef)(
 );
 
 // src/split-button/SplitStateButton.tsx
-var import_clsx34 = __toESM(require("clsx"));
-var import_react77 = require("react");
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var classBase24 = "vuuSplitStateButton";
-var SplitStateButton = (0, import_react77.forwardRef)(function SplitStateButton2({ className, selected, ...splitButtonProps }, forwardedRef) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+var import_clsx30 = __toESM(require("clsx"));
+var import_react70 = require("react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var classBase25 = "vuuSplitStateButton";
+var SplitStateButton = (0, import_react70.forwardRef)(function SplitStateButton2({ className, selected, ...splitButtonProps }, forwardedRef) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     SplitButton,
     {
       ...splitButtonProps,
       "aria-checked": selected,
-      className: (0, import_clsx34.default)(classBase24, className),
+      className: (0, import_clsx30.default)(classBase25, className),
       ref: forwardedRef
     }
   );
 });
 
 // src/tabstrip/Tabstrip.tsx
-var import_vuu_utils35 = require("@vuu-ui/vuu-utils");
-var import_clsx35 = __toESM(require("clsx"));
-var import_react82 = __toESM(require("react"));
+var import_vuu_utils34 = require("@vuu-ui/vuu-utils");
+var import_clsx31 = __toESM(require("clsx"));
+var import_react75 = __toESM(require("react"));
 
 // src/tabstrip/useTabstrip.ts
-var import_vuu_utils34 = require("@vuu-ui/vuu-utils");
-var import_react81 = require("react");
+var import_vuu_utils33 = require("@vuu-ui/vuu-utils");
+var import_react74 = require("react");
 
 // src/tabstrip/TabMenuOptions.ts
 var isTabMenuOptions = (options) => typeof options === "object" && options !== null && "tabIndex" in options && typeof options.tabIndex === "number";
@@ -11166,13 +10895,13 @@ var renameCommand = (options) => ({
 });
 
 // src/tabstrip/tabstrip-dom-utils.ts
-var import_vuu_utils30 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils29 = require("@vuu-ui/vuu-utils");
 var getIndexOfItem = (container, query) => {
   if (container) {
     const targetTab = container.querySelector(
       `[data-index]:has(${query})`
     );
-    return (0, import_vuu_utils30.getElementDataIndex)(targetTab);
+    return (0, import_vuu_utils29.getElementDataIndex)(targetTab);
   }
   return -1;
 };
@@ -11180,23 +10909,23 @@ var getIndexOfSelectedTab = (container) => getIndexOfItem(container, '[aria-sele
 var getIndexOfEditedItem = (container) => getIndexOfItem(container, ".vuuEditableLabel-editing");
 
 // src/tabstrip/useAnimatedSelectionThumb.ts
-var import_vuu_utils31 = require("@vuu-ui/vuu-utils");
-var import_react78 = require("react");
+var import_vuu_utils30 = require("@vuu-ui/vuu-utils");
+var import_react71 = require("react");
 var useAnimatedSelectionThumb = (containerRef, activeTabIndex, orientation = "horizontal") => {
-  const animationSuspendedRef = (0, import_react78.useRef)(false);
-  const suspendAnimation = (0, import_react78.useCallback)(() => {
+  const animationSuspendedRef = (0, import_react71.useRef)(false);
+  const suspendAnimation = (0, import_react71.useCallback)(() => {
     animationSuspendedRef.current = true;
   }, []);
-  const resumeAnimation = (0, import_react78.useCallback)(() => {
+  const resumeAnimation = (0, import_react71.useCallback)(() => {
     animationSuspendedRef.current = false;
   }, []);
-  const onTransitionEnd = (0, import_react78.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_react78.useRef)(-1);
-  return (0, import_react78.useMemo)(() => {
+  const lastSelectedRef = (0, import_react71.useRef)(-1);
+  return (0, import_react71.useMemo)(() => {
     var _a2, _b;
     let offset = 0;
     let size = 0;
@@ -11205,11 +10934,11 @@ var useAnimatedSelectionThumb = (containerRef, activeTabIndex, orientation = "ho
       const newSelected = (_b = containerRef.current) == null ? void 0 : _b.querySelector(
         `[data-index="${activeTabIndex}"] .vuuTab`
       );
-      const { positionProp, sizeProp } = import_vuu_utils31.MEASURES[orientation];
+      const { positionProp, sizeProp } = import_vuu_utils30.MEASURES[orientation];
       if (oldSelected && newSelected && !animationSuspendedRef.current) {
         const { [positionProp]: oldPosition, [sizeProp]: oldSize } = oldSelected.getBoundingClientRect();
         const { [positionProp]: newPosition } = newSelected.getBoundingClientRect();
-        if ((0, import_vuu_utils31.isValidNumber)(oldPosition) && (0, import_vuu_utils31.isValidNumber)(newPosition) && (0, import_vuu_utils31.isValidNumber)(oldSize)) {
+        if ((0, import_vuu_utils30.isValidNumber)(oldPosition) && (0, import_vuu_utils30.isValidNumber)(newPosition) && (0, import_vuu_utils30.isValidNumber)(oldSize)) {
           offset = oldPosition - newPosition;
           size = oldSize;
           const speed = orientation === "horizontal" ? 1100 : 700;
@@ -11264,26 +10993,26 @@ var useAnimatedSelectionThumb = (containerRef, activeTabIndex, orientation = "ho
 };
 
 // src/tabstrip/useKeyboardNavigation.ts
-var import_core32 = require("@salt-ds/core");
+var import_core31 = require("@salt-ds/core");
+var import_vuu_utils31 = require("@vuu-ui/vuu-utils");
+var import_react72 = require("react");
 var import_vuu_utils32 = require("@vuu-ui/vuu-utils");
-var import_react79 = require("react");
-var import_vuu_utils33 = require("@vuu-ui/vuu-utils");
 var navigation = {
   horizontal: {
-    [import_vuu_utils33.Home]: "start",
-    [import_vuu_utils33.End]: "end",
-    [import_vuu_utils33.ArrowLeft]: "bwd",
-    [import_vuu_utils33.ArrowRight]: "fwd"
+    [import_vuu_utils32.Home]: "start",
+    [import_vuu_utils32.End]: "end",
+    [import_vuu_utils32.ArrowLeft]: "bwd",
+    [import_vuu_utils32.ArrowRight]: "fwd"
   },
   vertical: {
-    [import_vuu_utils33.Home]: "start",
-    [import_vuu_utils33.End]: "end",
-    [import_vuu_utils33.ArrowUp]: "bwd",
-    [import_vuu_utils33.ArrowDown]: "fwd"
+    [import_vuu_utils32.Home]: "start",
+    [import_vuu_utils32.End]: "end",
+    [import_vuu_utils32.ArrowUp]: "bwd",
+    [import_vuu_utils32.ArrowDown]: "fwd"
   }
 };
 var isNavigationKey2 = (key, orientation = "horizontal") => navigation[orientation][key] !== void 0;
-var isMenuActivationKey = (key) => key === import_vuu_utils33.ArrowDown;
+var isMenuActivationKey = (key) => key === import_vuu_utils32.ArrowDown;
 function nextItemIdx2(count, direction, idx) {
   if (direction === "start") {
     return 0;
@@ -11316,23 +11045,23 @@ var useKeyboardNavigation2 = ({
   selectedIndex: selectedTabIndex = 0
 }) => {
   const manualActivation = keyBoardActivation === "manual";
-  const mouseClickPending = (0, import_react79.useRef)(false);
-  const focusedRef = (0, import_react79.useRef)(-1);
-  const [hasFocus, setHasFocus] = (0, import_react79.useState)(false);
-  const [, forceRefresh] = (0, import_react79.useState)({});
-  const [highlightedIdx, _setHighlightedIdx] = (0, import_core32.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_react79.useCallback)(
+  const setHighlightedIdx = (0, import_react72.useCallback)(
     (value) => {
       _setHighlightedIdx(focusedRef.current = value);
     },
     [_setHighlightedIdx]
   );
-  const keyboardNavigation = (0, import_react79.useRef)(false);
-  const focusTab = (0, import_react79.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) {
@@ -11341,7 +11070,7 @@ var useKeyboardNavigation2 = ({
       const setFocus = () => {
         const element = getElementByPosition(containerRef.current, tabIndex);
         if (element) {
-          const focussableElement = (0, import_vuu_utils32.getFocusableElement)(element);
+          const focussableElement = (0, import_vuu_utils31.getFocusableElement)(element);
           focussableElement == null ? void 0 : focussableElement.focus();
         }
       };
@@ -11372,14 +11101,14 @@ var useKeyboardNavigation2 = ({
       }
     }
   };
-  const getIndexCount = (0, import_react79.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_react79.useCallback)(
+  const nextFocusableItemIdx = (0, import_react72.useCallback)(
     (direction = "fwd", idx) => {
       const indexCount = getIndexCount();
       const index = typeof idx === "number" ? idx : indexCount;
@@ -11399,7 +11128,7 @@ var useKeyboardNavigation2 = ({
     },
     [containerRef, getIndexCount]
   );
-  const navigateChildItems = (0, import_react79.useCallback)(
+  const navigateChildItems = (0, import_react72.useCallback)(
     (e, forceFocusVisible = false) => {
       const direction = navigation[orientation][e.key];
       const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
@@ -11421,22 +11150,22 @@ var useKeyboardNavigation2 = ({
       orientation
     ]
   );
-  const highlightedTabHasMenu = (0, import_react79.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_react79.useCallback)(() => {
+  const activateTabMenu = (0, import_react72.useCallback)(() => {
     const el = getElementByPosition(containerRef.current, highlightedIdx);
     const menuEl = el == null ? void 0 : el.querySelector(".vuuPopupMenu");
     if (menuEl) {
-      (0, import_vuu_utils32.dispatchMouseEvent)(menuEl, "click");
+      (0, import_vuu_utils31.dispatchMouseEvent)(menuEl, "click");
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const handleKeyDown = (0, import_react79.useCallback)(
+  const handleKeyDown = (0, import_react72.useCallback)(
     (e) => {
       if (getIndexCount() > 0 && isNavigationKey2(e.key, orientation)) {
         e.preventDefault();
@@ -11461,7 +11190,7 @@ var useKeyboardNavigation2 = ({
   const handleItemClick = (_, tabIndex) => {
     setHighlightedIdx(tabIndex);
   };
-  const handleFocus = (0, import_react79.useCallback)(() => {
+  const handleFocus = (0, import_react72.useCallback)(() => {
     if (!hasFocus) {
       setHasFocus(true);
       if (!mouseClickPending.current) {
@@ -11471,7 +11200,7 @@ var useKeyboardNavigation2 = ({
       }
     }
   }, [hasFocus]);
-  const handleContainerMouseDown = (0, import_react79.useCallback)(() => {
+  const handleContainerMouseDown = (0, import_react72.useCallback)(() => {
     if (!hasFocus) {
       mouseClickPending.current = true;
     }
@@ -11508,8 +11237,8 @@ var useKeyboardNavigation2 = ({
 };
 
 // src/tabstrip/useSelection.ts
-var import_core33 = require("@salt-ds/core");
-var import_react80 = 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 = ({
@@ -11518,24 +11247,24 @@ var useSelection2 = ({
   onSelectionChange,
   selected: selectedProp
 }) => {
-  const [selected, setSelected, isControlled] = (0, import_core33.useControlled)({
+  const [selected, setSelected, isControlled] = (0, import_core32.useControlled)({
     controlled: selectedProp,
     default: defaultSelected != null ? defaultSelected : 0,
     name: "Tabstrip",
     state: "value"
   });
-  const isSelectionEvent = (0, import_react80.useCallback)(
+  const isSelectionEvent = (0, import_react73.useCallback)(
     (evt) => defaultSelectionKeys2.includes(evt.key),
     []
   );
-  const selectItem = (0, import_react80.useCallback)(
+  const selectItem = (0, import_react73.useCallback)(
     (tabIndex) => {
       setSelected(tabIndex);
       onSelectionChange == null ? void 0 : onSelectionChange(tabIndex);
     },
     [onSelectionChange, setSelected]
   );
-  const handleKeyDown = (0, import_react80.useCallback)(
+  const handleKeyDown = (0, import_react73.useCallback)(
     (e) => {
       const targetElement = e.target;
       if (isSelectionEvent(e) && highlightedIdx !== selected && isTabElement(targetElement)) {
@@ -11546,7 +11275,7 @@ var useSelection2 = ({
     },
     [isSelectionEvent, highlightedIdx, selected, selectItem]
   );
-  const onClick = (0, import_react80.useCallback)(
+  const onClick = (0, import_react73.useCallback)(
     (e, tabIndex) => {
       if (tabIndex !== selected) {
         selectItem(tabIndex);
@@ -11586,7 +11315,7 @@ var useTabstrip = ({
   orientation,
   keyBoardActivation
 }) => {
-  const lastSelection = (0, import_react81.useRef)(activeTabIndexProp);
+  const lastSelection = (0, import_react74.useRef)(activeTabIndexProp);
   const {
     focusTab: keyboardHookFocusTab,
     highlightedIdx,
@@ -11616,7 +11345,7 @@ var useTabstrip = ({
     animateSelectionThumb ? selectionHookSelected : -1,
     orientation
   );
-  const handleDrop = (0, import_react81.useCallback)(
+  const handleDrop = (0, import_react74.useCallback)(
     ({ fromIndex, toIndex }) => {
       const { current: selected } = lastSelection;
       console.log(
@@ -11658,7 +11387,7 @@ var useTabstrip = ({
     orientation: "horizontal",
     itemQuery: ".vuuOverflowContainer-item"
   });
-  const handleExitEditMode = (0, import_react81.useCallback)(
+  const handleExitEditMode = (0, import_react74.useCallback)(
     (originalValue, editedValue, allowDeactivation, tabIndex) => {
       console.log(
         `handleExitEditMode ${originalValue} ${editedValue} ${allowDeactivation} ${tabIndex}`
@@ -11670,7 +11399,7 @@ var useTabstrip = ({
     },
     [keyboardHookFocusTab, onExitEditMode]
   );
-  const handleClick = (0, import_react81.useCallback)(
+  const handleClick = (0, import_react74.useCallback)(
     (evt, tabIndex) => {
       keyboardHookHandleClick(evt, tabIndex);
       selectionHookHandleClick(evt, tabIndex);
@@ -11678,7 +11407,7 @@ var useTabstrip = ({
     // [dragDropHook.isDragging, keyboardHook, selectionHook]
     [keyboardHookHandleClick, selectionHookHandleClick]
   );
-  const getEditableLabel = (0, import_react81.useCallback)(
+  const getEditableLabel = (0, import_react74.useCallback)(
     (tabIndex = highlightedIdx) => {
       const targetEl = getElementWithIndex(containerRef.current, tabIndex);
       if (targetEl) {
@@ -11687,7 +11416,7 @@ var useTabstrip = ({
     },
     [containerRef, highlightedIdx]
   );
-  const tabInEditMode = (0, import_react81.useCallback)(
+  const tabInEditMode = (0, import_react74.useCallback)(
     (tabIndex = highlightedIdx) => {
       const editableLabel = getEditableLabel(tabIndex);
       if (editableLabel) {
@@ -11697,16 +11426,16 @@ var useTabstrip = ({
     },
     [getEditableLabel, highlightedIdx]
   );
-  const editTab = (0, import_react81.useCallback)(
+  const editTab = (0, import_react74.useCallback)(
     (tabIndex = highlightedIdx) => {
       const editableLabelEl = getEditableLabel(tabIndex);
       if (editableLabelEl) {
-        (0, import_vuu_utils34.dispatchMouseEvent)(editableLabelEl, "dblclick");
+        (0, import_vuu_utils33.dispatchMouseEvent)(editableLabelEl, "dblclick");
       }
     },
     [getEditableLabel, highlightedIdx]
   );
-  const handleKeyDown = (0, import_react81.useCallback)(
+  const handleKeyDown = (0, import_react74.useCallback)(
     (evt) => {
       keyboardHookHandleKeyDown(evt);
       if (!evt.defaultPrevented) {
@@ -11718,7 +11447,7 @@ var useTabstrip = ({
     },
     [editTab, keyboardHookHandleKeyDown, selectionHookHandleKeyDown]
   );
-  const handleCloseTabFromMenu = (0, import_react81.useCallback)(
+  const handleCloseTabFromMenu = (0, import_react74.useCallback)(
     (tabIndex) => {
       const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);
       const newActiveTabIndex = selectedTabIndex > tabIndex ? selectedTabIndex - 1 : selectedTabIndex === tabIndex ? 0 : selectedTabIndex;
@@ -11731,14 +11460,14 @@ var useTabstrip = ({
     },
     [containerRef, onCloseTab, resumeAnimation, suspendAnimation]
   );
-  const handleRenameTabFromMenu = (0, import_react81.useCallback)(
+  const handleRenameTabFromMenu = (0, import_react74.useCallback)(
     (tabIndex) => {
       editTab(tabIndex);
       return true;
     },
     [editTab]
   );
-  const handleTabMenuAction = (0, import_react81.useCallback)(
+  const handleTabMenuAction = (0, import_react74.useCallback)(
     (action) => {
       if (isTabMenuOptions(action.options)) {
         switch (action.menuId) {
@@ -11754,7 +11483,7 @@ var useTabstrip = ({
     },
     [handleCloseTabFromMenu, handleRenameTabFromMenu]
   );
-  const handleTabMenuClose = (0, import_react81.useCallback)(() => {
+  const handleTabMenuClose = (0, import_react74.useCallback)(() => {
     if (!tabInEditMode()) {
       keyboardHookFocusTab(highlightedIdx);
     } else {
@@ -11766,7 +11495,7 @@ var useTabstrip = ({
     keyboardHookSetHighlightedIndex,
     tabInEditMode
   ]);
-  const onSwitchWrappedItemIntoView = (0, import_react81.useCallback)(
+  const onSwitchWrappedItemIntoView = (0, import_react74.useCallback)(
     (item) => {
       const index = parseInt(item.index);
       if (!isNaN(index)) {
@@ -11779,7 +11508,7 @@ var useTabstrip = ({
     onFocus: keyboardHook.onFocus,
     onKeyDown: handleKeyDown
   };
-  const handleAddTabClick = (0, import_react81.useCallback)(() => {
+  const handleAddTabClick = (0, import_react74.useCallback)(() => {
     onAddTab == null ? void 0 : onAddTab();
     requestAnimationFrame(() => {
       const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);
@@ -11812,9 +11541,9 @@ var useTabstrip = ({
 };
 
 // src/tabstrip/Tabstrip.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var import_react83 = require("react");
-var classBase25 = "vuuTabstrip";
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_react76 = require("react");
+var classBase26 = "vuuTabstrip";
 var Tabstrip = ({
   activeTabIndex: activeTabIndexProp,
   allowAddTab,
@@ -11839,7 +11568,7 @@ var Tabstrip = ({
   variant = "secondary",
   ...htmlAttributes
 }) => {
-  const rootRef = (0, import_react82.useRef)(null);
+  const rootRef = (0, import_react75.useRef)(null);
   const {
     activeTabIndex,
     focusVisible,
@@ -11861,14 +11590,14 @@ var Tabstrip = ({
     onMoveTab,
     orientation
   });
-  const id = (0, import_vuu_utils35.useId)(idProp);
-  const className = (0, import_clsx35.default)(classBase25, classNameProp);
+  const id = (0, import_vuu_utils34.useId)(idProp);
+  const className = (0, import_clsx31.default)(classBase26, classNameProp);
   const style = styleProp || containerStyle ? {
     ...styleProp,
     ...containerStyle
   } : void 0;
-  const tabs = (0, import_react82.useMemo)(
-    () => (0, import_vuu_utils35.asReactElements)(children).map((child, index) => {
+  const tabs = (0, import_react75.useMemo)(
+    () => (0, import_vuu_utils34.asReactElements)(children).map((child, index) => {
       const {
         id: tabId = `${id}-tab-${index}`,
         className: className2,
@@ -11878,10 +11607,10 @@ var Tabstrip = ({
         showMenuButton = showTabMenuButton
       } = child.props;
       const selected = index === activeTabIndex;
-      return import_react82.default.cloneElement(child, {
+      return import_react75.default.cloneElement(child, {
         ...tabProps,
         ...tabstripHook.navigationProps,
-        className: (0, import_clsx35.default)(className2, tabClassName),
+        className: (0, import_clsx31.default)(className2, tabClassName),
         closeable,
         "data-overflow-priority": selected ? "1" : void 0,
         dragging: draggedItemIndex === index,
@@ -11890,18 +11619,18 @@ var Tabstrip = ({
         id: tabId,
         index,
         key: index,
-        location: (0, import_clsx35.default)(location, tabLocation),
+        location: (0, import_clsx31.default)(location, tabLocation),
         selected,
         showMenuButton,
         tabIndex: selected ? 0 : -1
       });
     }).concat(
-      allowAddTab ? /* @__PURE__ */ (0, import_react83.createElement)(
+      allowAddTab ? /* @__PURE__ */ (0, import_react76.createElement)(
         IconButton,
         {
           ...tabstripHook.navigationProps,
           "aria-label": "Create Tab",
-          className: `${classBase25}-addTabButton`,
+          className: `${classBase26}-addTabButton`,
           "data-embedded": true,
           icon: "add",
           "data-overflow-priority": "1",
@@ -11929,13 +11658,13 @@ var Tabstrip = ({
       location
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       OverflowContainer,
       {
         ...htmlAttributes,
         ...tabstripHook.containerProps,
-        className: (0, import_clsx35.default)(className, `${classBase25}-${variant}`),
+        className: (0, import_clsx31.default)(className, `${classBase26}-${variant}`),
         id,
         orientation,
         overflowIcon: "more-horiz",
@@ -11950,16 +11679,16 @@ var Tabstrip = ({
 };
 
 // src/tabstrip/Tab.tsx
-var import_core34 = require("@salt-ds/core");
-var import_clsx37 = __toESM(require("clsx"));
-var import_react85 = require("react");
+var import_core33 = require("@salt-ds/core");
+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_react84 = require("react");
-var import_clsx36 = __toESM(require("clsx"));
-var import_jsx_runtime48 = require("react/jsx-runtime");
-var classBase26 = "vuuTabMenu";
+var import_react77 = require("react");
+var import_clsx32 = __toESM(require("clsx"));
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var classBase27 = "vuuTabMenu";
 var TabMenu = ({
   allowClose,
   allowRename,
@@ -11970,7 +11699,7 @@ var TabMenu = ({
   onMenuClose,
   index
 }) => {
-  const [menuBuilder, menuOptions] = (0, import_react84.useMemo)(
+  const [menuBuilder, menuOptions] = (0, import_react77.useMemo)(
     () => [
       (_location, options) => {
         const menuItems = [];
@@ -11996,15 +11725,15 @@ var TabMenu = ({
       index
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     import_vuu_popups6.PopupMenu,
     {
       "aria-label": "context menu",
-      className: classBase26,
+      className: classBase27,
       "data-embedded": true,
       menuBuilder,
       menuActionHandler: onMenuAction,
-      menuLocation: (0, import_clsx36.default)("tab", location),
+      menuLocation: (0, import_clsx32.default)("tab", location),
       menuOptions,
       onMenuClose,
       tabIndex: -1
@@ -12013,10 +11742,10 @@ var TabMenu = ({
 };
 
 // src/tabstrip/Tab.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
-var classBase27 = "vuuTab";
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var classBase28 = "vuuTab";
 var noop2 = () => void 0;
-var Tab = (0, import_react85.forwardRef)(function Tab2({
+var Tab = (0, import_react78.forwardRef)(function Tab2({
   ariaControls,
   children,
   className,
@@ -12045,10 +11774,10 @@ var Tab = (0, import_react85.forwardRef)(function Tab2({
   if (showMenuButton && typeof onMenuAction !== "function") {
     throw Error("Tab onMenuAction must be provided if showMenuButton is set");
   }
-  const rootRef = (0, import_react85.useRef)(null);
-  const editableRef = (0, import_react85.useRef)(null);
-  const setForkRef = (0, import_core34.useForkRef)(ref, rootRef);
-  const handleClick = (0, import_react85.useCallback)(
+  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_react78.useCallback)(
     (e) => {
       if (!editing) {
         e.preventDefault();
@@ -12073,7 +11802,7 @@ var Tab = (0, import_react85.forwardRef)(function Tab2({
   };
   const getLabel = () => {
     if (editable) {
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         EditableLabel,
         {
           editing,
@@ -12098,18 +11827,18 @@ var Tab = (0, import_react85.forwardRef)(function Tab2({
     }
     onFocusProp == null ? void 0 : onFocusProp(evt);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "div",
     {
       ...props,
       "aria-controls": ariaControls,
       "aria-selected": selected,
-      className: (0, import_clsx37.default)(classBase27, className, {
-        [`${classBase27}-closeable`]: closeable,
+      className: (0, import_clsx33.default)(classBase28, className, {
+        [`${classBase28}-closeable`]: closeable,
         "vuuDraggable-dragAway": dragging,
-        [`${classBase27}-editing`]: editing,
-        [`${classBase27}-selected`]: selected || void 0,
-        [`${classBase27}-vertical`]: orientation === "vertical",
+        [`${classBase28}-editing`]: editing,
+        [`${classBase28}-selected`]: selected || void 0,
+        [`${classBase28}-vertical`]: orientation === "vertical",
         [`vuuFocusVisible`]: focusVisible
       }),
       onClick: handleClick,
@@ -12119,15 +11848,15 @@ var Tab = (0, import_react85.forwardRef)(function Tab2({
       role: "tab",
       tabIndex,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: `${classBase27}-main`, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `${classBase28}-main`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "span",
           {
-            className: `${classBase27}-text`,
+            className: `${classBase28}-text`,
             "data-text": editable ? void 0 : label,
             children: children != null ? children : getLabel()
           }
         ) }),
-        showMenuButton ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        showMenuButton ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           TabMenu,
           {
             allowClose: closeable,
@@ -12146,28 +11875,28 @@ var Tab = (0, import_react85.forwardRef)(function Tab2({
 });
 
 // src/toolbar/Toolbar.tsx
-var import_vuu_utils41 = require("@vuu-ui/vuu-utils");
-var import_clsx38 = __toESM(require("clsx"));
-var import_react89 = __toESM(require("react"));
+var import_vuu_utils40 = require("@vuu-ui/vuu-utils");
+var import_clsx34 = __toESM(require("clsx"));
+var import_react82 = __toESM(require("react"));
 
 // src/toolbar/useToolbar.ts
-var import_vuu_utils40 = require("@vuu-ui/vuu-utils");
-var import_react88 = require("react");
+var import_vuu_utils39 = require("@vuu-ui/vuu-utils");
+var import_react81 = require("react");
 
 // src/toolbar/useKeyboardNavigation.ts
-var import_core35 = require("@salt-ds/core");
+var import_core34 = require("@salt-ds/core");
+var import_vuu_utils36 = require("@vuu-ui/vuu-utils");
+var import_react79 = require("react");
 var import_vuu_utils37 = require("@vuu-ui/vuu-utils");
-var import_react86 = require("react");
-var import_vuu_utils38 = require("@vuu-ui/vuu-utils");
 
 // src/toolbar/toolbar-dom-utils.ts
-var import_vuu_utils36 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils35 = require("@vuu-ui/vuu-utils");
 var getIndexOfItem2 = (container, query) => {
   if (container) {
     const targetTab = container.querySelector(
       `[data-index]:has(${query})`
     );
-    return (0, import_vuu_utils36.getElementDataIndex)(targetTab);
+    return (0, import_vuu_utils35.getElementDataIndex)(targetTab);
   }
   return -1;
 };
@@ -12176,16 +11905,16 @@ var getIndexOfEditedItem2 = (container) => getIndexOfItem2(container, ".vuuEdita
 // src/toolbar/useKeyboardNavigation.ts
 var navigation2 = {
   horizontal: {
-    [import_vuu_utils38.Home]: "start",
-    [import_vuu_utils38.End]: "end",
-    [import_vuu_utils38.ArrowLeft]: "bwd",
-    [import_vuu_utils38.ArrowRight]: "fwd"
+    [import_vuu_utils37.Home]: "start",
+    [import_vuu_utils37.End]: "end",
+    [import_vuu_utils37.ArrowLeft]: "bwd",
+    [import_vuu_utils37.ArrowRight]: "fwd"
   },
   vertical: {
-    [import_vuu_utils38.Home]: "start",
-    [import_vuu_utils38.End]: "end",
-    [import_vuu_utils38.ArrowUp]: "bwd",
-    [import_vuu_utils38.ArrowDown]: "fwd"
+    [import_vuu_utils37.Home]: "start",
+    [import_vuu_utils37.End]: "end",
+    [import_vuu_utils37.ArrowUp]: "bwd",
+    [import_vuu_utils37.ArrowDown]: "fwd"
   }
 };
 var isOverflowIndicator = (el) => el !== null && el.dataset.index === "overflow";
@@ -12204,7 +11933,7 @@ var itemIsNotFocusable = (container, direction, indexCount, nextIdx, hasOverflow
   }
 };
 var isNavigationKey3 = (key, orientation = "horizontal") => navigation2[orientation][key] !== void 0;
-var isMenuActivationKey2 = (key) => key === import_vuu_utils38.ArrowDown;
+var isMenuActivationKey2 = (key) => key === import_vuu_utils37.ArrowDown;
 function nextItemIdx3(count, direction, idx) {
   if (direction === "start") {
     return 0;
@@ -12256,22 +11985,22 @@ var useKeyboardNavigation3 = ({
   onNavigateOutOfBounds,
   orientation
 }) => {
-  const mouseClickPending = (0, import_react86.useRef)(false);
-  const focusedRef = (0, import_react86.useRef)(-1);
-  const [hasFocus, setHasFocus] = (0, import_react86.useState)(false);
-  const [highlightedIdx, _setHighlightedIdx] = (0, import_core35.useControlled)({
+  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_react86.useCallback)(
+  const setHighlightedIdx = (0, import_react79.useCallback)(
     (value) => {
       _setHighlightedIdx(focusedRef.current = value);
     },
     [_setHighlightedIdx]
   );
-  const keyboardNavigation = (0, import_react86.useRef)(false);
-  const focusItem = (0, import_react86.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);
@@ -12285,7 +12014,7 @@ var useKeyboardNavigation3 = ({
           true
         );
         if (element) {
-          const focussableElement = (0, import_vuu_utils37.getFocusableElement)(element);
+          const focussableElement = (0, import_vuu_utils36.getFocusableElement)(element);
           focussableElement == null ? void 0 : focussableElement.focus();
         }
       };
@@ -12300,7 +12029,7 @@ var useKeyboardNavigation3 = ({
   const onFocus = (e) => {
     if (focusedRef.current === -1) {
       if (e.target.tabIndex === 0) {
-        const index = (0, import_vuu_utils37.getElementDataIndex)((0, import_vuu_utils37.getClosest)(e.target, "index"));
+        const index = (0, import_vuu_utils36.getElementDataIndex)((0, import_vuu_utils36.getClosest)(e.target, "index"));
         setHighlightedIdx(index);
       } else if (e.target.tabIndex === -1) {
       } else {
@@ -12313,14 +12042,14 @@ var useKeyboardNavigation3 = ({
       }
     }
   };
-  const getIndexCount = (0, import_react86.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_react86.useCallback)(
+  const nextFocusableItemIdx = (0, import_react79.useCallback)(
     (direction = "fwd", idx) => {
       var _a2;
       const indexCount = getIndexCount();
@@ -12348,7 +12077,7 @@ var useKeyboardNavigation3 = ({
     },
     [containerRef, getIndexCount]
   );
-  const navigateChildItems = (0, import_react86.useCallback)(
+  const navigateChildItems = (0, import_react79.useCallback)(
     (e) => {
       const direction = navigation2[orientation][e.key];
       const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
@@ -12368,29 +12097,29 @@ var useKeyboardNavigation3 = ({
       onNavigateOutOfBounds
     ]
   );
-  const highlightedItemHasMenu = (0, import_react86.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_react86.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_react86.useCallback)(() => {
+  const activateItemMenu = (0, import_react79.useCallback)(() => {
     const el = getElementByPosition2(containerRef.current, highlightedIdx);
     const menuEl = el == null ? void 0 : el.querySelector(".vuuPopupMenu");
     if (menuEl) {
-      (0, import_vuu_utils37.dispatchMouseEvent)(menuEl, "click");
+      (0, import_vuu_utils36.dispatchMouseEvent)(menuEl, "click");
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const handleKeyDown = (0, import_react86.useCallback)(
+  const handleKeyDown = (0, import_react79.useCallback)(
     (e) => {
       if (getIndexCount() > 0 && isNavigationKey3(e.key, orientation)) {
         e.preventDefault();
@@ -12416,7 +12145,7 @@ var useKeyboardNavigation3 = ({
   const handleItemClick = (_, itemIndex) => {
     setHighlightedIdx(itemIndex);
   };
-  const handleFocus = (0, import_react86.useCallback)(() => {
+  const handleFocus = (0, import_react79.useCallback)(() => {
     if (!hasFocus) {
       setHasFocus(true);
       if (!mouseClickPending.current) {
@@ -12426,13 +12155,13 @@ var useKeyboardNavigation3 = ({
       }
     }
   }, [hasFocus]);
-  const handleContainerMouseDown = (0, import_react86.useCallback)(() => {
+  const handleContainerMouseDown = (0, import_react79.useCallback)(() => {
     if (!hasFocus) {
       mouseClickPending.current = true;
     }
     keyboardNavigation.current = false;
   }, [hasFocus]);
-  const handleOverflowMenuClose = (0, import_react86.useCallback)(
+  const handleOverflowMenuClose = (0, import_react79.useCallback)(
     (closeReason) => {
       if ((closeReason == null ? void 0 : closeReason.type) === "escape") {
         const index = getIndexOfOverflowItem(containerRef.current);
@@ -12476,8 +12205,8 @@ var useKeyboardNavigation3 = ({
 };
 
 // src/toolbar/useSelection.ts
-var import_vuu_utils39 = require("@vuu-ui/vuu-utils");
-var import_react87 = require("react");
+var import_vuu_utils38 = require("@vuu-ui/vuu-utils");
+var import_react80 = require("react");
 var defaultSelectionKeys3 = ["Enter", " "];
 var NO_SELECTION_HANDLERS = {};
 var useSelection3 = ({
@@ -12493,11 +12222,11 @@ var useSelection3 = ({
     name: "useSelection",
     state: "selected"
   });
-  const isSelectionEvent = (0, import_react87.useCallback)(
+  const isSelectionEvent = (0, import_react80.useCallback)(
     (evt) => defaultSelectionKeys3.includes(evt.key),
     []
   );
-  const selectItem = (0, import_react87.useCallback)(
+  const selectItem = (0, import_react80.useCallback)(
     (itemIndex, specialKey = false) => {
       const newSelected = allowMultipleSelection(selectionStrategy, specialKey) ? selected.concat(itemIndex) : [itemIndex];
       setSelected(newSelected);
@@ -12505,7 +12234,7 @@ var useSelection3 = ({
     },
     [onSelectionChange, selected, selectionStrategy, setSelected]
   );
-  const deselectItem = (0, import_react87.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);
@@ -12513,9 +12242,9 @@ var useSelection3 = ({
     },
     [onSelectionChange, selected, selectionStrategy, setSelected]
   );
-  const handleKeyDown = (0, import_react87.useCallback)(
+  const handleKeyDown = (0, import_react80.useCallback)(
     (e) => {
-      if (isSelectionEvent(e) && (0, import_vuu_utils39.isSelectableElement)(e.target)) {
+      if (isSelectionEvent(e) && (0, import_vuu_utils38.isSelectableElement)(e.target)) {
         if (!selected.includes(highlightedIdx)) {
           e.stopPropagation();
           e.preventDefault();
@@ -12536,10 +12265,10 @@ var useSelection3 = ({
       deselectItem
     ]
   );
-  const handleClick = (0, import_react87.useCallback)(
+  const handleClick = (0, import_react80.useCallback)(
     (e, itemIndex) => {
-      const element = (0, import_vuu_utils39.getClosestIndexItem)(e.target);
-      if ((0, import_vuu_utils39.isSelectableElement)(element)) {
+      const element = (0, import_vuu_utils38.getClosestIndexItem)(e.target);
+      if ((0, import_vuu_utils38.isSelectableElement)(element)) {
         if (!selected.includes(itemIndex)) {
           selectItem(itemIndex, e.shiftKey);
         } else if (deselectionIsAllowed(selectionStrategy)) {
@@ -12572,7 +12301,7 @@ var useToolbar = ({
   orientation,
   selectionStrategy
 }) => {
-  const lastSelection = (0, import_react88.useRef)(activeItemIndexProp);
+  const lastSelection = (0, import_react81.useRef)(activeItemIndexProp);
   const {
     focusItem: keyboardHookFocusItem,
     highlightedIdx,
@@ -12599,14 +12328,14 @@ var useToolbar = ({
     selectionStrategy
   });
   lastSelection.current = selectionHookSelected;
-  const handleClick = (0, import_react88.useCallback)(
+  const handleClick = (0, import_react81.useCallback)(
     (evt) => {
       var _a2;
       const target = evt.target;
       const toolbarItem = target.closest("[data-index]");
       if (toolbarItem) {
         const index = parseInt((_a2 = toolbarItem.dataset.index) != null ? _a2 : "-1");
-        if (index !== -1 && (0, import_vuu_utils40.isValidNumber)(index)) {
+        if (index !== -1 && (0, import_vuu_utils39.isValidNumber)(index)) {
           keyboardHookHandleClick(evt, index);
           onClick == null ? void 0 : onClick(evt, index);
         }
@@ -12614,7 +12343,7 @@ var useToolbar = ({
     },
     [keyboardHookHandleClick, onClick]
   );
-  const handleKeyDown = (0, import_react88.useCallback)(
+  const handleKeyDown = (0, import_react81.useCallback)(
     (evt) => {
       keyboardHookHandleKeyDown(evt);
       if (!evt.defaultPrevented) {
@@ -12623,7 +12352,7 @@ var useToolbar = ({
     },
     [keyboardHookHandleKeyDown, onKeyDown]
   );
-  const onSwitchWrappedItemIntoView = (0, import_react88.useCallback)(
+  const onSwitchWrappedItemIntoView = (0, import_react81.useCallback)(
     (item) => {
       const index = parseInt(item.index);
       if (!isNaN(index)) {
@@ -12655,8 +12384,8 @@ var useToolbar = ({
 };
 
 // src/toolbar/Toolbar.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
-var classBase28 = "vuuToolbar";
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var classBase29 = "vuuToolbar";
 var Toolbar = ({
   activeItemIndex: activeItemIndexProp,
   alignItems = "start",
@@ -12671,7 +12400,7 @@ var Toolbar = ({
   showSeparators = false,
   ...props
 }) => {
-  const rootRef = (0, import_react89.useRef)(null);
+  const rootRef = (0, import_react82.useRef)(null);
   const {
     activeItemIndex,
     focusableIdx,
@@ -12687,18 +12416,18 @@ var Toolbar = ({
     orientation,
     selectionStrategy
   });
-  const id = (0, import_vuu_utils41.useId)(idProp);
-  const items = (0, import_react89.useMemo)(
-    () => (0, import_vuu_utils41.asReactElements)(children).map((child, index) => {
+  const id = (0, import_vuu_utils40.useId)(idProp);
+  const items = (0, import_react82.useMemo)(
+    () => (0, import_vuu_utils40.asReactElements)(children).map((child, index) => {
       const {
         id: itemId = `${id}-tab-${index}`,
         className: itemClassName,
         ...ownProps
       } = child.props;
       const selected = activeItemIndex.includes(index);
-      return import_react89.default.cloneElement(child, {
+      return import_react82.default.cloneElement(child, {
         ...forwardCallbackProps(ownProps, itemProps),
-        className: (0, import_clsx38.default)("vuuToolbarItem", itemClassName),
+        className: (0, import_clsx34.default)("vuuToolbarItem", itemClassName),
         "data-overflow-priority": selected ? "1" : void 0,
         id: itemId,
         key: index,
@@ -12708,15 +12437,15 @@ var Toolbar = ({
     }),
     [activeItemIndex, children, focusableIdx, id, itemProps]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     OverflowContainer,
     {
       ...props,
       ...toolbarHook.containerProps,
-      className: (0, import_clsx38.default)(className, classBase28, `${classBase28}-${orientation}`, {
-        [`${classBase28}-alignCenter`]: alignItems === "center",
-        [`${classBase28}-alignEnd`]: alignItems === "end",
-        [`${classBase28}-withSeparators`]: showSeparators
+      className: (0, import_clsx34.default)(className, classBase29, `${classBase29}-${orientation}`, {
+        [`${classBase29}-alignCenter`]: alignItems === "center",
+        [`${classBase29}-alignEnd`]: alignItems === "end",
+        [`${classBase29}-withSeparators`]: showSeparators
       }),
       ...props,
       ref: rootRef,
@@ -12726,9 +12455,9 @@ var Toolbar = ({
 };
 
 // src/tree/Tree.tsx
-var import_core38 = require("@salt-ds/core");
-var import_clsx39 = __toESM(require("clsx"));
-var import_react98 = require("react");
+var import_core37 = require("@salt-ds/core");
+var import_clsx35 = __toESM(require("clsx"));
+var import_react91 = require("react");
 
 // src/tree/list-dom-utils.ts
 function listItemIndex2(listItemEl) {
@@ -12746,7 +12475,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_react90 = 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]);
@@ -12770,7 +12499,7 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
       return 0;
     }
   };
-  const isExpanded2 = (0, import_react90.useCallback)(
+  const isExpanded2 = (0, import_react83.useCallback)(
     (path) => {
       if (Array.isArray(revealSelected)) {
         return revealSelected.some((id) => isParentPath2(path, id));
@@ -12779,7 +12508,7 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
     },
     [defaultExpanded, revealSelected]
   );
-  const normalizeItems = (0, import_react90.useCallback)(
+  const normalizeItems = (0, import_react83.useCallback)(
     (items, indexer, level = 1, path = "", results = [], flattenedSource2 = []) => {
       let count2 = 0;
       items.forEach((item, i, all) => {
@@ -12823,10 +12552,10 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
     },
     [collapsibleHeaders, idRoot, isExpanded2]
   );
-  const [count, sourceWithIds, flattenedSource] = (0, import_react90.useMemo)(() => {
+  const [count, sourceWithIds, flattenedSource] = (0, import_react83.useMemo)(() => {
     return normalizeItems(sourceProp, { index: 0 });
   }, [normalizeItems, sourceProp]);
-  const sourceItemById = (0, import_react90.useCallback)(
+  const sourceItemById = (0, import_react83.useCallback)(
     (id, target = sourceWithIds) => {
       const sourceWithId = target.find(
         (i) => {
@@ -12846,8 +12575,8 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
 };
 
 // src/tree/use-selection.ts
-var import_react91 = require("react");
-var import_core36 = require("@salt-ds/core");
+var import_react84 = require("react");
+var import_core35 = require("@salt-ds/core");
 var SINGLE = "single";
 var CHECKBOX2 = "checkbox";
 var MULTI = "multi";
@@ -12868,17 +12597,17 @@ var useSelection4 = ({
   const singleSelect = selection === SINGLE;
   const multiSelect = selection === MULTI || selection.startsWith(CHECKBOX2);
   const extendedSelect = selection === EXTENDED;
-  const lastActive = (0, import_react91.useRef)(-1);
-  const isSelectionEvent = (0, import_react91.useCallback)(
+  const lastActive = (0, import_react84.useRef)(-1);
+  const isSelectionEvent = (0, import_react84.useCallback)(
     (evt) => selectionKeys.includes(evt.key),
     [selectionKeys]
   );
-  const [selected, setSelected] = (0, import_core36.useControlled)({
+  const [selected, setSelected] = (0, import_core35.useControlled)({
     controlled: selectedProp,
     default: defaultSelected != null ? defaultSelected : [],
     name: "selected"
   });
-  const selectItemAtIndex = (0, import_react91.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);
@@ -12919,7 +12648,7 @@ var useSelection4 = ({
       singleSelect
     ]
   );
-  const handleKeyDown = (0, import_react91.useCallback)(
+  const handleKeyDown = (0, import_react84.useCallback)(
     (evt) => {
       if (~highlightedIdx && isSelectionEvent(evt)) {
         evt.preventDefault();
@@ -12944,7 +12673,7 @@ var useSelection4 = ({
       selectItemAtIndex
     ]
   );
-  const handleKeyboardNavigation = (0, import_react91.useCallback)(
+  const handleKeyboardNavigation = (0, import_react84.useCallback)(
     (evt, currentIndex) => {
       if (extendedSelect && evt.shiftKey) {
         const item = treeNodes[currentIndex];
@@ -12957,7 +12686,7 @@ var useSelection4 = ({
     onKeyDown: handleKeyDown,
     onKeyboardNavigation: handleKeyboardNavigation
   };
-  const handleClick = (0, import_react91.useCallback)(
+  const handleClick = (0, import_react84.useCallback)(
     (evt) => {
       if (highlightedIdx !== -1) {
         const item = treeNodes[highlightedIdx];
@@ -12991,14 +12720,14 @@ var useSelection4 = ({
 };
 
 // src/tree/use-viewport-tracking.ts
-var import_react92 = require("react");
+var import_react85 = require("react");
 var HeightOnly4 = ["height", "scrollHeight"];
 var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
-  const scrollTop = (0, import_react92.useRef)(0);
-  const scrolling = (0, import_react92.useRef)(false);
-  const rootHeight = (0, import_react92.useRef)(0);
-  const rootScrollHeight = (0, import_react92.useRef)(0);
-  const scrollIntoView = (0, import_react92.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;
@@ -13019,10 +12748,10 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
     },
     [root, stickyHeaders]
   );
-  const scrollHandler = (0, import_react92.useCallback)((e) => {
+  const scrollHandler = (0, import_react85.useCallback)((e) => {
     scrollTop.current = e.target.scrollTop;
   }, []);
-  (0, import_react92.useEffect)(() => {
+  (0, import_react85.useEffect)(() => {
     const { current: rootEl } = root;
     if (rootEl) {
       rootEl.addEventListener("scroll", scrollHandler);
@@ -13033,7 +12762,7 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
       }
     };
   }, [root, scrollHandler]);
-  (0, import_react92.useLayoutEffect)(() => {
+  (0, import_react85.useLayoutEffect)(() => {
     if (highlightedIdx !== -1 && rootScrollHeight.current > rootHeight.current) {
       if (root.current) {
         const item = root.current.querySelector(`
@@ -13050,9 +12779,9 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
       }
     }
   }, [highlightedIdx, root, scrollIntoView]);
-  (0, import_react92.useEffect)(() => {
+  (0, import_react85.useEffect)(() => {
   }, [stickyHeaders]);
-  const onResize = (0, import_react92.useCallback)(({ height, scrollHeight }) => {
+  const onResize = (0, import_react85.useCallback)(({ height, scrollHeight }) => {
     rootHeight.current = height;
     rootScrollHeight.current = scrollHeight;
   }, []);
@@ -13061,10 +12790,10 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
 };
 
 // src/tree/useTree.ts
-var import_react97 = require("react");
+var import_react90 = require("react");
 
 // src/tree/use-keyboard-navigation.ts
-var import_react93 = require("react");
+var import_react86 = require("react");
 
 // src/tree/hierarchical-data-utils.ts
 var getNodeParentPath = ({ id }) => {
@@ -13131,7 +12860,7 @@ var replaceNode = (nodes, id, props) => {
 };
 
 // src/tree/use-keyboard-navigation.ts
-var import_core37 = require("@salt-ds/core");
+var import_core36 = require("@salt-ds/core");
 
 // src/tree/key-code.ts
 function union2(set1, ...sets) {
@@ -13214,26 +12943,26 @@ var useKeyboardNavigation4 = ({
   onKeyboardNavigation,
   selected = []
 }) => {
-  const { bwd: ArrowBwd, fwd: ArrowFwd } = (0, import_react93.useMemo)(
+  const { bwd: ArrowBwd, fwd: ArrowFwd } = (0, import_react86.useMemo)(
     () => ({
       bwd: ArrowUp4,
       fwd: ArrowDown4
     }),
     []
   );
-  const [highlightedIdx, setHighlightedIdx, isControlledHighlighting] = (0, import_core37.useControlled)({
+  const [highlightedIdx, setHighlightedIdx, isControlledHighlighting] = (0, import_core36.useControlled)({
     controlled: highlightedIdxProp,
     default: defaultHighlightedIdx,
     name: "highlightedIdx"
   });
-  const setHighlightedIndex = (0, import_react93.useCallback)(
+  const setHighlightedIndex = (0, import_react86.useCallback)(
     (idx) => {
       onHighlight == null ? void 0 : onHighlight(idx);
       setHighlightedIdx(idx);
     },
     [onHighlight, setHighlightedIdx]
   );
-  const nextFocusableItemIdx = (0, import_react93.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])) {
@@ -13243,10 +12972,10 @@ var useKeyboardNavigation4 = ({
     },
     [ArrowBwd, ArrowFwd, treeNodes]
   );
-  const keyBoardNavigation = (0, import_react93.useRef)(true);
-  const ignoreFocus = (0, import_react93.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_react93.useCallback)(() => {
+  const handleFocus = (0, import_react86.useCallback)(() => {
     if (ignoreFocus.current) {
       ignoreFocus.current = false;
     } else if (selected.length > 0) {
@@ -13259,7 +12988,7 @@ var useKeyboardNavigation4 = ({
       setHighlightedIndex(nextFocusableItemIdx());
     }
   }, [treeNodes, nextFocusableItemIdx, selected, setHighlightedIndex]);
-  const navigateChildItems = (0, import_react93.useCallback)(
+  const navigateChildItems = (0, import_react86.useCallback)(
     (e) => {
       const nextIdx = nextFocusableItemIdx(e.key, highlightedIdx);
       if (nextIdx !== highlightedIdx) {
@@ -13274,7 +13003,7 @@ var useKeyboardNavigation4 = ({
       setHighlightedIndex
     ]
   );
-  const handleKeyDown = (0, import_react93.useCallback)(
+  const handleKeyDown = (0, import_react86.useCallback)(
     (e) => {
       if (treeNodes.length > 0 && isNavigationKey4(e, "vertical")) {
         e.preventDefault();
@@ -13285,7 +13014,7 @@ var useKeyboardNavigation4 = ({
     },
     [treeNodes, navigateChildItems]
   );
-  const listProps = (0, import_react93.useMemo)(
+  const listProps = (0, import_react86.useMemo)(
     () => ({
       onBlur: () => {
         setHighlightedIndex(-1);
@@ -13323,7 +13052,7 @@ var useKeyboardNavigation4 = ({
 };
 
 // src/tree/use-hierarchical-data.ts
-var import_react94 = require("react");
+var import_react87 = require("react");
 var populateIndices = (nodes, results = [], idx = { value: 0 }) => {
   let skipToNextHeader = false;
   for (const node of nodes) {
@@ -13345,10 +13074,10 @@ var populateIndices = (nodes, results = [], idx = { value: 0 }) => {
   return results;
 };
 var useHierarchicalData = (source) => {
-  const externalSource = (0, import_react94.useRef)(source);
-  const statefulSource = (0, import_react94.useRef)(source);
-  const indexPositions = (0, import_react94.useRef)(populateIndices(source));
-  const [, forceUpdate] = (0, import_react94.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;
@@ -13368,7 +13097,7 @@ var useHierarchicalData = (source) => {
 };
 
 // src/tree/use-collapsible-groups.ts
-var import_react95 = require("react");
+var import_react88 = require("react");
 var NO_HANDLERS4 = {};
 var isToggleElement = (element) => element && element.hasAttribute("aria-expanded");
 var useCollapsibleGroups2 = ({
@@ -13378,23 +13107,23 @@ var useCollapsibleGroups2 = ({
   setVisibleData,
   source
 }) => {
-  const fullSource = (0, import_react95.useRef)(source);
-  const stateSource = (0, import_react95.useRef)(fullSource.current);
-  const setSource = (0, import_react95.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_react95.useCallback)(
+  const expandNode = (0, import_react88.useCallback)(
     (nodeList, { id }) => replaceNode(nodeList, id, { expanded: true }),
     []
   );
-  const collapseNode = (0, import_react95.useCallback)(
+  const collapseNode = (0, import_react88.useCallback)(
     (nodeList, { id }) => replaceNode(nodeList, id, { expanded: false }),
     []
   );
-  const handleKeyDown = (0, import_react95.useCallback)(
+  const handleKeyDown = (0, import_react88.useCallback)(
     (e) => {
       if (e.key === ArrowRight4 || e.key === Enter2) {
         const node = treeNodes[highlightedIdx];
@@ -13420,7 +13149,7 @@ var useCollapsibleGroups2 = ({
   const listHandlers = collapsibleHeaders ? {
     onKeyDown: handleKeyDown
   } : NO_HANDLERS4;
-  const handleClick = (0, import_react95.useCallback)(
+  const handleClick = (0, import_react88.useCallback)(
     (evt) => {
       const el = closestListItem2(evt.target);
       if (isToggleElement(el)) {
@@ -13446,14 +13175,14 @@ var useCollapsibleGroups2 = ({
 };
 
 // src/tree/use-tree-keyboard-navigation.ts
-var import_react96 = require("react");
+var import_react89 = require("react");
 var useTreeKeyboardNavigation = ({
   highlightedIdx,
   hiliteItemAtIndex,
   indexPositions,
   source
 }) => {
-  const handleKeyDown = (0, import_react96.useCallback)(
+  const handleKeyDown = (0, import_react89.useCallback)(
     (e) => {
       if (e.key === ArrowLeft4) {
         const node = indexPositions[highlightedIdx];
@@ -13490,7 +13219,7 @@ var useTree = ({
   selected: selectedProp,
   selection
 }) => {
-  const lastSelection = (0, import_react97.useRef)(EMPTY_ARRAY2);
+  const lastSelection = (0, import_react90.useRef)(EMPTY_ARRAY2);
   const dataHook = useHierarchicalData(sourceWithIds);
   const handleKeyboardNavigation = (evt, nextIdx) => {
     var _a2, _b;
@@ -13523,7 +13252,7 @@ var useTree = ({
     hiliteItemAtIndex: keyboardHook.hiliteItemAtIndex,
     indexPositions: dataHook.indexPositions
   });
-  const handleClick = (0, import_react97.useCallback)(
+  const handleClick = (0, import_react90.useCallback)(
     (evt) => {
       var _a2, _b, _c;
       (_a2 = collapsibleHook.listItemHandlers) == null ? void 0 : _a2.onClick(evt);
@@ -13533,7 +13262,7 @@ var useTree = ({
     },
     [collapsibleHook, selectionHook]
   );
-  const handleKeyDown = (0, import_react97.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);
@@ -13583,14 +13312,14 @@ var useTree = ({
 };
 
 // src/tree/Tree.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
-var import_react99 = require("react");
-var classBase29 = "vuuTree";
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_react92 = require("react");
+var classBase30 = "vuuTree";
 var isExpanded = (node) => node.expanded === true;
 var TreeNode = ({ children, idx, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("li", { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("li", { ...props, children });
 };
-var Tree = (0, import_react98.forwardRef)(function Tree2({
+var Tree = (0, import_react91.forwardRef)(function Tree2({
   allowDragDrop,
   className,
   defaultSelected,
@@ -13605,8 +13334,8 @@ var Tree = (0, import_react98.forwardRef)(function Tree2({
   ...htmlAttributes
 }, forwardedRef) {
   var _a2;
-  const id = (0, import_core38.useIdMemo)(idProp);
-  const rootRef = (0, import_react98.useRef)(null);
+  const id = (0, import_core37.useIdMemo)(idProp);
+  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
   });
@@ -13649,14 +13378,14 @@ var Tree = (0, import_react98.forwardRef)(function Tree2({
   const allowGroupSelect = groupSelectionEnabled2(groupSelection);
   function addLeafNode(list, item, idx) {
     list.push(
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
         TreeNode,
         {
           ...propsCommonToAllListItems,
           ...getListItemProps(item, idx, highlightedIdx, selected, focusVisible),
           children: [
-            item.icon ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: `${classBase29}Node-icon`, "data-icon": item.icon }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { children: item.label })
+            item.icon ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: `${classBase30}Node-icon`, "data-icon": item.icon }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: item.label })
           ]
         }
       )
@@ -13667,16 +13396,16 @@ var Tree = (0, import_react98.forwardRef)(function Tree2({
     const { value: i } = idx;
     idx.value += 1;
     list.push(
-      /* @__PURE__ */ (0, import_react99.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_clsx39.default)(`${classBase29}Node`, {
+          className: (0, import_clsx35.default)(`${classBase30}Node`, {
             focusVisible: focusVisible === i,
-            [`${classBase29}Node-toggle`]: !allowGroupSelect
+            [`${classBase30}Node-toggle`]: !allowGroupSelect
           }),
           "data-idx": i,
           "data-highlighted": i === highlightedIdx || void 0,
@@ -13684,20 +13413,20 @@ var Tree = (0, import_react98.forwardRef)(function Tree2({
           id: id2,
           key: `header-${i}`
         },
-        allowGroupSelect ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: `${classBase29}Node-label`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: `${classBase29}Node-toggle` }),
+        allowGroupSelect ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: `${classBase30}Node-label`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: `${classBase30}Node-toggle` }),
           title
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: `${classBase29}Node-label`, children: [
-          child.icon ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: `${classBase30}Node-label`, children: [
+          child.icon ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             "span",
             {
-              className: `${classBase29}Node-icon`,
+              className: `${classBase30}Node-icon`,
               "data-icon": child.icon
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { children: title })
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: title })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("ul", { role: "group", children: isExpanded(child) ? renderSourceContent(child.childNodes, idx) : "" })
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("ul", { role: "group", children: isExpanded(child) ? renderSourceContent(child.childNodes, idx) : "" })
       )
     );
   }
@@ -13714,14 +13443,14 @@ var Tree = (0, import_react98.forwardRef)(function Tree2({
       return listItems;
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "ul",
     {
       ...htmlAttributes,
       ...listProps,
-      className: (0, import_clsx39.default)(classBase29, className),
+      className: (0, import_clsx35.default)(classBase30, className),
       id: `Tree-${id}`,
-      ref: (0, import_core38.useForkRef)(rootRef, forwardedRef),
+      ref: (0, import_core37.useForkRef)(rootRef, forwardedRef),
       role: "tree",
       tabIndex: 0,
       children: renderSourceContent(visibleData)
@@ -13735,7 +13464,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_clsx39.default)("vuuTreeNode", className, {
+  className: (0, import_clsx35.default)("vuuTreeNode", className, {
     focusVisible: focusVisible === idx.value
   })
 });