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

package/cjs/index.js

@@ -43,7 +43,10 @@ __export(src_exports, {
   CollectionProvider: () => CollectionProvider,
   ComboBox: () => ComboBox,
   CycleStateButton: () => CycleStateButton,
+  DateInput: () => DateInput,
   DatePicker: () => DatePicker,
+  DatePopup: () => DatePopup,
+  DateRangeInput: () => DateRangeInput,
   DateRangePicker: () => DateRangePicker,
   DragDropProvider: () => DragDropProvider,
   DragDropState: () => DragDropState,
@@ -84,6 +87,7 @@ __export(src_exports, {
   RadioIcon: () => RadioIcon,
   Space: () => Space,
   SplitButton: () => SplitButton,
+  SplitStateButton: () => SplitStateButton,
   Tab: () => Tab,
   Tabstrip: () => Tabstrip,
   Toolbar: () => Toolbar,
@@ -185,19 +189,18 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/calendar/Calendar.tsx
-var import_react49 = require("react");
-var import_clsx15 = require("clsx");
-var import_core20 = require("@salt-ds/core");
+var import_react50 = require("react");
+var import_clsx17 = require("clsx");
+var import_core21 = require("@salt-ds/core");
 
 // src/calendar/internal/CalendarNavigation.tsx
-var import_core13 = require("@salt-ds/core");
-var import_icons = require("@salt-ds/icons");
-var import_clsx10 = require("clsx");
-var import_react42 = require("react");
+var import_core14 = require("@salt-ds/core");
+var import_clsx12 = require("clsx");
+var import_react43 = require("react");
 
 // src/dropdown/DropdownBase.tsx
 var import_vuu_popups = require("@vuu-ui/vuu-popups");
-var import_vuu_utils = require("@vuu-ui/vuu-utils");
+var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
 var import_core2 = require("@salt-ds/core");
 var import_clsx = __toESM(require("clsx"));
 var import_react9 = require("react");
@@ -970,8 +973,24 @@ var useStateRef = (initialValue) => {
 };
 
 // src/dropdown/useClickAway.ts
+var import_vuu_utils = require("@vuu-ui/vuu-utils");
 var import_react7 = require("react");
 var NO_HANDLERS = [];
+var targetWithinSubPopup = (source, target) => {
+  if (source === null) {
+    return false;
+  }
+  const sourcePortal = (0, import_vuu_utils.queryClosest)(source, ".vuuPortal");
+  const targetPortal = (0, import_vuu_utils.queryClosest)(target, ".vuuPortal");
+  if (sourcePortal && targetPortal) {
+    const targetWithId = targetPortal.querySelector("[id]");
+    const targetOwner = sourcePortal.querySelector(
+      `[aria-owns="${targetWithId == null ? void 0 : targetWithId.id}"]`
+    );
+    return targetOwner !== null;
+  }
+  return false;
+};
 var useClickAway = ({
   popperRef,
   rootRef,
@@ -986,9 +1005,12 @@ var useClickAway = ({
     const [clickHandler, escapeKeyHandler] = isOpen ? [
       (evt) => {
         var _a2, _b;
+        console.log("click away");
         const targetElement = evt.target;
         if (!((_a2 = popperRef.current) == null ? void 0 : _a2.contains(targetElement)) && !((_b = rootRef.current) == null ? void 0 : _b.contains(targetElement))) {
-          onClose("click-away");
+          if (!targetWithinSubPopup(popperRef.current, targetElement)) {
+            onClose("click-away");
+          }
         }
       },
       (e) => {
@@ -1178,7 +1200,7 @@ var DropdownBase = (0, import_react9.forwardRef)(
     const [trigger, popupComponent] = import_react9.Children.toArray(
       children
     );
-    const id = (0, import_vuu_utils.useId)(idProp);
+    const id = (0, import_vuu_utils2.useId)(idProp);
     const { componentProps, isOpen, popupComponentRef, triggerProps } = useDropdownBase({
       ariaLabelledBy: ariaLabelledByProp,
       defaultIsOpen,
@@ -1310,7 +1332,7 @@ var DropdownButton = (0, import_react10.forwardRef)(function DropdownButton2({
 // src/dropdown/Dropdown.tsx
 var import_core12 = require("@salt-ds/core");
 var import_react40 = require("react");
-var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
 
 // src/list/common-hooks/keyUtils.ts
 function union(set1, ...sets) {
@@ -1522,7 +1544,7 @@ var useImperativeScrollingAPI = ({
 // src/list/common-hooks/useKeyboardNavigation.ts
 var import_core4 = require("@salt-ds/core");
 var import_react13 = require("react");
-var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
 var LIST_FOCUS_VISIBLE = -2;
 function nextItemIdx(count, key, idx) {
   if (key === ArrowUp || key === End) {
@@ -1548,7 +1570,7 @@ var getIndexOfSelectedItem = (selected) => {
     const el = document.getElementById(selectedItemId);
     if (el) {
       const index = parseInt((_a2 = el.dataset.index) != null ? _a2 : "-1");
-      if ((0, import_vuu_utils2.isValidNumber)(index)) {
+      if ((0, import_vuu_utils3.isValidNumber)(index)) {
         return index;
       }
     }
@@ -1582,7 +1604,7 @@ var pageDown = (containerEl, itemEl, itemCount, index) => {
     let nextRect;
     do {
       nextIdx += 1;
-      nextRect = (0, import_vuu_utils2.getElementByDataIndex)(
+      nextRect = (0, import_vuu_utils3.getElementByDataIndex)(
         containerEl,
         nextIdx,
         true
@@ -1603,7 +1625,7 @@ var pageUp = (containerEl, itemEl, index) => {
     let nextRect;
     do {
       nextIdx -= 1;
-      nextRect = (0, import_vuu_utils2.getElementByDataIndex)(
+      nextRect = (0, import_vuu_utils3.getElementByDataIndex)(
         containerEl,
         nextIdx,
         true
@@ -1614,7 +1636,7 @@ var pageUp = (containerEl, itemEl, index) => {
 };
 var isLeaf = (element) => element !== void 0;
 var isFocusable2 = (container, index) => {
-  const targetEl = (0, import_vuu_utils2.getElementByDataIndex)(container, index);
+  const targetEl = (0, import_vuu_utils3.getElementByDataIndex)(container, index);
   return isLeaf(targetEl);
 };
 var useKeyboardNavigation = ({
@@ -1649,7 +1671,7 @@ var useKeyboardNavigation = ({
   );
   const nextPageItemIdx = (0, import_react13.useCallback)(
     (key, index) => {
-      const itemEl = (0, import_vuu_utils2.getElementByDataIndex)(containerRef.current, index, true);
+      const itemEl = (0, import_vuu_utils3.getElementByDataIndex)(containerRef.current, index, true);
       let result;
       if (itemEl) {
         const { current: containerEl } = containerRef;
@@ -1801,7 +1823,7 @@ var useKeyboardNavigation = ({
 };
 
 // src/common-hooks/useSelection.ts
-var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
 var import_react14 = require("react");
 var CHECKBOX = "checkbox";
 var GROUP_SELECTION_NONE = "none";
@@ -1859,7 +1881,7 @@ var useSelection = ({
     (idx, preserveExistingSelection) => {
       const currentSelection = preserveExistingSelection ? selected : [];
       const [lastSelectedItemId] = selected.slice(-1);
-      const lastSelectedItemIndex = lastSelectedItemId ? (0, import_vuu_utils3.getElementDataIndex)(document.getElementById(lastSelectedItemId)) : 0;
+      const lastSelectedItemIndex = lastSelectedItemId ? (0, import_vuu_utils4.getElementDataIndex)(document.getElementById(lastSelectedItemId)) : 0;
       const startRegion = Math.min(idx, lastSelectedItemIndex);
       const endRegion = Math.max(idx, lastSelectedItemIndex);
       const container = containerRef.current;
@@ -1876,7 +1898,7 @@ var useSelection = ({
   const selectItemAtIndex = (0, import_react14.useCallback)(
     (evt, idx, rangeSelect, preserveExistingSelection) => {
       const { current: container } = containerRef;
-      const { id } = (0, import_vuu_utils3.getElementByDataIndex)(container, idx, true);
+      const { id } = (0, import_vuu_utils4.getElementByDataIndex)(container, idx, true);
       let newSelected;
       if (isMultipleSelect) {
         newSelected = selectMultiple(id);
@@ -1920,8 +1942,8 @@ var useSelection = ({
   const handleKeyDown = (0, import_react14.useCallback)(
     (evt) => {
       const { current: container } = containerRef;
-      const element = (0, import_vuu_utils3.getElementByDataIndex)(container, highlightedIndex);
-      if ((0, import_vuu_utils3.isSelectableElement)(element)) {
+      const element = (0, import_vuu_utils4.getElementByDataIndex)(container, highlightedIndex);
+      if ((0, import_vuu_utils4.isSelectableElement)(element)) {
         if (isSelectionEvent(evt) || tabToSelect && evt.key === "Tab") {
           if (evt.key !== "Tab") {
             evt.preventDefault();
@@ -1951,8 +1973,8 @@ var useSelection = ({
     (evt, currentIndex) => {
       if (isExtendedSelect && evt.shiftKey) {
         const { current: container } = containerRef;
-        const element = (0, import_vuu_utils3.getElementByDataIndex)(container, currentIndex);
-        if ((0, import_vuu_utils3.isSelectableElement)(element)) {
+        const element = (0, import_vuu_utils4.getElementByDataIndex)(container, currentIndex);
+        if ((0, import_vuu_utils4.isSelectableElement)(element)) {
           selectItemAtIndex(evt, currentIndex, true);
         }
       }
@@ -1962,8 +1984,8 @@ var useSelection = ({
   const handleClick = (0, import_react14.useCallback)(
     (evt) => {
       const { current: container } = containerRef;
-      const element = (0, import_vuu_utils3.getElementByDataIndex)(container, highlightedIndex);
-      if (!disableSelection && (0, import_vuu_utils3.isSelectableElement)(element)) {
+      const element = (0, import_vuu_utils4.getElementByDataIndex)(container, highlightedIndex);
+      if (!disableSelection && (0, import_vuu_utils4.isSelectableElement)(element)) {
         evt.preventDefault();
         evt.stopPropagation();
         selectItemAtIndex(
@@ -2244,7 +2266,7 @@ var CheckboxIcon = ({
 // src/list/ListItem.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var classBase4 = "vuuListItem";
-var ListItemProxy = (0, import_react17.forwardRef)(function ListItemNextProxy({
+var ListItemProxy = (0, import_react17.forwardRef)(function ListItemProxy2({
   height,
   ...htmlAttributes
 }, forwardedRef) {
@@ -2308,13 +2330,13 @@ var ListItem = (0, import_react17.forwardRef)(
 );
 
 // src/list/List.tsx
-var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
 var import_core10 = require("@salt-ds/core");
 var import_clsx8 = __toESM(require("clsx"));
 var import_react37 = require("react");
 
 // src/list/useList.ts
-var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
 var import_react31 = require("react");
 
 // src/drag-drop/dragDropTypes.ts
@@ -2325,7 +2347,7 @@ var BWD = "bwd";
 var import_react19 = require("react");
 
 // src/drag-drop/useGlobalDragDrop.ts
-var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
 var import_react18 = require("react");
 var useGlobalDragDrop = ({
   onDragOverDropTarget,
@@ -2339,7 +2361,7 @@ var useGlobalDragDrop = ({
     const { current: dropTargets } = measuredDropTargetsRef;
     if (dropTargets) {
       for (const [id, measuredTarget] of Object.entries(dropTargets)) {
-        if ((0, import_vuu_utils4.boxContainsPoint)(measuredTarget, x, y)) {
+        if ((0, import_vuu_utils5.boxContainsPoint)(measuredTarget, x, y)) {
           return id;
         }
       }
@@ -2390,7 +2412,7 @@ var useGlobalDragDrop = ({
         onDrop(dropTargetRef.current, dragDropState);
       }
       if (dragDropState.draggableElement) {
-        (0, import_vuu_utils4.dispatchCustomEvent)(dragDropState.draggableElement, "vuu-dropped");
+        (0, import_vuu_utils5.dispatchCustomEvent)(dragDropState.draggableElement, "vuu-dropped");
       }
     }
   }, [dragMouseMoveHandler, onDrop]);
@@ -2575,21 +2597,21 @@ var DragDropState = class {
 };
 
 // src/drag-drop/useDragDrop.tsx
-var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
 var import_react29 = require("react");
 
 // src/overflow-container/OverflowContainer.tsx
 var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
-var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
 var import_clsx5 = __toESM(require("clsx"));
 var import_react21 = __toESM(require("react"));
 
 // src/overflow-container/useOverflowContainer.ts
-var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
 var import_react20 = require("react");
 
 // src/overflow-container/overflow-utils.ts
-var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
 var NON_WRAPPED_ITEM = ".vuuOverflowContainer-item:not(.wrapped)";
 var isOverflowElement = (element) => element !== null && element.dataset.index === "overflow" && element.parentElement !== null && element.parentElement.classList.contains(
   "vuuOverflowContainer-wrapContainer-overflowed"
@@ -2618,7 +2640,7 @@ var sortByScreenOrder = (elements) => elements.sort((e1, e2) => {
   return parseInt(idx1) > parseInt(idx2) ? 1 : -1;
 });
 var NO_WRAPPED_ITEMS = [];
-var getNonWrappedAndWrappedItems = (container, orientation = "horizontal") => {
+var getNonWrappedAndWrappedItems = (container, orientation) => {
   const nonWrappedItems = [];
   const wrappedItems = [];
   let currentPosition = -1;
@@ -2649,9 +2671,9 @@ var getNonWrappedAndWrappedItems = (container, orientation = "horizontal") => {
   }
   return [nonWrappedItems, wrappedItems];
 };
-var applyOverflowClassToWrappedItems = (container, overflowedItems, classBase26) => {
+var applyOverflowClassToWrappedItems = (container, overflowedItems, classBase30) => {
   let ignoreOverflow = false;
-  const className = classBase26 ? `${classBase26}-overflowed` : "overflow";
+  const className = classBase30 ? `${classBase30}-overflowed` : "overflow";
   if (overflowedItems.find(({ index }) => index === "overflow")) {
     if (overflowedItems.length === 1) {
       ignoreOverflow = true;
@@ -2702,22 +2724,23 @@ var highPriorityItemsHaveWrappedButShouldNotHave = (nonWrappedItems, wrappedItem
     return wrappedItems.length > 1 && ((_a2 = wrappedItems.at(-1)) == null ? void 0 : _a2.index) === "overflow";
   }
 };
-var correctForWrappedOverflowIndicator = (container, overflowedItems) => new Promise((resolve) => {
+var correctForWrappedOverflowIndicator = (container, overflowedItems, orientation) => new Promise((resolve) => {
   requestAnimationFrame(() => {
-    const [, o2] = getNonWrappedAndWrappedItems(container);
+    const [, o2] = getNonWrappedAndWrappedItems(container, orientation);
     const newlyOverflowed = getNewItems(overflowedItems, o2);
     newlyOverflowed.forEach((item) => markElementAsWrapped(container, item));
     resolve(o2);
   });
 });
-var correctForWrappedHighPriorityItems = (container, nonWrapped, wrapped) => new Promise((resolve) => {
+var correctForWrappedHighPriorityItems = (container, nonWrapped, wrapped, orientation) => new Promise((resolve) => {
   requestAnimationFrame(() => {
-    const [, o2] = getNonWrappedAndWrappedItems(container);
+    const [, o2] = getNonWrappedAndWrappedItems(container, orientation);
     const highPriorityWrappedItem = getHighestPriorityItem(o2);
     if (highPriorityWrappedItem) {
       const [nonWrappedItems, wrappedItems] = switchWrappedItemIntoView(
         container,
-        highPriorityWrappedItem
+        highPriorityWrappedItem,
+        orientation
       );
       resolve([nonWrappedItems, wrappedItems]);
     } else {
@@ -2726,7 +2749,7 @@ var correctForWrappedHighPriorityItems = (container, nonWrapped, wrapped) => new
   });
 });
 var markElementAsWrapped = (container, item) => {
-  const el = (0, import_vuu_utils5.getElementByDataIndex)(container, item.index);
+  const el = (0, import_vuu_utils6.getElementByDataIndex)(container, item.index);
   if (el) {
     el.classList.add("wrapped");
   } else {
@@ -2758,23 +2781,41 @@ var unmarkItemsWhichAreNoLongerWrapped = (container, wrappedItems) => {
 };
 var getOverflowIndicator = (container) => container.querySelector('[data-index="overflow"]');
 var getOverflowedItem = (container) => container.querySelector(".wrapped");
-var getElementWidth = (el) => parseInt(getComputedStyle(el).getPropertyValue("width"));
-var getAvailableSpace = (container, overflowIndicator) => {
-  const { right: containerRight } = container.getBoundingClientRect();
-  const paddingRight = parseInt(
-    getComputedStyle(container).getPropertyValue("padding-right")
-  );
-  const { right: indicatorRight } = overflowIndicator.getBoundingClientRect();
-  return containerRight - paddingRight - indicatorRight;
+var getElementSize = (el, sizeProperty) => {
+  const size = parseInt(getComputedStyle(el).getPropertyValue(sizeProperty));
+  const margin = sizeProperty === "width" ? parseInt(getComputedStyle(el).getPropertyValue("margin-left")) + parseInt(getComputedStyle(el).getPropertyValue("margin-right")) : parseInt(getComputedStyle(el).getPropertyValue("margin-top")) + parseInt(getComputedStyle(el).getPropertyValue("margin-bottom"));
+  return size + margin;
+};
+var getAvailableSpace = (container, overflowIndicator, orientation) => {
+  if (orientation === "horizontal") {
+    const { right: containerRight } = container.getBoundingClientRect();
+    const paddingRight = parseInt(
+      getComputedStyle(container).getPropertyValue("padding-right")
+    );
+    const { right: indicatorRight } = overflowIndicator.getBoundingClientRect();
+    return containerRight - paddingRight - indicatorRight;
+  } else {
+    const { bottom: containerBottom } = container.getBoundingClientRect();
+    const paddingBottom = parseInt(
+      getComputedStyle(container).getPropertyValue("padding-bottom")
+    );
+    const { bottom: indicatorBottom } = overflowIndicator.getBoundingClientRect();
+    return containerBottom - paddingBottom - indicatorBottom;
+  }
 };
-var removeOverflowIndicatorIfNoLongerNeeded = (container) => {
+var removeOverflowIndicatorIfNoLongerNeeded = (container, orientation) => {
+  const sizeProperty = orientation === "horizontal" ? "width" : "height";
   const overflowIndicator = getOverflowIndicator(container);
-  const availableSpace = getAvailableSpace(container, overflowIndicator);
-  const indicatorWidth = getElementWidth(overflowIndicator);
+  const availableSpace = getAvailableSpace(
+    container,
+    overflowIndicator,
+    orientation
+  );
+  const indicatorWidth = getElementSize(overflowIndicator, sizeProperty);
   const overflowedItem = getOverflowedItem(container);
-  const overflowWidth = getElementWidth(overflowedItem);
+  const overflowWidth = getElementSize(overflowedItem, sizeProperty);
   if (overflowWidth <= availableSpace + indicatorWidth) {
-    container.classList.remove("overflowed");
+    container.classList.remove("vuuOverflowContainer-wrapContainer-overflowed");
     overflowedItem.classList.remove("wrapped");
     return true;
   }
@@ -2798,19 +2839,20 @@ var byPriorityDescending = (h1, h2) => {
 var getNonwrappedItemsByPriority = (container) => Array.from(container.querySelectorAll(NON_WRAPPED_ITEM)).sort(
   byPriorityDescending
 );
-var switchWrappedItemIntoView = (container, overflowItem) => {
+var switchWrappedItemIntoView = (container, overflowItem, orientation) => {
   const unwrappedItems = getNonwrappedItemsByPriority(container);
-  const targetElement = (0, import_vuu_utils5.getElementByDataIndex)(
+  const targetElement = (0, import_vuu_utils6.getElementByDataIndex)(
     container,
     overflowItem.index,
     true
   );
   let pos = -1;
   let unwrappedItem = unwrappedItems.at(pos);
-  const itemWidth = getElementWidth(unwrappedItem);
-  const targetWidth = getElementWidth(targetElement);
+  const sizeProperty = orientation === "horizontal" ? "width" : "height";
+  const itemWidth = getElementSize(unwrappedItem, sizeProperty);
+  const targetWidth = getElementSize(targetElement, sizeProperty);
   const overflowIndicator = getOverflowIndicator(container);
-  let availableSpace = getAvailableSpace(container, overflowIndicator) + itemWidth;
+  let availableSpace = getAvailableSpace(container, overflowIndicator, orientation) + itemWidth;
   if (availableSpace >= targetWidth) {
     switchWrapOnElements(targetElement, unwrappedItem);
   } else {
@@ -2830,7 +2872,10 @@ var switchWrappedItemIntoView = (container, overflowItem) => {
       item.classList.add("wrapped");
     });
   }
-  const [nonWrappedItems, wrappedItems] = getNonWrappedAndWrappedItems(container);
+  const [nonWrappedItems, wrappedItems] = getNonWrappedAndWrappedItems(
+    container,
+    orientation
+  );
   unmarkItemsWhichAreNoLongerWrapped(container, wrappedItems);
   return [nonWrappedItems, wrappedItems];
 };
@@ -2848,7 +2893,7 @@ var useOverflowContainer = ({
   itemCount,
   onMoveItem,
   onSwitchWrappedItemIntoView,
-  orientation = "horizontal"
+  orientation
 }) => {
   const [container, setContainer] = (0, import_react20.useState)(null);
   const wrappedItemsRef = (0, import_react20.useRef)(NO_WRAPPED_ITEMS);
@@ -2871,17 +2916,22 @@ var useOverflowContainer = ({
         "vuuOverflowContainer-wrapContainer"
       );
       if (overflowIndicatorHasWrappedButShouldNotHave(wrapped)) {
-        wrapped = await correctForWrappedOverflowIndicator(container, wrapped);
+        wrapped = await correctForWrappedOverflowIndicator(
+          container,
+          wrapped,
+          orientation
+        );
       }
       while (highPriorityItemsHaveWrappedButShouldNotHave(nonWrapped, wrapped)) {
         [nonWrapped, wrapped] = await correctForWrappedHighPriorityItems(
           container,
           nonWrapped,
-          wrapped
+          wrapped,
+          orientation
         );
       }
       if (wrapped.length === 1) {
-        if (removeOverflowIndicatorIfNoLongerNeeded(container)) {
+        if (removeOverflowIndicatorIfNoLongerNeeded(container, orientation)) {
           wrapped = NO_WRAPPED_ITEMS;
         }
       }
@@ -2912,7 +2962,8 @@ var useOverflowContainer = ({
         if (container && hasOverflowItem(options)) {
           const [, wrappedItems] = switchWrappedItemIntoView(
             container,
-            options.overflowItem
+            options.overflowItem,
+            orientation
           );
           wrappedItemsRef.current = wrappedItems;
           onSwitchWrappedItemIntoView == null ? void 0 : onSwitchWrappedItemIntoView(options.overflowItem);
@@ -2920,22 +2971,22 @@ var useOverflowContainer = ({
         return true;
       }
     ];
-  }, [container, onSwitchWrappedItemIntoView]);
+  }, [container, onSwitchWrappedItemIntoView, orientation]);
   const resizeObserver3 = (0, import_react20.useMemo)(() => {
-    const { sizeProp } = import_vuu_utils6.MEASURES[orientation];
+    const { sizeProp } = import_vuu_utils7.MEASURES[orientation];
     let currentSize = 0;
     return new ResizeObserver((entries) => {
       for (const entry of entries) {
         const { [sizeProp]: actualSize } = entry.contentRect;
         const size = Math.round(actualSize);
-        if ((0, import_vuu_utils6.isValidNumber)(size) && currentSize !== size) {
+        if ((0, import_vuu_utils7.isValidNumber)(size) && currentSize !== size) {
           currentSize = size;
           handleResize();
         }
       }
     });
   }, [handleResize, orientation]);
-  (0, import_vuu_utils6.useLayoutEffectSkipFirst)(() => {
+  (0, import_vuu_utils7.useLayoutEffectSkipFirst)(() => {
     handleResize();
   }, [handleResize, itemCount]);
   (0, import_react20.useMemo)(() => {
@@ -2979,15 +3030,13 @@ var WrapContainer = import_react21.default.memo(
     PopupMenuProps: PopupMenuProps3,
     allowDragDrop,
     children,
-    className: classNameProp,
-    height: heightProp,
     id,
     onMoveItem,
     onSwitchWrappedItemIntoView,
-    orientation = "horizontal",
+    orientation,
     overflowIcon
   }) => {
-    const childElements = (0, import_vuu_utils7.asReactElements)(children);
+    const childElements = (0, import_vuu_utils8.asReactElements)(children);
     const {
       draggable,
       draggedItemIndex,
@@ -3002,14 +3051,6 @@ var WrapContainer = import_react21.default.memo(
       onSwitchWrappedItemIntoView,
       orientation
     });
-    const height = orientation === "vertical" ? "100%" : `${heightProp}px`;
-    const style = {
-      "--overflow-container-height": `${height}`
-    };
-    const className = (0, import_clsx5.default)(`${classBase5}-wrapContainer`, classNameProp, {
-      [`${classBase5}-horizontal`]: orientation === "horizontal",
-      [`${classBase5}-vertical`]: orientation === "vertical"
-    });
     const content = childElements.map((childEl, i) => {
       const {
         "data-align": align,
@@ -3043,6 +3084,7 @@ var WrapContainer = import_react21.default.memo(
           import_vuu_popups2.PopupMenu,
           {
             ...PopupMenuProps3,
+            "data-embedded": true,
             icon: overflowIcon,
             menuBuilder,
             menuActionHandler,
@@ -3053,7 +3095,7 @@ var WrapContainer = import_react21.default.memo(
       "overflow"
     );
     content.push(overflowIndicator);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className, ref: rootRef, style, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_clsx5.default)(`${classBase5}-wrapContainer`), ref: rootRef, children: [
       content,
       draggable
     ] });
@@ -3065,21 +3107,25 @@ var OverflowContainer = (0, import_react21.forwardRef)(function OverflowContaine
   allowDragDrop = false,
   children,
   className,
-  height = 44,
   id: idProp,
   onMoveItem,
   onSwitchWrappedItemIntoView,
-  orientation,
+  orientation = "horizontal",
   overflowIcon,
   overflowPosition,
   ...htmlAttributes
 }, forwardedRef) {
-  const id = (0, import_vuu_utils7.useId)(idProp);
+  const id = (0, import_vuu_utils8.useId)(idProp);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       ...htmlAttributes,
-      className: (0, import_clsx5.default)((0, import_clsx5.default)(className, classBase5)),
+      className: (0, import_clsx5.default)(
+        (0, import_clsx5.default)(className, classBase5, {
+          "vuuOrientation-horizontal": orientation === "horizontal",
+          "vuuOrientation-vertical": orientation === "vertical"
+        })
+      ),
       id,
       ref: forwardedRef,
       children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -3087,7 +3133,6 @@ var OverflowContainer = (0, import_react21.forwardRef)(function OverflowContaine
         {
           PopupMenuProps: PopupMenuProps3,
           allowDragDrop,
-          height,
           id,
           orientation,
           overflowIcon,
@@ -3932,7 +3977,7 @@ var useDragDisplacers = (orientation = "horizontal") => {
 };
 
 // src/drag-drop/useDragDropNaturalMovement.tsx
-var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
 var useDragDropNaturalMovement = ({
   containerRef,
   orientation = "horizontal",
@@ -4099,7 +4144,7 @@ var useDragDropNaturalMovement = ({
           ".vuuPopupMenu"
         );
         if (button) {
-          (0, import_vuu_utils8.dispatchMouseEvent)(button, "click");
+          (0, import_vuu_utils9.dispatchMouseEvent)(button, "click");
         }
       }
     };
@@ -4110,7 +4155,7 @@ var useDragDropNaturalMovement = ({
           ".vuuPopupMenu"
         );
         if (button) {
-          (0, import_vuu_utils8.dispatchMouseEvent)(button, "click");
+          (0, import_vuu_utils9.dispatchMouseEvent)(button, "click");
         }
       }
     };
@@ -4314,7 +4359,7 @@ var useDragDrop = ({
       draggable: void 0
     }));
     if (settlingItem2) {
-      (0, import_vuu_utils9.dispatchCustomEvent)(settlingItem2, "vuu-dropped");
+      (0, import_vuu_utils10.dispatchCustomEvent)(settlingItem2, "vuu-dropped");
     }
   }, [containerRef, itemQuery, onDropSettle]);
   const getScrollDirection = (0, import_react29.useCallback)(
@@ -4894,7 +4939,7 @@ var useList = ({
     setSelected: selectionHook.setSelected
   });
   const { setSelected } = selectionHook;
-  (0, import_vuu_utils10.useLayoutEffectSkipFirst)(() => {
+  (0, import_vuu_utils11.useLayoutEffectSkipFirst)(() => {
     if (hasSelection(lastSelection.current)) {
       setSelected([]);
     }
@@ -5167,7 +5212,7 @@ var useScrollPosition = ({
 var import_react36 = require("react");
 
 // src/measured-container/useMeasuredContainer.ts
-var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
 var import_react35 = require("react");
 
 // src/measured-container/useResizeObserver.ts
@@ -5304,7 +5349,7 @@ var NO_MEASUREMENT = [];
 var isNumber = (val) => Number.isFinite(val);
 var FULL_SIZE = { height: "100%", width: "auto" };
 var getInitialCssSize = (height, width) => {
-  if ((0, import_vuu_utils11.isValidNumber)(height) && (0, import_vuu_utils11.isValidNumber)(width)) {
+  if ((0, import_vuu_utils12.isValidNumber)(height) && (0, import_vuu_utils12.isValidNumber)(width)) {
     return {
       height: `${height}px`,
       width: `${width}px`
@@ -5319,7 +5364,7 @@ var getInitialCssSize = (height, width) => {
   }
 };
 var getInitialInnerSize = (height, width) => {
-  if ((0, import_vuu_utils11.isValidNumber)(height) && (0, import_vuu_utils11.isValidNumber)(width)) {
+  if ((0, import_vuu_utils12.isValidNumber)(height) && (0, import_vuu_utils12.isValidNumber)(width)) {
     return {
       height,
       width
@@ -5348,12 +5393,12 @@ var useMeasuredContainer = ({
   (0, import_react35.useMemo)(() => {
     setSize((currentSize) => {
       const { inner, outer } = currentSize;
-      if ((0, import_vuu_utils11.isValidNumber)(height) && (0, import_vuu_utils11.isValidNumber)(width) && inner && outer) {
+      if ((0, import_vuu_utils12.isValidNumber)(height) && (0, import_vuu_utils12.isValidNumber)(width) && inner && outer) {
         const { height: innerHeight, width: innerWidth } = inner;
         const { height: outerHeight, width: outerWidth } = outer;
         if (outerHeight !== height || outerWidth !== width) {
-          const heightDiff = (0, import_vuu_utils11.isValidNumber)(outerHeight) ? outerHeight - innerHeight : 0;
-          const widthDiff = (0, import_vuu_utils11.isValidNumber)(outerWidth) ? outerWidth - innerWidth : 0;
+          const heightDiff = (0, import_vuu_utils12.isValidNumber)(outerHeight) ? outerHeight - innerHeight : 0;
+          const widthDiff = (0, import_vuu_utils12.isValidNumber)(outerWidth) ? outerWidth - innerWidth : 0;
           return {
             ...currentSize,
             outer: { height, width },
@@ -5527,7 +5572,7 @@ var List = (0, import_react37.forwardRef)(function List2({
   ...htmlAttributes
 }, forwardedRef) {
   var _a2, _b;
-  const id = (0, import_vuu_utils12.useId)(idProp);
+  const id = (0, import_vuu_utils13.useId)(idProp);
   const contentContainerRef = (0, import_react37.useRef)(null);
   const [size, setSize] = (0, import_react37.useState)();
   const handleResize = (0, import_react37.useCallback)((size2) => {
@@ -5743,7 +5788,14 @@ var List = (0, import_react37.forwardRef)(function List2({
       style: { ...styleProp, ...sizeStyles },
       tabIndex: listDisabled || disableFocus ? void 0 : tabIndex,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ListItemProxy, { ref: rowHeightProxyRef, height: itemHeightProp }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          ListItemProxy,
+          {
+            ref: rowHeightProxyRef,
+            height: itemHeightProp
+          },
+          "canary"
+        ),
         collectionHook.data.length === 0 && ListPlaceholder !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ListPlaceholder, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `${classBase6}-viewport`, onScroll: onVerticalScroll, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "div",
           {
@@ -5893,7 +5945,7 @@ var Dropdown2 = (0, import_react40.forwardRef)(function Dropdown3({
   width = 180,
   ...props
 }, forwardedRef) {
-  const id = (0, import_vuu_utils13.useId)(idProp);
+  const id = (0, import_vuu_utils14.useId)(idProp);
   const rootRef = (0, import_react40.useRef)(null);
   const listRef = (0, import_react40.useRef)(null);
   const forkedRef = (0, import_core12.useForkRef)(rootRef, forwardedRef);
@@ -7845,17 +7897,17 @@ function $64244302c3013299$export$dd0bbc9b26defe37(name) {
 }
 
 // src/calendar/internal/utils.ts
-var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
 var localTimezone = $14e0f24ef4ac5c92$export$aa8b41735afcabd2();
 function getCurrentLocale() {
   return navigator.languages[0];
 }
 function formatDate(date, options) {
-  const formatter = (0, import_vuu_utils14.getDateFormatter)(getCurrentLocale(), options);
+  const formatter = (0, import_vuu_utils15.getDateFormatter)(getCurrentLocale(), options);
   return formatter.format(date.toDate(localTimezone));
 }
 function getCalender() {
-  const calendarIdentifier = (0, import_vuu_utils14.getDateFormatter)(
+  const calendarIdentifier = (0, import_vuu_utils15.getDateFormatter)(
     getCurrentLocale()
   ).resolvedOptions().calendar;
   return $64244302c3013299$export$dd0bbc9b26defe37(calendarIdentifier);
@@ -7896,9 +7948,45 @@ function monthDiff(a, b) {
   return b.month - a.month + 12 * (b.year - a.year);
 }
 
-// src/calendar/internal/CalendarNavigation.tsx
+// src/icon-button/Icon.tsx
+var import_clsx10 = __toESM(require("clsx"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var withBaseName2 = (0, import_core13.makePrefixer)("saltCalendarNavigation");
+var classBase8 = "vuuIcon";
+var Icon = ({
+  className,
+  name,
+  size,
+  style: styleProp,
+  ...htmlAttributes
+}) => {
+  const style = typeof size === "number" ? { ...styleProp, "--vuu-icon-size": `${size}px` } : styleProp;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "span",
+    {
+      ...htmlAttributes,
+      className: (0, import_clsx10.default)(classBase8, className),
+      "data-icon": name,
+      role: "img",
+      style
+    }
+  );
+};
+
+// src/icon-button/IconButton.tsx
+var import_clsx11 = __toESM(require("clsx"));
+var import_core13 = require("@salt-ds/core");
+var import_react42 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var classBase9 = "vuuIconButton";
+var IconButton = (0, import_react42.forwardRef)(
+  function IconButton2({ "aria-label": ariaLabel, className, icon, ...buttonProps }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core13.Button, { ...buttonProps, className: (0, import_clsx11.default)(classBase9, className), ref, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { "aria-label": ariaLabel, name: icon }) });
+  }
+);
+
+// src/calendar/internal/CalendarNavigation.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var withBaseName2 = (0, import_core14.makePrefixer)("saltCalendarNavigation");
 function useCalendarNavigation() {
   const {
     state: { visibleMonth, minDate, maxDate },
@@ -7958,16 +8046,16 @@ var ListItemWithTooltip = ({
   item,
   label,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-  import_core13.Tooltip,
+}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  import_core14.Tooltip,
   {
     placement: "right",
     disabled: !(item == null ? void 0 : item.disabled),
     content: "This month is out of range",
-    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ListItem, { ...props, children: label })
+    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ListItem, { ...props, children: label })
   }
 );
-var CalendarNavigation = (0, import_react42.forwardRef)(function CalendarNavigation2(props, ref) {
+var CalendarNavigation = (0, import_react43.forwardRef)(function CalendarNavigation2(props, ref) {
   const {
     className,
     MonthDropdownProps,
@@ -8003,15 +8091,15 @@ var CalendarNavigation = (0, import_react42.forwardRef)(function CalendarNavigat
       moveToMonth(event, year.value);
     }
   };
-  const monthDropdownId = (0, import_core13.useId)(MonthDropdownProps == null ? void 0 : MonthDropdownProps.id) || "";
-  const monthDropdownLabelledBy = (0, import_clsx10.clsx)(
+  const monthDropdownId = (0, import_core14.useId)(MonthDropdownProps == null ? void 0 : MonthDropdownProps.id) || "";
+  const monthDropdownLabelledBy = (0, import_clsx12.clsx)(
     MonthDropdownProps == null ? void 0 : MonthDropdownProps["aria-labelledby"],
     // TODO need a prop on Dropdown to allow buttonId to be passed, should not make assumptions about internal
     // id assignment like this
     `${monthDropdownId}-control`
   );
-  const yearDropdownId = (0, import_core13.useId)(YearDropdownProps == null ? void 0 : YearDropdownProps.id) || "";
-  const yearDropdownLabelledBy = (0, import_clsx10.clsx)(
+  const yearDropdownId = (0, import_core14.useId)(YearDropdownProps == null ? void 0 : YearDropdownProps.id) || "";
+  const yearDropdownLabelledBy = (0, import_clsx12.clsx)(
     YearDropdownProps == null ? void 0 : YearDropdownProps["aria-labelledby"],
     `${yearDropdownId}-control`
   );
@@ -8024,10 +8112,10 @@ var CalendarNavigation = (0, import_react42.forwardRef)(function CalendarNavigat
   const defaultItemToYear = (date) => {
     return formatDate(date.value, { year: "numeric" });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
-      className: (0, import_clsx10.clsx)(
+      className: (0, import_clsx12.clsx)(
         withBaseName2(),
         { [withBaseName2("hideYearDropdown")]: hideYearDropdown },
         className
@@ -8035,33 +8123,29 @@ var CalendarNavigation = (0, import_react42.forwardRef)(function CalendarNavigat
       ref,
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_core13.Tooltip,
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          import_core14.Tooltip,
           {
             placement: "top",
             disabled: canNavigatePrevious,
             content: "Past dates are out of range",
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              import_core13.Button,
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              IconButton,
               {
+                "aria-label": `Previous Month, ${formatDate(
+                  visibleMonth.subtract({ months: 1 })
+                )}`,
                 disabled: !canNavigatePrevious,
+                icon: "chevron-left",
                 variant: "secondary",
                 onClick: handleNavigatePrevious,
                 className: withBaseName2("previousButton"),
-                focusableWhenDisabled: true,
-                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                  import_icons.ChevronLeftIcon,
-                  {
-                    "aria-label": `Previous Month, ${formatDate(
-                      visibleMonth.subtract({ months: 1 })
-                    )}`
-                  }
-                )
+                focusableWhenDisabled: true
               }
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           Dropdown2,
           {
             source: months,
@@ -8076,7 +8160,7 @@ var CalendarNavigation = (0, import_react42.forwardRef)(function CalendarNavigat
             fullWidth: true
           }
         ),
-        !hideYearDropdown && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        !hideYearDropdown && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           Dropdown2,
           {
             source: years,
@@ -8091,28 +8175,24 @@ var CalendarNavigation = (0, import_react42.forwardRef)(function CalendarNavigat
             fullWidth: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_core13.Tooltip,
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          import_core14.Tooltip,
           {
             placement: "top",
             disabled: canNavigateNext,
             content: "Future dates are out of range",
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              import_core13.Button,
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              IconButton,
               {
+                "aria-label": `Next Month, ${formatDate(
+                  visibleMonth.add({ months: 1 })
+                )}`,
                 disabled: !canNavigateNext,
+                icon: "chevron-right",
                 variant: "secondary",
                 onClick: handleNavigateNext,
                 className: withBaseName2("nextButton"),
-                focusableWhenDisabled: true,
-                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                  import_icons.ChevronRightIcon,
-                  {
-                    "aria-label": `Next Month, ${formatDate(
-                      visibleMonth.add({ months: 1 })
-                    )}`
-                  }
-                )
+                focusableWhenDisabled: true
               }
             )
           }
@@ -8123,22 +8203,22 @@ var CalendarNavigation = (0, import_react42.forwardRef)(function CalendarNavigat
 });
 
 // src/calendar/internal/CalendarWeekHeader.tsx
-var import_react43 = require("react");
-var import_clsx11 = require("clsx");
-var import_core14 = require("@salt-ds/core");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var withBaseName3 = (0, import_core14.makePrefixer)("saltCalendarWeekHeader");
-var CalendarWeekHeader = (0, import_react43.forwardRef)(function CalendarWeekHeader2({ className, ...rest }, ref) {
+var import_react44 = require("react");
+var import_clsx13 = require("clsx");
+var import_core15 = require("@salt-ds/core");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var withBaseName3 = (0, import_core15.makePrefixer)("saltCalendarWeekHeader");
+var CalendarWeekHeader = (0, import_react44.forwardRef)(function CalendarWeekHeader2({ className, ...rest }, ref) {
   const weekdaysShort = daysForLocale("narrow");
   const weekdaysLong = daysForLocale("long");
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       "data-testid": "CalendarWeekHeader",
-      className: (0, import_clsx11.clsx)(withBaseName3(), className),
+      className: (0, import_clsx13.clsx)(withBaseName3(), className),
       ref,
       ...rest,
-      children: weekdaysShort.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      children: weekdaysShort.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "small",
         {
           "aria-hidden": "true",
@@ -8152,21 +8232,21 @@ var CalendarWeekHeader = (0, import_react43.forwardRef)(function CalendarWeekHea
 });
 
 // src/calendar/internal/CalendarCarousel.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 
 // src/calendar/internal/CalendarMonth.tsx
-var import_react46 = require("react");
-var import_clsx14 = require("clsx");
-var import_core17 = require("@salt-ds/core");
+var import_react47 = require("react");
+var import_clsx16 = require("clsx");
+var import_core18 = require("@salt-ds/core");
 
 // src/calendar/internal/CalendarDay.tsx
-var import_core16 = require("@salt-ds/core");
-var import_icons2 = require("@salt-ds/icons");
-var import_clsx13 = require("clsx");
-var import_react45 = require("react");
+var import_core17 = require("@salt-ds/core");
+var import_icons = require("@salt-ds/icons");
+var import_clsx15 = require("clsx");
+var import_react46 = require("react");
 
 // src/calendar/useCalendarDay.ts
-var import_react44 = require("react");
+var import_react45 = require("react");
 
 // src/calendar/internal/useFocusManagement.ts
 function useFocusManagement({ date }) {
@@ -8226,8 +8306,8 @@ function useFocusManagement({ date }) {
 }
 
 // src/calendar/useSelection.ts
-var import_core15 = require("@salt-ds/core");
-var import_clsx12 = require("clsx");
+var import_core16 = require("@salt-ds/core");
+var import_clsx14 = require("clsx");
 function addOrRemoveFromArray(array = [], item) {
   if (Array.isArray(array)) {
     if (array.find((element) => $14e0f24ef4ac5c92$export$ea39ec197993aef0(element, item))) {
@@ -8241,7 +8321,7 @@ var defaultOffset = (date) => date;
 function isRangeOrOffsetSelectionValue(selectionValue) {
   return selectionValue != null && isPlainObject(selectionValue);
 }
-var withBaseName4 = (0, import_core15.makePrefixer)("saltCalendarDay");
+var withBaseName4 = (0, import_core16.makePrefixer)("saltCalendarDay");
 function useSelectionCalendar(props) {
   const {
     hoveredDate: hoveredDateProp,
@@ -8254,7 +8334,7 @@ function useSelectionCalendar(props) {
     // startDateOffset,
     // endDateOffset,
   } = props;
-  const [selectedDate, setSelectedDateState] = (0, import_core15.useControlled)({
+  const [selectedDate, setSelectedDateState] = (0, import_core16.useControlled)({
     controlled: selectedDateProp,
     default: defaultSelectedDate,
     name: "Calendar",
@@ -8326,7 +8406,7 @@ function useSelectionCalendar(props) {
         return false;
     }
   };
-  const [hoveredDate, setHoveredDateState] = (0, import_core15.useControlled)({
+  const [hoveredDate, setHoveredDateState] = (0, import_core16.useControlled)({
     controlled: hoveredDateProp,
     default: void 0,
     name: "Calendar",
@@ -8445,7 +8525,7 @@ function useSelectionDay({ date }) {
       hoveredOffset
     },
     dayProps: {
-      className: (0, import_clsx12.clsx)({
+      className: (0, import_clsx14.clsx)({
         [withBaseName4("selected")]: selected,
         [withBaseName4("selectedSpan")]: selectedSpan,
         [withBaseName4("hoveredSpan")]: hoveredSpan,
@@ -8492,12 +8572,12 @@ function useCalendarDay({ date, month }, ref) {
   const outOfRange = !$14e0f24ef4ac5c92$export$a18c89cbd24170ff(date, month);
   const focused = $14e0f24ef4ac5c92$export$ea39ec197993aef0(date, focusedDate) && calendarFocused && !outOfRange;
   const tabIndex = $14e0f24ef4ac5c92$export$ea39ec197993aef0(date, focusedDate) && !outOfRange ? 0 : -1;
-  const today = $14e0f24ef4ac5c92$export$629b0a497aa65267(date, $14e0f24ef4ac5c92$export$aa8b41735afcabd2());
+  const today2 = $14e0f24ef4ac5c92$export$629b0a497aa65267(date, $14e0f24ef4ac5c92$export$aa8b41735afcabd2());
   const unselectableResult = isDayUnselectable(date) || outOfRange && isOutsideAllowedMonths(date);
   const unselectableReason = typeof unselectableResult !== "boolean" ? unselectableResult == null ? void 0 : unselectableResult.tooltip : "";
   const unselectable = typeof unselectableResult !== "boolean" ? unselectableResult.emphasis : unselectableResult ? "low" : false;
   const hidden = hideOutOfRangeDates && outOfRange;
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     var _a2;
     if (focused) {
       (_a2 = ref.current) == null ? void 0 : _a2.focus({ preventScroll: true });
@@ -8506,7 +8586,7 @@ function useCalendarDay({ date, month }, ref) {
   return {
     status: {
       outOfRange,
-      today,
+      today: today2,
       unselectable,
       focused,
       hidden,
@@ -8514,7 +8594,7 @@ function useCalendarDay({ date, month }, ref) {
     },
     dayProps: {
       tabIndex,
-      "aria-current": today ? "date" : void 0,
+      "aria-current": today2 ? "date" : void 0,
       "aria-hidden": hidden ? "true" : void 0,
       ...eventHandlers,
       ...selectionManager.dayProps
@@ -8524,13 +8604,13 @@ function useCalendarDay({ date, month }, ref) {
 }
 
 // src/calendar/internal/CalendarDay.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var withBaseName5 = (0, import_core16.makePrefixer)("saltCalendarDay");
-var CalendarDay = (0, import_react45.forwardRef)(
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var withBaseName5 = (0, import_core17.makePrefixer)("saltCalendarDay");
+var CalendarDay = (0, import_react46.forwardRef)(
   function CalendarDay2(props, ref) {
     const { className, day, renderDayContents, month, TooltipProps: TooltipProps2, ...rest } = props;
-    const dayRef = (0, import_react45.useRef)(null);
-    const forkedRef = (0, import_core16.useForkRef)(ref, dayRef);
+    const dayRef = (0, import_react46.useRef)(null);
+    const forkedRef = (0, import_core17.useForkRef)(ref, dayRef);
     const { status, dayProps, unselectableReason } = useCalendarDay(
       {
         date: day,
@@ -8538,9 +8618,9 @@ var CalendarDay = (0, import_react45.forwardRef)(
       },
       dayRef
     );
-    const { outOfRange, today, unselectable, hidden } = status;
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_core16.Tooltip,
+    const { outOfRange, today: today2, unselectable, hidden } = status;
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_core17.Tooltip,
       {
         hideIcon: true,
         status: "error",
@@ -8549,19 +8629,19 @@ var CalendarDay = (0, import_react45.forwardRef)(
         placement: "top",
         enterDelay: 300,
         ...TooltipProps2,
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           "button",
           {
             "aria-label": formatDate(day),
             ...dayProps,
             ref: forkedRef,
             ...rest,
-            className: (0, import_clsx13.clsx)(
+            className: (0, import_clsx15.clsx)(
               withBaseName5(),
               {
                 [withBaseName5("hidden")]: hidden,
                 [withBaseName5("outOfRange")]: outOfRange,
-                [withBaseName5("today")]: today,
+                [withBaseName5("today")]: today2,
                 [withBaseName5("unselectable")]: !!unselectable,
                 [withBaseName5("unselectableLow")]: unselectable === "low",
                 [withBaseName5("unselectableMedium")]: unselectable === "medium"
@@ -8570,8 +8650,8 @@ var CalendarDay = (0, import_react45.forwardRef)(
               className
             ),
             children: [
-              unselectable === "medium" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                import_icons2.CloseIcon,
+              unselectable === "medium" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                import_icons.CloseIcon,
                 {
                   "aria-hidden": true,
                   "aria-label": void 0,
@@ -8588,9 +8668,9 @@ var CalendarDay = (0, import_react45.forwardRef)(
 );
 
 // src/calendar/internal/CalendarMonth.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var withBaseName6 = (0, import_core17.makePrefixer)("saltCalendarMonth");
-var CalendarMonth = (0, import_react46.forwardRef)(
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var withBaseName6 = (0, import_core18.makePrefixer)("saltCalendarMonth");
+var CalendarMonth = (0, import_react47.forwardRef)(
   function CalendarMonth2(props, ref) {
     const {
       className,
@@ -8610,20 +8690,20 @@ var CalendarMonth = (0, import_react46.forwardRef)(
       setHoveredDate(event, null);
       onMouseLeave == null ? void 0 : onMouseLeave(event);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "div",
       {
-        className: (0, import_clsx14.clsx)(withBaseName6(), className),
+        className: (0, import_clsx16.clsx)(withBaseName6(), className),
         ref,
         onMouseLeave: handleMouseLeave,
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "div",
           {
             "data-testid": "CalendarDateGrid",
             className: withBaseName6("dateGrid"),
             children: days.map((day) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 CalendarDay,
                 {
                   day: day.date,
@@ -8642,26 +8722,26 @@ var CalendarMonth = (0, import_react46.forwardRef)(
 );
 
 // src/calendar/internal/CalendarCarousel.tsx
-var import_core18 = require("@salt-ds/core");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_core19 = require("@salt-ds/core");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function getMonths(month) {
   return [month.subtract({ months: 1 }), month, month.add({ months: 1 })];
 }
 function usePreviousMonth(visibleMonth) {
-  const previous = (0, import_core18.usePrevious)(visibleMonth, [formatDate(visibleMonth)]);
+  const previous = (0, import_core19.usePrevious)(visibleMonth, [formatDate(visibleMonth)]);
   return previous != null ? previous : $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2());
 }
-var withBaseName7 = (0, import_core18.makePrefixer)("saltCalendarCarousel");
-var CalendarCarousel = (0, import_react47.forwardRef)(function CalendarCarousel2(props, ref) {
+var withBaseName7 = (0, import_core19.makePrefixer)("saltCalendarCarousel");
+var CalendarCarousel = (0, import_react48.forwardRef)(function CalendarCarousel2(props, ref) {
   const { ...rest } = props;
   const {
     state: { visibleMonth }
   } = useCalendarContext();
-  const containerRef = (0, import_react47.useRef)(null);
+  const containerRef = (0, import_react48.useRef)(null);
   const diffIndex = (a, b) => monthDiff(a, b);
-  const { current: baseIndex } = (0, import_react47.useRef)(visibleMonth);
+  const { current: baseIndex } = (0, import_react48.useRef)(visibleMonth);
   const previousVisibleMonth = usePreviousMonth(visibleMonth);
-  (0, import_core18.useIsomorphicLayoutEffect)(() => {
+  (0, import_core19.useIsomorphicLayoutEffect)(() => {
     var _a2, _b;
     if (Math.abs(diffIndex(visibleMonth, previousVisibleMonth)) > 1) {
       (_a2 = containerRef.current) == null ? void 0 : _a2.classList.remove(withBaseName7("shouldAnimate"));
@@ -8669,13 +8749,13 @@ var CalendarCarousel = (0, import_react47.forwardRef)(function CalendarCarousel2
       (_b = containerRef.current) == null ? void 0 : _b.classList.add(withBaseName7("shouldAnimate"));
     }
   }, [formatDate(visibleMonth), formatDate(previousVisibleMonth)]);
-  (0, import_core18.useIsomorphicLayoutEffect)(() => {
+  (0, import_core19.useIsomorphicLayoutEffect)(() => {
     if (containerRef.current) {
       containerRef.current.style.transform = `translate3d(${diffIndex(baseIndex, visibleMonth) * 100}%, 0, 0)`;
     }
   });
-  const [months, setMonths] = (0, import_react47.useState)(() => getMonths(visibleMonth));
-  (0, import_react47.useEffect)(() => {
+  const [months, setMonths] = (0, import_react48.useState)(() => getMonths(visibleMonth));
+  (0, import_react48.useEffect)(() => {
     setMonths((oldMonths) => {
       const newMonths = getMonths(visibleMonth).filter((month) => {
         return !oldMonths.find((oldMonth) => $14e0f24ef4ac5c92$export$a18c89cbd24170ff(oldMonth, month));
@@ -8696,7 +8776,7 @@ var CalendarCarousel = (0, import_react47.forwardRef)(function CalendarCarousel2
     }
     return void 0;
   }, [formatDate(visibleMonth)]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
       className: withBaseName7(),
@@ -8705,7 +8785,7 @@ var CalendarCarousel = (0, import_react47.forwardRef)(function CalendarCarousel2
         position: "relative"
       },
       ref,
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: withBaseName7("track"), ref: containerRef, children: months.map((date, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: withBaseName7("track"), ref: containerRef, children: months.map((date, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "div",
         {
           className: withBaseName7("slide"),
@@ -8713,7 +8793,7 @@ var CalendarCarousel = (0, import_react47.forwardRef)(function CalendarCarousel2
             transform: `translateX(${diffIndex(date, baseIndex) * 100}%)`
           },
           "aria-hidden": index !== 1 ? "true" : void 0,
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CalendarMonth, { isVisible: index === 1, ...rest, date })
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CalendarMonth, { isVisible: index === 1, ...rest, date })
         },
         formatDate(date)
       )) })
@@ -8722,8 +8802,8 @@ var CalendarCarousel = (0, import_react47.forwardRef)(function CalendarCarousel2
 });
 
 // src/calendar/useCalendar.ts
-var import_core19 = require("@salt-ds/core");
-var import_react48 = require("react");
+var import_core20 = require("@salt-ds/core");
+var import_react49 = require("react");
 var defaultIsDayUnselectable = () => false;
 function useCalendar(props) {
   const {
@@ -8744,7 +8824,7 @@ function useCalendar(props) {
     // startDateOffset,
     // endDateOffset,
   } = props;
-  const isOutsideAllowedDates = (0, import_react48.useCallback)(
+  const isOutsideAllowedDates = (0, import_react49.useCallback)(
     (date) => {
       return minDate != null && date.compare(minDate) < 0 || maxDate != null && date.compare(maxDate) > 0;
     },
@@ -8756,7 +8836,7 @@ function useCalendar(props) {
   const isOutsideAllowedYears = (date) => {
     return minDate != null && $14e0f24ef4ac5c92$export$8b7aa55c66d5569e(date).compare(minDate) < 0 || maxDate != null && $14e0f24ef4ac5c92$export$f91e89d3d0406102(date).compare(maxDate) > 0;
   };
-  const isDaySelectable = (0, import_react48.useCallback)(
+  const isDaySelectable = (0, import_react49.useCallback)(
     (date) => !(date && (isDayUnselectable(date) || isOutsideAllowedDates(date))),
     [isDayUnselectable, isOutsideAllowedDates]
   );
@@ -8771,17 +8851,17 @@ function useCalendar(props) {
     onHoveredDateChange,
     hoveredDate
   });
-  const [visibleMonth, setVisibleMonthState] = (0, import_core19.useControlled)({
+  const [visibleMonth, setVisibleMonthState] = (0, import_core20.useControlled)({
     controlled: visibleMonthProp ? $14e0f24ef4ac5c92$export$a5a3b454ada2268e(visibleMonthProp) : void 0,
     default: $14e0f24ef4ac5c92$export$a5a3b454ada2268e(defaultVisibleMonth),
     name: "Calendar",
     state: "visibleMonth"
   });
-  const [calendarFocused, setCalendarFocused] = (0, import_react48.useState)(false);
-  const [focusedDate, setFocusedDateState] = (0, import_react48.useState)(
+  const [calendarFocused, setCalendarFocused] = (0, import_react49.useState)(false);
+  const [focusedDate, setFocusedDateState] = (0, import_react49.useState)(
     $14e0f24ef4ac5c92$export$a5a3b454ada2268e(visibleMonth)
   );
-  const isDayVisible = (0, import_react48.useCallback)(
+  const isDayVisible = (0, import_react49.useCallback)(
     (date) => {
       const startInsideDays = $14e0f24ef4ac5c92$export$a5a3b454ada2268e(visibleMonth);
       if (date.compare(startInsideDays) < 0)
@@ -8791,14 +8871,14 @@ function useCalendar(props) {
     },
     [visibleMonth]
   );
-  const setVisibleMonth = (0, import_react48.useCallback)(
+  const setVisibleMonth = (0, import_react49.useCallback)(
     (event, newVisibleMonth) => {
       setVisibleMonthState(newVisibleMonth);
       onVisibleMonthChange == null ? void 0 : onVisibleMonthChange(event, newVisibleMonth);
     },
     [onVisibleMonthChange, setVisibleMonthState]
   );
-  const setFocusedDate = (0, import_react48.useCallback)(
+  const setFocusedDate = (0, import_react49.useCallback)(
     (event, date) => {
       if ($14e0f24ef4ac5c92$export$ea39ec197993aef0(date, focusedDate) || isOutsideAllowedDates(date))
         return;
@@ -8816,7 +8896,7 @@ function useCalendar(props) {
       setVisibleMonth
     ]
   );
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (!isDayVisible(focusedDate)) {
       setFocusedDateState($14e0f24ef4ac5c92$export$a5a3b454ada2268e(visibleMonth));
     }
@@ -8847,9 +8927,9 @@ function useCalendar(props) {
 }
 
 // src/calendar/Calendar.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var withBaseName8 = (0, import_core20.makePrefixer)("saltCalendar");
-var Calendar = (0, import_react49.forwardRef)(
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var withBaseName8 = (0, import_core21.makePrefixer)("saltCalendar");
+var Calendar = (0, import_react50.forwardRef)(
   function Calendar2(props, ref) {
     const {
       className,
@@ -8860,29 +8940,29 @@ var Calendar = (0, import_react49.forwardRef)(
     } = props;
     const { state, helpers } = useCalendar({ hideYearDropdown, ...rest });
     const { setCalendarFocused } = helpers;
-    const handleFocus = (0, import_react49.useCallback)(() => {
+    const handleFocus = (0, import_react50.useCallback)(() => {
       setCalendarFocused(true);
     }, [setCalendarFocused]);
-    const handleBlur = (0, import_react49.useCallback)(() => {
+    const handleBlur = (0, import_react50.useCallback)(() => {
       setCalendarFocused(false);
     }, [setCalendarFocused]);
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       CalendarContext.Provider,
       {
         value: {
           state,
           helpers
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "div",
           {
-            className: (0, import_clsx15.clsx)(withBaseName8(), className),
+            className: (0, import_clsx17.clsx)(withBaseName8(), className),
             role: "application",
             ref,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarNavigation, { hideYearDropdown }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarWeekHeader, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CalendarNavigation, { hideYearDropdown }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CalendarWeekHeader, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 CalendarCarousel,
                 {
                   onFocus: handleFocus,
@@ -8900,23 +8980,23 @@ var Calendar = (0, import_react49.forwardRef)(
 );
 
 // src/combo-box/ComboBox.tsx
-var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
-var import_core22 = require("@salt-ds/core");
-var import_react51 = require("react");
+var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
+var import_core23 = require("@salt-ds/core");
+var import_react52 = require("react");
 
 // src/list/ChevronIcon.tsx
-var import_clsx16 = __toESM(require("clsx"));
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var classBase8 = "vuuChevronIcon";
+var import_clsx18 = __toESM(require("clsx"));
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var classBase10 = "vuuChevronIcon";
 var ChevronIcon = (props) => {
   const { direction, ...htmlAttributes } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { ...htmlAttributes, className: (0, import_clsx16.default)(classBase8, direction) });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { ...htmlAttributes, className: (0, import_clsx18.default)(classBase10, direction) });
 };
 
 // src/combo-box/useCombobox.ts
-var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
-var import_core21 = require("@salt-ds/core");
-var import_react50 = require("react");
+var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
+var import_core22 = require("@salt-ds/core");
+var import_react51 = require("react");
 var EnterOnly = ["Enter"];
 var useCombobox = ({
   allowBackspaceClearsSelection,
@@ -8957,36 +9037,36 @@ var useCombobox = ({
   const isMultiSelect = isMultiSelection(selectionStrategy);
   const noSelection = () => isMultiSelect ? [] : null;
   const { setFilterPattern } = collectionHook;
-  const setHighlightedIndexRef = (0, import_react50.useRef)(null);
-  const selectedRef = (0, import_react50.useRef)((_a2 = selectedProp != null ? selectedProp : defaultSelected) != null ? _a2 : noSelection());
-  const ignoreSelectOnFocus = (0, import_react50.useRef)(true);
-  const [isOpen, _setIsOpen] = (0, import_core21.useControlled)({
+  const setHighlightedIndexRef = (0, import_react51.useRef)(null);
+  const selectedRef = (0, import_react51.useRef)((_a2 = selectedProp != null ? selectedProp : defaultSelected) != null ? _a2 : noSelection());
+  const ignoreSelectOnFocus = (0, import_react51.useRef)(true);
+  const [isOpen, _setIsOpen] = (0, import_core22.useControlled)({
     controlled: isOpenProp,
     default: defaultIsOpen != null ? defaultIsOpen : false,
     name: "useDropdownList"
   });
-  const [value, setValue] = (0, import_core21.useControlled)({
+  const [value, setValue] = (0, import_core22.useControlled)({
     controlled: void 0,
     default: defaultValue != null ? defaultValue : valueProp,
     name: "ComboBox",
     state: "value"
   });
-  const [disableAriaActiveDescendant, setDisableAriaActiveDescendant] = (0, import_react50.useState)(true);
-  const setIsOpen = (0, import_react50.useCallback)(
+  const [disableAriaActiveDescendant, setDisableAriaActiveDescendant] = (0, import_react51.useState)(true);
+  const setIsOpen = (0, import_react51.useCallback)(
     (isOpen2) => {
       _setIsOpen(isOpen2);
       setDisableAriaActiveDescendant(!isOpen2);
     },
     [_setIsOpen]
   );
-  const highlightSelectedItem = (0, import_react50.useCallback)((selected2) => {
+  const highlightSelectedItem = (0, import_react51.useCallback)((selected2) => {
     var _a3;
     if (Array.isArray(selected2)) {
     } else if (selected2 == null) {
       (_a3 = setHighlightedIndexRef.current) == null ? void 0 : _a3.call(setHighlightedIndexRef, -1);
     }
   }, []);
-  const setTextValue = (0, import_react50.useCallback)(
+  const setTextValue = (0, import_react51.useCallback)(
     (value2, applyFilter = true) => {
       setValue(value2);
       if (applyFilter) {
@@ -8995,7 +9075,7 @@ var useCombobox = ({
     },
     [setFilterPattern, setValue]
   );
-  const reconcileInput = (0, import_react50.useCallback)(
+  const reconcileInput = (0, import_react51.useCallback)(
     (selected2) => {
       let newValue = allowFreeText ? value != null ? value : "" : "";
       if (Array.isArray(selected2)) {
@@ -9025,7 +9105,7 @@ var useCombobox = ({
       value
     ]
   );
-  const applySelection = (0, import_react50.useCallback)(() => {
+  const applySelection = (0, import_react51.useCallback)(() => {
     const { current: selected2 } = selectedRef;
     if (reconcileInput(selected2)) {
       if (selected2) {
@@ -9043,7 +9123,7 @@ var useCombobox = ({
       }
     }
   }, [onSelectionChange, reconcileInput]);
-  const selectFreeTextInputValue = (0, import_react50.useCallback)(() => {
+  const selectFreeTextInputValue = (0, import_react51.useCallback)(() => {
     if (allowFreeText) {
       const text = value == null ? void 0 : value.trim();
       const { current: selected2 } = selectedRef;
@@ -9073,7 +9153,7 @@ var useCombobox = ({
     onSelectionChange,
     itemToString2
   ]);
-  const handleOpenChange = (0, import_react50.useCallback)(
+  const handleOpenChange = (0, import_react51.useCallback)(
     (open, closeReason) => {
       if (open && isMultiSelect) {
         setTextValue("", false);
@@ -9095,7 +9175,7 @@ var useCombobox = ({
       setTextValue
     ]
   );
-  const handleSelectionChange = (0, import_react50.useCallback)(
+  const handleSelectionChange = (0, import_react51.useCallback)(
     (evt, selected2) => {
       selectedRef.current = selected2;
       if (!isMultiSelect) {
@@ -9129,7 +9209,7 @@ var useCombobox = ({
   });
   setHighlightedIndexRef.current = setHighlightedIndex;
   const { onClick: listHandlersOnClick } = listHookListHandlers;
-  const handleListClick = (0, import_react50.useCallback)(
+  const handleListClick = (0, import_react51.useCallback)(
     (evt) => {
       var _a3;
       (_a3 = document.getElementById(`${id}-input`)) == null ? void 0 : _a3.focus();
@@ -9137,7 +9217,7 @@ var useCombobox = ({
     },
     [id, listHandlersOnClick]
   );
-  const handleInputChange = (0, import_react50.useCallback)(
+  const handleInputChange = (0, import_react51.useCallback)(
     (evt) => {
       const newValue = evt.target.value;
       setValue(newValue);
@@ -9150,7 +9230,7 @@ var useCombobox = ({
     },
     [setFilterPattern, setIsOpen, setValue]
   );
-  const handleInputKeyDown = (0, import_react50.useCallback)(
+  const handleInputKeyDown = (0, import_react51.useCallback)(
     (e) => {
       var _a3, _b;
       if (e.key === "Enter" && value !== void 0 && value !== "" && allowEnterCommitsText) {
@@ -9174,7 +9254,7 @@ var useCombobox = ({
   );
   const { onFocus: inputOnFocus = onFocus } = InputProps4;
   const { onFocus: listOnFocus } = listControlProps;
-  const handleInputFocus = (0, import_react50.useCallback)(
+  const handleInputFocus = (0, import_react51.useCallback)(
     (evt) => {
       setDisableAriaActiveDescendant(false);
       listOnFocus == null ? void 0 : listOnFocus(evt);
@@ -9182,7 +9262,7 @@ var useCombobox = ({
     },
     [inputOnFocus, listOnFocus]
   );
-  const listFocused = (0, import_react50.useCallback)(
+  const listFocused = (0, import_react51.useCallback)(
     (evt) => {
       const element = evt.relatedTarget;
       return (element == null ? void 0 : element.id) === `${id}-list`;
@@ -9191,7 +9271,7 @@ var useCombobox = ({
   );
   const { onBlur: inputOnBlur = onBlur } = InputProps4;
   const { onBlur: listOnBlur } = listControlProps;
-  const handleInputBlur = (0, import_react50.useCallback)(
+  const handleInputBlur = (0, import_react51.useCallback)(
     (evt) => {
       if (listFocused(evt)) {
       } else {
@@ -9203,7 +9283,7 @@ var useCombobox = ({
     [listFocused, listOnBlur, inputOnBlur]
   );
   const { onSelect: inputOnSelect } = InputProps4;
-  const handleInputSelect = (0, import_react50.useCallback)(
+  const handleInputSelect = (0, import_react51.useCallback)(
     (event) => {
       if (ignoreSelectOnFocus.current) {
         ignoreSelectOnFocus.current = false;
@@ -9213,7 +9293,7 @@ var useCombobox = ({
     },
     [inputOnSelect]
   );
-  (0, import_vuu_utils15.useLayoutEffectSkipFirst)(() => {
+  (0, import_vuu_utils16.useLayoutEffectSkipFirst)(() => {
     if (hasSelection(selected)) {
       highlightSelectedItem(selected);
     } else {
@@ -9263,8 +9343,8 @@ var useCombobox = ({
 };
 
 // src/combo-box/ComboBox.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var ComboBox = (0, import_react51.forwardRef)(function Combobox({
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var ComboBox = (0, import_react52.forwardRef)(function Combobox({
   InputProps: InputPropsProp,
   ListProps: ListProps3,
   PopupProps,
@@ -9303,7 +9383,7 @@ var ComboBox = (0, import_react51.forwardRef)(function Combobox({
   width = 180,
   ...props
 }, forwardedRef) {
-  const id = (0, import_vuu_utils16.useId)(idProp);
+  const id = (0, import_vuu_utils17.useId)(idProp);
   const isMultiSelect = isMultiSelection(selectionStrategy);
   const valueFromSelected = (item) => {
     var _a2;
@@ -9367,14 +9447,14 @@ var ComboBox = (0, import_react51.forwardRef)(function Combobox({
     selectionStrategy,
     value: initialValue
   });
-  const handleDropdownIconClick = (0, import_react51.useCallback)(() => {
+  const handleDropdownIconClick = (0, import_react52.useCallback)(() => {
     if (isOpen) {
       onOpenChange(false, "toggle");
     } else {
       onOpenChange(true);
     }
   }, [isOpen, onOpenChange]);
-  const endAdornment = endAdornmentProp === null ? null : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const endAdornment = endAdornmentProp === null ? null : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     ChevronIcon,
     {
       direction: isOpen ? "up" : "down",
@@ -9382,7 +9462,7 @@ var ComboBox = (0, import_react51.forwardRef)(function Combobox({
       role: "button"
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CollectionProvider, { collectionHook, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CollectionProvider, { collectionHook, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     DropdownBase,
     {
       ...props,
@@ -9394,8 +9474,8 @@ var ComboBox = (0, import_react51.forwardRef)(function Combobox({
       ref: forwardedRef,
       width,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_core22.Input,
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          import_core23.Input,
           {
             ...InputProps4,
             disabled,
@@ -9403,7 +9483,7 @@ var ComboBox = (0, import_react51.forwardRef)(function Combobox({
             endAdornment
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           List,
           {
             ...ListProps3,
@@ -9426,11 +9506,11 @@ var ComboBox = (0, import_react51.forwardRef)(function Combobox({
 });
 
 // src/cycle-state-button/CycleStateButton.tsx
-var import_core23 = require("@salt-ds/core");
-var import_clsx17 = __toESM(require("clsx"));
-var import_react52 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var classBase9 = "vuuCycleStateButton";
+var import_core24 = require("@salt-ds/core");
+var import_clsx19 = __toESM(require("clsx"));
+var import_react53 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var classBase11 = "vuuCycleStateButton";
 var getNextValue = (value, valueList) => {
   const index = valueList.indexOf(value.toUpperCase());
   if (index === valueList.length - 1) {
@@ -9439,14 +9519,14 @@ var getNextValue = (value, valueList) => {
     return valueList[index + 1];
   }
 };
-var CycleStateButton = (0, import_react52.forwardRef)(function CycleStateButton2({
+var CycleStateButton = (0, import_react53.forwardRef)(function CycleStateButton2({
   className,
   onCommit,
   value = "",
   values,
   ...buttonProps
 }, forwardedRef) {
-  const handleClick = (0, import_react52.useCallback)(
+  const handleClick = (0, import_react53.useCallback)(
     (evt) => {
       const nextValue = getNextValue(value, values);
       onCommit(evt, nextValue).then((response) => {
@@ -9457,14 +9537,14 @@ var CycleStateButton = (0, import_react52.forwardRef)(function CycleStateButton2
     },
     [onCommit, value, values]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    import_core23.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_core24.Button,
     {
       ...buttonProps,
-      className: (0, import_clsx17.default)(
-        classBase9,
+      className: (0, import_clsx19.default)(
+        classBase11,
         className,
-        `${classBase9}-${value.toLowerCase()}`
+        `${classBase11}-${value.toLowerCase()}`
       ),
       onClick: handleClick,
       ref: forwardedRef,
@@ -9473,96 +9553,404 @@ var CycleStateButton = (0, import_react52.forwardRef)(function CycleStateButton2
   );
 });
 
-// src/date-picker/DatePicker.tsx
+// src/date-input/DateInput.tsx
+var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
+var import_clsx21 = require("clsx");
 var import_react57 = require("react");
-var import_clsx20 = require("clsx");
 
-// src/date-picker/input/DatePickerInput.tsx
-var import_react53 = require("react");
-var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
-var import_clsx18 = require("clsx");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var baseClass2 = "vuuDatePickerInput";
-var DatePickerInput = (props) => {
-  var _a2;
-  const { value, onChange, className } = props;
-  const onInputChange = (0, import_react53.useCallback)(
-    (e) => {
-      const v = e.target.value;
-      if (v === "")
-        return;
-      else
-        onChange((0, import_vuu_utils17.toCalendarDate)(new Date(v)));
-    },
-    [onChange]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    "input",
-    {
-      className: (0, import_clsx18.clsx)("saltInput-input", baseClass2, className),
-      type: "date",
-      value: (_a2 = value == null ? void 0 : value.toString()) != null ? _a2 : "",
-      onChange: onInputChange,
-      "aria-label": "date-input",
-      max: "9999-12-31"
-    }
-  );
-};
+// src/date-popup/DatePopup.tsx
+var import_core25 = require("@salt-ds/core");
+var import_clsx20 = __toESM(require("clsx"));
+var import_react55 = require("react");
 
-// src/date-picker/internal/CalendarIconButton.tsx
-var import_core24 = require("@salt-ds/core");
-var import_icons3 = require("@salt-ds/icons");
+// src/date-popup/useDatePopup.ts
 var import_react54 = require("react");
-var import_clsx19 = __toESM(require("clsx"));
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var baseClass3 = "vuuDatePicker-calendarIconButton";
-var CalendarIconButton = (0, import_react54.forwardRef)(function CalendarIconButton2({ className, ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_core24.Button,
-    {
-      className: (0, import_clsx19.default)(baseClass3, className),
-      variant: "secondary",
-      "aria-label": "calendar-icon-button",
-      ref,
-      ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons3.CalendarIcon, {})
-    }
+var SELECTED_DAY = ".saltCalendarDay-selected:not(.saltCalendarDay-outOfRange)";
+var useDatePopup = ({
+  onChange,
+  onPopupClose,
+  onPopupOpen,
+  selectedDate
+}) => {
+  const [date, setDate] = (0, import_react54.useState)(selectedDate);
+  const [, forceUpdate] = (0, import_react54.useState)({});
+  const [isOpen, setIsOpen] = (0, import_react54.useState)(false);
+  const triggererRef = (0, import_react54.useRef)(null);
+  const calendarRef = (0, import_react54.useRef)(null);
+  const visibleMonthRef = (0, import_react54.useRef)(selectedDate);
+  const setVisibleMonth = (0, import_react54.useMemo)(() => {
+    const setValue = (v) => {
+      if (v.toString() !== visibleMonthRef.current.toString()) {
+        visibleMonthRef.current = v;
+        forceUpdate({});
+      }
+    };
+    setValue(selectedDate);
+    return setValue;
+  }, [selectedDate]);
+  const handleOpenChange = (0, import_react54.useCallback)(
+    (open, reason) => {
+      var _a2;
+      setIsOpen(open);
+      if (open) {
+        onPopupOpen == null ? void 0 : onPopupOpen();
+        requestAnimationFrame(() => {
+          var _a3;
+          const el = (_a3 = calendarRef.current) == null ? void 0 : _a3.querySelector(
+            SELECTED_DAY
+          );
+          el == null ? void 0 : el.focus();
+        });
+      } else {
+        if (reason !== "Tab") {
+          (_a2 = triggererRef.current) == null ? void 0 : _a2.focus();
+        }
+        onPopupClose == null ? void 0 : onPopupClose(reason);
+      }
+    },
+    [onPopupClose, onPopupOpen]
   );
-});
-
-// src/date-picker/useBaseDatePicker.ts
-var import_react55 = require("react");
-function useBaseDatePicker(props) {
-  var _a2;
-  const { onBlur } = props;
-  const [visibleMonth, setVisibleMonth] = (0, import_react55.useState)(
-    props.variant === "default" ? props.selectedDate : (_a2 = props.selectedDate) == null ? void 0 : _a2.startDate
+  const handleDateSelection = (0, import_react54.useCallback)(
+    (e, date2) => {
+      setDate(date2);
+      console.log(date2.toString());
+      visibleMonthRef.current = date2;
+      handleOpenChange(false, "select");
+      onChange(date2);
+    },
+    [handleOpenChange, onChange]
   );
-  const handleOnBlur = (0, import_react55.useCallback)(
-    (e) => {
-      if (!e.currentTarget.contains(e.relatedTarget)) {
-        onBlur == null ? void 0 : onBlur();
-      }
+  const handleVisibleMonthChange = (0, import_react54.useCallback)(
+    (e, date2) => {
+      setVisibleMonth(date2);
     },
-    [onBlur]
+    [setVisibleMonth]
   );
   return {
-    handleOnBlur,
-    visibleMonth,
-    handleVisibleMonthChange: setVisibleMonth
+    calendarRef,
+    date,
+    handleOpenChange,
+    isOpen,
+    onSelectedDateChange: handleDateSelection,
+    onVisibleMonthChange: handleVisibleMonthChange,
+    triggererRef,
+    visibleMonth: visibleMonthRef.current
   };
-}
+};
 
-// src/date-picker/useBaseDatePickerDropdown.ts
+// src/date-popup/DatePopup.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var classBase12 = "vuuDatePopup";
+var tz = $14e0f24ef4ac5c92$export$aa8b41735afcabd2();
+var today = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3(tz);
+var DatePopup = (0, import_react55.forwardRef)(
+  function DatePopup2({
+    selectedDate,
+    onChange,
+    onPopupClose,
+    onPopupOpen,
+    selectionVariant,
+    "data-embedded": dataEmbedded,
+    ...htmlAttributes
+  }, forwardedRef) {
+    const {
+      calendarRef,
+      date,
+      isOpen,
+      onSelectedDateChange,
+      onVisibleMonthChange,
+      handleOpenChange,
+      triggererRef,
+      visibleMonth
+    } = useDatePopup({
+      onChange,
+      onPopupClose,
+      onPopupOpen,
+      selectedDate: selectedDate || today,
+      selectionVariant
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      DropdownBase,
+      {
+        ...htmlAttributes,
+        className: classBase12,
+        isOpen,
+        placement: "below",
+        onOpenChange: handleOpenChange,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            IconButton,
+            {
+              "data-embedded": dataEmbedded,
+              icon: "date",
+              ref: (0, import_core25.useForkRef)(forwardedRef, triggererRef),
+              variant: "secondary",
+              className: (0, import_clsx20.default)({ "saltButton-active": isOpen })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            Calendar,
+            {
+              visibleMonth,
+              ref: calendarRef,
+              selectedDate: date,
+              selectionVariant: "default",
+              onSelectedDateChange,
+              onVisibleMonthChange,
+              className: `${classBase12}-calendar`
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+// src/date-input/useDatePicker.ts
 var import_react56 = require("react");
+function useDatePicker({ onBlur }) {
+  const handleOnBlur = (0, import_react56.useCallback)(
+    (e) => {
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        onBlur == null ? void 0 : onBlur();
+      }
+    },
+    [onBlur]
+  );
+  return {
+    handleOnBlur
+  };
+}
+
+// src/date-input/DateInput.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var classBase13 = "vuuDateInput";
+var DateInput = ({
+  selectedDate,
+  onChange,
+  onBlur,
+  className,
+  ...htmlAttributes
+}) => {
+  var _a2;
+  const { handleOnBlur } = useDatePicker({ onBlur });
+  const popupRef = (0, import_react57.useRef)(null);
+  const onInputChange = (0, import_react57.useCallback)(
+    (e) => {
+      const v = e.target.value;
+      if (v === "")
+        return;
+      else
+        onChange((0, import_vuu_utils18.toCalendarDate)(new Date(v)));
+    },
+    [onChange]
+  );
+  const onKeyDown = (0, import_react57.useCallback)((e) => {
+    if (e.key === "Tab" && !e.shiftKey) {
+      console.log({ button: popupRef.current });
+      requestAnimationFrame(() => {
+        var _a3;
+        (_a3 = popupRef.current) == null ? void 0 : _a3.focus();
+      });
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    "div",
+    {
+      ...htmlAttributes,
+      className: (0, import_clsx21.clsx)(classBase13, className),
+      onBlur: handleOnBlur,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "input",
+          {
+            "aria-label": "date-input",
+            className: (0, import_clsx21.clsx)("saltInput-input", classBase13, className),
+            type: "date",
+            value: (_a2 = selectedDate == null ? void 0 : selectedDate.toString()) != null ? _a2 : "",
+            onChange: onInputChange,
+            onKeyDown,
+            max: "9999-12-31"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          DatePopup,
+          {
+            "data-embedded": true,
+            onBlur,
+            onChange,
+            ref: popupRef,
+            selectedDate,
+            selectionVariant: "default"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/date-input/DateRangeInput.tsx
+var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
+var import_clsx22 = __toESM(require("clsx"));
+var import_react58 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var classBase14 = "vuuDateInput";
+var DateRangeInput = ({
+  selectedDateRange,
+  onChange,
+  className,
+  onBlur
+}) => {
+  var _a2, _b, _c, _d;
+  const { handleOnBlur } = useDatePicker({ onBlur });
+  const getHandleInputChange = (0, import_react58.useCallback)(
+    (k) => (e) => {
+      const v = e.target.value;
+      onChange({ ...selectedDateRange, [k]: (0, import_vuu_utils19.toCalendarDate)(new Date(v)) });
+    },
+    [selectedDateRange, onChange]
+  );
+  const handleDateInputChange = (0, import_react58.useCallback)(
+    (dateRange) => {
+      console.log("date range change", {
+        dateRange
+      });
+    },
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx22.default)("saltInput saltInput-primary", classBase14, className),
+      onBlur: handleOnBlur,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "input",
+          {
+            className: (0, import_clsx22.default)("saltInput-input", classBase14, className),
+            type: "date",
+            value: (_b = (_a2 = selectedDateRange == null ? void 0 : selectedDateRange["startDate"]) == null ? void 0 : _a2.toString()) != null ? _b : "",
+            onChange: getHandleInputChange("startDate"),
+            "aria-label": "date-input",
+            max: "9999-12-31"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: "\u2014" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "input",
+          {
+            className: (0, import_clsx22.default)("saltInput-input", classBase14, className),
+            type: "date",
+            value: (_d = (_c = selectedDateRange == null ? void 0 : selectedDateRange["endDate"]) == null ? void 0 : _c.toString()) != null ? _d : "",
+            onChange: getHandleInputChange("endDate"),
+            "aria-label": "date-input",
+            max: "9999-12-31"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          DatePopup,
+          {
+            onBlur,
+            onChange: handleDateInputChange,
+            selectedDate: selectedDateRange == null ? void 0 : selectedDateRange["startDate"],
+            selectionVariant: "range"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/date-picker/DatePicker.tsx
+var import_react63 = require("react");
+var import_clsx25 = require("clsx");
+
+// src/date-picker/input/DatePickerInput.tsx
+var import_react59 = require("react");
+var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
+var import_clsx23 = require("clsx");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var baseClass2 = "vuuDatePickerInput";
+var DatePickerInput = (props) => {
+  var _a2;
+  const { value, onChange, className } = props;
+  const onInputChange = (0, import_react59.useCallback)(
+    (e) => {
+      const v = e.target.value;
+      if (v === "")
+        return;
+      else
+        onChange((0, import_vuu_utils20.toCalendarDate)(new Date(v)));
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    "input",
+    {
+      className: (0, import_clsx23.clsx)("saltInput-input", baseClass2, className),
+      type: "date",
+      value: (_a2 = value == null ? void 0 : value.toString()) != null ? _a2 : "",
+      onChange: onInputChange,
+      "aria-label": "date-input",
+      max: "9999-12-31"
+    }
+  );
+};
+
+// src/date-picker/internal/CalendarIconButton.tsx
+var import_core26 = require("@salt-ds/core");
+var import_icons2 = require("@salt-ds/icons");
+var import_react60 = require("react");
+var import_clsx24 = __toESM(require("clsx"));
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var baseClass3 = "vuuDatePicker-calendarIconButton";
+var CalendarIconButton = (0, import_react60.forwardRef)(function CalendarIconButton2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_core26.Button,
+    {
+      className: (0, import_clsx24.default)(baseClass3, className),
+      variant: "secondary",
+      "aria-label": "calendar-icon-button",
+      ref,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons2.CalendarIcon, {})
+    }
+  );
+});
+
+// src/date-picker/useBaseDatePicker.ts
+var import_react61 = require("react");
+function useBaseDatePicker(props) {
+  var _a2;
+  const { onBlur } = props;
+  const [visibleMonth, setVisibleMonth] = (0, import_react61.useState)(
+    props.variant === "default" ? props.selectedDate : (_a2 = props.selectedDate) == null ? void 0 : _a2.startDate
+  );
+  const handleOnBlur = (0, import_react61.useCallback)(
+    (e) => {
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        onBlur == null ? void 0 : onBlur();
+      }
+    },
+    [onBlur]
+  );
+  return {
+    handleOnBlur,
+    visibleMonth,
+    handleVisibleMonthChange: setVisibleMonth
+  };
+}
+
+// src/date-picker/useBaseDatePickerDropdown.ts
+var import_react62 = require("react");
 function useBaseDatePickerDropdown({
   onVisibleMonthChange,
   onSelectedDateChange,
   shouldCloseOnSelectionChange
 }) {
-  const [isOpen, setIsOpen] = (0, import_react56.useState)(false);
-  const triggererRef = (0, import_react56.useRef)(null);
-  const handleDateSelection = (0, import_react56.useCallback)(
+  const [isOpen, setIsOpen] = (0, import_react62.useState)(false);
+  const triggererRef = (0, import_react62.useRef)(null);
+  const handleDateSelection = (0, import_react62.useCallback)(
     (_, d) => {
       var _a2;
       onSelectedDateChange(d);
@@ -9572,7 +9960,7 @@ function useBaseDatePickerDropdown({
     },
     [onSelectedDateChange, shouldCloseOnSelectionChange]
   );
-  const handleVisibleMonthChange = (0, import_react56.useCallback)(
+  const handleVisibleMonthChange = (0, import_react62.useCallback)(
     (_, d) => {
       var _a2;
       onVisibleMonthChange(d);
@@ -9590,26 +9978,26 @@ function useBaseDatePickerDropdown({
 }
 
 // src/date-picker/DatePicker.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var baseClass4 = "vuuDatePicker";
 var DatePicker = (props) => {
   const { selectedDate, onSelectedDateChange, onBlur, className } = props;
   const { visibleMonth, handleVisibleMonthChange, handleOnBlur } = useBaseDatePicker({ variant: "default", selectedDate, onBlur });
-  const handleInputChange = (0, import_react57.useCallback)(
+  const handleInputChange = (0, import_react63.useCallback)(
     (d) => {
       onSelectedDateChange(d);
       handleVisibleMonthChange(d);
     },
     [onSelectedDateChange, handleVisibleMonthChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
-      className: (0, import_clsx20.clsx)("saltInput saltInput-primary", baseClass4, className),
+      className: (0, import_clsx25.clsx)("saltInput saltInput-primary", baseClass4, className),
       onBlur: handleOnBlur,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DatePickerInput, { value: selectedDate, onChange: handleInputChange }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DatePickerInput, { value: selectedDate, onChange: handleInputChange }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           DatePickerDropdown,
           {
             visibleMonth,
@@ -9629,7 +10017,7 @@ var DatePickerDropdown = (props) => {
     className,
     ...rest
   } = props;
-  const shouldCloseOnSelectionChange = (0, import_react57.useCallback)(
+  const shouldCloseOnSelectionChange = (0, import_react63.useCallback)(
     () => !!closeOnSelection,
     [closeOnSelection]
   );
@@ -9644,8 +10032,8 @@ var DatePickerDropdown = (props) => {
     onSelectedDateChange,
     shouldCloseOnSelectionChange
   });
-  const defaultSelectedDate = (0, import_react57.useMemo)(() => $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  const defaultSelectedDate = (0, import_react63.useMemo)(() => $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     DropdownBase,
     {
       placement: "below",
@@ -9653,8 +10041,8 @@ var DatePickerDropdown = (props) => {
       onOpenChange: handleOpenChange,
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CalendarIconButton, { ref: triggererRef }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CalendarIconButton, { ref: triggererRef }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           Calendar,
           {
             selectionVariant: "default",
@@ -9671,32 +10059,32 @@ var DatePickerDropdown = (props) => {
 };
 
 // src/date-picker/DateRangePicker.tsx
-var import_react59 = require("react");
-var import_clsx22 = require("clsx");
+var import_react65 = require("react");
+var import_clsx27 = require("clsx");
 
 // src/date-picker/input/DateRangePickerInput.tsx
-var import_react58 = require("react");
-var import_clsx21 = require("clsx");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react64 = require("react");
+var import_clsx26 = require("clsx");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var baseClass5 = "vuuDateRangePickerInput";
 var DateRangePickerInput = (props) => {
   const { value, onChange, className } = props;
-  const getHandleInputChange = (0, import_react58.useCallback)(
+  const getHandleInputChange = (0, import_react64.useCallback)(
     (k) => (d) => {
       onChange({ ...value, [k]: d });
     },
     [value, onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: (0, import_clsx21.clsx)(baseClass5, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: (0, import_clsx26.clsx)(baseClass5, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       DatePickerInput,
       {
         value: value == null ? void 0 : value["startDate"],
         onChange: getHandleInputChange("startDate")
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: "\u2014" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: "\u2014" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       DatePickerInput,
       {
         value: value == null ? void 0 : value["endDate"],
@@ -9707,12 +10095,12 @@ var DateRangePickerInput = (props) => {
 };
 
 // src/date-picker/DateRangePicker.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var baseClass6 = "vuuDatePicker";
 var DateRangePicker = (props) => {
   const { selectedDate, onSelectedDateChange, className, onBlur } = props;
   const { visibleMonth, handleVisibleMonthChange, handleOnBlur } = useBaseDatePicker({ variant: "range", selectedDate, onBlur });
-  const handleInputChange = (0, import_react59.useCallback)(
+  const handleInputChange = (0, import_react65.useCallback)(
     (r) => {
       var _a2;
       onSelectedDateChange(r);
@@ -9720,14 +10108,14 @@ var DateRangePicker = (props) => {
     },
     [onSelectedDateChange, handleVisibleMonthChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
-      className: (0, import_clsx22.clsx)("saltInput saltInput-primary", baseClass6, className),
+      className: (0, import_clsx27.clsx)("saltInput saltInput-primary", baseClass6, className),
       onBlur: handleOnBlur,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DateRangePickerInput, { value: selectedDate, onChange: handleInputChange }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DateRangePickerInput, { value: selectedDate, onChange: handleInputChange }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           DateRangePickerDropdown,
           {
             ...props,
@@ -9747,7 +10135,7 @@ var DateRangePickerDropdown = (props) => {
     className,
     ...rest
   } = props;
-  const shouldCloseOnSelectionChange = (0, import_react59.useCallback)(
+  const shouldCloseOnSelectionChange = (0, import_react65.useCallback)(
     (r) => !!(closeOnSelection && r.endDate),
     [closeOnSelection]
   );
@@ -9762,11 +10150,11 @@ var DateRangePickerDropdown = (props) => {
     onSelectedDateChange,
     shouldCloseOnSelectionChange
   });
-  const defaultSelectedDate = (0, import_react59.useMemo)(
+  const defaultSelectedDate = (0, import_react65.useMemo)(
     () => ({ startDate: $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()) }),
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     DropdownBase,
     {
       placement: "below",
@@ -9774,8 +10162,8 @@ var DateRangePickerDropdown = (props) => {
       className,
       onOpenChange: handleOpenChange,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CalendarIconButton, { ref: triggererRef }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CalendarIconButton, { ref: triggererRef }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           Calendar,
           {
             selectionVariant: "range",
@@ -9792,12 +10180,12 @@ var DateRangePickerDropdown = (props) => {
 };
 
 // src/editable/editable-utils.ts
-var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
 var buildValidationChecker = (rules) => (value) => applyRules(rules, value);
 function applyRules(rules, value) {
   let result = void 0;
   for (const rule of rules) {
-    const editRuleValidator = (0, import_vuu_utils18.getEditRuleValidator)(rule.name);
+    const editRuleValidator = (0, import_vuu_utils21.getEditRuleValidator)(rule.name);
     if (editRuleValidator) {
       const ruleResult = editRuleValidator(rule, value);
       switch (ruleResult) {
@@ -9825,9 +10213,9 @@ function applyRules(rules, value) {
 }
 
 // src/editable/useEditableText.ts
-var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
-var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
-var import_react60 = require("react");
+var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils23 = require("@vuu-ui/vuu-utils");
+var import_react66 = require("react");
 var WarnCommit = () => {
   console.warn(
     "onCommit handler has not been provided to InputCell cell renderer"
@@ -9840,15 +10228,15 @@ var useEditableText = ({
   onCommit,
   type
 }) => {
-  const [message, setMessage] = (0, import_react60.useState)();
-  const [value, setValue] = (0, import_react60.useState)(initialValue);
-  const initialValueRef = (0, import_react60.useRef)(initialValue);
-  const isDirtyRef = (0, import_react60.useRef)(false);
-  const hasCommittedRef = (0, import_react60.useRef)(false);
-  (0, import_vuu_utils19.useLayoutEffectSkipFirst)(() => {
+  const [message, setMessage] = (0, import_react66.useState)();
+  const [value, setValue] = (0, import_react66.useState)(initialValue);
+  const initialValueRef = (0, import_react66.useRef)(initialValue);
+  const isDirtyRef = (0, import_react66.useRef)(false);
+  const hasCommittedRef = (0, import_react66.useRef)(false);
+  (0, import_vuu_utils22.useLayoutEffectSkipFirst)(() => {
     setValue(initialValue);
   }, [initialValue]);
-  const commit = (0, import_react60.useCallback)(
+  const commit = (0, import_react66.useCallback)(
     (target) => {
       if (isDirtyRef.current) {
         hasCommittedRef.current = true;
@@ -9861,20 +10249,20 @@ var useEditableText = ({
           onCommit(value).then((response) => {
             if (response === true) {
               isDirtyRef.current = false;
-              (0, import_vuu_utils20.dispatchCustomEvent)(target, "vuu-commit");
+              (0, import_vuu_utils23.dispatchCustomEvent)(target, "vuu-commit");
             } else {
               setMessage(response);
             }
           });
         }
       } else {
-        (0, import_vuu_utils20.dispatchCustomEvent)(target, "vuu-commit");
+        (0, import_vuu_utils23.dispatchCustomEvent)(target, "vuu-commit");
         hasCommittedRef.current = false;
       }
     },
     [clientSideEditValidationCheck, onCommit, value]
   );
-  const handleKeyDown = (0, import_react60.useCallback)(
+  const handleKeyDown = (0, import_react66.useCallback)(
     (evt) => {
       if (evt.key === "Enter") {
         commit(evt.target);
@@ -9890,7 +10278,7 @@ var useEditableText = ({
     },
     [commit]
   );
-  const handleBlur = (0, import_react60.useCallback)(
+  const handleBlur = (0, import_react66.useCallback)(
     (evt) => {
       if (isDirtyRef.current) {
         commit(evt.target);
@@ -9898,7 +10286,7 @@ var useEditableText = ({
     },
     [commit]
   );
-  const handleChange = (0, import_react60.useCallback)(
+  const handleChange = (0, import_react66.useCallback)(
     (evt) => {
       let typedValue = evt.target.value;
       if (type === "number" && !isNaN(parseFloat(typedValue))) {
@@ -9927,12 +10315,12 @@ var useEditableText = ({
 };
 
 // src/editable-label/EditableLabel.tsx
-var import_clsx23 = __toESM(require("clsx"));
-var import_react61 = require("react");
-var import_core25 = require("@salt-ds/core");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var classBase10 = "vuuEditableLabel";
-var EditableLabel = (0, import_react61.forwardRef)(function EditableLabel2({
+var import_clsx28 = __toESM(require("clsx"));
+var import_react67 = require("react");
+var import_core27 = require("@salt-ds/core");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var classBase15 = "vuuEditableLabel";
+var EditableLabel = (0, import_react67.forwardRef)(function EditableLabel2({
   className: classNameProp,
   defaultEditing,
   defaultValue,
@@ -9943,28 +10331,28 @@ var EditableLabel = (0, import_react61.forwardRef)(function EditableLabel2({
   value: valueProp,
   ...restProps
 }, forwardedRef) {
-  const inputRef = (0, import_react61.useRef)(null);
-  const editingRef = (0, import_react61.useRef)(false);
-  const [value, setValue] = (0, import_core25.useControlled)({
+  const inputRef = (0, import_react67.useRef)(null);
+  const editingRef = (0, import_react67.useRef)(false);
+  const [value, setValue] = (0, import_core27.useControlled)({
     controlled: valueProp,
     default: defaultValue != null ? defaultValue : "",
     name: "EditableLabel",
     state: "value"
   });
-  const [editing, _setEditing] = (0, import_core25.useControlled)({
+  const [editing, _setEditing] = (0, import_core27.useControlled)({
     controlled: editingProp,
     default: defaultEditing != null ? defaultEditing : false,
     name: "EditableLabel",
     state: "editing"
   });
-  const setEditing = (0, import_react61.useCallback)(
+  const setEditing = (0, import_react67.useCallback)(
     (value2) => {
       _setEditing(editingRef.current = value2);
     },
     [_setEditing]
   );
-  const initialValue = (0, import_react61.useRef)(value);
-  (0, import_react61.useLayoutEffect)(() => {
+  const initialValue = (0, import_react67.useRef)(value);
+  (0, import_react67.useLayoutEffect)(() => {
     if (editing) {
       if (inputRef.current !== null) {
         inputRef.current.select();
@@ -9972,7 +10360,7 @@ var EditableLabel = (0, import_react61.forwardRef)(function EditableLabel2({
       }
     }
   }, [editing, inputRef]);
-  const enterEditMode = (0, import_react61.useCallback)(() => {
+  const enterEditMode = (0, import_react67.useCallback)(() => {
     setEditing(true);
     onEnterEditMode && onEnterEditMode();
   }, [onEnterEditMode, setEditing]);
@@ -10014,10 +10402,10 @@ var EditableLabel = (0, import_react61.forwardRef)(function EditableLabel2({
       exitEditMode({ cancelEdit: true });
     }
   };
-  const className = (0, import_clsx23.default)(classBase10, classNameProp, {
-    [`${classBase10}-editing`]: editing
+  const className = (0, import_clsx28.default)(classBase15, classNameProp, {
+    [`${classBase15}-editing`]: editing
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       ...restProps,
@@ -10025,10 +10413,10 @@ var EditableLabel = (0, import_react61.forwardRef)(function EditableLabel2({
       onDoubleClick: handleDoubleClick,
       "data-text": value,
       ref: forwardedRef,
-      children: editing ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        import_core25.Input,
+      children: editing ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        import_core27.Input,
         {
-          inputProps: { className: `${classBase10}-input`, spellCheck: false },
+          inputProps: { className: `${classBase15}-input`, spellCheck: false },
           value,
           onBlur: handleBlur,
           onChange: handleChange,
@@ -10038,27 +10426,27 @@ var EditableLabel = (0, import_react61.forwardRef)(function EditableLabel2({
           textAlign: "left",
           variant: "secondary"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: `${classBase10}-label`, children: value })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: `${classBase15}-label`, children: value })
     }
   );
 });
 
 // src/expando-input/ExpandoInput.tsx
-var import_clsx25 = __toESM(require("clsx"));
-var import_react63 = require("react");
+var import_clsx30 = __toESM(require("clsx"));
+var import_react69 = require("react");
 
 // src/vuu-input/VuuInput.tsx
 var import_vuu_popups4 = require("@vuu-ui/vuu-popups");
-var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
-var import_core26 = require("@salt-ds/core");
-var import_clsx24 = __toESM(require("clsx"));
-var import_react62 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var classBase11 = "vuuInput";
+var import_vuu_utils24 = require("@vuu-ui/vuu-utils");
+var import_core28 = require("@salt-ds/core");
+var import_clsx29 = __toESM(require("clsx"));
+var import_react68 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var classBase16 = "vuuInput";
 var constantInputProps = {
   autoComplete: "off"
 };
-var VuuInput = (0, import_react62.forwardRef)(function VuuInput2({
+var VuuInput = (0, import_react68.forwardRef)(function VuuInput2({
   className,
   errorMessage,
   id: idProp,
@@ -10067,16 +10455,16 @@ var VuuInput = (0, import_react62.forwardRef)(function VuuInput2({
   type,
   ...props
 }, forwardedRef) {
-  const id = (0, import_vuu_utils21.useId)(idProp);
+  const id = (0, import_vuu_utils24.useId)(idProp);
   const { anchorProps, tooltipProps } = (0, import_vuu_popups4.useTooltip)({
     id,
     tooltipContent: errorMessage
   });
-  const commitValue = (0, import_react62.useCallback)(
+  const commitValue = (0, import_react68.useCallback)(
     (evt, value) => {
       if (type === "number") {
         const numericValue = parseFloat(value);
-        if ((0, import_vuu_utils21.isValidNumber)(numericValue)) {
+        if ((0, import_vuu_utils24.isValidNumber)(numericValue)) {
           onCommit(evt, numericValue);
         } else {
           throw Error("Invalid value");
@@ -10089,7 +10477,7 @@ var VuuInput = (0, import_react62.forwardRef)(function VuuInput2({
     },
     [onCommit, type]
   );
-  const handleKeyDown = (0, import_react62.useCallback)(
+  const handleKeyDown = (0, import_react68.useCallback)(
     (evt) => {
       if (evt.key === "Enter") {
         evt.preventDefault();
@@ -10101,24 +10489,24 @@ var VuuInput = (0, import_react62.forwardRef)(function VuuInput2({
     },
     [commitValue, onKeyDown]
   );
-  const handleBlur = (0, import_react62.useCallback)(
+  const handleBlur = (0, import_react68.useCallback)(
     (evt) => {
       const { value } = evt.target;
       commitValue(evt, value);
     },
     [commitValue]
   );
-  const endAdornment = errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  const endAdornment = errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "span",
     {
       ...anchorProps,
-      className: `${classBase11}-errorIcon`,
+      className: `${classBase16}-errorIcon`,
       "data-icon": "error"
     }
   ) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      import_core26.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      import_core28.Input,
       {
         ...props,
         endAdornment,
@@ -10127,23 +10515,23 @@ var VuuInput = (0, import_react62.forwardRef)(function VuuInput2({
           ...constantInputProps,
           ...props.inputProps
         },
-        className: (0, import_clsx24.default)(classBase11, className, {
-          [`${classBase11}-errror`]: errorMessage
+        className: (0, import_clsx29.default)(classBase16, className, {
+          [`${classBase16}-errror`]: errorMessage
         }),
         onBlur: handleBlur,
         ref: forwardedRef,
         onKeyDown: handleKeyDown
       }
     ),
-    tooltipProps ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_vuu_popups4.Tooltip, { ...tooltipProps, status: "error" }) : null
+    tooltipProps ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_vuu_popups4.Tooltip, { ...tooltipProps, status: "error" }) : null
   ] });
 });
 
 // src/expando-input/ExpandoInput.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var classBase12 = "vuuExpandoInput";
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var classBase17 = "vuuExpandoInput";
 var noop = () => void 0;
-var ExpandoInput = (0, import_react63.forwardRef)(function ExpandoInput2({
+var ExpandoInput = (0, import_react69.forwardRef)(function ExpandoInput2({
   className: classNameProp,
   errorMessage,
   value,
@@ -10151,19 +10539,19 @@ var ExpandoInput = (0, import_react63.forwardRef)(function ExpandoInput2({
   onCommit = noop,
   ...props
 }, forwardedRef) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
-      className: (0, import_clsx25.default)(classBase12, classNameProp, {
-        [`${classBase12}-error`]: errorMessage
+      className: (0, import_clsx30.default)(classBase17, classNameProp, {
+        [`${classBase17}-error`]: errorMessage
       }),
       "data-text": value,
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         VuuInput,
         {
           ...props,
           errorMessage,
-          inputProps: { ...inputProps, className: `${classBase12}-input` },
+          inputProps: { ...inputProps, className: `${classBase17}-input` },
           onCommit,
           ref: forwardedRef,
           style: { padding: 0 },
@@ -10176,53 +10564,18 @@ var ExpandoInput = (0, import_react63.forwardRef)(function ExpandoInput2({
   );
 });
 
-// src/icon-button/Icon.tsx
-var import_clsx26 = __toESM(require("clsx"));
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var classBase13 = "vuuIcon";
-var Icon = ({
-  className,
-  name,
-  size,
-  style: styleProp,
-  ...htmlAttributes
-}) => {
-  const style = typeof size === "number" ? { ...styleProp, "--vuu-icon-size": `${size}px` } : styleProp;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    "span",
-    {
-      ...htmlAttributes,
-      className: (0, import_clsx26.default)(classBase13, className),
-      "data-icon": name,
-      style
-    }
-  );
-};
-
-// src/icon-button/IconButton.tsx
-var import_clsx27 = __toESM(require("clsx"));
-var import_core27 = require("@salt-ds/core");
-var import_react64 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var classBase14 = "vuuIconButton";
-var IconButton = (0, import_react64.forwardRef)(
-  function IconButton2({ className, icon, ...buttonProps }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core27.Button, { ...buttonProps, className: (0, import_clsx27.default)(classBase14, className), ref, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: icon }) });
-  }
-);
-
 // src/inputs/Checkbox.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var Checkbox = (props) => {
   const { onToggle, checked, label } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "div",
     {
       className: "vuuCheckbox",
       onClick: onToggle,
       onKeyUp: (e) => e.key === " " && onToggle(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CheckboxIcon, { tabIndex: 0, checked }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckboxIcon, { tabIndex: 0, checked }),
         label
       ]
     }
@@ -10230,13 +10583,13 @@ var Checkbox = (props) => {
 };
 
 // src/inputs/RadioButton.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var RadioButton = (props) => {
   const { onClick, checked, label, groupName } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "vuuRadioButton", onClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "radio", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("input", { type: "radio", name: groupName }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadioIcon, { checked })
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "vuuRadioButton", onClick, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "radio", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "radio", name: groupName }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(RadioIcon, { checked })
     ] }),
     label
   ] });
@@ -10244,14 +10597,14 @@ var RadioButton = (props) => {
 
 // src/instrument-picker/InstrumentPicker.tsx
 var import_vuu_table2 = require("@vuu-ui/vuu-table");
-var import_vuu_utils23 = require("@vuu-ui/vuu-utils");
-var import_core28 = require("@salt-ds/core");
-var import_react66 = require("react");
+var import_vuu_utils26 = require("@vuu-ui/vuu-utils");
+var import_core29 = require("@salt-ds/core");
+var import_react71 = require("react");
 
 // src/instrument-picker/SearchCell.tsx
-var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var classBase15 = "vuuSearchCell";
+var import_vuu_utils25 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var classBase18 = "vuuSearchCell";
 var SearchCell = ({
   column,
   columnMap,
@@ -10259,52 +10612,48 @@ var SearchCell = ({
 }) => {
   const key = columnMap[column.name];
   const value = row[key];
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: classBase15, tabIndex: -1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "data-icon": "draggable" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: classBase18, tabIndex: -1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "data-icon": "draggable" }),
     value
   ] });
 };
-(0, import_vuu_utils22.registerComponent)("search-cell", SearchCell, "cell-renderer", {
+(0, import_vuu_utils25.registerComponent)("search-cell", SearchCell, "cell-renderer", {
   serverDataType: "private"
 });
 
 // src/instrument-picker/useInstrumentPicker.ts
 var import_vuu_table = require("@vuu-ui/vuu-table");
-var import_react65 = require("react");
-var defaultItemToString = (columns, columnMap) => (row) => {
-  return columns.map(({ name }) => row[columnMap[name]]).join(" ");
-};
+var import_react70 = require("react");
+var defaultItemToString = (row) => Object.values(row.data).join(" ");
 var useInstrumentPicker = ({
-  columnMap,
-  columns,
   dataSource,
   defaultIsOpen,
   isOpen: isOpenProp,
-  itemToString: itemToString2 = defaultItemToString(columns, columnMap),
+  itemToString: itemToString2 = defaultItemToString,
   onOpenChange,
   onSelect,
   searchColumns
 }) => {
-  const [value, setValue] = (0, import_react65.useState)("");
+  const [value, setValue] = (0, import_react70.useState)("");
   const [isOpen, setIsOpen] = useControlled({
     controlled: isOpenProp,
     default: defaultIsOpen != null ? defaultIsOpen : false,
     name: "useDropdownList"
   });
   const { highlightedIndexRef, onKeyDown, tableRef } = (0, import_vuu_table.useControlledTableNavigation)(-1, dataSource.size);
-  const baseFilterPattern = (0, import_react65.useMemo)(
+  const baseFilterPattern = (0, import_react70.useMemo)(
     // TODO make this contains once server supports it
     () => searchColumns.map((col) => `${col} starts "__VALUE__"`).join(" or "),
     [searchColumns]
   );
-  const handleOpenChange = (0, import_react65.useCallback)(
+  const handleOpenChange = (0, import_react70.useCallback)(
     (open, closeReason) => {
       setIsOpen(open);
       onOpenChange == null ? void 0 : onOpenChange(open, closeReason);
     },
     [onOpenChange, setIsOpen]
   );
-  const handleInputChange = (0, import_react65.useCallback)(
+  const handleInputChange = (0, import_react70.useCallback)(
     (evt) => {
       const { value: value2 } = evt.target;
       setValue(value2);
@@ -10322,11 +10671,11 @@ var useInstrumentPicker = ({
     },
     [baseFilterPattern, dataSource, setIsOpen]
   );
-  const handleSelectRow = (0, import_react65.useCallback)(
+  const handleSelectRow = (0, import_react70.useCallback)(
     (row) => {
-      const value2 = itemToString2(row);
+      const value2 = row === null ? "" : itemToString2(row);
       setValue(value2);
-      onSelect(row);
+      onSelect == null ? void 0 : onSelect(row);
       handleOpenChange == null ? void 0 : handleOpenChange(false, "select");
     },
     [handleOpenChange, itemToString2, onSelect]
@@ -10353,12 +10702,12 @@ var useInstrumentPicker = ({
 };
 
 // src/instrument-picker/InstrumentPicker.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var classBase16 = "vuuInstrumentPicker";
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var classBase19 = "vuuInstrumentPicker";
 if (typeof SearchCell !== "function") {
   console.warn("Instrument Picker: SearchCell module not loaded ");
 }
-var InstrumentPicker = (0, import_react66.forwardRef)(function InstrumentPicker2({
+var InstrumentPicker = (0, import_react71.forwardRef)(function InstrumentPicker2({
   TableProps: { dataSource, ...TableProps3 },
   className,
   columnMap,
@@ -10372,7 +10721,7 @@ var InstrumentPicker = (0, import_react66.forwardRef)(function InstrumentPicker2
   width,
   ...htmlAttributes
 }, forwardedRef) {
-  const id = (0, import_vuu_utils23.useId)(idProp);
+  const id = (0, import_vuu_utils26.useId)(idProp);
   const {
     highlightedIndex,
     inputProps,
@@ -10390,7 +10739,7 @@ var InstrumentPicker = (0, import_react66.forwardRef)(function InstrumentPicker2
     onSelect,
     searchColumns
   });
-  const endAdornment = (0, import_react66.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "data-icon": "chevron-down" }), []);
+  const endAdornment = (0, import_react71.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { "data-icon": "chevron-down" }), []);
   const tableProps = {
     ...TableProps3,
     config: {
@@ -10398,7 +10747,7 @@ var InstrumentPicker = (0, import_react66.forwardRef)(function InstrumentPicker2
       zebraStripes: false
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     DropdownBase,
     {
       ...htmlAttributes,
@@ -10411,8 +10760,8 @@ var InstrumentPicker = (0, import_react66.forwardRef)(function InstrumentPicker2
       ref: forwardedRef,
       width,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-          import_core28.Input,
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          import_core29.Input,
           {
             ...inputProps,
             disabled,
@@ -10420,14 +10769,14 @@ var InstrumentPicker = (0, import_react66.forwardRef)(function InstrumentPicker2
             value
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           import_vuu_table2.Table,
           {
             rowHeight: 25,
             renderBufferSize: 100,
             ...tableProps,
             ...tableHandlers,
-            className: `${classBase16}-list`,
+            className: `${classBase19}-list`,
             height: 200,
             highlightedIndex,
             dataSource,
@@ -10444,14 +10793,14 @@ var InstrumentPicker = (0, import_react66.forwardRef)(function InstrumentPicker2
 // src/instrument-search/InstrumentSearch.tsx
 var import_vuu_layout = require("@vuu-ui/vuu-layout");
 var import_vuu_table3 = require("@vuu-ui/vuu-table");
-var import_core29 = require("@salt-ds/core");
-var import_clsx28 = __toESM(require("clsx"));
-var import_react68 = require("react");
+var import_core30 = require("@salt-ds/core");
+var import_clsx31 = __toESM(require("clsx"));
+var import_react73 = require("react");
 
 // src/instrument-search/SearchCell.tsx
-var import_vuu_utils24 = require("@vuu-ui/vuu-utils");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var classBase17 = "vuuSearchCell";
+var import_vuu_utils27 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var classBase20 = "vuuSearchCell";
 var SearchCell2 = ({
   column,
   columnMap,
@@ -10459,28 +10808,28 @@ var SearchCell2 = ({
 }) => {
   const key = columnMap[column.name];
   const value = row[key];
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: classBase17, tabIndex: -1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "data-icon": "draggable" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: classBase20, tabIndex: -1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { "data-icon": "draggable" }),
     value
   ] });
 };
-(0, import_vuu_utils24.registerComponent)("search-cell", SearchCell2, "cell-renderer", {
+(0, import_vuu_utils27.registerComponent)("search-cell", SearchCell2, "cell-renderer", {
   serverDataType: "private"
 });
 
 // src/instrument-search/useInstrumentSearch.ts
-var import_react67 = require("react");
+var import_react72 = require("react");
 var useInstrumentSearch = ({
   dataSource,
   searchColumns = ["description"]
 }) => {
-  const [searchState, setSearchState] = (0, import_react67.useState)({ searchText: "", filter: "" });
-  const baseFilterPattern = (0, import_react67.useMemo)(
+  const [searchState, setSearchState] = (0, import_react72.useState)({ searchText: "", filter: "" });
+  const baseFilterPattern = (0, import_react72.useMemo)(
     // TODO make this contains once server supports it
     () => searchColumns.map((col) => `${col} starts "__VALUE__"`).join(" or "),
     [searchColumns]
   );
-  const handleChange = (0, import_react67.useCallback)(
+  const handleChange = (0, import_react72.useCallback)(
     (evt) => {
       const { value } = evt.target;
       const filter = baseFilterPattern.replaceAll("__VALUE__", value);
@@ -10504,8 +10853,8 @@ var useInstrumentSearch = ({
 };
 
 // src/instrument-search/InstrumentSearch.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var classBase18 = "vuuInstrumentSearch";
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var classBase21 = "vuuInstrumentSearch";
 if (typeof SearchCell2 !== "function") {
   console.warn("Instrument Search: SearchCell module not loaded ");
 }
@@ -10525,7 +10874,7 @@ var defaultTableConfig = {
   ],
   rowSeparators: true
 };
-var searchIcon = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "data-icon": "search" });
+var searchIcon = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { "data-icon": "search" });
 var InstrumentSearch = ({
   TableProps: TableProps3,
   autoFocus = false,
@@ -10541,15 +10890,15 @@ var InstrumentSearch = ({
     searchColumns
   });
   const { highlightedIndexRef, onHighlight, onKeyDown, tableRef } = (0, import_vuu_table3.useControlledTableNavigation)(-1, (_a2 = dataSource == null ? void 0 : dataSource.size) != null ? _a2 : 0);
-  const searchCallbackRef = (0, import_react68.useCallback)((el) => {
+  const searchCallbackRef = (0, import_react73.useCallback)((el) => {
     setTimeout(() => {
       var _a3;
       (_a3 = el == null ? void 0 : el.querySelector("input")) == null ? void 0 : _a3.focus();
     }, 100);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ...htmlAttributes, className: (0, import_clsx28.default)(classBase18, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: `${classBase18}-inputField`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-      import_core29.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { ...htmlAttributes, className: (0, import_clsx31.default)(classBase21, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: `${classBase21}-inputField`, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      import_core30.Input,
       {
         inputProps: { onKeyDown },
         endAdornment: searchIcon,
@@ -10559,7 +10908,7 @@ var InstrumentSearch = ({
         onChange
       }
     ) }),
-    dataSource ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    dataSource ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       import_vuu_table3.Table,
       {
         disableFocus: true,
@@ -10569,7 +10918,7 @@ var InstrumentSearch = ({
         highlightedIndex: highlightedIndexRef.current,
         renderBufferSize: 100,
         ...TableProps3,
-        className: `${classBase18}-list`,
+        className: `${classBase21}-list`,
         dataSource,
         navigationStyle: "row",
         onHighlight,
@@ -10583,12 +10932,12 @@ var _a;
 (_a = import_vuu_layout.registerComponent) == null ? void 0 : _a("InstrumentSearch", InstrumentSearch, "view");
 
 // src/price-ticker/PriceTicker.tsx
-var import_vuu_utils25 = require("@vuu-ui/vuu-utils");
-var import_react69 = require("react");
-var import_clsx29 = __toESM(require("clsx"));
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var classBase19 = "vuuPriceTicker";
-var getValueFormatter = (decimals) => (0, import_vuu_utils25.numericFormatter)({
+var import_vuu_utils28 = require("@vuu-ui/vuu-utils");
+var import_react74 = require("react");
+var import_clsx32 = __toESM(require("clsx"));
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var classBase22 = "vuuPriceTicker";
+var getValueFormatter = (decimals) => (0, import_vuu_utils28.numericFormatter)({
   type: {
     name: "number",
     formatting: {
@@ -10598,7 +10947,7 @@ var getValueFormatter = (decimals) => (0, import_vuu_utils25.numericFormatter)({
   }
 });
 var INITIAL_VALUE = [void 0, void 0];
-var PriceTicker = (0, import_react69.memo)(
+var PriceTicker = (0, import_react74.memo)(
   ({
     className,
     decimals = 2,
@@ -10606,14 +10955,14 @@ var PriceTicker = (0, import_react69.memo)(
     showArrow,
     ...htmlAttributes
   }) => {
-    const ref = (0, import_react69.useRef)(INITIAL_VALUE);
+    const ref = (0, import_react74.useRef)(INITIAL_VALUE);
     const [prevValue, prevDirection] = ref.current;
-    const formatNumber = (0, import_react69.useMemo)(() => getValueFormatter(decimals), [decimals]);
-    const direction = (0, import_vuu_utils25.isValidNumber)(prevValue) ? (0, import_vuu_utils25.getMovingValueDirection)(price, prevDirection, prevValue, decimals) : "";
+    const formatNumber = (0, import_react74.useMemo)(() => getValueFormatter(decimals), [decimals]);
+    const direction = (0, import_vuu_utils28.isValidNumber)(prevValue) ? (0, import_vuu_utils28.getMovingValueDirection)(price, prevDirection, prevValue, decimals) : "";
     ref.current = [price, direction];
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ...htmlAttributes, className: (0, import_clsx29.default)(classBase19, className, direction), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { ...htmlAttributes, className: (0, import_clsx32.default)(classBase22, className, direction), children: [
       formatNumber(price),
-      showArrow ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { "data-icon": "price-arrow" }) : null
+      showArrow ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { "data-icon": "price-arrow" }) : null
     ] });
   }
 );
@@ -10621,21 +10970,27 @@ PriceTicker.displayName = "PriceTicker";
 
 // src/split-button/SplitButton.tsx
 var import_vuu_popups5 = require("@vuu-ui/vuu-popups");
-var import_core30 = require("@salt-ds/core");
+var import_core31 = require("@salt-ds/core");
+var import_react76 = require("react");
 
 // src/split-button/useSplitButton.ts
-var import_vuu_utils26 = require("@vuu-ui/vuu-utils");
-var import_react70 = require("react");
+var import_vuu_utils29 = require("@vuu-ui/vuu-utils");
+var import_react75 = require("react");
+var focusTargetIsEditableLabel = (target) => {
+  if (target.tagName === "INPUT") {
+    return true;
+  }
+  return false;
+};
 var useSplitButton = ({
   ButtonProps: ButtonPropsProp,
   PopupMenuProps: PopupMenuProps3,
-  classBase: classBase26,
-  onClick,
-  segmented
+  classBase: classBase30,
+  onClick
 }) => {
-  const buttonRef = (0, import_react70.useRef)(null);
-  const rootRef = (0, import_react70.useRef)(null);
-  const onMenuClose = (0, import_react70.useCallback)((reason) => {
+  const buttonRef = (0, import_react75.useRef)(null);
+  const rootRef = (0, import_react75.useRef)(null);
+  const onMenuClose = (0, import_react75.useCallback)((reason) => {
     var _a2;
     if ((reason == null ? void 0 : reason.type) !== "tab-away") {
       const buttonMain = (_a2 = rootRef.current) == null ? void 0 : _a2.querySelector(
@@ -10647,17 +11002,23 @@ var useSplitButton = ({
   const menuProps = {
     ...PopupMenuProps3,
     anchorElement: rootRef,
-    menuClassName: `${classBase26}-menu`,
+    menuClassName: `${classBase30}-menu`,
     onMenuClose,
     popupPlacement: "below-full-width"
   };
-  const handleRootFocus = (0, import_react70.useCallback)(() => {
+  const handleRootFocus = (0, import_react75.useCallback)((evt) => {
     const { current: splitButton } = rootRef;
     if (!(splitButton == null ? void 0 : splitButton.classList.contains("vuuFocusVisible"))) {
       splitButton == null ? void 0 : splitButton.classList.add("vuuFocusVisible");
+      if (!focusTargetIsEditableLabel(evt.target)) {
+        requestAnimationFrame(() => {
+          var _a2;
+          (_a2 = buttonRef.current) == null ? void 0 : _a2.focus();
+        });
+      }
     }
   }, []);
-  const handleRootBlur = (0, import_react70.useCallback)((evt) => {
+  const handleRootBlur = (0, import_react75.useCallback)((evt) => {
     const { current: splitButton } = rootRef;
     const target = evt.relatedTarget;
     if (!(splitButton == null ? void 0 : splitButton.contains(target))) {
@@ -10666,29 +11027,23 @@ var useSplitButton = ({
       }
     }
   }, []);
-  const handleButtonKeyDown = (0, import_react70.useCallback)(
+  const handleButtonKeyDown = (0, import_react75.useCallback)(
     (evt) => {
       var _a2;
       if (evt.key === "ArrowDown") {
         const popupTrigger = (_a2 = rootRef.current) == null ? void 0 : _a2.querySelector(
-          `.${classBase26}-trigger`
+          `.${classBase30}-trigger`
         );
         if (popupTrigger) {
-          (0, import_vuu_utils26.dispatchMouseEvent)(popupTrigger, "click");
+          (0, import_vuu_utils29.dispatchMouseEvent)(popupTrigger, "click");
         }
       }
     },
-    [classBase26]
-  );
-  const handleClick = (0, import_react70.useCallback)(
-    (evt) => {
-      onClick == null ? void 0 : onClick(evt);
-    },
-    [onClick]
+    [classBase30]
   );
   const ButtonProps6 = {
     ...ButtonPropsProp,
-    onClick: segmented ? handleClick : void 0,
+    onClick,
     onKeyDown: handleButtonKeyDown
   };
   return {
@@ -10696,81 +11051,101 @@ var useSplitButton = ({
     PopupMenuProps: menuProps,
     buttonRef,
     rootRef,
-    onClick: segmented ? void 0 : handleClick,
     onBlur: handleRootBlur,
     onFocus: handleRootFocus
   };
 };
 
 // src/split-button/SplitButton.tsx
-var import_clsx30 = __toESM(require("clsx"));
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var classBase20 = "vuuSplitButton";
-var SplitButton = ({
-  ButtonProps: ButtonPropsProp,
-  PopupMenuProps: PopupMenuPropsProp,
-  buttonText,
-  disabled = false,
-  onClick,
-  segmented = false,
-  variant = "primary",
-  ...htmlAttributes
-}) => {
-  var _a2;
-  const { ButtonProps: ButtonProps6, buttonRef, rootRef, PopupMenuProps: PopupMenuProps3, ...rootProps } = useSplitButton({
+var import_clsx33 = __toESM(require("clsx"));
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var classBase23 = "vuuSplitButton";
+var SplitButton = (0, import_react76.forwardRef)(
+  function SplitButton2({
     ButtonProps: ButtonPropsProp,
     PopupMenuProps: PopupMenuPropsProp,
-    classBase: classBase20,
+    children,
+    className,
+    disabled = false,
     onClick,
-    segmented
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-    "div",
+    segmented = false,
+    variant = "primary",
+    ...htmlAttributes
+  }, forwardedRef) {
+    var _a2;
+    const { ButtonProps: ButtonProps6, buttonRef, rootRef, PopupMenuProps: PopupMenuProps3, ...rootProps } = useSplitButton({
+      ButtonProps: ButtonPropsProp,
+      PopupMenuProps: PopupMenuPropsProp,
+      classBase: classBase23,
+      onClick,
+      segmented
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+      "div",
+      {
+        ...htmlAttributes,
+        ...rootProps,
+        className: (0, import_clsx33.default)(classBase23, `${classBase23}-${variant}`, className, {
+          [`${classBase23}-disabled`]: disabled,
+          [`${classBase23}-segmented`]: segmented
+        }),
+        ref: (0, import_core31.useForkRef)(forwardedRef, rootRef),
+        "data-showcase-center": true,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            import_core31.Button,
+            {
+              ...ButtonProps6,
+              className: `${classBase23}-main`,
+              disabled,
+              ref: buttonRef,
+              variant,
+              children
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            import_vuu_popups5.PopupMenu,
+            {
+              ...PopupMenuProps3,
+              className: `${classBase23}-trigger`,
+              disabled,
+              icon: (_a2 = PopupMenuProps3 == null ? void 0 : PopupMenuProps3.icon) != null ? _a2 : "chevron-down",
+              tabIndex: segmented ? 0 : -1,
+              variant
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+// src/split-button/SplitStateButton.tsx
+var import_clsx34 = __toESM(require("clsx"));
+var import_react77 = require("react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var classBase24 = "vuuSplitStateButton";
+var SplitStateButton = (0, import_react77.forwardRef)(function SplitStateButton2({ className, selected, ...splitButtonProps }, forwardedRef) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    SplitButton,
     {
-      ...htmlAttributes,
-      ...rootProps,
-      className: (0, import_clsx30.default)(classBase20, `${classBase20}-${variant}`, {
-        [`${classBase20}-disabled`]: disabled,
-        [`${classBase20}-segmented`]: segmented
-      }),
-      ref: rootRef,
-      "data-showcase-center": true,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          import_core30.Button,
-          {
-            ...ButtonProps6,
-            className: `${classBase20}-main`,
-            disabled,
-            ref: buttonRef,
-            variant,
-            children: buttonText
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          import_vuu_popups5.PopupMenu,
-          {
-            ...PopupMenuProps3,
-            className: `${classBase20}-trigger`,
-            disabled,
-            icon: (_a2 = PopupMenuProps3 == null ? void 0 : PopupMenuProps3.icon) != null ? _a2 : "chevron-down",
-            tabIndex: segmented ? 0 : -1,
-            variant
-          }
-        )
-      ]
+      ...splitButtonProps,
+      "aria-checked": selected,
+      className: (0, import_clsx34.default)(classBase24, className),
+      ref: forwardedRef
     }
   );
-};
+});
 
 // src/tabstrip/Tabstrip.tsx
-var import_vuu_utils32 = require("@vuu-ui/vuu-utils");
-var import_clsx31 = __toESM(require("clsx"));
-var import_react75 = __toESM(require("react"));
+var import_vuu_utils35 = require("@vuu-ui/vuu-utils");
+var import_clsx35 = __toESM(require("clsx"));
+var import_react82 = __toESM(require("react"));
 
 // src/tabstrip/useTabstrip.ts
-var import_vuu_utils31 = require("@vuu-ui/vuu-utils");
-var import_react74 = require("react");
+var import_vuu_utils34 = require("@vuu-ui/vuu-utils");
+var import_react81 = require("react");
 
 // src/tabstrip/TabMenuOptions.ts
 var isTabMenuOptions = (options) => typeof options === "object" && options !== null && "tabIndex" in options && typeof options.tabIndex === "number";
@@ -10788,13 +11163,13 @@ var renameCommand = (options) => ({
 });
 
 // src/tabstrip/tabstrip-dom-utils.ts
-var import_vuu_utils27 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils30 = require("@vuu-ui/vuu-utils");
 var getIndexOfItem = (container, query) => {
   if (container) {
     const targetTab = container.querySelector(
       `[data-index]:has(${query})`
     );
-    return (0, import_vuu_utils27.getElementDataIndex)(targetTab);
+    return (0, import_vuu_utils30.getElementDataIndex)(targetTab);
   }
   return -1;
 };
@@ -10802,23 +11177,23 @@ var getIndexOfSelectedTab = (container) => getIndexOfItem(container, '[aria-sele
 var getIndexOfEditedItem = (container) => getIndexOfItem(container, ".vuuEditableLabel-editing");
 
 // src/tabstrip/useAnimatedSelectionThumb.ts
-var import_vuu_utils28 = require("@vuu-ui/vuu-utils");
-var import_react71 = require("react");
+var import_vuu_utils31 = require("@vuu-ui/vuu-utils");
+var import_react78 = require("react");
 var useAnimatedSelectionThumb = (containerRef, activeTabIndex, orientation = "horizontal") => {
-  const animationSuspendedRef = (0, import_react71.useRef)(false);
-  const suspendAnimation = (0, import_react71.useCallback)(() => {
+  const animationSuspendedRef = (0, import_react78.useRef)(false);
+  const suspendAnimation = (0, import_react78.useCallback)(() => {
     animationSuspendedRef.current = true;
   }, []);
-  const resumeAnimation = (0, import_react71.useCallback)(() => {
+  const resumeAnimation = (0, import_react78.useCallback)(() => {
     animationSuspendedRef.current = false;
   }, []);
-  const onTransitionEnd = (0, import_react71.useCallback)(() => {
+  const onTransitionEnd = (0, import_react78.useCallback)(() => {
     var _a2, _b;
     (_a2 = containerRef.current) == null ? void 0 : _a2.style.setProperty("--tab-thumb-transition", "none");
     (_b = containerRef.current) == null ? void 0 : _b.removeEventListener("transitionend", onTransitionEnd);
   }, [containerRef]);
-  const lastSelectedRef = (0, import_react71.useRef)(-1);
-  return (0, import_react71.useMemo)(() => {
+  const lastSelectedRef = (0, import_react78.useRef)(-1);
+  return (0, import_react78.useMemo)(() => {
     var _a2, _b;
     let offset = 0;
     let size = 0;
@@ -10827,11 +11202,11 @@ var useAnimatedSelectionThumb = (containerRef, activeTabIndex, orientation = "ho
       const newSelected = (_b = containerRef.current) == null ? void 0 : _b.querySelector(
         `[data-index="${activeTabIndex}"] .vuuTab`
       );
-      const { positionProp, sizeProp } = import_vuu_utils28.MEASURES[orientation];
+      const { positionProp, sizeProp } = import_vuu_utils31.MEASURES[orientation];
       if (oldSelected && newSelected && !animationSuspendedRef.current) {
         const { [positionProp]: oldPosition, [sizeProp]: oldSize } = oldSelected.getBoundingClientRect();
         const { [positionProp]: newPosition } = newSelected.getBoundingClientRect();
-        if ((0, import_vuu_utils28.isValidNumber)(oldPosition) && (0, import_vuu_utils28.isValidNumber)(newPosition) && (0, import_vuu_utils28.isValidNumber)(oldSize)) {
+        if ((0, import_vuu_utils31.isValidNumber)(oldPosition) && (0, import_vuu_utils31.isValidNumber)(newPosition) && (0, import_vuu_utils31.isValidNumber)(oldSize)) {
           offset = oldPosition - newPosition;
           size = oldSize;
           const speed = orientation === "horizontal" ? 1100 : 700;
@@ -10886,26 +11261,26 @@ var useAnimatedSelectionThumb = (containerRef, activeTabIndex, orientation = "ho
 };
 
 // src/tabstrip/useKeyboardNavigation.ts
-var import_core31 = require("@salt-ds/core");
-var import_vuu_utils29 = require("@vuu-ui/vuu-utils");
-var import_react72 = require("react");
-var import_vuu_utils30 = require("@vuu-ui/vuu-utils");
+var import_core32 = require("@salt-ds/core");
+var import_vuu_utils32 = require("@vuu-ui/vuu-utils");
+var import_react79 = require("react");
+var import_vuu_utils33 = require("@vuu-ui/vuu-utils");
 var navigation = {
   horizontal: {
-    [import_vuu_utils30.Home]: "start",
-    [import_vuu_utils30.End]: "end",
-    [import_vuu_utils30.ArrowLeft]: "bwd",
-    [import_vuu_utils30.ArrowRight]: "fwd"
+    [import_vuu_utils33.Home]: "start",
+    [import_vuu_utils33.End]: "end",
+    [import_vuu_utils33.ArrowLeft]: "bwd",
+    [import_vuu_utils33.ArrowRight]: "fwd"
   },
   vertical: {
-    [import_vuu_utils30.Home]: "start",
-    [import_vuu_utils30.End]: "end",
-    [import_vuu_utils30.ArrowUp]: "bwd",
-    [import_vuu_utils30.ArrowDown]: "fwd"
+    [import_vuu_utils33.Home]: "start",
+    [import_vuu_utils33.End]: "end",
+    [import_vuu_utils33.ArrowUp]: "bwd",
+    [import_vuu_utils33.ArrowDown]: "fwd"
   }
 };
 var isNavigationKey2 = (key, orientation = "horizontal") => navigation[orientation][key] !== void 0;
-var isMenuActivationKey = (key) => key === import_vuu_utils30.ArrowDown;
+var isMenuActivationKey = (key) => key === import_vuu_utils33.ArrowDown;
 function nextItemIdx2(count, direction, idx) {
   if (direction === "start") {
     return 0;
@@ -10938,23 +11313,23 @@ var useKeyboardNavigation2 = ({
   selectedIndex: selectedTabIndex = 0
 }) => {
   const manualActivation = keyBoardActivation === "manual";
-  const mouseClickPending = (0, import_react72.useRef)(false);
-  const focusedRef = (0, import_react72.useRef)(-1);
-  const [hasFocus, setHasFocus] = (0, import_react72.useState)(false);
-  const [, forceRefresh] = (0, import_react72.useState)({});
-  const [highlightedIdx, _setHighlightedIdx] = (0, import_core31.useControlled)({
+  const mouseClickPending = (0, import_react79.useRef)(false);
+  const focusedRef = (0, import_react79.useRef)(-1);
+  const [hasFocus, setHasFocus] = (0, import_react79.useState)(false);
+  const [, forceRefresh] = (0, import_react79.useState)({});
+  const [highlightedIdx, _setHighlightedIdx] = (0, import_core32.useControlled)({
     controlled: highlightedIdxProp,
     default: defaultHighlightedIdx,
     name: "UseKeyboardNavigation"
   });
-  const setHighlightedIdx = (0, import_react72.useCallback)(
+  const setHighlightedIdx = (0, import_react79.useCallback)(
     (value) => {
       _setHighlightedIdx(focusedRef.current = value);
     },
     [_setHighlightedIdx]
   );
-  const keyboardNavigation = (0, import_react72.useRef)(false);
-  const focusTab = (0, import_react72.useCallback)(
+  const keyboardNavigation = (0, import_react79.useRef)(false);
+  const focusTab = (0, import_react79.useCallback)(
     (tabIndex, immediateFocus = false, withKeyboard, delay = 70) => {
       setHighlightedIdx(tabIndex);
       if (withKeyboard === true && !keyboardNavigation.current) {
@@ -10963,7 +11338,7 @@ var useKeyboardNavigation2 = ({
       const setFocus = () => {
         const element = getElementByPosition(containerRef.current, tabIndex);
         if (element) {
-          const focussableElement = (0, import_vuu_utils29.getFocusableElement)(element);
+          const focussableElement = (0, import_vuu_utils32.getFocusableElement)(element);
           focussableElement == null ? void 0 : focussableElement.focus();
         }
       };
@@ -10994,14 +11369,14 @@ var useKeyboardNavigation2 = ({
       }
     }
   };
-  const getIndexCount = (0, import_react72.useCallback)(
+  const getIndexCount = (0, import_react79.useCallback)(
     () => {
       var _a2, _b;
       return (_b = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelectorAll(`[data-index]`).length) != null ? _b : 0;
     },
     [containerRef]
   );
-  const nextFocusableItemIdx = (0, import_react72.useCallback)(
+  const nextFocusableItemIdx = (0, import_react79.useCallback)(
     (direction = "fwd", idx) => {
       const indexCount = getIndexCount();
       const index = typeof idx === "number" ? idx : indexCount;
@@ -11021,7 +11396,7 @@ var useKeyboardNavigation2 = ({
     },
     [containerRef, getIndexCount]
   );
-  const navigateChildItems = (0, import_react72.useCallback)(
+  const navigateChildItems = (0, import_react79.useCallback)(
     (e, forceFocusVisible = false) => {
       const direction = navigation[orientation][e.key];
       const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
@@ -11043,22 +11418,22 @@ var useKeyboardNavigation2 = ({
       orientation
     ]
   );
-  const highlightedTabHasMenu = (0, import_react72.useCallback)(() => {
+  const highlightedTabHasMenu = (0, import_react79.useCallback)(() => {
     const el = getElementByPosition(containerRef.current, highlightedIdx);
     if (el) {
       return el.querySelector(".vuuPopupMenu") != null;
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const activateTabMenu = (0, import_react72.useCallback)(() => {
+  const activateTabMenu = (0, import_react79.useCallback)(() => {
     const el = getElementByPosition(containerRef.current, highlightedIdx);
     const menuEl = el == null ? void 0 : el.querySelector(".vuuPopupMenu");
     if (menuEl) {
-      (0, import_vuu_utils29.dispatchMouseEvent)(menuEl, "click");
+      (0, import_vuu_utils32.dispatchMouseEvent)(menuEl, "click");
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const handleKeyDown = (0, import_react72.useCallback)(
+  const handleKeyDown = (0, import_react79.useCallback)(
     (e) => {
       if (getIndexCount() > 0 && isNavigationKey2(e.key, orientation)) {
         e.preventDefault();
@@ -11083,7 +11458,7 @@ var useKeyboardNavigation2 = ({
   const handleItemClick = (_, tabIndex) => {
     setHighlightedIdx(tabIndex);
   };
-  const handleFocus = (0, import_react72.useCallback)(() => {
+  const handleFocus = (0, import_react79.useCallback)(() => {
     if (!hasFocus) {
       setHasFocus(true);
       if (!mouseClickPending.current) {
@@ -11093,7 +11468,7 @@ var useKeyboardNavigation2 = ({
       }
     }
   }, [hasFocus]);
-  const handleContainerMouseDown = (0, import_react72.useCallback)(() => {
+  const handleContainerMouseDown = (0, import_react79.useCallback)(() => {
     if (!hasFocus) {
       mouseClickPending.current = true;
     }
@@ -11130,8 +11505,8 @@ var useKeyboardNavigation2 = ({
 };
 
 // src/tabstrip/useSelection.ts
-var import_core32 = require("@salt-ds/core");
-var import_react73 = require("react");
+var import_core33 = require("@salt-ds/core");
+var import_react80 = require("react");
 var defaultSelectionKeys2 = ["Enter", " "];
 var isTabElement = (el) => el && el.matches('[class*="vuuTab "]');
 var useSelection2 = ({
@@ -11140,24 +11515,24 @@ var useSelection2 = ({
   onSelectionChange,
   selected: selectedProp
 }) => {
-  const [selected, setSelected, isControlled] = (0, import_core32.useControlled)({
+  const [selected, setSelected, isControlled] = (0, import_core33.useControlled)({
     controlled: selectedProp,
     default: defaultSelected != null ? defaultSelected : 0,
     name: "Tabstrip",
     state: "value"
   });
-  const isSelectionEvent = (0, import_react73.useCallback)(
+  const isSelectionEvent = (0, import_react80.useCallback)(
     (evt) => defaultSelectionKeys2.includes(evt.key),
     []
   );
-  const selectItem = (0, import_react73.useCallback)(
+  const selectItem = (0, import_react80.useCallback)(
     (tabIndex) => {
       setSelected(tabIndex);
       onSelectionChange == null ? void 0 : onSelectionChange(tabIndex);
     },
     [onSelectionChange, setSelected]
   );
-  const handleKeyDown = (0, import_react73.useCallback)(
+  const handleKeyDown = (0, import_react80.useCallback)(
     (e) => {
       const targetElement = e.target;
       if (isSelectionEvent(e) && highlightedIdx !== selected && isTabElement(targetElement)) {
@@ -11168,7 +11543,7 @@ var useSelection2 = ({
     },
     [isSelectionEvent, highlightedIdx, selected, selectItem]
   );
-  const onClick = (0, import_react73.useCallback)(
+  const onClick = (0, import_react80.useCallback)(
     (e, tabIndex) => {
       if (tabIndex !== selected) {
         selectItem(tabIndex);
@@ -11208,7 +11583,7 @@ var useTabstrip = ({
   orientation,
   keyBoardActivation
 }) => {
-  const lastSelection = (0, import_react74.useRef)(activeTabIndexProp);
+  const lastSelection = (0, import_react81.useRef)(activeTabIndexProp);
   const {
     focusTab: keyboardHookFocusTab,
     highlightedIdx,
@@ -11238,7 +11613,7 @@ var useTabstrip = ({
     animateSelectionThumb ? selectionHookSelected : -1,
     orientation
   );
-  const handleDrop = (0, import_react74.useCallback)(
+  const handleDrop = (0, import_react81.useCallback)(
     ({ fromIndex, toIndex }) => {
       const { current: selected } = lastSelection;
       console.log(
@@ -11280,7 +11655,7 @@ var useTabstrip = ({
     orientation: "horizontal",
     itemQuery: ".vuuOverflowContainer-item"
   });
-  const handleExitEditMode = (0, import_react74.useCallback)(
+  const handleExitEditMode = (0, import_react81.useCallback)(
     (originalValue, editedValue, allowDeactivation, tabIndex) => {
       console.log(
         `handleExitEditMode ${originalValue} ${editedValue} ${allowDeactivation} ${tabIndex}`
@@ -11292,7 +11667,7 @@ var useTabstrip = ({
     },
     [keyboardHookFocusTab, onExitEditMode]
   );
-  const handleClick = (0, import_react74.useCallback)(
+  const handleClick = (0, import_react81.useCallback)(
     (evt, tabIndex) => {
       keyboardHookHandleClick(evt, tabIndex);
       selectionHookHandleClick(evt, tabIndex);
@@ -11300,7 +11675,7 @@ var useTabstrip = ({
     // [dragDropHook.isDragging, keyboardHook, selectionHook]
     [keyboardHookHandleClick, selectionHookHandleClick]
   );
-  const getEditableLabel = (0, import_react74.useCallback)(
+  const getEditableLabel = (0, import_react81.useCallback)(
     (tabIndex = highlightedIdx) => {
       const targetEl = getElementWithIndex(containerRef.current, tabIndex);
       if (targetEl) {
@@ -11309,7 +11684,7 @@ var useTabstrip = ({
     },
     [containerRef, highlightedIdx]
   );
-  const tabInEditMode = (0, import_react74.useCallback)(
+  const tabInEditMode = (0, import_react81.useCallback)(
     (tabIndex = highlightedIdx) => {
       const editableLabel = getEditableLabel(tabIndex);
       if (editableLabel) {
@@ -11319,16 +11694,16 @@ var useTabstrip = ({
     },
     [getEditableLabel, highlightedIdx]
   );
-  const editTab = (0, import_react74.useCallback)(
+  const editTab = (0, import_react81.useCallback)(
     (tabIndex = highlightedIdx) => {
       const editableLabelEl = getEditableLabel(tabIndex);
       if (editableLabelEl) {
-        (0, import_vuu_utils31.dispatchMouseEvent)(editableLabelEl, "dblclick");
+        (0, import_vuu_utils34.dispatchMouseEvent)(editableLabelEl, "dblclick");
       }
     },
     [getEditableLabel, highlightedIdx]
   );
-  const handleKeyDown = (0, import_react74.useCallback)(
+  const handleKeyDown = (0, import_react81.useCallback)(
     (evt) => {
       keyboardHookHandleKeyDown(evt);
       if (!evt.defaultPrevented) {
@@ -11340,7 +11715,7 @@ var useTabstrip = ({
     },
     [editTab, keyboardHookHandleKeyDown, selectionHookHandleKeyDown]
   );
-  const handleCloseTabFromMenu = (0, import_react74.useCallback)(
+  const handleCloseTabFromMenu = (0, import_react81.useCallback)(
     (tabIndex) => {
       const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);
       const newActiveTabIndex = selectedTabIndex > tabIndex ? selectedTabIndex - 1 : selectedTabIndex === tabIndex ? 0 : selectedTabIndex;
@@ -11353,14 +11728,14 @@ var useTabstrip = ({
     },
     [containerRef, onCloseTab, resumeAnimation, suspendAnimation]
   );
-  const handleRenameTabFromMenu = (0, import_react74.useCallback)(
+  const handleRenameTabFromMenu = (0, import_react81.useCallback)(
     (tabIndex) => {
       editTab(tabIndex);
       return true;
     },
     [editTab]
   );
-  const handleTabMenuAction = (0, import_react74.useCallback)(
+  const handleTabMenuAction = (0, import_react81.useCallback)(
     (action) => {
       if (isTabMenuOptions(action.options)) {
         switch (action.menuId) {
@@ -11376,7 +11751,7 @@ var useTabstrip = ({
     },
     [handleCloseTabFromMenu, handleRenameTabFromMenu]
   );
-  const handleTabMenuClose = (0, import_react74.useCallback)(() => {
+  const handleTabMenuClose = (0, import_react81.useCallback)(() => {
     if (!tabInEditMode()) {
       keyboardHookFocusTab(highlightedIdx);
     } else {
@@ -11388,7 +11763,7 @@ var useTabstrip = ({
     keyboardHookSetHighlightedIndex,
     tabInEditMode
   ]);
-  const onSwitchWrappedItemIntoView = (0, import_react74.useCallback)(
+  const onSwitchWrappedItemIntoView = (0, import_react81.useCallback)(
     (item) => {
       const index = parseInt(item.index);
       if (!isNaN(index)) {
@@ -11401,7 +11776,7 @@ var useTabstrip = ({
     onFocus: keyboardHook.onFocus,
     onKeyDown: handleKeyDown
   };
-  const handleAddTabClick = (0, import_react74.useCallback)(() => {
+  const handleAddTabClick = (0, import_react81.useCallback)(() => {
     onAddTab == null ? void 0 : onAddTab();
     requestAnimationFrame(() => {
       const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);
@@ -11434,9 +11809,9 @@ var useTabstrip = ({
 };
 
 // src/tabstrip/Tabstrip.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var import_react76 = require("react");
-var classBase21 = "vuuTabstrip";
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_react83 = require("react");
+var classBase25 = "vuuTabstrip";
 var Tabstrip = ({
   activeTabIndex: activeTabIndexProp,
   allowAddTab,
@@ -11458,9 +11833,10 @@ var Tabstrip = ({
   showTabMenuButton,
   style: styleProp,
   tabClassName,
+  variant = "secondary",
   ...htmlAttributes
 }) => {
-  const rootRef = (0, import_react75.useRef)(null);
+  const rootRef = (0, import_react82.useRef)(null);
   const {
     activeTabIndex,
     focusVisible,
@@ -11482,14 +11858,14 @@ var Tabstrip = ({
     onMoveTab,
     orientation
   });
-  const id = (0, import_vuu_utils32.useId)(idProp);
-  const className = (0, import_clsx31.default)(classBase21, `${classBase21}-${orientation}`, classNameProp);
+  const id = (0, import_vuu_utils35.useId)(idProp);
+  const className = (0, import_clsx35.default)(classBase25, classNameProp);
   const style = styleProp || containerStyle ? {
     ...styleProp,
     ...containerStyle
   } : void 0;
-  const tabs = (0, import_react75.useMemo)(
-    () => (0, import_vuu_utils32.asReactElements)(children).map((child, index) => {
+  const tabs = (0, import_react82.useMemo)(
+    () => (0, import_vuu_utils35.asReactElements)(children).map((child, index) => {
       const {
         id: tabId = `${id}-tab-${index}`,
         className: className2,
@@ -11499,10 +11875,10 @@ var Tabstrip = ({
         showMenuButton = showTabMenuButton
       } = child.props;
       const selected = index === activeTabIndex;
-      return import_react75.default.cloneElement(child, {
+      return import_react82.default.cloneElement(child, {
         ...tabProps,
         ...tabstripHook.navigationProps,
-        className: (0, import_clsx31.default)(className2, tabClassName),
+        className: (0, import_clsx35.default)(className2, tabClassName),
         closeable,
         "data-overflow-priority": selected ? "1" : void 0,
         dragging: draggedItemIndex === index,
@@ -11511,18 +11887,19 @@ var Tabstrip = ({
         id: tabId,
         index,
         key: index,
-        location: (0, import_clsx31.default)(location, tabLocation),
+        location: (0, import_clsx35.default)(location, tabLocation),
         selected,
         showMenuButton,
         tabIndex: selected ? 0 : -1
       });
     }).concat(
-      allowAddTab ? /* @__PURE__ */ (0, import_react76.createElement)(
+      allowAddTab ? /* @__PURE__ */ (0, import_react83.createElement)(
         IconButton,
         {
           ...tabstripHook.navigationProps,
           "aria-label": "Create Tab",
-          className: `${classBase21}-addTabButton`,
+          className: `${classBase25}-addTabButton`,
+          "data-embedded": true,
           icon: "add",
           "data-overflow-priority": "1",
           key: "addButton",
@@ -11549,14 +11926,13 @@ var Tabstrip = ({
       location
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       OverflowContainer,
       {
         ...htmlAttributes,
         ...tabstripHook.containerProps,
-        className,
-        height: 29,
+        className: (0, import_clsx35.default)(className, `${classBase25}-${variant}`),
         id,
         orientation,
         overflowIcon: "more-horiz",
@@ -11571,16 +11947,16 @@ var Tabstrip = ({
 };
 
 // src/tabstrip/Tab.tsx
-var import_core33 = require("@salt-ds/core");
-var import_clsx33 = __toESM(require("clsx"));
-var import_react78 = require("react");
+var import_core34 = require("@salt-ds/core");
+var import_clsx37 = __toESM(require("clsx"));
+var import_react85 = require("react");
 
 // src/tabstrip/TabMenu.tsx
 var import_vuu_popups6 = require("@vuu-ui/vuu-popups");
-var import_react77 = require("react");
-var import_clsx32 = __toESM(require("clsx"));
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var classBase22 = "vuuTabMenu";
+var import_react84 = require("react");
+var import_clsx36 = __toESM(require("clsx"));
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var classBase26 = "vuuTabMenu";
 var TabMenu = ({
   allowClose,
   allowRename,
@@ -11591,7 +11967,7 @@ var TabMenu = ({
   onMenuClose,
   index
 }) => {
-  const [menuBuilder, menuOptions] = (0, import_react77.useMemo)(
+  const [menuBuilder, menuOptions] = (0, import_react84.useMemo)(
     () => [
       (_location, options) => {
         const menuItems = [];
@@ -11617,26 +11993,27 @@ var TabMenu = ({
       index
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     import_vuu_popups6.PopupMenu,
     {
-      className: classBase22,
+      "aria-label": "context menu",
+      className: classBase26,
+      "data-embedded": true,
       menuBuilder,
       menuActionHandler: onMenuAction,
-      menuLocation: (0, import_clsx32.default)("tab", location),
+      menuLocation: (0, import_clsx36.default)("tab", location),
       menuOptions,
       onMenuClose,
-      tabIndex: -1,
-      "aria-label": "context menu"
+      tabIndex: -1
     }
   );
 };
 
 // src/tabstrip/Tab.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var classBase23 = "vuuTab";
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var classBase27 = "vuuTab";
 var noop2 = () => void 0;
-var Tab = (0, import_react78.forwardRef)(function Tab2({
+var Tab = (0, import_react85.forwardRef)(function Tab2({
   ariaControls,
   children,
   className,
@@ -11665,10 +12042,10 @@ var Tab = (0, import_react78.forwardRef)(function Tab2({
   if (showMenuButton && typeof onMenuAction !== "function") {
     throw Error("Tab onMenuAction must be provided if showMenuButton is set");
   }
-  const rootRef = (0, import_react78.useRef)(null);
-  const editableRef = (0, import_react78.useRef)(null);
-  const setForkRef = (0, import_core33.useForkRef)(ref, rootRef);
-  const handleClick = (0, import_react78.useCallback)(
+  const rootRef = (0, import_react85.useRef)(null);
+  const editableRef = (0, import_react85.useRef)(null);
+  const setForkRef = (0, import_core34.useForkRef)(ref, rootRef);
+  const handleClick = (0, import_react85.useCallback)(
     (e) => {
       if (!editing) {
         e.preventDefault();
@@ -11693,7 +12070,7 @@ var Tab = (0, import_react78.forwardRef)(function Tab2({
   };
   const getLabel = () => {
     if (editable) {
-      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         EditableLabel,
         {
           editing,
@@ -11718,18 +12095,18 @@ var Tab = (0, import_react78.forwardRef)(function Tab2({
     }
     onFocusProp == null ? void 0 : onFocusProp(evt);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "div",
     {
       ...props,
       "aria-controls": ariaControls,
       "aria-selected": selected,
-      className: (0, import_clsx33.default)(classBase23, className, {
-        [`${classBase23}-closeable`]: closeable,
+      className: (0, import_clsx37.default)(classBase27, className, {
+        [`${classBase27}-closeable`]: closeable,
         "vuuDraggable-dragAway": dragging,
-        [`${classBase23}-editing`]: editing,
-        [`${classBase23}-selected`]: selected || void 0,
-        [`${classBase23}-vertical`]: orientation === "vertical",
+        [`${classBase27}-editing`]: editing,
+        [`${classBase27}-selected`]: selected || void 0,
+        [`${classBase27}-vertical`]: orientation === "vertical",
         [`vuuFocusVisible`]: focusVisible
       }),
       onClick: handleClick,
@@ -11739,15 +12116,15 @@ var Tab = (0, import_react78.forwardRef)(function Tab2({
       role: "tab",
       tabIndex,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: `${classBase23}-main`, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: `${classBase27}-main`, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           "span",
           {
-            className: `${classBase23}-text`,
+            className: `${classBase27}-text`,
             "data-text": editable ? void 0 : label,
             children: children != null ? children : getLabel()
           }
         ) }),
-        showMenuButton ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        showMenuButton ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           TabMenu,
           {
             allowClose: closeable,
@@ -11766,28 +12143,28 @@ var Tab = (0, import_react78.forwardRef)(function Tab2({
 });
 
 // src/toolbar/Toolbar.tsx
-var import_vuu_utils38 = require("@vuu-ui/vuu-utils");
-var import_clsx34 = __toESM(require("clsx"));
-var import_react82 = __toESM(require("react"));
+var import_vuu_utils41 = require("@vuu-ui/vuu-utils");
+var import_clsx38 = __toESM(require("clsx"));
+var import_react89 = __toESM(require("react"));
 
 // src/toolbar/useToolbar.ts
-var import_vuu_utils37 = require("@vuu-ui/vuu-utils");
-var import_react81 = require("react");
+var import_vuu_utils40 = require("@vuu-ui/vuu-utils");
+var import_react88 = require("react");
 
 // src/toolbar/useKeyboardNavigation.ts
-var import_core34 = require("@salt-ds/core");
-var import_vuu_utils34 = require("@vuu-ui/vuu-utils");
-var import_react79 = require("react");
-var import_vuu_utils35 = require("@vuu-ui/vuu-utils");
+var import_core35 = require("@salt-ds/core");
+var import_vuu_utils37 = require("@vuu-ui/vuu-utils");
+var import_react86 = require("react");
+var import_vuu_utils38 = require("@vuu-ui/vuu-utils");
 
 // src/toolbar/toolbar-dom-utils.ts
-var import_vuu_utils33 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils36 = require("@vuu-ui/vuu-utils");
 var getIndexOfItem2 = (container, query) => {
   if (container) {
     const targetTab = container.querySelector(
       `[data-index]:has(${query})`
     );
-    return (0, import_vuu_utils33.getElementDataIndex)(targetTab);
+    return (0, import_vuu_utils36.getElementDataIndex)(targetTab);
   }
   return -1;
 };
@@ -11796,16 +12173,16 @@ var getIndexOfEditedItem2 = (container) => getIndexOfItem2(container, ".vuuEdita
 // src/toolbar/useKeyboardNavigation.ts
 var navigation2 = {
   horizontal: {
-    [import_vuu_utils35.Home]: "start",
-    [import_vuu_utils35.End]: "end",
-    [import_vuu_utils35.ArrowLeft]: "bwd",
-    [import_vuu_utils35.ArrowRight]: "fwd"
+    [import_vuu_utils38.Home]: "start",
+    [import_vuu_utils38.End]: "end",
+    [import_vuu_utils38.ArrowLeft]: "bwd",
+    [import_vuu_utils38.ArrowRight]: "fwd"
   },
   vertical: {
-    [import_vuu_utils35.Home]: "start",
-    [import_vuu_utils35.End]: "end",
-    [import_vuu_utils35.ArrowUp]: "bwd",
-    [import_vuu_utils35.ArrowDown]: "fwd"
+    [import_vuu_utils38.Home]: "start",
+    [import_vuu_utils38.End]: "end",
+    [import_vuu_utils38.ArrowUp]: "bwd",
+    [import_vuu_utils38.ArrowDown]: "fwd"
   }
 };
 var isOverflowIndicator = (el) => el !== null && el.dataset.index === "overflow";
@@ -11824,7 +12201,7 @@ var itemIsNotFocusable = (container, direction, indexCount, nextIdx, hasOverflow
   }
 };
 var isNavigationKey3 = (key, orientation = "horizontal") => navigation2[orientation][key] !== void 0;
-var isMenuActivationKey2 = (key) => key === import_vuu_utils35.ArrowDown;
+var isMenuActivationKey2 = (key) => key === import_vuu_utils38.ArrowDown;
 function nextItemIdx3(count, direction, idx) {
   if (direction === "start") {
     return 0;
@@ -11876,22 +12253,22 @@ var useKeyboardNavigation3 = ({
   onNavigateOutOfBounds,
   orientation
 }) => {
-  const mouseClickPending = (0, import_react79.useRef)(false);
-  const focusedRef = (0, import_react79.useRef)(-1);
-  const [hasFocus, setHasFocus] = (0, import_react79.useState)(false);
-  const [highlightedIdx, _setHighlightedIdx] = (0, import_core34.useControlled)({
+  const mouseClickPending = (0, import_react86.useRef)(false);
+  const focusedRef = (0, import_react86.useRef)(-1);
+  const [hasFocus, setHasFocus] = (0, import_react86.useState)(false);
+  const [highlightedIdx, _setHighlightedIdx] = (0, import_core35.useControlled)({
     controlled: highlightedIdxProp,
     default: defaultHighlightedIdx,
     name: "UseKeyboardNavigation"
   });
-  const setHighlightedIdx = (0, import_react79.useCallback)(
+  const setHighlightedIdx = (0, import_react86.useCallback)(
     (value) => {
       _setHighlightedIdx(focusedRef.current = value);
     },
     [_setHighlightedIdx]
   );
-  const keyboardNavigation = (0, import_react79.useRef)(false);
-  const focusItem = (0, import_react79.useCallback)(
+  const keyboardNavigation = (0, import_react86.useRef)(false);
+  const focusItem = (0, import_react86.useCallback)(
     (itemIndex, immediateFocus = false, withKeyboard, delay = 70) => {
       console.log(`focus item ${itemIndex}`);
       setHighlightedIdx(itemIndex);
@@ -11905,7 +12282,7 @@ var useKeyboardNavigation3 = ({
           true
         );
         if (element) {
-          const focussableElement = (0, import_vuu_utils34.getFocusableElement)(element);
+          const focussableElement = (0, import_vuu_utils37.getFocusableElement)(element);
           focussableElement == null ? void 0 : focussableElement.focus();
         }
       };
@@ -11920,7 +12297,7 @@ var useKeyboardNavigation3 = ({
   const onFocus = (e) => {
     if (focusedRef.current === -1) {
       if (e.target.tabIndex === 0) {
-        const index = (0, import_vuu_utils34.getElementDataIndex)((0, import_vuu_utils34.getClosest)(e.target, "index"));
+        const index = (0, import_vuu_utils37.getElementDataIndex)((0, import_vuu_utils37.getClosest)(e.target, "index"));
         setHighlightedIdx(index);
       } else if (e.target.tabIndex === -1) {
       } else {
@@ -11933,14 +12310,14 @@ var useKeyboardNavigation3 = ({
       }
     }
   };
-  const getIndexCount = (0, import_react79.useCallback)(
+  const getIndexCount = (0, import_react86.useCallback)(
     () => {
       var _a2, _b;
       return (_b = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelectorAll(`[data-index]`).length) != null ? _b : 0;
     },
     [containerRef]
   );
-  const nextFocusableItemIdx = (0, import_react79.useCallback)(
+  const nextFocusableItemIdx = (0, import_react86.useCallback)(
     (direction = "fwd", idx) => {
       var _a2;
       const indexCount = getIndexCount();
@@ -11968,7 +12345,7 @@ var useKeyboardNavigation3 = ({
     },
     [containerRef, getIndexCount]
   );
-  const navigateChildItems = (0, import_react79.useCallback)(
+  const navigateChildItems = (0, import_react86.useCallback)(
     (e) => {
       const direction = navigation2[orientation][e.key];
       const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
@@ -11988,29 +12365,29 @@ var useKeyboardNavigation3 = ({
       onNavigateOutOfBounds
     ]
   );
-  const highlightedItemHasMenu = (0, import_react79.useCallback)(() => {
+  const highlightedItemHasMenu = (0, import_react86.useCallback)(() => {
     const el = getElementByPosition2(containerRef.current, highlightedIdx);
     if (el) {
       return el.querySelector(".vuuPopupMenu") != null;
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const highlightedItemInEditState = (0, import_react79.useCallback)(() => {
+  const highlightedItemInEditState = (0, import_react86.useCallback)(() => {
     const el = getElementByPosition2(containerRef.current, highlightedIdx);
     if (el) {
       return el.querySelector(".vuuEditableLabel-input") != null;
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const activateItemMenu = (0, import_react79.useCallback)(() => {
+  const activateItemMenu = (0, import_react86.useCallback)(() => {
     const el = getElementByPosition2(containerRef.current, highlightedIdx);
     const menuEl = el == null ? void 0 : el.querySelector(".vuuPopupMenu");
     if (menuEl) {
-      (0, import_vuu_utils34.dispatchMouseEvent)(menuEl, "click");
+      (0, import_vuu_utils37.dispatchMouseEvent)(menuEl, "click");
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const handleKeyDown = (0, import_react79.useCallback)(
+  const handleKeyDown = (0, import_react86.useCallback)(
     (e) => {
       if (getIndexCount() > 0 && isNavigationKey3(e.key, orientation)) {
         e.preventDefault();
@@ -12036,7 +12413,7 @@ var useKeyboardNavigation3 = ({
   const handleItemClick = (_, itemIndex) => {
     setHighlightedIdx(itemIndex);
   };
-  const handleFocus = (0, import_react79.useCallback)(() => {
+  const handleFocus = (0, import_react86.useCallback)(() => {
     if (!hasFocus) {
       setHasFocus(true);
       if (!mouseClickPending.current) {
@@ -12046,13 +12423,13 @@ var useKeyboardNavigation3 = ({
       }
     }
   }, [hasFocus]);
-  const handleContainerMouseDown = (0, import_react79.useCallback)(() => {
+  const handleContainerMouseDown = (0, import_react86.useCallback)(() => {
     if (!hasFocus) {
       mouseClickPending.current = true;
     }
     keyboardNavigation.current = false;
   }, [hasFocus]);
-  const handleOverflowMenuClose = (0, import_react79.useCallback)(
+  const handleOverflowMenuClose = (0, import_react86.useCallback)(
     (closeReason) => {
       if ((closeReason == null ? void 0 : closeReason.type) === "escape") {
         const index = getIndexOfOverflowItem(containerRef.current);
@@ -12096,8 +12473,8 @@ var useKeyboardNavigation3 = ({
 };
 
 // src/toolbar/useSelection.ts
-var import_vuu_utils36 = require("@vuu-ui/vuu-utils");
-var import_react80 = require("react");
+var import_vuu_utils39 = require("@vuu-ui/vuu-utils");
+var import_react87 = require("react");
 var defaultSelectionKeys3 = ["Enter", " "];
 var NO_SELECTION_HANDLERS = {};
 var useSelection3 = ({
@@ -12113,11 +12490,11 @@ var useSelection3 = ({
     name: "useSelection",
     state: "selected"
   });
-  const isSelectionEvent = (0, import_react80.useCallback)(
+  const isSelectionEvent = (0, import_react87.useCallback)(
     (evt) => defaultSelectionKeys3.includes(evt.key),
     []
   );
-  const selectItem = (0, import_react80.useCallback)(
+  const selectItem = (0, import_react87.useCallback)(
     (itemIndex, specialKey = false) => {
       const newSelected = allowMultipleSelection(selectionStrategy, specialKey) ? selected.concat(itemIndex) : [itemIndex];
       setSelected(newSelected);
@@ -12125,7 +12502,7 @@ var useSelection3 = ({
     },
     [onSelectionChange, selected, selectionStrategy, setSelected]
   );
-  const deselectItem = (0, import_react80.useCallback)(
+  const deselectItem = (0, import_react87.useCallback)(
     (itemIndex, specialKey = false) => {
       const newSelected = selectionStrategy === "deselectable" || selectionStrategy === "multiple-special-key" && !specialKey ? [] : selected.filter((index) => index !== itemIndex);
       setSelected(newSelected);
@@ -12133,9 +12510,9 @@ var useSelection3 = ({
     },
     [onSelectionChange, selected, selectionStrategy, setSelected]
   );
-  const handleKeyDown = (0, import_react80.useCallback)(
+  const handleKeyDown = (0, import_react87.useCallback)(
     (e) => {
-      if (isSelectionEvent(e) && (0, import_vuu_utils36.isSelectableElement)(e.target)) {
+      if (isSelectionEvent(e) && (0, import_vuu_utils39.isSelectableElement)(e.target)) {
         if (!selected.includes(highlightedIdx)) {
           e.stopPropagation();
           e.preventDefault();
@@ -12156,10 +12533,10 @@ var useSelection3 = ({
       deselectItem
     ]
   );
-  const handleClick = (0, import_react80.useCallback)(
+  const handleClick = (0, import_react87.useCallback)(
     (e, itemIndex) => {
-      const element = (0, import_vuu_utils36.getClosestIndexItem)(e.target);
-      if ((0, import_vuu_utils36.isSelectableElement)(element)) {
+      const element = (0, import_vuu_utils39.getClosestIndexItem)(e.target);
+      if ((0, import_vuu_utils39.isSelectableElement)(element)) {
         if (!selected.includes(itemIndex)) {
           selectItem(itemIndex, e.shiftKey);
         } else if (deselectionIsAllowed(selectionStrategy)) {
@@ -12192,7 +12569,7 @@ var useToolbar = ({
   orientation,
   selectionStrategy
 }) => {
-  const lastSelection = (0, import_react81.useRef)(activeItemIndexProp);
+  const lastSelection = (0, import_react88.useRef)(activeItemIndexProp);
   const {
     focusItem: keyboardHookFocusItem,
     highlightedIdx,
@@ -12219,14 +12596,14 @@ var useToolbar = ({
     selectionStrategy
   });
   lastSelection.current = selectionHookSelected;
-  const handleClick = (0, import_react81.useCallback)(
+  const handleClick = (0, import_react88.useCallback)(
     (evt) => {
       var _a2;
       const target = evt.target;
       const toolbarItem = target.closest("[data-index]");
       if (toolbarItem) {
         const index = parseInt((_a2 = toolbarItem.dataset.index) != null ? _a2 : "-1");
-        if (index !== -1 && (0, import_vuu_utils37.isValidNumber)(index)) {
+        if (index !== -1 && (0, import_vuu_utils40.isValidNumber)(index)) {
           keyboardHookHandleClick(evt, index);
           onClick == null ? void 0 : onClick(evt, index);
         }
@@ -12234,7 +12611,7 @@ var useToolbar = ({
     },
     [keyboardHookHandleClick, onClick]
   );
-  const handleKeyDown = (0, import_react81.useCallback)(
+  const handleKeyDown = (0, import_react88.useCallback)(
     (evt) => {
       keyboardHookHandleKeyDown(evt);
       if (!evt.defaultPrevented) {
@@ -12243,7 +12620,7 @@ var useToolbar = ({
     },
     [keyboardHookHandleKeyDown, onKeyDown]
   );
-  const onSwitchWrappedItemIntoView = (0, import_react81.useCallback)(
+  const onSwitchWrappedItemIntoView = (0, import_react88.useCallback)(
     (item) => {
       const index = parseInt(item.index);
       if (!isNaN(index)) {
@@ -12275,8 +12652,8 @@ var useToolbar = ({
 };
 
 // src/toolbar/Toolbar.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var classBase24 = "vuuToolbar";
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var classBase28 = "vuuToolbar";
 var Toolbar = ({
   activeItemIndex: activeItemIndexProp,
   alignItems = "start",
@@ -12291,7 +12668,7 @@ var Toolbar = ({
   showSeparators = false,
   ...props
 }) => {
-  const rootRef = (0, import_react82.useRef)(null);
+  const rootRef = (0, import_react89.useRef)(null);
   const {
     activeItemIndex,
     focusableIdx,
@@ -12307,18 +12684,18 @@ var Toolbar = ({
     orientation,
     selectionStrategy
   });
-  const id = (0, import_vuu_utils38.useId)(idProp);
-  const items = (0, import_react82.useMemo)(
-    () => (0, import_vuu_utils38.asReactElements)(children).map((child, index) => {
+  const id = (0, import_vuu_utils41.useId)(idProp);
+  const items = (0, import_react89.useMemo)(
+    () => (0, import_vuu_utils41.asReactElements)(children).map((child, index) => {
       const {
         id: itemId = `${id}-tab-${index}`,
         className: itemClassName,
         ...ownProps
       } = child.props;
       const selected = activeItemIndex.includes(index);
-      return import_react82.default.cloneElement(child, {
+      return import_react89.default.cloneElement(child, {
         ...forwardCallbackProps(ownProps, itemProps),
-        className: (0, import_clsx34.default)("vuuToolbarItem", itemClassName),
+        className: (0, import_clsx38.default)("vuuToolbarItem", itemClassName),
         "data-overflow-priority": selected ? "1" : void 0,
         id: itemId,
         key: index,
@@ -12328,15 +12705,15 @@ var Toolbar = ({
     }),
     [activeItemIndex, children, focusableIdx, id, itemProps]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     OverflowContainer,
     {
       ...props,
       ...toolbarHook.containerProps,
-      className: (0, import_clsx34.default)(className, classBase24, `${classBase24}-${orientation}`, {
-        [`${classBase24}-alignCenter`]: alignItems === "center",
-        [`${classBase24}-alignEnd`]: alignItems === "end",
-        [`${classBase24}-withSeparators`]: showSeparators
+      className: (0, import_clsx38.default)(className, classBase28, `${classBase28}-${orientation}`, {
+        [`${classBase28}-alignCenter`]: alignItems === "center",
+        [`${classBase28}-alignEnd`]: alignItems === "end",
+        [`${classBase28}-withSeparators`]: showSeparators
       }),
       ...props,
       ref: rootRef,
@@ -12346,9 +12723,9 @@ var Toolbar = ({
 };
 
 // src/tree/Tree.tsx
-var import_core37 = require("@salt-ds/core");
-var import_clsx35 = __toESM(require("clsx"));
-var import_react91 = require("react");
+var import_core38 = require("@salt-ds/core");
+var import_clsx39 = __toESM(require("clsx"));
+var import_react98 = require("react");
 
 // src/tree/list-dom-utils.ts
 function listItemIndex2(listItemEl) {
@@ -12366,7 +12743,7 @@ var closestListItem2 = (el) => el.closest("[data-idx],[aria-posinset]");
 var closestListItemIndex2 = (el) => listItemIndex2(closestListItem2(el));
 
 // src/tree/use-items-with-ids.ts
-var import_react83 = require("react");
+var import_react90 = require("react");
 var PathSeparators2 = /* @__PURE__ */ new Set(["/", "-", "."]);
 var isPathSeparator2 = (char) => PathSeparators2.has(char);
 var isParentPath2 = (parentPath, childPath) => childPath.startsWith(parentPath) && isPathSeparator2(childPath[parentPath.length]);
@@ -12390,7 +12767,7 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
       return 0;
     }
   };
-  const isExpanded2 = (0, import_react83.useCallback)(
+  const isExpanded2 = (0, import_react90.useCallback)(
     (path) => {
       if (Array.isArray(revealSelected)) {
         return revealSelected.some((id) => isParentPath2(path, id));
@@ -12399,7 +12776,7 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
     },
     [defaultExpanded, revealSelected]
   );
-  const normalizeItems = (0, import_react83.useCallback)(
+  const normalizeItems = (0, import_react90.useCallback)(
     (items, indexer, level = 1, path = "", results = [], flattenedSource2 = []) => {
       let count2 = 0;
       items.forEach((item, i, all) => {
@@ -12443,10 +12820,10 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
     },
     [collapsibleHeaders, idRoot, isExpanded2]
   );
-  const [count, sourceWithIds, flattenedSource] = (0, import_react83.useMemo)(() => {
+  const [count, sourceWithIds, flattenedSource] = (0, import_react90.useMemo)(() => {
     return normalizeItems(sourceProp, { index: 0 });
   }, [normalizeItems, sourceProp]);
-  const sourceItemById = (0, import_react83.useCallback)(
+  const sourceItemById = (0, import_react90.useCallback)(
     (id, target = sourceWithIds) => {
       const sourceWithId = target.find(
         (i) => {
@@ -12466,8 +12843,8 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
 };
 
 // src/tree/use-selection.ts
-var import_react84 = require("react");
-var import_core35 = require("@salt-ds/core");
+var import_react91 = require("react");
+var import_core36 = require("@salt-ds/core");
 var SINGLE = "single";
 var CHECKBOX2 = "checkbox";
 var MULTI = "multi";
@@ -12488,17 +12865,17 @@ var useSelection4 = ({
   const singleSelect = selection === SINGLE;
   const multiSelect = selection === MULTI || selection.startsWith(CHECKBOX2);
   const extendedSelect = selection === EXTENDED;
-  const lastActive = (0, import_react84.useRef)(-1);
-  const isSelectionEvent = (0, import_react84.useCallback)(
+  const lastActive = (0, import_react91.useRef)(-1);
+  const isSelectionEvent = (0, import_react91.useCallback)(
     (evt) => selectionKeys.includes(evt.key),
     [selectionKeys]
   );
-  const [selected, setSelected] = (0, import_core35.useControlled)({
+  const [selected, setSelected] = (0, import_core36.useControlled)({
     controlled: selectedProp,
     default: defaultSelected != null ? defaultSelected : [],
     name: "selected"
   });
-  const selectItemAtIndex = (0, import_react84.useCallback)(
+  const selectItemAtIndex = (0, import_react91.useCallback)(
     (evt, idx, id, rangeSelect, preserveExistingSelection = false) => {
       const { current: active } = lastActive;
       const isSelected2 = selected == null ? void 0 : selected.includes(id);
@@ -12539,7 +12916,7 @@ var useSelection4 = ({
       singleSelect
     ]
   );
-  const handleKeyDown = (0, import_react84.useCallback)(
+  const handleKeyDown = (0, import_react91.useCallback)(
     (evt) => {
       if (~highlightedIdx && isSelectionEvent(evt)) {
         evt.preventDefault();
@@ -12564,7 +12941,7 @@ var useSelection4 = ({
       selectItemAtIndex
     ]
   );
-  const handleKeyboardNavigation = (0, import_react84.useCallback)(
+  const handleKeyboardNavigation = (0, import_react91.useCallback)(
     (evt, currentIndex) => {
       if (extendedSelect && evt.shiftKey) {
         const item = treeNodes[currentIndex];
@@ -12577,7 +12954,7 @@ var useSelection4 = ({
     onKeyDown: handleKeyDown,
     onKeyboardNavigation: handleKeyboardNavigation
   };
-  const handleClick = (0, import_react84.useCallback)(
+  const handleClick = (0, import_react91.useCallback)(
     (evt) => {
       if (highlightedIdx !== -1) {
         const item = treeNodes[highlightedIdx];
@@ -12611,14 +12988,14 @@ var useSelection4 = ({
 };
 
 // src/tree/use-viewport-tracking.ts
-var import_react85 = require("react");
+var import_react92 = require("react");
 var HeightOnly4 = ["height", "scrollHeight"];
 var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
-  const scrollTop = (0, import_react85.useRef)(0);
-  const scrolling = (0, import_react85.useRef)(false);
-  const rootHeight = (0, import_react85.useRef)(0);
-  const rootScrollHeight = (0, import_react85.useRef)(0);
-  const scrollIntoView = (0, import_react85.useCallback)(
+  const scrollTop = (0, import_react92.useRef)(0);
+  const scrolling = (0, import_react92.useRef)(false);
+  const rootHeight = (0, import_react92.useRef)(0);
+  const rootScrollHeight = (0, import_react92.useRef)(0);
+  const scrollIntoView = (0, import_react92.useCallback)(
     (el) => {
       const targetEl = el.ariaExpanded ? el.firstChild : el;
       const headerHeight = stickyHeaders ? 30 : 0;
@@ -12639,10 +13016,10 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
     },
     [root, stickyHeaders]
   );
-  const scrollHandler = (0, import_react85.useCallback)((e) => {
+  const scrollHandler = (0, import_react92.useCallback)((e) => {
     scrollTop.current = e.target.scrollTop;
   }, []);
-  (0, import_react85.useEffect)(() => {
+  (0, import_react92.useEffect)(() => {
     const { current: rootEl } = root;
     if (rootEl) {
       rootEl.addEventListener("scroll", scrollHandler);
@@ -12653,7 +13030,7 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
       }
     };
   }, [root, scrollHandler]);
-  (0, import_react85.useLayoutEffect)(() => {
+  (0, import_react92.useLayoutEffect)(() => {
     if (highlightedIdx !== -1 && rootScrollHeight.current > rootHeight.current) {
       if (root.current) {
         const item = root.current.querySelector(`
@@ -12670,9 +13047,9 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
       }
     }
   }, [highlightedIdx, root, scrollIntoView]);
-  (0, import_react85.useEffect)(() => {
+  (0, import_react92.useEffect)(() => {
   }, [stickyHeaders]);
-  const onResize = (0, import_react85.useCallback)(({ height, scrollHeight }) => {
+  const onResize = (0, import_react92.useCallback)(({ height, scrollHeight }) => {
     rootHeight.current = height;
     rootScrollHeight.current = scrollHeight;
   }, []);
@@ -12681,10 +13058,10 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
 };
 
 // src/tree/useTree.ts
-var import_react90 = require("react");
+var import_react97 = require("react");
 
 // src/tree/use-keyboard-navigation.ts
-var import_react86 = require("react");
+var import_react93 = require("react");
 
 // src/tree/hierarchical-data-utils.ts
 var getNodeParentPath = ({ id }) => {
@@ -12751,7 +13128,7 @@ var replaceNode = (nodes, id, props) => {
 };
 
 // src/tree/use-keyboard-navigation.ts
-var import_core36 = require("@salt-ds/core");
+var import_core37 = require("@salt-ds/core");
 
 // src/tree/key-code.ts
 function union2(set1, ...sets) {
@@ -12834,26 +13211,26 @@ var useKeyboardNavigation4 = ({
   onKeyboardNavigation,
   selected = []
 }) => {
-  const { bwd: ArrowBwd, fwd: ArrowFwd } = (0, import_react86.useMemo)(
+  const { bwd: ArrowBwd, fwd: ArrowFwd } = (0, import_react93.useMemo)(
     () => ({
       bwd: ArrowUp4,
       fwd: ArrowDown4
     }),
     []
   );
-  const [highlightedIdx, setHighlightedIdx, isControlledHighlighting] = (0, import_core36.useControlled)({
+  const [highlightedIdx, setHighlightedIdx, isControlledHighlighting] = (0, import_core37.useControlled)({
     controlled: highlightedIdxProp,
     default: defaultHighlightedIdx,
     name: "highlightedIdx"
   });
-  const setHighlightedIndex = (0, import_react86.useCallback)(
+  const setHighlightedIndex = (0, import_react93.useCallback)(
     (idx) => {
       onHighlight == null ? void 0 : onHighlight(idx);
       setHighlightedIdx(idx);
     },
     [onHighlight, setHighlightedIdx]
   );
-  const nextFocusableItemIdx = (0, import_react86.useCallback)(
+  const nextFocusableItemIdx = (0, import_react93.useCallback)(
     (key = ArrowFwd, idx = key === ArrowFwd ? -1 : treeNodes.length) => {
       let nextIdx = nextItemIdx4(treeNodes.length, key, idx);
       while (nextIdx !== -1 && (key === ArrowFwd && nextIdx < treeNodes.length || key === ArrowBwd && nextIdx > 0) && !isFocusable3(treeNodes[nextIdx])) {
@@ -12863,10 +13240,10 @@ var useKeyboardNavigation4 = ({
     },
     [ArrowBwd, ArrowFwd, treeNodes]
   );
-  const keyBoardNavigation = (0, import_react86.useRef)(true);
-  const ignoreFocus = (0, import_react86.useRef)(false);
+  const keyBoardNavigation = (0, import_react93.useRef)(true);
+  const ignoreFocus = (0, import_react93.useRef)(false);
   const setIgnoreFocus = (value) => ignoreFocus.current = value;
-  const handleFocus = (0, import_react86.useCallback)(() => {
+  const handleFocus = (0, import_react93.useCallback)(() => {
     if (ignoreFocus.current) {
       ignoreFocus.current = false;
     } else if (selected.length > 0) {
@@ -12879,7 +13256,7 @@ var useKeyboardNavigation4 = ({
       setHighlightedIndex(nextFocusableItemIdx());
     }
   }, [treeNodes, nextFocusableItemIdx, selected, setHighlightedIndex]);
-  const navigateChildItems = (0, import_react86.useCallback)(
+  const navigateChildItems = (0, import_react93.useCallback)(
     (e) => {
       const nextIdx = nextFocusableItemIdx(e.key, highlightedIdx);
       if (nextIdx !== highlightedIdx) {
@@ -12894,7 +13271,7 @@ var useKeyboardNavigation4 = ({
       setHighlightedIndex
     ]
   );
-  const handleKeyDown = (0, import_react86.useCallback)(
+  const handleKeyDown = (0, import_react93.useCallback)(
     (e) => {
       if (treeNodes.length > 0 && isNavigationKey4(e, "vertical")) {
         e.preventDefault();
@@ -12905,7 +13282,7 @@ var useKeyboardNavigation4 = ({
     },
     [treeNodes, navigateChildItems]
   );
-  const listProps = (0, import_react86.useMemo)(
+  const listProps = (0, import_react93.useMemo)(
     () => ({
       onBlur: () => {
         setHighlightedIndex(-1);
@@ -12943,7 +13320,7 @@ var useKeyboardNavigation4 = ({
 };
 
 // src/tree/use-hierarchical-data.ts
-var import_react87 = require("react");
+var import_react94 = require("react");
 var populateIndices = (nodes, results = [], idx = { value: 0 }) => {
   let skipToNextHeader = false;
   for (const node of nodes) {
@@ -12965,10 +13342,10 @@ var populateIndices = (nodes, results = [], idx = { value: 0 }) => {
   return results;
 };
 var useHierarchicalData = (source) => {
-  const externalSource = (0, import_react87.useRef)(source);
-  const statefulSource = (0, import_react87.useRef)(source);
-  const indexPositions = (0, import_react87.useRef)(populateIndices(source));
-  const [, forceUpdate] = (0, import_react87.useState)({});
+  const externalSource = (0, import_react94.useRef)(source);
+  const statefulSource = (0, import_react94.useRef)(source);
+  const indexPositions = (0, import_react94.useRef)(populateIndices(source));
+  const [, forceUpdate] = (0, import_react94.useState)({});
   if (source !== externalSource.current) {
     externalSource.current = source;
     statefulSource.current = source;
@@ -12988,7 +13365,7 @@ var useHierarchicalData = (source) => {
 };
 
 // src/tree/use-collapsible-groups.ts
-var import_react88 = require("react");
+var import_react95 = require("react");
 var NO_HANDLERS4 = {};
 var isToggleElement = (element) => element && element.hasAttribute("aria-expanded");
 var useCollapsibleGroups2 = ({
@@ -12998,23 +13375,23 @@ var useCollapsibleGroups2 = ({
   setVisibleData,
   source
 }) => {
-  const fullSource = (0, import_react88.useRef)(source);
-  const stateSource = (0, import_react88.useRef)(fullSource.current);
-  const setSource = (0, import_react88.useCallback)(
+  const fullSource = (0, import_react95.useRef)(source);
+  const stateSource = (0, import_react95.useRef)(fullSource.current);
+  const setSource = (0, import_react95.useCallback)(
     (value) => {
       setVisibleData(stateSource.current = value);
     },
     [setVisibleData]
   );
-  const expandNode = (0, import_react88.useCallback)(
+  const expandNode = (0, import_react95.useCallback)(
     (nodeList, { id }) => replaceNode(nodeList, id, { expanded: true }),
     []
   );
-  const collapseNode = (0, import_react88.useCallback)(
+  const collapseNode = (0, import_react95.useCallback)(
     (nodeList, { id }) => replaceNode(nodeList, id, { expanded: false }),
     []
   );
-  const handleKeyDown = (0, import_react88.useCallback)(
+  const handleKeyDown = (0, import_react95.useCallback)(
     (e) => {
       if (e.key === ArrowRight4 || e.key === Enter2) {
         const node = treeNodes[highlightedIdx];
@@ -13040,7 +13417,7 @@ var useCollapsibleGroups2 = ({
   const listHandlers = collapsibleHeaders ? {
     onKeyDown: handleKeyDown
   } : NO_HANDLERS4;
-  const handleClick = (0, import_react88.useCallback)(
+  const handleClick = (0, import_react95.useCallback)(
     (evt) => {
       const el = closestListItem2(evt.target);
       if (isToggleElement(el)) {
@@ -13066,14 +13443,14 @@ var useCollapsibleGroups2 = ({
 };
 
 // src/tree/use-tree-keyboard-navigation.ts
-var import_react89 = require("react");
+var import_react96 = require("react");
 var useTreeKeyboardNavigation = ({
   highlightedIdx,
   hiliteItemAtIndex,
   indexPositions,
   source
 }) => {
-  const handleKeyDown = (0, import_react89.useCallback)(
+  const handleKeyDown = (0, import_react96.useCallback)(
     (e) => {
       if (e.key === ArrowLeft4) {
         const node = indexPositions[highlightedIdx];
@@ -13110,7 +13487,7 @@ var useTree = ({
   selected: selectedProp,
   selection
 }) => {
-  const lastSelection = (0, import_react90.useRef)(EMPTY_ARRAY2);
+  const lastSelection = (0, import_react97.useRef)(EMPTY_ARRAY2);
   const dataHook = useHierarchicalData(sourceWithIds);
   const handleKeyboardNavigation = (evt, nextIdx) => {
     var _a2, _b;
@@ -13143,7 +13520,7 @@ var useTree = ({
     hiliteItemAtIndex: keyboardHook.hiliteItemAtIndex,
     indexPositions: dataHook.indexPositions
   });
-  const handleClick = (0, import_react90.useCallback)(
+  const handleClick = (0, import_react97.useCallback)(
     (evt) => {
       var _a2, _b, _c;
       (_a2 = collapsibleHook.listItemHandlers) == null ? void 0 : _a2.onClick(evt);
@@ -13153,7 +13530,7 @@ var useTree = ({
     },
     [collapsibleHook, selectionHook]
   );
-  const handleKeyDown = (0, import_react90.useCallback)(
+  const handleKeyDown = (0, import_react97.useCallback)(
     (evt) => {
       var _a2, _b, _c, _d, _e, _f, _g, _h;
       (_b = (_a2 = keyboardHook.listProps).onKeyDown) == null ? void 0 : _b.call(_a2, evt);
@@ -13203,14 +13580,14 @@ var useTree = ({
 };
 
 // src/tree/Tree.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var import_react92 = require("react");
-var classBase25 = "vuuTree";
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_react99 = require("react");
+var classBase29 = "vuuTree";
 var isExpanded = (node) => node.expanded === true;
 var TreeNode = ({ children, idx, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("li", { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("li", { ...props, children });
 };
-var Tree = (0, import_react91.forwardRef)(function Tree2({
+var Tree = (0, import_react98.forwardRef)(function Tree2({
   allowDragDrop,
   className,
   defaultSelected,
@@ -13225,8 +13602,8 @@ var Tree = (0, import_react91.forwardRef)(function Tree2({
   ...htmlAttributes
 }, forwardedRef) {
   var _a2;
-  const id = (0, import_core37.useIdMemo)(idProp);
-  const rootRef = (0, import_react91.useRef)(null);
+  const id = (0, import_core38.useIdMemo)(idProp);
+  const rootRef = (0, import_react98.useRef)(null);
   const [, sourceWithIds, sourceItemById] = useItemsWithIds(source, id, {
     revealSelected: revealSelected ? (_a2 = selectedProp != null ? selectedProp : defaultSelected) != null ? _a2 : false : void 0
   });
@@ -13269,14 +13646,14 @@ var Tree = (0, import_react91.forwardRef)(function Tree2({
   const allowGroupSelect = groupSelectionEnabled2(groupSelection);
   function addLeafNode(list, item, idx) {
     list.push(
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
         TreeNode,
         {
           ...propsCommonToAllListItems,
           ...getListItemProps(item, idx, highlightedIdx, selected, focusVisible),
           children: [
-            item.icon ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: `${classBase25}Node-icon`, "data-icon": item.icon }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: item.label })
+            item.icon ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: `${classBase29}Node-icon`, "data-icon": item.icon }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { children: item.label })
           ]
         }
       )
@@ -13287,16 +13664,16 @@ var Tree = (0, import_react91.forwardRef)(function Tree2({
     const { value: i } = idx;
     idx.value += 1;
     list.push(
-      /* @__PURE__ */ (0, import_react92.createElement)(
+      /* @__PURE__ */ (0, import_react99.createElement)(
         TreeNode,
         {
           ...listItemHandlers,
           "aria-expanded": child.expanded,
           "aria-level": child.level,
           "aria-selected": selected.includes(id2) || void 0,
-          className: (0, import_clsx35.default)(`${classBase25}Node`, {
+          className: (0, import_clsx39.default)(`${classBase29}Node`, {
             focusVisible: focusVisible === i,
-            [`${classBase25}Node-toggle`]: !allowGroupSelect
+            [`${classBase29}Node-toggle`]: !allowGroupSelect
           }),
           "data-idx": i,
           "data-highlighted": i === highlightedIdx || void 0,
@@ -13304,20 +13681,20 @@ var Tree = (0, import_react91.forwardRef)(function Tree2({
           id: id2,
           key: `header-${i}`
         },
-        allowGroupSelect ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: `${classBase25}Node-label`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: `${classBase25}Node-toggle` }),
+        allowGroupSelect ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: `${classBase29}Node-label`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: `${classBase29}Node-toggle` }),
           title
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: `${classBase25}Node-label`, children: [
-          child.icon ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: `${classBase29}Node-label`, children: [
+          child.icon ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             "span",
             {
-              className: `${classBase25}Node-icon`,
+              className: `${classBase29}Node-icon`,
               "data-icon": child.icon
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: title })
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { children: title })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("ul", { role: "group", children: isExpanded(child) ? renderSourceContent(child.childNodes, idx) : "" })
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("ul", { role: "group", children: isExpanded(child) ? renderSourceContent(child.childNodes, idx) : "" })
       )
     );
   }
@@ -13334,14 +13711,14 @@ var Tree = (0, import_react91.forwardRef)(function Tree2({
       return listItems;
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "ul",
     {
       ...htmlAttributes,
       ...listProps,
-      className: (0, import_clsx35.default)(classBase25, className),
+      className: (0, import_clsx39.default)(classBase29, className),
       id: `Tree-${id}`,
-      ref: (0, import_core37.useForkRef)(rootRef, forwardedRef),
+      ref: (0, import_core38.useForkRef)(rootRef, forwardedRef),
       role: "tree",
       tabIndex: 0,
       children: renderSourceContent(visibleData)
@@ -13355,7 +13732,7 @@ var getListItemProps = (item, idx, highlightedIdx, selected, focusVisible, class
   "aria-selected": selected.includes(item.id) || void 0,
   "data-idx": idx.value,
   "data-highlighted": idx.value === highlightedIdx || void 0,
-  className: (0, import_clsx35.default)("vuuTreeNode", className, {
+  className: (0, import_clsx39.default)("vuuTreeNode", className, {
     focusVisible: focusVisible === idx.value
   })
 });