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

package/esm/index.js

@@ -743,10 +743,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();
     }
@@ -887,9 +883,6 @@ var useDropdownBase = ({
   var _a2;
   const justFocused = useRef6(null);
   const popperRef = useRef6(null);
-  const popperCallbackRef = useCallback5((element) => {
-    popperRef.current = element;
-  }, []);
   const [isOpen, setIsOpen] = useControlled2({
     controlled: isOpenProp,
     default: Boolean(defaultIsOpen),
@@ -905,11 +898,45 @@ var useDropdownBase = ({
   }, [onOpenChange, setIsOpen]);
   const hideDropdown = useCallback5(
     (reason) => {
+      console.log(`hide dropdown ${reason}`);
       setIsOpen(false);
       onOpenChange == null ? void 0 : onOpenChange(false, reason);
     },
     [onOpenChange, setIsOpen]
   );
+  const handleComponentFocusOut = useCallback5(
+    (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 = useCallback5(
+    (element) => {
+      if (element) {
+        element.addEventListener("focusout", handleComponentFocusOut);
+      } else if (popperRef.current) {
+        popperRef.current.removeEventListener(
+          "focusout",
+          handleComponentFocusOut
+        );
+      }
+      popperRef.current = element;
+    },
+    [handleComponentFocusOut]
+  );
   useClickAway({
     popperRef,
     rootRef,
@@ -2547,9 +2574,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;
@@ -9134,7 +9161,8 @@ var useCombobox = ({
   const handleInputKeyDown = useCallback33(
     (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);
@@ -9244,7 +9272,9 @@ var useCombobox = ({
 };
 
 // src/combo-box/ComboBox.tsx
+import cx13 from "clsx";
 import { jsx as jsx25, jsxs as jsxs10 } from "react/jsx-runtime";
+var classBase11 = "vuuCombobox";
 var ComboBox = forwardRef16(function Combobox({
   InputProps: InputPropsProp,
   ListProps: ListProps3,
@@ -9255,6 +9285,7 @@ var ComboBox = forwardRef16(function Combobox({
   allowEnterCommitsText,
   allowFreeText,
   children,
+  className,
   defaultIsOpen,
   defaultSelected,
   defaultValue,
@@ -9368,6 +9399,7 @@ var ComboBox = forwardRef16(function Combobox({
     {
       ...props,
       PopupProps,
+      className: cx13(classBase11, className),
       id,
       isOpen: isOpen && collectionHook.data.length > 0,
       onOpenChange,
@@ -9408,12 +9440,12 @@ var ComboBox = forwardRef16(function Combobox({
 
 // src/cycle-state-button/CycleStateButton.tsx
 import { Button as Button3 } from "@salt-ds/core";
-import cx13 from "clsx";
+import cx14 from "clsx";
 import { forwardRef as forwardRef17, useCallback as useCallback35 } from "react";
 import { jsx as jsx26 } from "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 {
@@ -9422,6 +9454,7 @@ var getNextValue = (value, valueList) => {
 };
 var CycleStateButton = forwardRef17(function CycleStateButton2({
   className,
+  onChange,
   onCommit,
   value = "",
   values,
@@ -9430,22 +9463,23 @@ var CycleStateButton = forwardRef17(function CycleStateButton2({
   const handleClick = useCallback35(
     (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__ */ jsx26(
     Button3,
     {
       ...buttonProps,
-      className: cx13(
-        classBase11,
+      className: cx14(
+        classBase12,
         className,
-        `${classBase11}-${value.toLowerCase()}`
+        `${classBase12}-${value.toLowerCase()}`
       ),
       onClick: handleClick,
       ref: forwardedRef,
@@ -9464,7 +9498,7 @@ import {
 
 // src/date-popup/DatePopup.tsx
 import { useForkRef as useForkRef8 } from "@salt-ds/core";
-import cx14 from "clsx";
+import cx15 from "clsx";
 import { forwardRef as forwardRef18 } from "react";
 
 // src/date-popup/useDatePopup.ts
@@ -9544,7 +9578,7 @@ var useDatePopup = ({
 
 // src/date-popup/DatePopup.tsx
 import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
-var classBase12 = "vuuDatePopup";
+var classBase13 = "vuuDatePopup";
 var tz = $14e0f24ef4ac5c92$export$aa8b41735afcabd2();
 var today = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3(tz);
 var DatePopup = forwardRef18(
@@ -9577,7 +9611,7 @@ var DatePopup = forwardRef18(
       DropdownBase,
       {
         ...htmlAttributes,
-        className: classBase12,
+        className: classBase13,
         isOpen,
         placement: "below",
         onOpenChange: handleOpenChange,
@@ -9589,7 +9623,7 @@ var DatePopup = forwardRef18(
               icon: "date",
               ref: useForkRef8(forwardedRef, triggererRef),
               variant: "secondary",
-              className: cx14({ "saltButton-active": isOpen })
+              className: cx15({ "saltButton-active": isOpen })
             }
           ),
           /* @__PURE__ */ jsx27(
@@ -9601,7 +9635,7 @@ var DatePopup = forwardRef18(
               selectionVariant: "default",
               onSelectedDateChange,
               onVisibleMonthChange,
-              className: `${classBase12}-calendar`
+              className: `${classBase13}-calendar`
             }
           )
         ]
@@ -9628,8 +9662,9 @@ function useDatePicker({ onBlur }) {
 
 // src/date-input/DateInput.tsx
 import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
-var classBase13 = "vuuDateInput";
+var classBase14 = "vuuDateInput";
 var DateInput = ({
+  inputProps,
   selectedDate,
   onChange,
   onBlur,
@@ -9645,31 +9680,37 @@ var DateInput = ({
       if (v === "")
         return;
       else
-        onChange(toCalendarDate(new Date(v)));
+        onChange(toCalendarDate(new Date(v)), "input");
     },
     [onChange]
   );
   const onKeyDown = useCallback38((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 = useCallback38(
+    (date) => {
+      onChange(date, "calendar");
+    },
+    [onChange]
+  );
   return /* @__PURE__ */ jsxs12(
     "div",
     {
       ...htmlAttributes,
-      className: clsx7(classBase13, className),
+      className: clsx7(classBase14, className),
       onBlur: handleOnBlur,
       children: [
         /* @__PURE__ */ jsx28(
           "input",
           {
+            ...inputProps,
             "aria-label": "date-input",
-            className: clsx7("saltInput-input", classBase13, className),
+            className: clsx7("saltInput-input", classBase14),
             type: "date",
             value: (_a2 = selectedDate == null ? void 0 : selectedDate.toString()) != null ? _a2 : "",
             onChange: onInputChange,
@@ -9682,7 +9723,7 @@ var DateInput = ({
           {
             "data-embedded": true,
             onBlur,
-            onChange,
+            onChange: onChangeCalendar,
             ref: popupRef,
             selectedDate,
             selectionVariant: "default"
@@ -9695,10 +9736,10 @@ var DateInput = ({
 
 // src/date-input/DateRangeInput.tsx
 import { toCalendarDate as toCalendarDate2 } from "@vuu-ui/vuu-utils";
-import cx15 from "clsx";
+import cx16 from "clsx";
 import { useCallback as useCallback39 } from "react";
 import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
-var classBase14 = "vuuDateInput";
+var classBase15 = "vuuDateInput";
 var DateRangeInput = ({
   selectedDateRange,
   onChange,
@@ -9725,13 +9766,13 @@ var DateRangeInput = ({
   return /* @__PURE__ */ jsxs13(
     "div",
     {
-      className: cx15("saltInput saltInput-primary", classBase14, className),
+      className: cx16("saltInput saltInput-primary", classBase15, className),
       onBlur: handleOnBlur,
       children: [
         /* @__PURE__ */ jsx29(
           "input",
           {
-            className: cx15("saltInput-input", classBase14, className),
+            className: cx16("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"),
@@ -9743,7 +9784,7 @@ var DateRangeInput = ({
         /* @__PURE__ */ jsx29(
           "input",
           {
-            className: cx15("saltInput-input", classBase14, className),
+            className: cx16("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"),
@@ -9765,324 +9806,6 @@ var DateRangeInput = ({
   );
 };
 
-// src/date-picker/DatePicker.tsx
-import { useCallback as useCallback43, useMemo as useMemo15 } from "react";
-import { clsx as clsx10 } from "clsx";
-
-// src/date-picker/input/DatePickerInput.tsx
-import { useCallback as useCallback40 } from "react";
-import { toCalendarDate as toCalendarDate3 } from "@vuu-ui/vuu-utils";
-import { clsx as clsx8 } from "clsx";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var baseClass2 = "vuuDatePickerInput";
-var DatePickerInput = (props) => {
-  var _a2;
-  const { value, onChange, className } = props;
-  const onInputChange = useCallback40(
-    (e) => {
-      const v = e.target.value;
-      if (v === "")
-        return;
-      else
-        onChange(toCalendarDate3(new Date(v)));
-    },
-    [onChange]
-  );
-  return /* @__PURE__ */ jsx30(
-    "input",
-    {
-      className: clsx8("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
-import { Button as Button4 } from "@salt-ds/core";
-import { CalendarIcon } from "@salt-ds/icons";
-import { forwardRef as forwardRef19 } from "react";
-import clsx9 from "clsx";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var baseClass3 = "vuuDatePicker-calendarIconButton";
-var CalendarIconButton = forwardRef19(function CalendarIconButton2({ className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx31(
-    Button4,
-    {
-      className: clsx9(baseClass3, className),
-      variant: "secondary",
-      "aria-label": "calendar-icon-button",
-      ref,
-      ...rest,
-      children: /* @__PURE__ */ jsx31(CalendarIcon, {})
-    }
-  );
-});
-
-// src/date-picker/useBaseDatePicker.ts
-import { useCallback as useCallback41, useState as useState18 } from "react";
-function useBaseDatePicker(props) {
-  var _a2;
-  const { onBlur } = props;
-  const [visibleMonth, setVisibleMonth] = useState18(
-    props.variant === "default" ? props.selectedDate : (_a2 = props.selectedDate) == null ? void 0 : _a2.startDate
-  );
-  const handleOnBlur = useCallback41(
-    (e) => {
-      if (!e.currentTarget.contains(e.relatedTarget)) {
-        onBlur == null ? void 0 : onBlur();
-      }
-    },
-    [onBlur]
-  );
-  return {
-    handleOnBlur,
-    visibleMonth,
-    handleVisibleMonthChange: setVisibleMonth
-  };
-}
-
-// src/date-picker/useBaseDatePickerDropdown.ts
-import { useCallback as useCallback42, useRef as useRef33, useState as useState19 } from "react";
-function useBaseDatePickerDropdown({
-  onVisibleMonthChange,
-  onSelectedDateChange,
-  shouldCloseOnSelectionChange
-}) {
-  const [isOpen, setIsOpen] = useState19(false);
-  const triggererRef = useRef33(null);
-  const handleDateSelection = useCallback42(
-    (_, d) => {
-      var _a2;
-      onSelectedDateChange(d);
-      if (shouldCloseOnSelectionChange(d))
-        setIsOpen(false);
-      (_a2 = triggererRef.current) == null ? void 0 : _a2.focus();
-    },
-    [onSelectedDateChange, shouldCloseOnSelectionChange]
-  );
-  const handleVisibleMonthChange = useCallback42(
-    (_, 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
-import { jsx as jsx32, jsxs as jsxs14 } from "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 = useCallback43(
-    (d) => {
-      onSelectedDateChange(d);
-      handleVisibleMonthChange(d);
-    },
-    [onSelectedDateChange, handleVisibleMonthChange]
-  );
-  return /* @__PURE__ */ jsxs14(
-    "div",
-    {
-      className: clsx10("saltInput saltInput-primary", baseClass4, className),
-      onBlur: handleOnBlur,
-      children: [
-        /* @__PURE__ */ jsx32(DatePickerInput, { value: selectedDate, onChange: handleInputChange }),
-        /* @__PURE__ */ jsx32(
-          DatePickerDropdown,
-          {
-            visibleMonth,
-            onVisibleMonthChange: handleVisibleMonthChange,
-            ...props
-          }
-        )
-      ]
-    }
-  );
-};
-var DatePickerDropdown = (props) => {
-  const {
-    closeOnSelection,
-    onSelectedDateChange,
-    onVisibleMonthChange,
-    className,
-    ...rest
-  } = props;
-  const shouldCloseOnSelectionChange = useCallback43(
-    () => !!closeOnSelection,
-    [closeOnSelection]
-  );
-  const {
-    triggererRef,
-    isOpen,
-    handleOpenChange,
-    handleVisibleMonthChange,
-    handleDateSelection
-  } = useBaseDatePickerDropdown({
-    onVisibleMonthChange,
-    onSelectedDateChange,
-    shouldCloseOnSelectionChange
-  });
-  const defaultSelectedDate = useMemo15(() => $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()), []);
-  return /* @__PURE__ */ jsxs14(
-    DropdownBase,
-    {
-      placement: "below",
-      isOpen,
-      onOpenChange: handleOpenChange,
-      className,
-      children: [
-        /* @__PURE__ */ jsx32(CalendarIconButton, { ref: triggererRef }),
-        /* @__PURE__ */ jsx32(
-          Calendar,
-          {
-            selectionVariant: "default",
-            onVisibleMonthChange: handleVisibleMonthChange,
-            onSelectedDateChange: handleDateSelection,
-            defaultSelectedDate,
-            className: `${baseClass4}-calendar`,
-            ...rest
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/date-picker/DateRangePicker.tsx
-import { useCallback as useCallback45, useMemo as useMemo16 } from "react";
-import { clsx as clsx12 } from "clsx";
-
-// src/date-picker/input/DateRangePickerInput.tsx
-import { useCallback as useCallback44 } from "react";
-import { clsx as clsx11 } from "clsx";
-import { jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
-var baseClass5 = "vuuDateRangePickerInput";
-var DateRangePickerInput = (props) => {
-  const { value, onChange, className } = props;
-  const getHandleInputChange = useCallback44(
-    (k) => (d) => {
-      onChange({ ...value, [k]: d });
-    },
-    [value, onChange]
-  );
-  return /* @__PURE__ */ jsxs15("div", { className: clsx11(baseClass5, className), children: [
-    /* @__PURE__ */ jsx33(
-      DatePickerInput,
-      {
-        value: value == null ? void 0 : value["startDate"],
-        onChange: getHandleInputChange("startDate")
-      }
-    ),
-    /* @__PURE__ */ jsx33("span", { children: "\u2014" }),
-    /* @__PURE__ */ jsx33(
-      DatePickerInput,
-      {
-        value: value == null ? void 0 : value["endDate"],
-        onChange: getHandleInputChange("endDate")
-      }
-    )
-  ] });
-};
-
-// src/date-picker/DateRangePicker.tsx
-import { jsx as jsx34, jsxs as jsxs16 } from "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 = useCallback45(
-    (r) => {
-      var _a2;
-      onSelectedDateChange(r);
-      handleVisibleMonthChange((_a2 = r.endDate) != null ? _a2 : r.startDate);
-    },
-    [onSelectedDateChange, handleVisibleMonthChange]
-  );
-  return /* @__PURE__ */ jsxs16(
-    "div",
-    {
-      className: clsx12("saltInput saltInput-primary", baseClass6, className),
-      onBlur: handleOnBlur,
-      children: [
-        /* @__PURE__ */ jsx34(DateRangePickerInput, { value: selectedDate, onChange: handleInputChange }),
-        /* @__PURE__ */ jsx34(
-          DateRangePickerDropdown,
-          {
-            ...props,
-            visibleMonth,
-            onVisibleMonthChange: handleVisibleMonthChange
-          }
-        )
-      ]
-    }
-  );
-};
-var DateRangePickerDropdown = (props) => {
-  const {
-    onVisibleMonthChange,
-    onSelectedDateChange,
-    closeOnSelection,
-    className,
-    ...rest
-  } = props;
-  const shouldCloseOnSelectionChange = useCallback45(
-    (r) => !!(closeOnSelection && r.endDate),
-    [closeOnSelection]
-  );
-  const {
-    triggererRef,
-    isOpen,
-    handleOpenChange,
-    handleVisibleMonthChange,
-    handleDateSelection
-  } = useBaseDatePickerDropdown({
-    onVisibleMonthChange,
-    onSelectedDateChange,
-    shouldCloseOnSelectionChange
-  });
-  const defaultSelectedDate = useMemo16(
-    () => ({ startDate: $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()) }),
-    []
-  );
-  return /* @__PURE__ */ jsxs16(
-    DropdownBase,
-    {
-      placement: "below",
-      isOpen,
-      className,
-      onOpenChange: handleOpenChange,
-      children: [
-        /* @__PURE__ */ jsx34(CalendarIconButton, { ref: triggererRef }),
-        /* @__PURE__ */ jsx34(
-          Calendar,
-          {
-            selectionVariant: "range",
-            onVisibleMonthChange: handleVisibleMonthChange,
-            onSelectedDateChange: handleDateSelection,
-            defaultSelectedDate,
-            className: `${baseClass6}-calendar`,
-            ...rest
-          }
-        )
-      ]
-    }
-  );
-};
-
 // src/editable/editable-utils.ts
 import { getEditRuleValidator } from "@vuu-ui/vuu-utils";
 var buildValidationChecker = (rules) => (value) => applyRules(rules, value);
@@ -10120,9 +9843,9 @@ function applyRules(rules, value) {
 import { useLayoutEffectSkipFirst as useLayoutEffectSkipFirst4 } from "@vuu-ui/vuu-utils";
 import { dispatchCustomEvent as dispatchCustomEvent3 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback46,
-  useRef as useRef34,
-  useState as useState20
+  useCallback as useCallback40,
+  useRef as useRef33,
+  useState as useState18
 } from "react";
 var WarnCommit = () => {
   console.warn(
@@ -10136,15 +9859,15 @@ var useEditableText = ({
   onCommit,
   type
 }) => {
-  const [message, setMessage] = useState20();
-  const [value, setValue] = useState20(initialValue);
-  const initialValueRef = useRef34(initialValue);
-  const isDirtyRef = useRef34(false);
-  const hasCommittedRef = useRef34(false);
+  const [message, setMessage] = useState18();
+  const [value, setValue] = useState18(initialValue);
+  const initialValueRef = useRef33(initialValue);
+  const isDirtyRef = useRef33(false);
+  const hasCommittedRef = useRef33(false);
   useLayoutEffectSkipFirst4(() => {
     setValue(initialValue);
   }, [initialValue]);
-  const commit = useCallback46(
+  const commit = useCallback40(
     (target) => {
       if (isDirtyRef.current) {
         hasCommittedRef.current = true;
@@ -10170,7 +9893,7 @@ var useEditableText = ({
     },
     [clientSideEditValidationCheck, onCommit, value]
   );
-  const handleKeyDown = useCallback46(
+  const handleKeyDown = useCallback40(
     (evt) => {
       if (evt.key === "Enter") {
         commit(evt.target);
@@ -10186,7 +9909,7 @@ var useEditableText = ({
     },
     [commit]
   );
-  const handleBlur = useCallback46(
+  const handleBlur = useCallback40(
     (evt) => {
       if (isDirtyRef.current) {
         commit(evt.target);
@@ -10194,7 +9917,7 @@ var useEditableText = ({
     },
     [commit]
   );
-  const handleChange = useCallback46(
+  const handleChange = useCallback40(
     (evt) => {
       let typedValue = evt.target.value;
       if (type === "number" && !isNaN(parseFloat(typedValue))) {
@@ -10223,20 +9946,25 @@ var useEditableText = ({
 };
 
 // src/editable-label/EditableLabel.tsx
-import cx16 from "clsx";
+import cx17 from "clsx";
 import {
-  useCallback as useCallback47,
+  useCallback as useCallback41,
   useLayoutEffect as useLayoutEffect3,
-  forwardRef as forwardRef20,
-  useRef as useRef35
+  forwardRef as forwardRef19,
+  useRef as useRef34,
+  useImperativeHandle as useImperativeHandle2
 } from "react";
 import { Input as Input2, useControlled as useControlled8 } from "@salt-ds/core";
-import { jsx as jsx35 } from "react/jsx-runtime";
-var classBase15 = "vuuEditableLabel";
-var EditableLabel = forwardRef20(function EditableLabel2({
+import { jsx as jsx30 } from "react/jsx-runtime";
+var classBase16 = "vuuEditableLabel";
+var NullEditAPI = {
+  beginEdit: () => void 0
+};
+var EditableLabel = forwardRef19(function EditableLabel2({
   className: classNameProp,
   defaultEditing,
   defaultValue,
+  editLabelApiRef,
   editing: editingProp,
   onChange,
   onEnterEditMode,
@@ -10244,8 +9972,8 @@ var EditableLabel = forwardRef20(function EditableLabel2({
   value: valueProp,
   ...restProps
 }, forwardedRef) {
-  const inputRef = useRef35(null);
-  const editingRef = useRef35(false);
+  const inputRef = useRef34(null);
+  const editingRef = useRef34(false);
   const [value, setValue] = useControlled8({
     controlled: valueProp,
     default: defaultValue != null ? defaultValue : "",
@@ -10258,13 +9986,13 @@ var EditableLabel = forwardRef20(function EditableLabel2({
     name: "EditableLabel",
     state: "editing"
   });
-  const setEditing = useCallback47(
+  const setEditing = useCallback41(
     (value2) => {
       _setEditing(editingRef.current = value2);
     },
     [_setEditing]
   );
-  const initialValue = useRef35(value);
+  const initialValue = useRef34(value);
   useLayoutEffect3(() => {
     if (editing) {
       if (inputRef.current !== null) {
@@ -10273,10 +10001,17 @@ var EditableLabel = forwardRef20(function EditableLabel2({
       }
     }
   }, [editing, inputRef]);
-  const enterEditMode = useCallback47(() => {
+  const beginEdit = useCallback41(() => {
     setEditing(true);
-    onEnterEditMode && onEnterEditMode();
+    onEnterEditMode == null ? void 0 : onEnterEditMode();
   }, [onEnterEditMode, setEditing]);
+  useImperativeHandle2(
+    editLabelApiRef,
+    () => ({
+      beginEdit
+    }),
+    [beginEdit]
+  );
   const exitEditMode = ({
     cancelEdit = false,
     allowDeactivation = false
@@ -10297,9 +10032,6 @@ var EditableLabel = forwardRef20(function EditableLabel2({
     setValue(value2);
     onChange && onChange(value2);
   };
-  const handleDoubleClick = () => {
-    enterEditMode();
-  };
   const handleBlur = () => {
     if (editingRef.current) {
       exitEditMode({ allowDeactivation: true });
@@ -10315,21 +10047,20 @@ var EditableLabel = forwardRef20(function EditableLabel2({
       exitEditMode({ cancelEdit: true });
     }
   };
-  const className = cx16(classBase15, classNameProp, {
-    [`${classBase15}-editing`]: editing
+  const className = cx17(classBase16, classNameProp, {
+    [`${classBase16}-editing`]: editing
   });
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx30(
     "div",
     {
       ...restProps,
       className,
-      onDoubleClick: handleDoubleClick,
       "data-text": value,
       ref: forwardedRef,
-      children: editing ? /* @__PURE__ */ jsx35(
+      children: editing ? /* @__PURE__ */ jsx30(
         Input2,
         {
-          inputProps: { className: `${classBase15}-input`, spellCheck: false },
+          inputProps: { className: `${classBase16}-input`, spellCheck: false },
           value,
           onBlur: handleBlur,
           onChange: handleChange,
@@ -10339,30 +10070,30 @@ var EditableLabel = forwardRef20(function EditableLabel2({
           textAlign: "left",
           variant: "secondary"
         }
-      ) : /* @__PURE__ */ jsx35("span", { className: `${classBase15}-label`, children: value })
+      ) : /* @__PURE__ */ jsx30("span", { className: `${classBase16}-label`, children: value })
     }
   );
 });
 
 // src/expando-input/ExpandoInput.tsx
-import cx18 from "clsx";
-import { forwardRef as forwardRef22 } from "react";
+import cx19 from "clsx";
+import { forwardRef as forwardRef21 } from "react";
 
 // src/vuu-input/VuuInput.tsx
 import { Tooltip as Tooltip3, useTooltip } from "@vuu-ui/vuu-popups";
 import { isValidNumber as isValidNumber4, useId as useId7 } from "@vuu-ui/vuu-utils";
 import { Input as Input3 } from "@salt-ds/core";
-import cx17 from "clsx";
+import cx18 from "clsx";
 import {
-  forwardRef as forwardRef21,
-  useCallback as useCallback48
+  forwardRef as forwardRef20,
+  useCallback as useCallback42
 } from "react";
-import { Fragment as Fragment3, jsx as jsx36, jsxs as jsxs17 } from "react/jsx-runtime";
-var classBase16 = "vuuInput";
+import { Fragment as Fragment3, jsx as jsx31, jsxs as jsxs14 } from "react/jsx-runtime";
+var classBase17 = "vuuInput";
 var constantInputProps = {
   autoComplete: "off"
 };
-var VuuInput = forwardRef21(function VuuInput2({
+var VuuInput = forwardRef20(function VuuInput2({
   className,
   errorMessage,
   id: idProp,
@@ -10376,7 +10107,7 @@ var VuuInput = forwardRef21(function VuuInput2({
     id,
     tooltipContent: errorMessage
   });
-  const commitValue = useCallback48(
+  const commitValue = useCallback42(
     (evt, value) => {
       if (type === "number") {
         const numericValue = parseFloat(value);
@@ -10393,7 +10124,7 @@ var VuuInput = forwardRef21(function VuuInput2({
     },
     [onCommit, type]
   );
-  const handleKeyDown = useCallback48(
+  const handleKeyDown = useCallback42(
     (evt) => {
       if (evt.key === "Enter") {
         evt.preventDefault();
@@ -10405,23 +10136,23 @@ var VuuInput = forwardRef21(function VuuInput2({
     },
     [commitValue, onKeyDown]
   );
-  const handleBlur = useCallback48(
+  const handleBlur = useCallback42(
     (evt) => {
       const { value } = evt.target;
       commitValue(evt, value);
     },
     [commitValue]
   );
-  const endAdornment = errorMessage ? /* @__PURE__ */ jsx36(
+  const endAdornment = errorMessage ? /* @__PURE__ */ jsx31(
     "span",
     {
       ...anchorProps,
-      className: `${classBase16}-errorIcon`,
+      className: `${classBase17}-errorIcon`,
       "data-icon": "error"
     }
   ) : void 0;
-  return /* @__PURE__ */ jsxs17(Fragment3, { children: [
-    /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    /* @__PURE__ */ jsx31(
       Input3,
       {
         ...props,
@@ -10431,23 +10162,23 @@ var VuuInput = forwardRef21(function VuuInput2({
           ...constantInputProps,
           ...props.inputProps
         },
-        className: cx17(classBase16, className, {
-          [`${classBase16}-errror`]: errorMessage
+        className: cx18(classBase17, className, {
+          [`${classBase17}-errror`]: errorMessage
         }),
         onBlur: handleBlur,
         ref: forwardedRef,
         onKeyDown: handleKeyDown
       }
     ),
-    tooltipProps ? /* @__PURE__ */ jsx36(Tooltip3, { ...tooltipProps, status: "error" }) : null
+    tooltipProps ? /* @__PURE__ */ jsx31(Tooltip3, { ...tooltipProps, status: "error" }) : null
   ] });
 });
 
 // src/expando-input/ExpandoInput.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
-var classBase17 = "vuuExpandoInput";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var classBase18 = "vuuExpandoInput";
 var noop = () => void 0;
-var ExpandoInput = forwardRef22(function ExpandoInput2({
+var ExpandoInput = forwardRef21(function ExpandoInput2({
   className: classNameProp,
   errorMessage,
   value,
@@ -10455,19 +10186,19 @@ var ExpandoInput = forwardRef22(function ExpandoInput2({
   onCommit = noop,
   ...props
 }, forwardedRef) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
-      className: cx18(classBase17, classNameProp, {
-        [`${classBase17}-error`]: errorMessage
+      className: cx19(classBase18, classNameProp, {
+        [`${classBase18}-error`]: errorMessage
       }),
       "data-text": value,
-      children: /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsx32(
         VuuInput,
         {
           ...props,
           errorMessage,
-          inputProps: { ...inputProps, className: `${classBase17}-input` },
+          inputProps: { ...inputProps, className: `${classBase18}-input` },
           onCommit,
           ref: forwardedRef,
           style: { padding: 0 },
@@ -10481,17 +10212,17 @@ var ExpandoInput = forwardRef22(function ExpandoInput2({
 });
 
 // src/inputs/Checkbox.tsx
-import { jsx as jsx38, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
 var Checkbox = (props) => {
   const { onToggle, checked, label } = props;
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       className: "vuuCheckbox",
       onClick: onToggle,
       onKeyUp: (e) => e.key === " " && onToggle(),
       children: [
-        /* @__PURE__ */ jsx38(CheckboxIcon, { tabIndex: 0, checked }),
+        /* @__PURE__ */ jsx33(CheckboxIcon, { tabIndex: 0, checked }),
         label
       ]
     }
@@ -10499,13 +10230,13 @@ var Checkbox = (props) => {
 };
 
 // src/inputs/RadioButton.tsx
-import { jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs16 } from "react/jsx-runtime";
 var RadioButton = (props) => {
   const { onClick, checked, label, groupName } = props;
-  return /* @__PURE__ */ jsxs19("div", { className: "vuuRadioButton", onClick, children: [
-    /* @__PURE__ */ jsxs19("div", { className: "radio", children: [
-      /* @__PURE__ */ jsx39("input", { type: "radio", name: groupName }),
-      /* @__PURE__ */ jsx39(RadioIcon, { checked })
+  return /* @__PURE__ */ jsxs16("div", { className: "vuuRadioButton", onClick, children: [
+    /* @__PURE__ */ jsxs16("div", { className: "radio", children: [
+      /* @__PURE__ */ jsx34("input", { type: "radio", name: groupName }),
+      /* @__PURE__ */ jsx34(RadioIcon, { checked })
     ] }),
     label
   ] });
@@ -10515,12 +10246,12 @@ var RadioButton = (props) => {
 import { Table } from "@vuu-ui/vuu-table";
 import { useId as useId8 } from "@vuu-ui/vuu-utils";
 import { Input as Input4 } from "@salt-ds/core";
-import { forwardRef as forwardRef23, useMemo as useMemo18 } from "react";
+import { forwardRef as forwardRef22, useMemo as useMemo16 } from "react";
 
 // src/instrument-picker/SearchCell.tsx
 import { registerComponent } from "@vuu-ui/vuu-utils";
-import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
-var classBase18 = "vuuSearchCell";
+import { jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
+var classBase19 = "vuuSearchCell";
 var SearchCell = ({
   column,
   columnMap,
@@ -10528,8 +10259,8 @@ var SearchCell = ({
 }) => {
   const key = columnMap[column.name];
   const value = row[key];
-  return /* @__PURE__ */ jsxs20("div", { className: classBase18, tabIndex: -1, children: [
-    /* @__PURE__ */ jsx40("span", { "data-icon": "draggable" }),
+  return /* @__PURE__ */ jsxs17("div", { className: classBase19, tabIndex: -1, children: [
+    /* @__PURE__ */ jsx35("span", { "data-icon": "draggable" }),
     value
   ] });
 };
@@ -10539,7 +10270,7 @@ registerComponent("search-cell", SearchCell, "cell-renderer", {
 
 // src/instrument-picker/useInstrumentPicker.ts
 import { useControlledTableNavigation } from "@vuu-ui/vuu-table";
-import { useCallback as useCallback49, useMemo as useMemo17, useState as useState21 } from "react";
+import { useCallback as useCallback43, useMemo as useMemo15, useState as useState19 } from "react";
 var defaultItemToString = (row) => Object.values(row.data).join(" ");
 var useInstrumentPicker = ({
   dataSource,
@@ -10550,26 +10281,26 @@ var useInstrumentPicker = ({
   onSelect,
   searchColumns
 }) => {
-  const [value, setValue] = useState21("");
+  const [value, setValue] = useState19("");
   const [isOpen, setIsOpen] = useControlled({
     controlled: isOpenProp,
     default: defaultIsOpen != null ? defaultIsOpen : false,
     name: "useDropdownList"
   });
   const { highlightedIndexRef, onKeyDown, tableRef } = useControlledTableNavigation(-1, dataSource.size);
-  const baseFilterPattern = useMemo17(
+  const baseFilterPattern = useMemo15(
     // TODO make this contains once server supports it
     () => searchColumns.map((col) => `${col} starts "__VALUE__"`).join(" or "),
     [searchColumns]
   );
-  const handleOpenChange = useCallback49(
+  const handleOpenChange = useCallback43(
     (open, closeReason) => {
       setIsOpen(open);
       onOpenChange == null ? void 0 : onOpenChange(open, closeReason);
     },
     [onOpenChange, setIsOpen]
   );
-  const handleInputChange = useCallback49(
+  const handleInputChange = useCallback43(
     (evt) => {
       const { value: value2 } = evt.target;
       setValue(value2);
@@ -10587,7 +10318,7 @@ var useInstrumentPicker = ({
     },
     [baseFilterPattern, dataSource, setIsOpen]
   );
-  const handleSelectRow = useCallback49(
+  const handleSelectRow = useCallback43(
     (row) => {
       const value2 = row === null ? "" : itemToString2(row);
       setValue(value2);
@@ -10618,12 +10349,12 @@ var useInstrumentPicker = ({
 };
 
 // src/instrument-picker/InstrumentPicker.tsx
-import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
-var classBase19 = "vuuInstrumentPicker";
+import { jsx as jsx36, jsxs as jsxs18 } from "react/jsx-runtime";
+var classBase20 = "vuuInstrumentPicker";
 if (typeof SearchCell !== "function") {
   console.warn("Instrument Picker: SearchCell module not loaded ");
 }
-var InstrumentPicker = forwardRef23(function InstrumentPicker2({
+var InstrumentPicker = forwardRef22(function InstrumentPicker2({
   TableProps: { dataSource, ...TableProps3 },
   className,
   columnMap,
@@ -10655,7 +10386,7 @@ var InstrumentPicker = forwardRef23(function InstrumentPicker2({
     onSelect,
     searchColumns
   });
-  const endAdornment = useMemo18(() => /* @__PURE__ */ jsx41("span", { "data-icon": "chevron-down" }), []);
+  const endAdornment = useMemo16(() => /* @__PURE__ */ jsx36("span", { "data-icon": "chevron-down" }), []);
   const tableProps = {
     ...TableProps3,
     config: {
@@ -10663,7 +10394,7 @@ var InstrumentPicker = forwardRef23(function InstrumentPicker2({
       zebraStripes: false
     }
   };
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs18(
     DropdownBase,
     {
       ...htmlAttributes,
@@ -10676,7 +10407,7 @@ var InstrumentPicker = forwardRef23(function InstrumentPicker2({
       ref: forwardedRef,
       width,
       children: [
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx36(
           Input4,
           {
             ...inputProps,
@@ -10685,14 +10416,14 @@ var InstrumentPicker = forwardRef23(function InstrumentPicker2({
             value
           }
         ),
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx36(
           Table,
           {
             rowHeight: 25,
             renderBufferSize: 100,
             ...tableProps,
             ...tableHandlers,
-            className: `${classBase19}-list`,
+            className: `${classBase20}-list`,
             height: 200,
             highlightedIndex,
             dataSource,
@@ -10713,13 +10444,13 @@ import {
   useControlledTableNavigation as useControlledTableNavigation2
 } from "@vuu-ui/vuu-table";
 import { Input as Input5 } from "@salt-ds/core";
-import cx19 from "clsx";
-import { useCallback as useCallback51 } from "react";
+import cx20 from "clsx";
+import { useCallback as useCallback45 } from "react";
 
 // src/instrument-search/SearchCell.tsx
 import { registerComponent as registerComponent2 } from "@vuu-ui/vuu-utils";
-import { jsx as jsx42, jsxs as jsxs22 } from "react/jsx-runtime";
-var classBase20 = "vuuSearchCell";
+import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
+var classBase21 = "vuuSearchCell";
 var SearchCell2 = ({
   column,
   columnMap,
@@ -10727,8 +10458,8 @@ var SearchCell2 = ({
 }) => {
   const key = columnMap[column.name];
   const value = row[key];
-  return /* @__PURE__ */ jsxs22("div", { className: classBase20, tabIndex: -1, children: [
-    /* @__PURE__ */ jsx42("span", { "data-icon": "draggable" }),
+  return /* @__PURE__ */ jsxs19("div", { className: classBase21, tabIndex: -1, children: [
+    /* @__PURE__ */ jsx37("span", { "data-icon": "draggable" }),
     value
   ] });
 };
@@ -10737,18 +10468,18 @@ registerComponent2("search-cell", SearchCell2, "cell-renderer", {
 });
 
 // src/instrument-search/useInstrumentSearch.ts
-import { useCallback as useCallback50, useMemo as useMemo19, useState as useState22 } from "react";
+import { useCallback as useCallback44, useMemo as useMemo17, useState as useState20 } from "react";
 var useInstrumentSearch = ({
   dataSource,
   searchColumns = ["description"]
 }) => {
-  const [searchState, setSearchState] = useState22({ searchText: "", filter: "" });
-  const baseFilterPattern = useMemo19(
+  const [searchState, setSearchState] = useState20({ searchText: "", filter: "" });
+  const baseFilterPattern = useMemo17(
     // TODO make this contains once server supports it
     () => searchColumns.map((col) => `${col} starts "__VALUE__"`).join(" or "),
     [searchColumns]
   );
-  const handleChange = useCallback50(
+  const handleChange = useCallback44(
     (evt) => {
       const { value } = evt.target;
       const filter = baseFilterPattern.replaceAll("__VALUE__", value);
@@ -10772,8 +10503,8 @@ var useInstrumentSearch = ({
 };
 
 // src/instrument-search/InstrumentSearch.tsx
-import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
-var classBase21 = "vuuInstrumentSearch";
+import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
+var classBase22 = "vuuInstrumentSearch";
 if (typeof SearchCell2 !== "function") {
   console.warn("Instrument Search: SearchCell module not loaded ");
 }
@@ -10793,7 +10524,7 @@ var defaultTableConfig = {
   ],
   rowSeparators: true
 };
-var searchIcon = /* @__PURE__ */ jsx43("span", { "data-icon": "search" });
+var searchIcon = /* @__PURE__ */ jsx38("span", { "data-icon": "search" });
 var InstrumentSearch = ({
   TableProps: TableProps3,
   autoFocus = false,
@@ -10809,14 +10540,14 @@ var InstrumentSearch = ({
     searchColumns
   });
   const { highlightedIndexRef, onHighlight, onKeyDown, tableRef } = useControlledTableNavigation2(-1, (_a2 = dataSource == null ? void 0 : dataSource.size) != null ? _a2 : 0);
-  const searchCallbackRef = useCallback51((el) => {
+  const searchCallbackRef = useCallback45((el) => {
     setTimeout(() => {
       var _a3;
       (_a3 = el == null ? void 0 : el.querySelector("input")) == null ? void 0 : _a3.focus();
     }, 100);
   }, []);
-  return /* @__PURE__ */ jsxs23("div", { ...htmlAttributes, className: cx19(classBase21, className), children: [
-    /* @__PURE__ */ jsx43("div", { className: `${classBase21}-inputField`, children: /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsxs20("div", { ...htmlAttributes, className: cx20(classBase22, className), children: [
+    /* @__PURE__ */ jsx38("div", { className: `${classBase22}-inputField`, children: /* @__PURE__ */ jsx38(
       Input5,
       {
         inputProps: { onKeyDown },
@@ -10827,7 +10558,7 @@ var InstrumentSearch = ({
         onChange
       }
     ) }),
-    dataSource ? /* @__PURE__ */ jsx43(
+    dataSource ? /* @__PURE__ */ jsx38(
       Table2,
       {
         disableFocus: true,
@@ -10837,7 +10568,7 @@ var InstrumentSearch = ({
         highlightedIndex: highlightedIndexRef.current,
         renderBufferSize: 100,
         ...TableProps3,
-        className: `${classBase21}-list`,
+        className: `${classBase22}-list`,
         dataSource,
         navigationStyle: "row",
         onHighlight,
@@ -10856,10 +10587,10 @@ import {
   isValidNumber as isValidNumber5,
   numericFormatter
 } from "@vuu-ui/vuu-utils";
-import { memo, useMemo as useMemo20, useRef as useRef36 } from "react";
-import cx20 from "clsx";
-import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
-var classBase22 = "vuuPriceTicker";
+import { memo, useMemo as useMemo18, useRef as useRef35 } from "react";
+import cx21 from "clsx";
+import { jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
+var classBase23 = "vuuPriceTicker";
 var getValueFormatter = (decimals) => numericFormatter({
   type: {
     name: "number",
@@ -10878,14 +10609,14 @@ var PriceTicker = memo(
     showArrow,
     ...htmlAttributes
   }) => {
-    const ref = useRef36(INITIAL_VALUE);
+    const ref = useRef35(INITIAL_VALUE);
     const [prevValue, prevDirection] = ref.current;
-    const formatNumber = useMemo20(() => getValueFormatter(decimals), [decimals]);
+    const formatNumber = useMemo18(() => getValueFormatter(decimals), [decimals]);
     const direction = isValidNumber5(prevValue) ? getMovingValueDirection(price, prevDirection, prevValue, decimals) : "";
     ref.current = [price, direction];
-    return /* @__PURE__ */ jsxs24("div", { ...htmlAttributes, className: cx20(classBase22, className, direction), children: [
+    return /* @__PURE__ */ jsxs21("div", { ...htmlAttributes, className: cx21(classBase23, className, direction), children: [
       formatNumber(price),
-      showArrow ? /* @__PURE__ */ jsx44("span", { "data-icon": "price-arrow" }) : null
+      showArrow ? /* @__PURE__ */ jsx39("span", { "data-icon": "price-arrow" }) : null
     ] });
   }
 );
@@ -10893,14 +10624,14 @@ PriceTicker.displayName = "PriceTicker";
 
 // src/split-button/SplitButton.tsx
 import { PopupMenu as PopupMenu2 } from "@vuu-ui/vuu-popups";
-import { Button as Button5, useForkRef as useForkRef9 } from "@salt-ds/core";
-import { forwardRef as forwardRef24 } from "react";
+import { Button as Button4, useForkRef as useForkRef9 } from "@salt-ds/core";
+import { forwardRef as forwardRef23 } from "react";
 
 // src/split-button/useSplitButton.ts
 import { dispatchMouseEvent as dispatchMouseEvent2 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback52,
-  useRef as useRef37
+  useCallback as useCallback46,
+  useRef as useRef36
 } from "react";
 var focusTargetIsEditableLabel = (target) => {
   if (target.tagName === "INPUT") {
@@ -10911,12 +10642,12 @@ var focusTargetIsEditableLabel = (target) => {
 var useSplitButton = ({
   ButtonProps: ButtonPropsProp,
   PopupMenuProps: PopupMenuProps3,
-  classBase: classBase30,
+  classBase: classBase31,
   onClick
 }) => {
-  const buttonRef = useRef37(null);
-  const rootRef = useRef37(null);
-  const onMenuClose = useCallback52((reason) => {
+  const buttonRef = useRef36(null);
+  const rootRef = useRef36(null);
+  const onMenuClose = useCallback46((reason) => {
     var _a2;
     if ((reason == null ? void 0 : reason.type) !== "tab-away") {
       const buttonMain = (_a2 = rootRef.current) == null ? void 0 : _a2.querySelector(
@@ -10928,11 +10659,11 @@ var useSplitButton = ({
   const menuProps = {
     ...PopupMenuProps3,
     anchorElement: rootRef,
-    menuClassName: `${classBase30}-menu`,
+    menuClassName: `${classBase31}-menu`,
     onMenuClose,
     popupPlacement: "below-full-width"
   };
-  const handleRootFocus = useCallback52((evt) => {
+  const handleRootFocus = useCallback46((evt) => {
     const { current: splitButton } = rootRef;
     if (!(splitButton == null ? void 0 : splitButton.classList.contains("vuuFocusVisible"))) {
       splitButton == null ? void 0 : splitButton.classList.add("vuuFocusVisible");
@@ -10944,7 +10675,7 @@ var useSplitButton = ({
       }
     }
   }, []);
-  const handleRootBlur = useCallback52((evt) => {
+  const handleRootBlur = useCallback46((evt) => {
     const { current: splitButton } = rootRef;
     const target = evt.relatedTarget;
     if (!(splitButton == null ? void 0 : splitButton.contains(target))) {
@@ -10953,19 +10684,19 @@ var useSplitButton = ({
       }
     }
   }, []);
-  const handleButtonKeyDown = useCallback52(
+  const handleButtonKeyDown = useCallback46(
     (evt) => {
       var _a2;
       if (evt.key === "ArrowDown") {
         const popupTrigger = (_a2 = rootRef.current) == null ? void 0 : _a2.querySelector(
-          `.${classBase30}-trigger`
+          `.${classBase31}-trigger`
         );
         if (popupTrigger) {
           dispatchMouseEvent2(popupTrigger, "click");
         }
       }
     },
-    [classBase30]
+    [classBase31]
   );
   const ButtonProps6 = {
     ...ButtonPropsProp,
@@ -10983,10 +10714,10 @@ var useSplitButton = ({
 };
 
 // src/split-button/SplitButton.tsx
-import cx21 from "clsx";
-import { jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
-var classBase23 = "vuuSplitButton";
-var SplitButton = forwardRef24(
+import cx22 from "clsx";
+import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
+var classBase24 = "vuuSplitButton";
+var SplitButton = forwardRef23(
   function SplitButton2({
     ButtonProps: ButtonPropsProp,
     PopupMenuProps: PopupMenuPropsProp,
@@ -11002,39 +10733,39 @@ var SplitButton = forwardRef24(
     const { ButtonProps: ButtonProps6, buttonRef, rootRef, PopupMenuProps: PopupMenuProps3, ...rootProps } = useSplitButton({
       ButtonProps: ButtonPropsProp,
       PopupMenuProps: PopupMenuPropsProp,
-      classBase: classBase23,
+      classBase: classBase24,
       onClick,
       segmented
     });
-    return /* @__PURE__ */ jsxs25(
+    return /* @__PURE__ */ jsxs22(
       "div",
       {
         ...htmlAttributes,
         ...rootProps,
-        className: cx21(classBase23, `${classBase23}-${variant}`, className, {
-          [`${classBase23}-disabled`]: disabled,
-          [`${classBase23}-segmented`]: segmented
+        className: cx22(classBase24, `${classBase24}-${variant}`, className, {
+          [`${classBase24}-disabled`]: disabled,
+          [`${classBase24}-segmented`]: segmented
         }),
         ref: useForkRef9(forwardedRef, rootRef),
         "data-showcase-center": true,
         tabIndex: -1,
         children: [
-          /* @__PURE__ */ jsx45(
-            Button5,
+          /* @__PURE__ */ jsx40(
+            Button4,
             {
               ...ButtonProps6,
-              className: `${classBase23}-main`,
+              className: `${classBase24}-main`,
               disabled,
               ref: buttonRef,
               variant,
               children
             }
           ),
-          /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx40(
             PopupMenu2,
             {
               ...PopupMenuProps3,
-              className: `${classBase23}-trigger`,
+              className: `${classBase24}-trigger`,
               disabled,
               icon: (_a2 = PopupMenuProps3 == null ? void 0 : PopupMenuProps3.icon) != null ? _a2 : "chevron-down",
               tabIndex: segmented ? 0 : -1,
@@ -11048,17 +10779,17 @@ var SplitButton = forwardRef24(
 );
 
 // src/split-button/SplitStateButton.tsx
-import cx22 from "clsx";
-import { forwardRef as forwardRef25 } from "react";
-import { jsx as jsx46 } from "react/jsx-runtime";
-var classBase24 = "vuuSplitStateButton";
-var SplitStateButton = forwardRef25(function SplitStateButton2({ className, selected, ...splitButtonProps }, forwardedRef) {
-  return /* @__PURE__ */ jsx46(
+import cx23 from "clsx";
+import { forwardRef as forwardRef24 } from "react";
+import { jsx as jsx41 } from "react/jsx-runtime";
+var classBase25 = "vuuSplitStateButton";
+var SplitStateButton = forwardRef24(function SplitStateButton2({ className, selected, ...splitButtonProps }, forwardedRef) {
+  return /* @__PURE__ */ jsx41(
     SplitButton,
     {
       ...splitButtonProps,
       "aria-checked": selected,
-      className: cx22(classBase24, className),
+      className: cx23(classBase25, className),
       ref: forwardedRef
     }
   );
@@ -11066,14 +10797,14 @@ var SplitStateButton = forwardRef25(function SplitStateButton2({ className, sele
 
 // src/tabstrip/Tabstrip.tsx
 import { asReactElements as asReactElements2, useId as useId9 } from "@vuu-ui/vuu-utils";
-import cx23 from "clsx";
-import React4, { useMemo as useMemo22, useRef as useRef41 } from "react";
+import cx24 from "clsx";
+import React3, { useMemo as useMemo20, useRef as useRef40 } from "react";
 
 // src/tabstrip/useTabstrip.ts
 import { dispatchMouseEvent as dispatchMouseEvent4 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback56,
-  useRef as useRef40
+  useCallback as useCallback50,
+  useRef as useRef39
 } from "react";
 
 // src/tabstrip/TabMenuOptions.ts
@@ -11107,22 +10838,22 @@ var getIndexOfEditedItem = (container) => getIndexOfItem(container, ".vuuEditabl
 
 // src/tabstrip/useAnimatedSelectionThumb.ts
 import { isValidNumber as isValidNumber6, MEASURES as MEASURES2 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback53, useMemo as useMemo21, useRef as useRef38 } from "react";
+import { useCallback as useCallback47, useMemo as useMemo19, useRef as useRef37 } from "react";
 var useAnimatedSelectionThumb = (containerRef, activeTabIndex, orientation = "horizontal") => {
-  const animationSuspendedRef = useRef38(false);
-  const suspendAnimation = useCallback53(() => {
+  const animationSuspendedRef = useRef37(false);
+  const suspendAnimation = useCallback47(() => {
     animationSuspendedRef.current = true;
   }, []);
-  const resumeAnimation = useCallback53(() => {
+  const resumeAnimation = useCallback47(() => {
     animationSuspendedRef.current = false;
   }, []);
-  const onTransitionEnd = useCallback53(() => {
+  const onTransitionEnd = useCallback47(() => {
     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 = useRef38(-1);
-  return useMemo21(() => {
+  const lastSelectedRef = useRef37(-1);
+  return useMemo19(() => {
     var _a2, _b;
     let offset = 0;
     let size = 0;
@@ -11196,9 +10927,9 @@ import {
   getFocusableElement
 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback54,
-  useRef as useRef39,
-  useState as useState23
+  useCallback as useCallback48,
+  useRef as useRef38,
+  useState as useState21
 } from "react";
 import {
   ArrowDown as ArrowDown2,
@@ -11256,23 +10987,23 @@ var useKeyboardNavigation2 = ({
   selectedIndex: selectedTabIndex = 0
 }) => {
   const manualActivation = keyBoardActivation === "manual";
-  const mouseClickPending = useRef39(false);
-  const focusedRef = useRef39(-1);
-  const [hasFocus, setHasFocus] = useState23(false);
-  const [, forceRefresh] = useState23({});
+  const mouseClickPending = useRef38(false);
+  const focusedRef = useRef38(-1);
+  const [hasFocus, setHasFocus] = useState21(false);
+  const [, forceRefresh] = useState21({});
   const [highlightedIdx, _setHighlightedIdx] = useControlled9({
     controlled: highlightedIdxProp,
     default: defaultHighlightedIdx,
     name: "UseKeyboardNavigation"
   });
-  const setHighlightedIdx = useCallback54(
+  const setHighlightedIdx = useCallback48(
     (value) => {
       _setHighlightedIdx(focusedRef.current = value);
     },
     [_setHighlightedIdx]
   );
-  const keyboardNavigation = useRef39(false);
-  const focusTab = useCallback54(
+  const keyboardNavigation = useRef38(false);
+  const focusTab = useCallback48(
     (tabIndex, immediateFocus = false, withKeyboard, delay = 70) => {
       setHighlightedIdx(tabIndex);
       if (withKeyboard === true && !keyboardNavigation.current) {
@@ -11312,14 +11043,14 @@ var useKeyboardNavigation2 = ({
       }
     }
   };
-  const getIndexCount = useCallback54(
+  const getIndexCount = useCallback48(
     () => {
       var _a2, _b;
       return (_b = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelectorAll(`[data-index]`).length) != null ? _b : 0;
     },
     [containerRef]
   );
-  const nextFocusableItemIdx = useCallback54(
+  const nextFocusableItemIdx = useCallback48(
     (direction = "fwd", idx) => {
       const indexCount = getIndexCount();
       const index = typeof idx === "number" ? idx : indexCount;
@@ -11339,7 +11070,7 @@ var useKeyboardNavigation2 = ({
     },
     [containerRef, getIndexCount]
   );
-  const navigateChildItems = useCallback54(
+  const navigateChildItems = useCallback48(
     (e, forceFocusVisible = false) => {
       const direction = navigation[orientation][e.key];
       const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
@@ -11361,14 +11092,14 @@ var useKeyboardNavigation2 = ({
       orientation
     ]
   );
-  const highlightedTabHasMenu = useCallback54(() => {
+  const highlightedTabHasMenu = useCallback48(() => {
     const el = getElementByPosition(containerRef.current, highlightedIdx);
     if (el) {
       return el.querySelector(".vuuPopupMenu") != null;
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const activateTabMenu = useCallback54(() => {
+  const activateTabMenu = useCallback48(() => {
     const el = getElementByPosition(containerRef.current, highlightedIdx);
     const menuEl = el == null ? void 0 : el.querySelector(".vuuPopupMenu");
     if (menuEl) {
@@ -11376,7 +11107,7 @@ var useKeyboardNavigation2 = ({
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const handleKeyDown = useCallback54(
+  const handleKeyDown = useCallback48(
     (e) => {
       if (getIndexCount() > 0 && isNavigationKey2(e.key, orientation)) {
         e.preventDefault();
@@ -11401,7 +11132,7 @@ var useKeyboardNavigation2 = ({
   const handleItemClick = (_, tabIndex) => {
     setHighlightedIdx(tabIndex);
   };
-  const handleFocus = useCallback54(() => {
+  const handleFocus = useCallback48(() => {
     if (!hasFocus) {
       setHasFocus(true);
       if (!mouseClickPending.current) {
@@ -11411,7 +11142,7 @@ var useKeyboardNavigation2 = ({
       }
     }
   }, [hasFocus]);
-  const handleContainerMouseDown = useCallback54(() => {
+  const handleContainerMouseDown = useCallback48(() => {
     if (!hasFocus) {
       mouseClickPending.current = true;
     }
@@ -11449,7 +11180,7 @@ var useKeyboardNavigation2 = ({
 
 // src/tabstrip/useSelection.ts
 import { useControlled as useControlled10 } from "@salt-ds/core";
-import { useCallback as useCallback55 } from "react";
+import { useCallback as useCallback49 } from "react";
 var defaultSelectionKeys2 = ["Enter", " "];
 var isTabElement = (el) => el && el.matches('[class*="vuuTab "]');
 var useSelection2 = ({
@@ -11464,18 +11195,18 @@ var useSelection2 = ({
     name: "Tabstrip",
     state: "value"
   });
-  const isSelectionEvent = useCallback55(
+  const isSelectionEvent = useCallback49(
     (evt) => defaultSelectionKeys2.includes(evt.key),
     []
   );
-  const selectItem = useCallback55(
+  const selectItem = useCallback49(
     (tabIndex) => {
       setSelected(tabIndex);
       onSelectionChange == null ? void 0 : onSelectionChange(tabIndex);
     },
     [onSelectionChange, setSelected]
   );
-  const handleKeyDown = useCallback55(
+  const handleKeyDown = useCallback49(
     (e) => {
       const targetElement = e.target;
       if (isSelectionEvent(e) && highlightedIdx !== selected && isTabElement(targetElement)) {
@@ -11486,7 +11217,7 @@ var useSelection2 = ({
     },
     [isSelectionEvent, highlightedIdx, selected, selectItem]
   );
-  const onClick = useCallback55(
+  const onClick = useCallback49(
     (e, tabIndex) => {
       if (tabIndex !== selected) {
         selectItem(tabIndex);
@@ -11526,7 +11257,7 @@ var useTabstrip = ({
   orientation,
   keyBoardActivation
 }) => {
-  const lastSelection = useRef40(activeTabIndexProp);
+  const lastSelection = useRef39(activeTabIndexProp);
   const {
     focusTab: keyboardHookFocusTab,
     highlightedIdx,
@@ -11556,7 +11287,7 @@ var useTabstrip = ({
     animateSelectionThumb ? selectionHookSelected : -1,
     orientation
   );
-  const handleDrop = useCallback56(
+  const handleDrop = useCallback50(
     ({ fromIndex, toIndex }) => {
       const { current: selected } = lastSelection;
       console.log(
@@ -11598,7 +11329,7 @@ var useTabstrip = ({
     orientation: "horizontal",
     itemQuery: ".vuuOverflowContainer-item"
   });
-  const handleExitEditMode = useCallback56(
+  const handleExitEditMode = useCallback50(
     (originalValue, editedValue, allowDeactivation, tabIndex) => {
       console.log(
         `handleExitEditMode ${originalValue} ${editedValue} ${allowDeactivation} ${tabIndex}`
@@ -11610,7 +11341,7 @@ var useTabstrip = ({
     },
     [keyboardHookFocusTab, onExitEditMode]
   );
-  const handleClick = useCallback56(
+  const handleClick = useCallback50(
     (evt, tabIndex) => {
       keyboardHookHandleClick(evt, tabIndex);
       selectionHookHandleClick(evt, tabIndex);
@@ -11618,7 +11349,7 @@ var useTabstrip = ({
     // [dragDropHook.isDragging, keyboardHook, selectionHook]
     [keyboardHookHandleClick, selectionHookHandleClick]
   );
-  const getEditableLabel = useCallback56(
+  const getEditableLabel = useCallback50(
     (tabIndex = highlightedIdx) => {
       const targetEl = getElementWithIndex(containerRef.current, tabIndex);
       if (targetEl) {
@@ -11627,7 +11358,7 @@ var useTabstrip = ({
     },
     [containerRef, highlightedIdx]
   );
-  const tabInEditMode = useCallback56(
+  const tabInEditMode = useCallback50(
     (tabIndex = highlightedIdx) => {
       const editableLabel = getEditableLabel(tabIndex);
       if (editableLabel) {
@@ -11637,7 +11368,7 @@ var useTabstrip = ({
     },
     [getEditableLabel, highlightedIdx]
   );
-  const editTab = useCallback56(
+  const editTab = useCallback50(
     (tabIndex = highlightedIdx) => {
       const editableLabelEl = getEditableLabel(tabIndex);
       if (editableLabelEl) {
@@ -11646,7 +11377,7 @@ var useTabstrip = ({
     },
     [getEditableLabel, highlightedIdx]
   );
-  const handleKeyDown = useCallback56(
+  const handleKeyDown = useCallback50(
     (evt) => {
       keyboardHookHandleKeyDown(evt);
       if (!evt.defaultPrevented) {
@@ -11658,7 +11389,7 @@ var useTabstrip = ({
     },
     [editTab, keyboardHookHandleKeyDown, selectionHookHandleKeyDown]
   );
-  const handleCloseTabFromMenu = useCallback56(
+  const handleCloseTabFromMenu = useCallback50(
     (tabIndex) => {
       const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);
       const newActiveTabIndex = selectedTabIndex > tabIndex ? selectedTabIndex - 1 : selectedTabIndex === tabIndex ? 0 : selectedTabIndex;
@@ -11671,14 +11402,14 @@ var useTabstrip = ({
     },
     [containerRef, onCloseTab, resumeAnimation, suspendAnimation]
   );
-  const handleRenameTabFromMenu = useCallback56(
+  const handleRenameTabFromMenu = useCallback50(
     (tabIndex) => {
       editTab(tabIndex);
       return true;
     },
     [editTab]
   );
-  const handleTabMenuAction = useCallback56(
+  const handleTabMenuAction = useCallback50(
     (action) => {
       if (isTabMenuOptions(action.options)) {
         switch (action.menuId) {
@@ -11694,7 +11425,7 @@ var useTabstrip = ({
     },
     [handleCloseTabFromMenu, handleRenameTabFromMenu]
   );
-  const handleTabMenuClose = useCallback56(() => {
+  const handleTabMenuClose = useCallback50(() => {
     if (!tabInEditMode()) {
       keyboardHookFocusTab(highlightedIdx);
     } else {
@@ -11706,7 +11437,7 @@ var useTabstrip = ({
     keyboardHookSetHighlightedIndex,
     tabInEditMode
   ]);
-  const onSwitchWrappedItemIntoView = useCallback56(
+  const onSwitchWrappedItemIntoView = useCallback50(
     (item) => {
       const index = parseInt(item.index);
       if (!isNaN(index)) {
@@ -11719,7 +11450,7 @@ var useTabstrip = ({
     onFocus: keyboardHook.onFocus,
     onKeyDown: handleKeyDown
   };
-  const handleAddTabClick = useCallback56(() => {
+  const handleAddTabClick = useCallback50(() => {
     onAddTab == null ? void 0 : onAddTab();
     requestAnimationFrame(() => {
       const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);
@@ -11752,9 +11483,9 @@ var useTabstrip = ({
 };
 
 // src/tabstrip/Tabstrip.tsx
-import { Fragment as Fragment4, jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
-var classBase25 = "vuuTabstrip";
+var classBase26 = "vuuTabstrip";
 var Tabstrip = ({
   activeTabIndex: activeTabIndexProp,
   allowAddTab,
@@ -11779,7 +11510,7 @@ var Tabstrip = ({
   variant = "secondary",
   ...htmlAttributes
 }) => {
-  const rootRef = useRef41(null);
+  const rootRef = useRef40(null);
   const {
     activeTabIndex,
     focusVisible,
@@ -11802,12 +11533,12 @@ var Tabstrip = ({
     orientation
   });
   const id = useId9(idProp);
-  const className = cx23(classBase25, classNameProp);
+  const className = cx24(classBase26, classNameProp);
   const style = styleProp || containerStyle ? {
     ...styleProp,
     ...containerStyle
   } : void 0;
-  const tabs = useMemo22(
+  const tabs = useMemo20(
     () => asReactElements2(children).map((child, index) => {
       const {
         id: tabId = `${id}-tab-${index}`,
@@ -11818,10 +11549,10 @@ var Tabstrip = ({
         showMenuButton = showTabMenuButton
       } = child.props;
       const selected = index === activeTabIndex;
-      return React4.cloneElement(child, {
+      return React3.cloneElement(child, {
         ...tabProps,
         ...tabstripHook.navigationProps,
-        className: cx23(className2, tabClassName),
+        className: cx24(className2, tabClassName),
         closeable,
         "data-overflow-priority": selected ? "1" : void 0,
         dragging: draggedItemIndex === index,
@@ -11830,7 +11561,7 @@ var Tabstrip = ({
         id: tabId,
         index,
         key: index,
-        location: cx23(location, tabLocation),
+        location: cx24(location, tabLocation),
         selected,
         showMenuButton,
         tabIndex: selected ? 0 : -1
@@ -11841,7 +11572,7 @@ var Tabstrip = ({
         {
           ...tabstripHook.navigationProps,
           "aria-label": "Create Tab",
-          className: `${classBase25}-addTabButton`,
+          className: `${classBase26}-addTabButton`,
           "data-embedded": true,
           icon: "add",
           "data-overflow-priority": "1",
@@ -11869,13 +11600,13 @@ var Tabstrip = ({
       location
     ]
   );
-  return /* @__PURE__ */ jsxs26(Fragment4, { children: [
-    /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsxs23(Fragment4, { children: [
+    /* @__PURE__ */ jsx42(
       OverflowContainer,
       {
         ...htmlAttributes,
         ...tabstripHook.containerProps,
-        className: cx23(className, `${classBase25}-${variant}`),
+        className: cx24(className, `${classBase26}-${variant}`),
         id,
         orientation,
         overflowIcon: "more-horiz",
@@ -11891,19 +11622,19 @@ var Tabstrip = ({
 
 // src/tabstrip/Tab.tsx
 import { useForkRef as useForkRef10 } from "@salt-ds/core";
-import cx25 from "clsx";
+import cx26 from "clsx";
 import {
-  forwardRef as forwardRef26,
-  useCallback as useCallback57,
-  useRef as useRef42
+  forwardRef as forwardRef25,
+  useCallback as useCallback51,
+  useRef as useRef41
 } from "react";
 
 // src/tabstrip/TabMenu.tsx
 import { PopupMenu as PopupMenu3 } from "@vuu-ui/vuu-popups";
-import { useMemo as useMemo23 } from "react";
-import cx24 from "clsx";
-import { jsx as jsx48 } from "react/jsx-runtime";
-var classBase26 = "vuuTabMenu";
+import { useMemo as useMemo21 } from "react";
+import cx25 from "clsx";
+import { jsx as jsx43 } from "react/jsx-runtime";
+var classBase27 = "vuuTabMenu";
 var TabMenu = ({
   allowClose,
   allowRename,
@@ -11914,7 +11645,7 @@ var TabMenu = ({
   onMenuClose,
   index
 }) => {
-  const [menuBuilder, menuOptions] = useMemo23(
+  const [menuBuilder, menuOptions] = useMemo21(
     () => [
       (_location, options) => {
         const menuItems = [];
@@ -11940,15 +11671,15 @@ var TabMenu = ({
       index
     ]
   );
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx43(
     PopupMenu3,
     {
       "aria-label": "context menu",
-      className: classBase26,
+      className: classBase27,
       "data-embedded": true,
       menuBuilder,
       menuActionHandler: onMenuAction,
-      menuLocation: cx24("tab", location),
+      menuLocation: cx25("tab", location),
       menuOptions,
       onMenuClose,
       tabIndex: -1
@@ -11957,10 +11688,10 @@ var TabMenu = ({
 };
 
 // src/tabstrip/Tab.tsx
-import { jsx as jsx49, jsxs as jsxs27 } from "react/jsx-runtime";
-var classBase27 = "vuuTab";
+import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
+var classBase28 = "vuuTab";
 var noop2 = () => void 0;
-var Tab = forwardRef26(function Tab2({
+var Tab = forwardRef25(function Tab2({
   ariaControls,
   children,
   className,
@@ -11989,10 +11720,10 @@ var Tab = forwardRef26(function Tab2({
   if (showMenuButton && typeof onMenuAction !== "function") {
     throw Error("Tab onMenuAction must be provided if showMenuButton is set");
   }
-  const rootRef = useRef42(null);
-  const editableRef = useRef42(null);
+  const rootRef = useRef41(null);
+  const editableRef = useRef41(null);
   const setForkRef = useForkRef10(ref, rootRef);
-  const handleClick = useCallback57(
+  const handleClick = useCallback51(
     (e) => {
       if (!editing) {
         e.preventDefault();
@@ -12017,7 +11748,7 @@ var Tab = forwardRef26(function Tab2({
   };
   const getLabel = () => {
     if (editable) {
-      return /* @__PURE__ */ jsx49(
+      return /* @__PURE__ */ jsx44(
         EditableLabel,
         {
           editing,
@@ -12042,18 +11773,18 @@ var Tab = forwardRef26(function Tab2({
     }
     onFocusProp == null ? void 0 : onFocusProp(evt);
   };
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       ...props,
       "aria-controls": ariaControls,
       "aria-selected": selected,
-      className: cx25(classBase27, className, {
-        [`${classBase27}-closeable`]: closeable,
+      className: cx26(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,
@@ -12063,15 +11794,15 @@ var Tab = forwardRef26(function Tab2({
       role: "tab",
       tabIndex,
       children: [
-        /* @__PURE__ */ jsx49("div", { className: `${classBase27}-main`, children: /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx44("div", { className: `${classBase28}-main`, children: /* @__PURE__ */ jsx44(
           "span",
           {
-            className: `${classBase27}-text`,
+            className: `${classBase28}-text`,
             "data-text": editable ? void 0 : label,
             children: children != null ? children : getLabel()
           }
         ) }),
-        showMenuButton ? /* @__PURE__ */ jsx49(
+        showMenuButton ? /* @__PURE__ */ jsx44(
           TabMenu,
           {
             allowClose: closeable,
@@ -12091,14 +11822,14 @@ var Tab = forwardRef26(function Tab2({
 
 // src/toolbar/Toolbar.tsx
 import { asReactElements as asReactElements3, useId as useId10 } from "@vuu-ui/vuu-utils";
-import cx26 from "clsx";
-import React5, { useMemo as useMemo24, useRef as useRef45 } from "react";
+import cx27 from "clsx";
+import React4, { useMemo as useMemo22, useRef as useRef44 } from "react";
 
 // src/toolbar/useToolbar.ts
 import { isValidNumber as isValidNumber7 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback60,
-  useRef as useRef44
+  useCallback as useCallback54,
+  useRef as useRef43
 } from "react";
 
 // src/toolbar/useKeyboardNavigation.ts
@@ -12110,9 +11841,9 @@ import {
   getFocusableElement as getFocusableElement2
 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback58,
-  useRef as useRef43,
-  useState as useState24
+  useCallback as useCallback52,
+  useRef as useRef42,
+  useState as useState22
 } from "react";
 import {
   ArrowDown as ArrowDown3,
@@ -12219,22 +11950,22 @@ var useKeyboardNavigation3 = ({
   onNavigateOutOfBounds,
   orientation
 }) => {
-  const mouseClickPending = useRef43(false);
-  const focusedRef = useRef43(-1);
-  const [hasFocus, setHasFocus] = useState24(false);
+  const mouseClickPending = useRef42(false);
+  const focusedRef = useRef42(-1);
+  const [hasFocus, setHasFocus] = useState22(false);
   const [highlightedIdx, _setHighlightedIdx] = useControlled11({
     controlled: highlightedIdxProp,
     default: defaultHighlightedIdx,
     name: "UseKeyboardNavigation"
   });
-  const setHighlightedIdx = useCallback58(
+  const setHighlightedIdx = useCallback52(
     (value) => {
       _setHighlightedIdx(focusedRef.current = value);
     },
     [_setHighlightedIdx]
   );
-  const keyboardNavigation = useRef43(false);
-  const focusItem = useCallback58(
+  const keyboardNavigation = useRef42(false);
+  const focusItem = useCallback52(
     (itemIndex, immediateFocus = false, withKeyboard, delay = 70) => {
       console.log(`focus item ${itemIndex}`);
       setHighlightedIdx(itemIndex);
@@ -12276,14 +12007,14 @@ var useKeyboardNavigation3 = ({
       }
     }
   };
-  const getIndexCount = useCallback58(
+  const getIndexCount = useCallback52(
     () => {
       var _a2, _b;
       return (_b = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelectorAll(`[data-index]`).length) != null ? _b : 0;
     },
     [containerRef]
   );
-  const nextFocusableItemIdx = useCallback58(
+  const nextFocusableItemIdx = useCallback52(
     (direction = "fwd", idx) => {
       var _a2;
       const indexCount = getIndexCount();
@@ -12311,7 +12042,7 @@ var useKeyboardNavigation3 = ({
     },
     [containerRef, getIndexCount]
   );
-  const navigateChildItems = useCallback58(
+  const navigateChildItems = useCallback52(
     (e) => {
       const direction = navigation2[orientation][e.key];
       const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
@@ -12331,21 +12062,21 @@ var useKeyboardNavigation3 = ({
       onNavigateOutOfBounds
     ]
   );
-  const highlightedItemHasMenu = useCallback58(() => {
+  const highlightedItemHasMenu = useCallback52(() => {
     const el = getElementByPosition2(containerRef.current, highlightedIdx);
     if (el) {
       return el.querySelector(".vuuPopupMenu") != null;
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const highlightedItemInEditState = useCallback58(() => {
+  const highlightedItemInEditState = useCallback52(() => {
     const el = getElementByPosition2(containerRef.current, highlightedIdx);
     if (el) {
       return el.querySelector(".vuuEditableLabel-input") != null;
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const activateItemMenu = useCallback58(() => {
+  const activateItemMenu = useCallback52(() => {
     const el = getElementByPosition2(containerRef.current, highlightedIdx);
     const menuEl = el == null ? void 0 : el.querySelector(".vuuPopupMenu");
     if (menuEl) {
@@ -12353,7 +12084,7 @@ var useKeyboardNavigation3 = ({
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const handleKeyDown = useCallback58(
+  const handleKeyDown = useCallback52(
     (e) => {
       if (getIndexCount() > 0 && isNavigationKey3(e.key, orientation)) {
         e.preventDefault();
@@ -12379,7 +12110,7 @@ var useKeyboardNavigation3 = ({
   const handleItemClick = (_, itemIndex) => {
     setHighlightedIdx(itemIndex);
   };
-  const handleFocus = useCallback58(() => {
+  const handleFocus = useCallback52(() => {
     if (!hasFocus) {
       setHasFocus(true);
       if (!mouseClickPending.current) {
@@ -12389,13 +12120,13 @@ var useKeyboardNavigation3 = ({
       }
     }
   }, [hasFocus]);
-  const handleContainerMouseDown = useCallback58(() => {
+  const handleContainerMouseDown = useCallback52(() => {
     if (!hasFocus) {
       mouseClickPending.current = true;
     }
     keyboardNavigation.current = false;
   }, [hasFocus]);
-  const handleOverflowMenuClose = useCallback58(
+  const handleOverflowMenuClose = useCallback52(
     (closeReason) => {
       if ((closeReason == null ? void 0 : closeReason.type) === "escape") {
         const index = getIndexOfOverflowItem(containerRef.current);
@@ -12440,7 +12171,7 @@ var useKeyboardNavigation3 = ({
 
 // src/toolbar/useSelection.ts
 import { isSelectableElement as isSelectableElement2, getClosestIndexItem } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback59 } from "react";
+import { useCallback as useCallback53 } from "react";
 var defaultSelectionKeys3 = ["Enter", " "];
 var NO_SELECTION_HANDLERS = {};
 var useSelection3 = ({
@@ -12456,11 +12187,11 @@ var useSelection3 = ({
     name: "useSelection",
     state: "selected"
   });
-  const isSelectionEvent = useCallback59(
+  const isSelectionEvent = useCallback53(
     (evt) => defaultSelectionKeys3.includes(evt.key),
     []
   );
-  const selectItem = useCallback59(
+  const selectItem = useCallback53(
     (itemIndex, specialKey = false) => {
       const newSelected = allowMultipleSelection(selectionStrategy, specialKey) ? selected.concat(itemIndex) : [itemIndex];
       setSelected(newSelected);
@@ -12468,7 +12199,7 @@ var useSelection3 = ({
     },
     [onSelectionChange, selected, selectionStrategy, setSelected]
   );
-  const deselectItem = useCallback59(
+  const deselectItem = useCallback53(
     (itemIndex, specialKey = false) => {
       const newSelected = selectionStrategy === "deselectable" || selectionStrategy === "multiple-special-key" && !specialKey ? [] : selected.filter((index) => index !== itemIndex);
       setSelected(newSelected);
@@ -12476,7 +12207,7 @@ var useSelection3 = ({
     },
     [onSelectionChange, selected, selectionStrategy, setSelected]
   );
-  const handleKeyDown = useCallback59(
+  const handleKeyDown = useCallback53(
     (e) => {
       if (isSelectionEvent(e) && isSelectableElement2(e.target)) {
         if (!selected.includes(highlightedIdx)) {
@@ -12499,7 +12230,7 @@ var useSelection3 = ({
       deselectItem
     ]
   );
-  const handleClick = useCallback59(
+  const handleClick = useCallback53(
     (e, itemIndex) => {
       const element = getClosestIndexItem(e.target);
       if (isSelectableElement2(element)) {
@@ -12535,7 +12266,7 @@ var useToolbar = ({
   orientation,
   selectionStrategy
 }) => {
-  const lastSelection = useRef44(activeItemIndexProp);
+  const lastSelection = useRef43(activeItemIndexProp);
   const {
     focusItem: keyboardHookFocusItem,
     highlightedIdx,
@@ -12562,7 +12293,7 @@ var useToolbar = ({
     selectionStrategy
   });
   lastSelection.current = selectionHookSelected;
-  const handleClick = useCallback60(
+  const handleClick = useCallback54(
     (evt) => {
       var _a2;
       const target = evt.target;
@@ -12577,7 +12308,7 @@ var useToolbar = ({
     },
     [keyboardHookHandleClick, onClick]
   );
-  const handleKeyDown = useCallback60(
+  const handleKeyDown = useCallback54(
     (evt) => {
       keyboardHookHandleKeyDown(evt);
       if (!evt.defaultPrevented) {
@@ -12586,7 +12317,7 @@ var useToolbar = ({
     },
     [keyboardHookHandleKeyDown, onKeyDown]
   );
-  const onSwitchWrappedItemIntoView = useCallback60(
+  const onSwitchWrappedItemIntoView = useCallback54(
     (item) => {
       const index = parseInt(item.index);
       if (!isNaN(index)) {
@@ -12618,8 +12349,8 @@ var useToolbar = ({
 };
 
 // src/toolbar/Toolbar.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
-var classBase28 = "vuuToolbar";
+import { jsx as jsx45 } from "react/jsx-runtime";
+var classBase29 = "vuuToolbar";
 var Toolbar = ({
   activeItemIndex: activeItemIndexProp,
   alignItems = "start",
@@ -12634,7 +12365,7 @@ var Toolbar = ({
   showSeparators = false,
   ...props
 }) => {
-  const rootRef = useRef45(null);
+  const rootRef = useRef44(null);
   const {
     activeItemIndex,
     focusableIdx,
@@ -12651,7 +12382,7 @@ var Toolbar = ({
     selectionStrategy
   });
   const id = useId10(idProp);
-  const items = useMemo24(
+  const items = useMemo22(
     () => asReactElements3(children).map((child, index) => {
       const {
         id: itemId = `${id}-tab-${index}`,
@@ -12659,9 +12390,9 @@ var Toolbar = ({
         ...ownProps
       } = child.props;
       const selected = activeItemIndex.includes(index);
-      return React5.cloneElement(child, {
+      return React4.cloneElement(child, {
         ...forwardCallbackProps(ownProps, itemProps),
-        className: cx26("vuuToolbarItem", itemClassName),
+        className: cx27("vuuToolbarItem", itemClassName),
         "data-overflow-priority": selected ? "1" : void 0,
         id: itemId,
         key: index,
@@ -12671,15 +12402,15 @@ var Toolbar = ({
     }),
     [activeItemIndex, children, focusableIdx, id, itemProps]
   );
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx45(
     OverflowContainer,
     {
       ...props,
       ...toolbarHook.containerProps,
-      className: cx26(className, classBase28, `${classBase28}-${orientation}`, {
-        [`${classBase28}-alignCenter`]: alignItems === "center",
-        [`${classBase28}-alignEnd`]: alignItems === "end",
-        [`${classBase28}-withSeparators`]: showSeparators
+      className: cx27(className, classBase29, `${classBase29}-${orientation}`, {
+        [`${classBase29}-alignCenter`]: alignItems === "center",
+        [`${classBase29}-alignEnd`]: alignItems === "end",
+        [`${classBase29}-withSeparators`]: showSeparators
       }),
       ...props,
       ref: rootRef,
@@ -12690,10 +12421,10 @@ var Toolbar = ({
 
 // src/tree/Tree.tsx
 import { useForkRef as useForkRef11, useIdMemo as useId11 } from "@salt-ds/core";
-import cx27 from "clsx";
+import cx28 from "clsx";
 import {
-  forwardRef as forwardRef27,
-  useRef as useRef52
+  forwardRef as forwardRef26,
+  useRef as useRef51
 } from "react";
 
 // src/tree/list-dom-utils.ts
@@ -12712,7 +12443,7 @@ var closestListItem2 = (el) => el.closest("[data-idx],[aria-posinset]");
 var closestListItemIndex2 = (el) => listItemIndex2(closestListItem2(el));
 
 // src/tree/use-items-with-ids.ts
-import { useCallback as useCallback61, useMemo as useMemo25 } from "react";
+import { useCallback as useCallback55, useMemo as useMemo23 } from "react";
 var PathSeparators2 = /* @__PURE__ */ new Set(["/", "-", "."]);
 var isPathSeparator2 = (char) => PathSeparators2.has(char);
 var isParentPath2 = (parentPath, childPath) => childPath.startsWith(parentPath) && isPathSeparator2(childPath[parentPath.length]);
@@ -12736,7 +12467,7 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
       return 0;
     }
   };
-  const isExpanded2 = useCallback61(
+  const isExpanded2 = useCallback55(
     (path) => {
       if (Array.isArray(revealSelected)) {
         return revealSelected.some((id) => isParentPath2(path, id));
@@ -12745,7 +12476,7 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
     },
     [defaultExpanded, revealSelected]
   );
-  const normalizeItems = useCallback61(
+  const normalizeItems = useCallback55(
     (items, indexer, level = 1, path = "", results = [], flattenedSource2 = []) => {
       let count2 = 0;
       items.forEach((item, i, all) => {
@@ -12789,10 +12520,10 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
     },
     [collapsibleHeaders, idRoot, isExpanded2]
   );
-  const [count, sourceWithIds, flattenedSource] = useMemo25(() => {
+  const [count, sourceWithIds, flattenedSource] = useMemo23(() => {
     return normalizeItems(sourceProp, { index: 0 });
   }, [normalizeItems, sourceProp]);
-  const sourceItemById = useCallback61(
+  const sourceItemById = useCallback55(
     (id, target = sourceWithIds) => {
       const sourceWithId = target.find(
         (i) => {
@@ -12813,8 +12544,8 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
 
 // src/tree/use-selection.ts
 import {
-  useCallback as useCallback62,
-  useRef as useRef46
+  useCallback as useCallback56,
+  useRef as useRef45
 } from "react";
 import { useControlled as useControlled12 } from "@salt-ds/core";
 var SINGLE = "single";
@@ -12837,8 +12568,8 @@ var useSelection4 = ({
   const singleSelect = selection === SINGLE;
   const multiSelect = selection === MULTI || selection.startsWith(CHECKBOX2);
   const extendedSelect = selection === EXTENDED;
-  const lastActive = useRef46(-1);
-  const isSelectionEvent = useCallback62(
+  const lastActive = useRef45(-1);
+  const isSelectionEvent = useCallback56(
     (evt) => selectionKeys.includes(evt.key),
     [selectionKeys]
   );
@@ -12847,7 +12578,7 @@ var useSelection4 = ({
     default: defaultSelected != null ? defaultSelected : [],
     name: "selected"
   });
-  const selectItemAtIndex = useCallback62(
+  const selectItemAtIndex = useCallback56(
     (evt, idx, id, rangeSelect, preserveExistingSelection = false) => {
       const { current: active } = lastActive;
       const isSelected2 = selected == null ? void 0 : selected.includes(id);
@@ -12888,7 +12619,7 @@ var useSelection4 = ({
       singleSelect
     ]
   );
-  const handleKeyDown = useCallback62(
+  const handleKeyDown = useCallback56(
     (evt) => {
       if (~highlightedIdx && isSelectionEvent(evt)) {
         evt.preventDefault();
@@ -12913,7 +12644,7 @@ var useSelection4 = ({
       selectItemAtIndex
     ]
   );
-  const handleKeyboardNavigation = useCallback62(
+  const handleKeyboardNavigation = useCallback56(
     (evt, currentIndex) => {
       if (extendedSelect && evt.shiftKey) {
         const item = treeNodes[currentIndex];
@@ -12926,7 +12657,7 @@ var useSelection4 = ({
     onKeyDown: handleKeyDown,
     onKeyboardNavigation: handleKeyboardNavigation
   };
-  const handleClick = useCallback62(
+  const handleClick = useCallback56(
     (evt) => {
       if (highlightedIdx !== -1) {
         const item = treeNodes[highlightedIdx];
@@ -12961,18 +12692,18 @@ var useSelection4 = ({
 
 // src/tree/use-viewport-tracking.ts
 import {
-  useCallback as useCallback63,
+  useCallback as useCallback57,
   useEffect as useEffect11,
   useLayoutEffect as useLayoutEffect4,
-  useRef as useRef47
+  useRef as useRef46
 } from "react";
 var HeightOnly4 = ["height", "scrollHeight"];
 var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
-  const scrollTop = useRef47(0);
-  const scrolling = useRef47(false);
-  const rootHeight = useRef47(0);
-  const rootScrollHeight = useRef47(0);
-  const scrollIntoView = useCallback63(
+  const scrollTop = useRef46(0);
+  const scrolling = useRef46(false);
+  const rootHeight = useRef46(0);
+  const rootScrollHeight = useRef46(0);
+  const scrollIntoView = useCallback57(
     (el) => {
       const targetEl = el.ariaExpanded ? el.firstChild : el;
       const headerHeight = stickyHeaders ? 30 : 0;
@@ -12993,7 +12724,7 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
     },
     [root, stickyHeaders]
   );
-  const scrollHandler = useCallback63((e) => {
+  const scrollHandler = useCallback57((e) => {
     scrollTop.current = e.target.scrollTop;
   }, []);
   useEffect11(() => {
@@ -13026,7 +12757,7 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
   }, [highlightedIdx, root, scrollIntoView]);
   useEffect11(() => {
   }, [stickyHeaders]);
-  const onResize = useCallback63(({ height, scrollHeight }) => {
+  const onResize = useCallback57(({ height, scrollHeight }) => {
     rootHeight.current = height;
     rootScrollHeight.current = scrollHeight;
   }, []);
@@ -13035,10 +12766,10 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
 };
 
 // src/tree/useTree.ts
-import { useCallback as useCallback67, useRef as useRef51 } from "react";
+import { useCallback as useCallback61, useRef as useRef50 } from "react";
 
 // src/tree/use-keyboard-navigation.ts
-import { useCallback as useCallback64, useMemo as useMemo26, useRef as useRef48 } from "react";
+import { useCallback as useCallback58, useMemo as useMemo24, useRef as useRef47 } from "react";
 
 // src/tree/hierarchical-data-utils.ts
 var getNodeParentPath = ({ id }) => {
@@ -13188,7 +12919,7 @@ var useKeyboardNavigation4 = ({
   onKeyboardNavigation,
   selected = []
 }) => {
-  const { bwd: ArrowBwd, fwd: ArrowFwd } = useMemo26(
+  const { bwd: ArrowBwd, fwd: ArrowFwd } = useMemo24(
     () => ({
       bwd: ArrowUp4,
       fwd: ArrowDown4
@@ -13200,14 +12931,14 @@ var useKeyboardNavigation4 = ({
     default: defaultHighlightedIdx,
     name: "highlightedIdx"
   });
-  const setHighlightedIndex = useCallback64(
+  const setHighlightedIndex = useCallback58(
     (idx) => {
       onHighlight == null ? void 0 : onHighlight(idx);
       setHighlightedIdx(idx);
     },
     [onHighlight, setHighlightedIdx]
   );
-  const nextFocusableItemIdx = useCallback64(
+  const nextFocusableItemIdx = useCallback58(
     (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])) {
@@ -13217,10 +12948,10 @@ var useKeyboardNavigation4 = ({
     },
     [ArrowBwd, ArrowFwd, treeNodes]
   );
-  const keyBoardNavigation = useRef48(true);
-  const ignoreFocus = useRef48(false);
+  const keyBoardNavigation = useRef47(true);
+  const ignoreFocus = useRef47(false);
   const setIgnoreFocus = (value) => ignoreFocus.current = value;
-  const handleFocus = useCallback64(() => {
+  const handleFocus = useCallback58(() => {
     if (ignoreFocus.current) {
       ignoreFocus.current = false;
     } else if (selected.length > 0) {
@@ -13233,7 +12964,7 @@ var useKeyboardNavigation4 = ({
       setHighlightedIndex(nextFocusableItemIdx());
     }
   }, [treeNodes, nextFocusableItemIdx, selected, setHighlightedIndex]);
-  const navigateChildItems = useCallback64(
+  const navigateChildItems = useCallback58(
     (e) => {
       const nextIdx = nextFocusableItemIdx(e.key, highlightedIdx);
       if (nextIdx !== highlightedIdx) {
@@ -13248,7 +12979,7 @@ var useKeyboardNavigation4 = ({
       setHighlightedIndex
     ]
   );
-  const handleKeyDown = useCallback64(
+  const handleKeyDown = useCallback58(
     (e) => {
       if (treeNodes.length > 0 && isNavigationKey4(e, "vertical")) {
         e.preventDefault();
@@ -13259,7 +12990,7 @@ var useKeyboardNavigation4 = ({
     },
     [treeNodes, navigateChildItems]
   );
-  const listProps = useMemo26(
+  const listProps = useMemo24(
     () => ({
       onBlur: () => {
         setHighlightedIndex(-1);
@@ -13297,7 +13028,7 @@ var useKeyboardNavigation4 = ({
 };
 
 // src/tree/use-hierarchical-data.ts
-import { useRef as useRef49, useState as useState25 } from "react";
+import { useRef as useRef48, useState as useState23 } from "react";
 var populateIndices = (nodes, results = [], idx = { value: 0 }) => {
   let skipToNextHeader = false;
   for (const node of nodes) {
@@ -13319,10 +13050,10 @@ var populateIndices = (nodes, results = [], idx = { value: 0 }) => {
   return results;
 };
 var useHierarchicalData = (source) => {
-  const externalSource = useRef49(source);
-  const statefulSource = useRef49(source);
-  const indexPositions = useRef49(populateIndices(source));
-  const [, forceUpdate] = useState25({});
+  const externalSource = useRef48(source);
+  const statefulSource = useRef48(source);
+  const indexPositions = useRef48(populateIndices(source));
+  const [, forceUpdate] = useState23({});
   if (source !== externalSource.current) {
     externalSource.current = source;
     statefulSource.current = source;
@@ -13342,7 +13073,7 @@ var useHierarchicalData = (source) => {
 };
 
 // src/tree/use-collapsible-groups.ts
-import { useCallback as useCallback65, useRef as useRef50 } from "react";
+import { useCallback as useCallback59, useRef as useRef49 } from "react";
 var NO_HANDLERS4 = {};
 var isToggleElement = (element) => element && element.hasAttribute("aria-expanded");
 var useCollapsibleGroups2 = ({
@@ -13352,23 +13083,23 @@ var useCollapsibleGroups2 = ({
   setVisibleData,
   source
 }) => {
-  const fullSource = useRef50(source);
-  const stateSource = useRef50(fullSource.current);
-  const setSource = useCallback65(
+  const fullSource = useRef49(source);
+  const stateSource = useRef49(fullSource.current);
+  const setSource = useCallback59(
     (value) => {
       setVisibleData(stateSource.current = value);
     },
     [setVisibleData]
   );
-  const expandNode = useCallback65(
+  const expandNode = useCallback59(
     (nodeList, { id }) => replaceNode(nodeList, id, { expanded: true }),
     []
   );
-  const collapseNode = useCallback65(
+  const collapseNode = useCallback59(
     (nodeList, { id }) => replaceNode(nodeList, id, { expanded: false }),
     []
   );
-  const handleKeyDown = useCallback65(
+  const handleKeyDown = useCallback59(
     (e) => {
       if (e.key === ArrowRight4 || e.key === Enter2) {
         const node = treeNodes[highlightedIdx];
@@ -13394,7 +13125,7 @@ var useCollapsibleGroups2 = ({
   const listHandlers = collapsibleHeaders ? {
     onKeyDown: handleKeyDown
   } : NO_HANDLERS4;
-  const handleClick = useCallback65(
+  const handleClick = useCallback59(
     (evt) => {
       const el = closestListItem2(evt.target);
       if (isToggleElement(el)) {
@@ -13420,14 +13151,14 @@ var useCollapsibleGroups2 = ({
 };
 
 // src/tree/use-tree-keyboard-navigation.ts
-import { useCallback as useCallback66 } from "react";
+import { useCallback as useCallback60 } from "react";
 var useTreeKeyboardNavigation = ({
   highlightedIdx,
   hiliteItemAtIndex,
   indexPositions,
   source
 }) => {
-  const handleKeyDown = useCallback66(
+  const handleKeyDown = useCallback60(
     (e) => {
       if (e.key === ArrowLeft4) {
         const node = indexPositions[highlightedIdx];
@@ -13464,7 +13195,7 @@ var useTree = ({
   selected: selectedProp,
   selection
 }) => {
-  const lastSelection = useRef51(EMPTY_ARRAY2);
+  const lastSelection = useRef50(EMPTY_ARRAY2);
   const dataHook = useHierarchicalData(sourceWithIds);
   const handleKeyboardNavigation = (evt, nextIdx) => {
     var _a2, _b;
@@ -13497,7 +13228,7 @@ var useTree = ({
     hiliteItemAtIndex: keyboardHook.hiliteItemAtIndex,
     indexPositions: dataHook.indexPositions
   });
-  const handleClick = useCallback67(
+  const handleClick = useCallback61(
     (evt) => {
       var _a2, _b, _c;
       (_a2 = collapsibleHook.listItemHandlers) == null ? void 0 : _a2.onClick(evt);
@@ -13507,7 +13238,7 @@ var useTree = ({
     },
     [collapsibleHook, selectionHook]
   );
-  const handleKeyDown = useCallback67(
+  const handleKeyDown = useCallback61(
     (evt) => {
       var _a2, _b, _c, _d, _e, _f, _g, _h;
       (_b = (_a2 = keyboardHook.listProps).onKeyDown) == null ? void 0 : _b.call(_a2, evt);
@@ -13557,14 +13288,14 @@ var useTree = ({
 };
 
 // src/tree/Tree.tsx
-import { jsx as jsx51, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
 import { createElement as createElement3 } from "react";
-var classBase29 = "vuuTree";
+var classBase30 = "vuuTree";
 var isExpanded = (node) => node.expanded === true;
 var TreeNode = ({ children, idx, ...props }) => {
-  return /* @__PURE__ */ jsx51("li", { ...props, children });
+  return /* @__PURE__ */ jsx46("li", { ...props, children });
 };
-var Tree = forwardRef27(function Tree2({
+var Tree = forwardRef26(function Tree2({
   allowDragDrop,
   className,
   defaultSelected,
@@ -13580,7 +13311,7 @@ var Tree = forwardRef27(function Tree2({
 }, forwardedRef) {
   var _a2;
   const id = useId11(idProp);
-  const rootRef = useRef52(null);
+  const rootRef = useRef51(null);
   const [, sourceWithIds, sourceItemById] = useItemsWithIds(source, id, {
     revealSelected: revealSelected ? (_a2 = selectedProp != null ? selectedProp : defaultSelected) != null ? _a2 : false : void 0
   });
@@ -13623,14 +13354,14 @@ var Tree = forwardRef27(function Tree2({
   const allowGroupSelect = groupSelectionEnabled2(groupSelection);
   function addLeafNode(list, item, idx) {
     list.push(
-      /* @__PURE__ */ jsxs28(
+      /* @__PURE__ */ jsxs25(
         TreeNode,
         {
           ...propsCommonToAllListItems,
           ...getListItemProps(item, idx, highlightedIdx, selected, focusVisible),
           children: [
-            item.icon ? /* @__PURE__ */ jsx51("span", { className: `${classBase29}Node-icon`, "data-icon": item.icon }) : null,
-            /* @__PURE__ */ jsx51("span", { children: item.label })
+            item.icon ? /* @__PURE__ */ jsx46("span", { className: `${classBase30}Node-icon`, "data-icon": item.icon }) : null,
+            /* @__PURE__ */ jsx46("span", { children: item.label })
           ]
         }
       )
@@ -13648,9 +13379,9 @@ var Tree = forwardRef27(function Tree2({
           "aria-expanded": child.expanded,
           "aria-level": child.level,
           "aria-selected": selected.includes(id2) || void 0,
-          className: cx27(`${classBase29}Node`, {
+          className: cx28(`${classBase30}Node`, {
             focusVisible: focusVisible === i,
-            [`${classBase29}Node-toggle`]: !allowGroupSelect
+            [`${classBase30}Node-toggle`]: !allowGroupSelect
           }),
           "data-idx": i,
           "data-highlighted": i === highlightedIdx || void 0,
@@ -13658,20 +13389,20 @@ var Tree = forwardRef27(function Tree2({
           id: id2,
           key: `header-${i}`
         },
-        allowGroupSelect ? /* @__PURE__ */ jsxs28("div", { className: `${classBase29}Node-label`, children: [
-          /* @__PURE__ */ jsx51("span", { className: `${classBase29}Node-toggle` }),
+        allowGroupSelect ? /* @__PURE__ */ jsxs25("div", { className: `${classBase30}Node-label`, children: [
+          /* @__PURE__ */ jsx46("span", { className: `${classBase30}Node-toggle` }),
           title
-        ] }) : /* @__PURE__ */ jsxs28("div", { className: `${classBase29}Node-label`, children: [
-          child.icon ? /* @__PURE__ */ jsx51(
+        ] }) : /* @__PURE__ */ jsxs25("div", { className: `${classBase30}Node-label`, children: [
+          child.icon ? /* @__PURE__ */ jsx46(
             "span",
             {
-              className: `${classBase29}Node-icon`,
+              className: `${classBase30}Node-icon`,
               "data-icon": child.icon
             }
           ) : null,
-          /* @__PURE__ */ jsx51("span", { children: title })
+          /* @__PURE__ */ jsx46("span", { children: title })
         ] }),
-        /* @__PURE__ */ jsx51("ul", { role: "group", children: isExpanded(child) ? renderSourceContent(child.childNodes, idx) : "" })
+        /* @__PURE__ */ jsx46("ul", { role: "group", children: isExpanded(child) ? renderSourceContent(child.childNodes, idx) : "" })
       )
     );
   }
@@ -13688,12 +13419,12 @@ var Tree = forwardRef27(function Tree2({
       return listItems;
     }
   }
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx46(
     "ul",
     {
       ...htmlAttributes,
       ...listProps,
-      className: cx27(classBase29, className),
+      className: cx28(classBase30, className),
       id: `Tree-${id}`,
       ref: useForkRef11(rootRef, forwardedRef),
       role: "tree",
@@ -13709,7 +13440,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: cx27("vuuTreeNode", className, {
+  className: cx28("vuuTreeNode", className, {
     focusVisible: focusVisible === idx.value
   })
 });
@@ -13730,10 +13461,8 @@ export {
   ComboBox,
   CycleStateButton,
   DateInput,
-  DatePicker,
   DatePopup,
   DateRangeInput,
-  DateRangePicker,
   DragDropProvider,
   DragDropState,
   Dropdown2 as Dropdown,
@@ -13765,6 +13494,7 @@ export {
   NOT_HIDDEN,
   NOT_OVERFLOWED,
   NO_WRAPPED_ITEMS,
+  NullEditAPI,
   OverflowContainer,
   PageDown,
   PageUp,