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

package/esm/index.js

@@ -1,19 +1,13 @@
 // src/calendar/Calendar.tsx
-import { forwardRef as forwardRef14, useCallback as useCallback32 } from "react";
+import { forwardRef as forwardRef15, useCallback as useCallback32 } from "react";
 import { clsx as clsx6 } from "clsx";
 import { makePrefixer as makePrefixer8 } from "@salt-ds/core";
 
 // src/calendar/internal/CalendarNavigation.tsx
-import {
-  Button as Button2,
-  makePrefixer as makePrefixer2,
-  Tooltip,
-  useId as useId5
-} from "@salt-ds/core";
-import { ChevronLeftIcon, ChevronRightIcon } from "@salt-ds/icons";
+import { makePrefixer as makePrefixer2, Tooltip, useId as useId5 } from "@salt-ds/core";
 import { clsx } from "clsx";
 import {
-  forwardRef as forwardRef9
+  forwardRef as forwardRef10
 } from "react";
 
 // src/dropdown/DropdownBase.tsx
@@ -810,8 +804,24 @@ var useStateRef = (initialValue) => {
 };
 
 // src/dropdown/useClickAway.ts
+import { queryClosest } from "@vuu-ui/vuu-utils";
 import { useEffect as useEffect3, useRef as useRef5 } from "react";
 var NO_HANDLERS = [];
+var targetWithinSubPopup = (source, target) => {
+  if (source === null) {
+    return false;
+  }
+  const sourcePortal = queryClosest(source, ".vuuPortal");
+  const targetPortal = 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,
@@ -826,9 +836,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) => {
@@ -2104,7 +2117,7 @@ var CheckboxIcon = ({
 // src/list/ListItem.tsx
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var classBase4 = "vuuListItem";
-var ListItemProxy = forwardRef3(function ListItemNextProxy({
+var ListItemProxy = forwardRef3(function ListItemProxy2({
   height,
   ...htmlAttributes
 }, forwardedRef) {
@@ -2463,9 +2476,7 @@ import {
 import { PopupMenu } from "@vuu-ui/vuu-popups";
 import { asReactElements, useId as useId2 } from "@vuu-ui/vuu-utils";
 import cx5 from "clsx";
-import React2, {
-  forwardRef as forwardRef4
-} from "react";
+import React2, { forwardRef as forwardRef4 } from "react";
 
 // src/overflow-container/useOverflowContainer.ts
 import {
@@ -2505,7 +2516,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;
@@ -2536,9 +2547,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;
@@ -2589,22 +2600,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 {
@@ -2645,23 +2657,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;
   }
@@ -2685,7 +2715,7 @@ 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 = getElementByDataIndex3(
     container,
@@ -2694,10 +2724,11 @@ var switchWrappedItemIntoView = (container, overflowItem) => {
   );
   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 {
@@ -2717,7 +2748,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];
 };
@@ -2735,7 +2769,7 @@ var useOverflowContainer = ({
   itemCount,
   onMoveItem,
   onSwitchWrappedItemIntoView,
-  orientation = "horizontal"
+  orientation
 }) => {
   const [container, setContainer] = useState6(null);
   const wrappedItemsRef = useRef13(NO_WRAPPED_ITEMS);
@@ -2758,17 +2792,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;
         }
       }
@@ -2799,7 +2838,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);
@@ -2807,7 +2847,7 @@ var useOverflowContainer = ({
         return true;
       }
     ];
-  }, [container, onSwitchWrappedItemIntoView]);
+  }, [container, onSwitchWrappedItemIntoView, orientation]);
   const resizeObserver3 = useMemo5(() => {
     const { sizeProp } = MEASURES[orientation];
     let currentSize = 0;
@@ -2866,12 +2906,10 @@ var WrapContainer = React2.memo(
     PopupMenuProps: PopupMenuProps3,
     allowDragDrop,
     children,
-    className: classNameProp,
-    height: heightProp,
     id,
     onMoveItem,
     onSwitchWrappedItemIntoView,
-    orientation = "horizontal",
+    orientation,
     overflowIcon
   }) => {
     const childElements = asReactElements(children);
@@ -2889,14 +2927,6 @@ var WrapContainer = React2.memo(
       onSwitchWrappedItemIntoView,
       orientation
     });
-    const height = orientation === "vertical" ? "100%" : `${heightProp}px`;
-    const style = {
-      "--overflow-container-height": `${height}`
-    };
-    const className = cx5(`${classBase5}-wrapContainer`, classNameProp, {
-      [`${classBase5}-horizontal`]: orientation === "horizontal",
-      [`${classBase5}-vertical`]: orientation === "vertical"
-    });
     const content = childElements.map((childEl, i) => {
       const {
         "data-align": align,
@@ -2930,6 +2960,7 @@ var WrapContainer = React2.memo(
           PopupMenu,
           {
             ...PopupMenuProps3,
+            "data-embedded": true,
             icon: overflowIcon,
             menuBuilder,
             menuActionHandler,
@@ -2940,7 +2971,7 @@ var WrapContainer = React2.memo(
       "overflow"
     );
     content.push(overflowIndicator);
-    return /* @__PURE__ */ jsxs4("div", { className, ref: rootRef, style, children: [
+    return /* @__PURE__ */ jsxs4("div", { className: cx5(`${classBase5}-wrapContainer`), ref: rootRef, children: [
       content,
       draggable
     ] });
@@ -2952,11 +2983,10 @@ var OverflowContainer = forwardRef4(function OverflowContainer2({
   allowDragDrop = false,
   children,
   className,
-  height = 44,
   id: idProp,
   onMoveItem,
   onSwitchWrappedItemIntoView,
-  orientation,
+  orientation = "horizontal",
   overflowIcon,
   overflowPosition,
   ...htmlAttributes
@@ -2966,7 +2996,12 @@ var OverflowContainer = forwardRef4(function OverflowContainer2({
     "div",
     {
       ...htmlAttributes,
-      className: cx5(cx5(className, classBase5)),
+      className: cx5(
+        cx5(className, classBase5, {
+          "vuuOrientation-horizontal": orientation === "horizontal",
+          "vuuOrientation-vertical": orientation === "vertical"
+        })
+      ),
       id,
       ref: forwardedRef,
       children: /* @__PURE__ */ jsx8(
@@ -2974,7 +3009,6 @@ var OverflowContainer = forwardRef4(function OverflowContainer2({
         {
           PopupMenuProps: PopupMenuProps3,
           allowDragDrop,
-          height,
           id,
           orientation,
           overflowIcon,
@@ -5640,7 +5674,14 @@ var List = forwardRef7(function List2({
       style: { ...styleProp, ...sizeStyles },
       tabIndex: listDisabled || disableFocus ? void 0 : tabIndex,
       children: [
-        /* @__PURE__ */ jsx13(ListItemProxy, { ref: rowHeightProxyRef, height: itemHeightProp }),
+        /* @__PURE__ */ jsx13(
+          ListItemProxy,
+          {
+            ref: rowHeightProxyRef,
+            height: itemHeightProp
+          },
+          "canary"
+        ),
         collectionHook.data.length === 0 && ListPlaceholder !== void 0 ? /* @__PURE__ */ jsx13(Fragment2, { children: /* @__PURE__ */ jsx13(ListPlaceholder, {}) }) : /* @__PURE__ */ jsx13("div", { className: `${classBase6}-viewport`, onScroll: onVerticalScroll, children: /* @__PURE__ */ jsxs5(
           "div",
           {
@@ -7793,8 +7834,44 @@ function monthDiff(a, b) {
   return b.month - a.month + 12 * (b.year - a.year);
 }
 
+// src/icon-button/Icon.tsx
+import cx10 from "clsx";
+import { jsx as jsx16 } from "react/jsx-runtime";
+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__ */ jsx16(
+    "span",
+    {
+      ...htmlAttributes,
+      className: cx10(classBase8, className),
+      "data-icon": name,
+      role: "img",
+      style
+    }
+  );
+};
+
+// src/icon-button/IconButton.tsx
+import cx11 from "clsx";
+import { Button as Button2 } from "@salt-ds/core";
+import { forwardRef as forwardRef9 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var classBase9 = "vuuIconButton";
+var IconButton = forwardRef9(
+  function IconButton2({ "aria-label": ariaLabel, className, icon, ...buttonProps }, ref) {
+    return /* @__PURE__ */ jsx17(Button2, { ...buttonProps, className: cx11(classBase9, className), ref, children: /* @__PURE__ */ jsx17(Icon, { "aria-label": ariaLabel, name: icon }) });
+  }
+);
+
 // src/calendar/internal/CalendarNavigation.tsx
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
 var withBaseName2 = makePrefixer2("saltCalendarNavigation");
 function useCalendarNavigation() {
   const {
@@ -7855,16 +7932,16 @@ var ListItemWithTooltip = ({
   item,
   label,
   ...props
-}) => /* @__PURE__ */ jsx16(
+}) => /* @__PURE__ */ jsx18(
   Tooltip,
   {
     placement: "right",
     disabled: !(item == null ? void 0 : item.disabled),
     content: "This month is out of range",
-    children: /* @__PURE__ */ jsx16(ListItem, { ...props, children: label })
+    children: /* @__PURE__ */ jsx18(ListItem, { ...props, children: label })
   }
 );
-var CalendarNavigation = forwardRef9(function CalendarNavigation2(props, ref) {
+var CalendarNavigation = forwardRef10(function CalendarNavigation2(props, ref) {
   const {
     className,
     MonthDropdownProps,
@@ -7932,33 +8009,29 @@ var CalendarNavigation = forwardRef9(function CalendarNavigation2(props, ref) {
       ref,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx18(
           Tooltip,
           {
             placement: "top",
             disabled: canNavigatePrevious,
             content: "Past dates are out of range",
-            children: /* @__PURE__ */ jsx16(
-              Button2,
+            children: /* @__PURE__ */ jsx18(
+              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__ */ jsx16(
-                  ChevronLeftIcon,
-                  {
-                    "aria-label": `Previous Month, ${formatDate(
-                      visibleMonth.subtract({ months: 1 })
-                    )}`
-                  }
-                )
+                focusableWhenDisabled: true
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx18(
           Dropdown2,
           {
             source: months,
@@ -7973,7 +8046,7 @@ var CalendarNavigation = forwardRef9(function CalendarNavigation2(props, ref) {
             fullWidth: true
           }
         ),
-        !hideYearDropdown && /* @__PURE__ */ jsx16(
+        !hideYearDropdown && /* @__PURE__ */ jsx18(
           Dropdown2,
           {
             source: years,
@@ -7988,28 +8061,24 @@ var CalendarNavigation = forwardRef9(function CalendarNavigation2(props, ref) {
             fullWidth: true
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx18(
           Tooltip,
           {
             placement: "top",
             disabled: canNavigateNext,
             content: "Future dates are out of range",
-            children: /* @__PURE__ */ jsx16(
-              Button2,
+            children: /* @__PURE__ */ jsx18(
+              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__ */ jsx16(
-                  ChevronRightIcon,
-                  {
-                    "aria-label": `Next Month, ${formatDate(
-                      visibleMonth.add({ months: 1 })
-                    )}`
-                  }
-                )
+                focusableWhenDisabled: true
               }
             )
           }
@@ -8020,22 +8089,22 @@ var CalendarNavigation = forwardRef9(function CalendarNavigation2(props, ref) {
 });
 
 // src/calendar/internal/CalendarWeekHeader.tsx
-import { forwardRef as forwardRef10 } from "react";
+import { forwardRef as forwardRef11 } from "react";
 import { clsx as clsx2 } from "clsx";
 import { makePrefixer as makePrefixer3 } from "@salt-ds/core";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var withBaseName3 = makePrefixer3("saltCalendarWeekHeader");
-var CalendarWeekHeader = forwardRef10(function CalendarWeekHeader2({ className, ...rest }, ref) {
+var CalendarWeekHeader = forwardRef11(function CalendarWeekHeader2({ className, ...rest }, ref) {
   const weekdaysShort = daysForLocale("narrow");
   const weekdaysLong = daysForLocale("long");
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     "div",
     {
       "data-testid": "CalendarWeekHeader",
       className: clsx2(withBaseName3(), className),
       ref,
       ...rest,
-      children: weekdaysShort.map((day, index) => /* @__PURE__ */ jsx17(
+      children: weekdaysShort.map((day, index) => /* @__PURE__ */ jsx19(
         "small",
         {
           "aria-hidden": "true",
@@ -8049,11 +8118,11 @@ var CalendarWeekHeader = forwardRef10(function CalendarWeekHeader2({ className,
 });
 
 // src/calendar/internal/CalendarCarousel.tsx
-import { forwardRef as forwardRef13, useEffect as useEffect9, useRef as useRef29, useState as useState14 } from "react";
+import { forwardRef as forwardRef14, useEffect as useEffect9, useRef as useRef29, useState as useState14 } from "react";
 
 // src/calendar/internal/CalendarMonth.tsx
 import {
-  forwardRef as forwardRef12
+  forwardRef as forwardRef13
 } from "react";
 import { clsx as clsx5 } from "clsx";
 import { makePrefixer as makePrefixer6 } from "@salt-ds/core";
@@ -8062,7 +8131,7 @@ import { makePrefixer as makePrefixer6 } from "@salt-ds/core";
 import { makePrefixer as makePrefixer5, Tooltip as Tooltip2, useForkRef as useForkRef7 } from "@salt-ds/core";
 import { CloseIcon } from "@salt-ds/icons";
 import { clsx as clsx4 } from "clsx";
-import { forwardRef as forwardRef11, useRef as useRef28 } from "react";
+import { forwardRef as forwardRef12, useRef as useRef28 } from "react";
 
 // src/calendar/useCalendarDay.ts
 import {
@@ -8393,7 +8462,7 @@ 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;
@@ -8407,7 +8476,7 @@ function useCalendarDay({ date, month }, ref) {
   return {
     status: {
       outOfRange,
-      today,
+      today: today2,
       unselectable,
       focused,
       hidden,
@@ -8415,7 +8484,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
@@ -8425,9 +8494,9 @@ function useCalendarDay({ date, month }, ref) {
 }
 
 // src/calendar/internal/CalendarDay.tsx
-import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
 var withBaseName5 = makePrefixer5("saltCalendarDay");
-var CalendarDay = forwardRef11(
+var CalendarDay = forwardRef12(
   function CalendarDay2(props, ref) {
     const { className, day, renderDayContents, month, TooltipProps: TooltipProps2, ...rest } = props;
     const dayRef = useRef28(null);
@@ -8439,8 +8508,8 @@ var CalendarDay = forwardRef11(
       },
       dayRef
     );
-    const { outOfRange, today, unselectable, hidden } = status;
-    return /* @__PURE__ */ jsx18(
+    const { outOfRange, today: today2, unselectable, hidden } = status;
+    return /* @__PURE__ */ jsx20(
       Tooltip2,
       {
         hideIcon: true,
@@ -8462,7 +8531,7 @@ var CalendarDay = forwardRef11(
               {
                 [withBaseName5("hidden")]: hidden,
                 [withBaseName5("outOfRange")]: outOfRange,
-                [withBaseName5("today")]: today,
+                [withBaseName5("today")]: today2,
                 [withBaseName5("unselectable")]: !!unselectable,
                 [withBaseName5("unselectableLow")]: unselectable === "low",
                 [withBaseName5("unselectableMedium")]: unselectable === "medium"
@@ -8471,7 +8540,7 @@ var CalendarDay = forwardRef11(
               className
             ),
             children: [
-              unselectable === "medium" && /* @__PURE__ */ jsx18(
+              unselectable === "medium" && /* @__PURE__ */ jsx20(
                 CloseIcon,
                 {
                   "aria-hidden": true,
@@ -8489,9 +8558,9 @@ var CalendarDay = forwardRef11(
 );
 
 // src/calendar/internal/CalendarMonth.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var withBaseName6 = makePrefixer6("saltCalendarMonth");
-var CalendarMonth = forwardRef12(
+var CalendarMonth = forwardRef13(
   function CalendarMonth2(props, ref) {
     const {
       className,
@@ -8511,20 +8580,20 @@ var CalendarMonth = forwardRef12(
       setHoveredDate(event, null);
       onMouseLeave == null ? void 0 : onMouseLeave(event);
     };
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx21(
       "div",
       {
         className: clsx5(withBaseName6(), className),
         ref,
         onMouseLeave: handleMouseLeave,
         ...rest,
-        children: /* @__PURE__ */ jsx19(
+        children: /* @__PURE__ */ jsx21(
           "div",
           {
             "data-testid": "CalendarDateGrid",
             className: withBaseName6("dateGrid"),
             children: days.map((day) => {
-              return /* @__PURE__ */ jsx19(
+              return /* @__PURE__ */ jsx21(
                 CalendarDay,
                 {
                   day: day.date,
@@ -8548,7 +8617,7 @@ import {
   useIsomorphicLayoutEffect as useIsomorphicLayoutEffect3,
   usePrevious
 } from "@salt-ds/core";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function getMonths(month) {
   return [month.subtract({ months: 1 }), month, month.add({ months: 1 })];
 }
@@ -8557,7 +8626,7 @@ function usePreviousMonth(visibleMonth) {
   return previous != null ? previous : $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2());
 }
 var withBaseName7 = makePrefixer7("saltCalendarCarousel");
-var CalendarCarousel = forwardRef13(function CalendarCarousel2(props, ref) {
+var CalendarCarousel = forwardRef14(function CalendarCarousel2(props, ref) {
   const { ...rest } = props;
   const {
     state: { visibleMonth }
@@ -8601,7 +8670,7 @@ var CalendarCarousel = forwardRef13(function CalendarCarousel2(props, ref) {
     }
     return void 0;
   }, [formatDate(visibleMonth)]);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       className: withBaseName7(),
@@ -8610,7 +8679,7 @@ var CalendarCarousel = forwardRef13(function CalendarCarousel2(props, ref) {
         position: "relative"
       },
       ref,
-      children: /* @__PURE__ */ jsx20("div", { className: withBaseName7("track"), ref: containerRef, children: months.map((date, index) => /* @__PURE__ */ jsx20(
+      children: /* @__PURE__ */ jsx22("div", { className: withBaseName7("track"), ref: containerRef, children: months.map((date, index) => /* @__PURE__ */ jsx22(
         "div",
         {
           className: withBaseName7("slide"),
@@ -8618,7 +8687,7 @@ var CalendarCarousel = forwardRef13(function CalendarCarousel2(props, ref) {
             transform: `translateX(${diffIndex(date, baseIndex) * 100}%)`
           },
           "aria-hidden": index !== 1 ? "true" : void 0,
-          children: /* @__PURE__ */ jsx20(CalendarMonth, { isVisible: index === 1, ...rest, date })
+          children: /* @__PURE__ */ jsx22(CalendarMonth, { isVisible: index === 1, ...rest, date })
         },
         formatDate(date)
       )) })
@@ -8752,9 +8821,9 @@ function useCalendar(props) {
 }
 
 // src/calendar/Calendar.tsx
-import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
 var withBaseName8 = makePrefixer8("saltCalendar");
-var Calendar = forwardRef14(
+var Calendar = forwardRef15(
   function Calendar2(props, ref) {
     const {
       className,
@@ -8771,7 +8840,7 @@ var Calendar = forwardRef14(
     const handleBlur = useCallback32(() => {
       setCalendarFocused(false);
     }, [setCalendarFocused]);
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx23(
       CalendarContext.Provider,
       {
         value: {
@@ -8785,9 +8854,9 @@ var Calendar = forwardRef14(
             role: "application",
             ref,
             children: [
-              /* @__PURE__ */ jsx21(CalendarNavigation, { hideYearDropdown }),
-              /* @__PURE__ */ jsx21(CalendarWeekHeader, {}),
-              /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsx23(CalendarNavigation, { hideYearDropdown }),
+              /* @__PURE__ */ jsx23(CalendarWeekHeader, {}),
+              /* @__PURE__ */ jsx23(
                 CalendarCarousel,
                 {
                   onFocus: handleFocus,
@@ -8807,15 +8876,15 @@ var Calendar = forwardRef14(
 // src/combo-box/ComboBox.tsx
 import { useId as useId6 } from "@vuu-ui/vuu-utils";
 import { Input } from "@salt-ds/core";
-import { forwardRef as forwardRef15, useCallback as useCallback34 } from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback34 } from "react";
 
 // src/list/ChevronIcon.tsx
-import cx10 from "clsx";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var classBase8 = "vuuChevronIcon";
+import cx12 from "clsx";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var classBase10 = "vuuChevronIcon";
 var ChevronIcon = (props) => {
   const { direction, ...htmlAttributes } = props;
-  return /* @__PURE__ */ jsx22("span", { ...htmlAttributes, className: cx10(classBase8, direction) });
+  return /* @__PURE__ */ jsx24("span", { ...htmlAttributes, className: cx12(classBase10, direction) });
 };
 
 // src/combo-box/useCombobox.ts
@@ -9172,8 +9241,8 @@ var useCombobox = ({
 };
 
 // src/combo-box/ComboBox.tsx
-import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
-var ComboBox = forwardRef15(function Combobox({
+import { jsx as jsx25, jsxs as jsxs10 } from "react/jsx-runtime";
+var ComboBox = forwardRef16(function Combobox({
   InputProps: InputPropsProp,
   ListProps: ListProps3,
   PopupProps,
@@ -9283,7 +9352,7 @@ var ComboBox = forwardRef15(function Combobox({
       onOpenChange(true);
     }
   }, [isOpen, onOpenChange]);
-  const endAdornment = endAdornmentProp === null ? null : /* @__PURE__ */ jsx23(
+  const endAdornment = endAdornmentProp === null ? null : /* @__PURE__ */ jsx25(
     ChevronIcon,
     {
       direction: isOpen ? "up" : "down",
@@ -9291,7 +9360,7 @@ var ComboBox = forwardRef15(function Combobox({
       role: "button"
     }
   );
-  return /* @__PURE__ */ jsx23(CollectionProvider, { collectionHook, children: /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsx25(CollectionProvider, { collectionHook, children: /* @__PURE__ */ jsxs10(
     DropdownBase,
     {
       ...props,
@@ -9303,7 +9372,7 @@ var ComboBox = forwardRef15(function Combobox({
       ref: forwardedRef,
       width,
       children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx25(
           Input,
           {
             ...InputProps4,
@@ -9312,7 +9381,7 @@ var ComboBox = forwardRef15(function Combobox({
             endAdornment
           }
         ),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx25(
           List,
           {
             ...ListProps3,
@@ -9336,10 +9405,10 @@ var ComboBox = forwardRef15(function Combobox({
 
 // src/cycle-state-button/CycleStateButton.tsx
 import { Button as Button3 } from "@salt-ds/core";
-import cx11 from "clsx";
-import { forwardRef as forwardRef16, useCallback as useCallback35 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var classBase9 = "vuuCycleStateButton";
+import cx13 from "clsx";
+import { forwardRef as forwardRef17, useCallback as useCallback35 } from "react";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var classBase11 = "vuuCycleStateButton";
 var getNextValue = (value, valueList) => {
   const index = valueList.indexOf(value.toUpperCase());
   if (index === valueList.length - 1) {
@@ -9348,7 +9417,7 @@ var getNextValue = (value, valueList) => {
     return valueList[index + 1];
   }
 };
-var CycleStateButton = forwardRef16(function CycleStateButton2({
+var CycleStateButton = forwardRef17(function CycleStateButton2({
   className,
   onCommit,
   value = "",
@@ -9366,14 +9435,14 @@ var CycleStateButton = forwardRef16(function CycleStateButton2({
     },
     [onCommit, value, values]
   );
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     Button3,
     {
       ...buttonProps,
-      className: cx11(
-        classBase9,
+      className: cx13(
+        classBase11,
         className,
-        `${classBase9}-${value.toLowerCase()}`
+        `${classBase11}-${value.toLowerCase()}`
       ),
       onClick: handleClick,
       ref: forwardedRef,
@@ -9382,33 +9451,344 @@ var CycleStateButton = forwardRef16(function CycleStateButton2({
   );
 });
 
+// src/date-input/DateInput.tsx
+import { toCalendarDate } from "@vuu-ui/vuu-utils";
+import { clsx as clsx7 } from "clsx";
+import {
+  useCallback as useCallback38,
+  useRef as useRef32
+} from "react";
+
+// src/date-popup/DatePopup.tsx
+import { useForkRef as useForkRef8 } from "@salt-ds/core";
+import cx14 from "clsx";
+import { forwardRef as forwardRef18 } from "react";
+
+// src/date-popup/useDatePopup.ts
+import { useCallback as useCallback36, useMemo as useMemo14, useRef as useRef31, useState as useState17 } from "react";
+var SELECTED_DAY = ".saltCalendarDay-selected:not(.saltCalendarDay-outOfRange)";
+var useDatePopup = ({
+  onChange,
+  onPopupClose,
+  onPopupOpen,
+  selectedDate
+}) => {
+  const [date, setDate] = useState17(selectedDate);
+  const [, forceUpdate] = useState17({});
+  const [isOpen, setIsOpen] = useState17(false);
+  const triggererRef = useRef31(null);
+  const calendarRef = useRef31(null);
+  const visibleMonthRef = useRef31(selectedDate);
+  const setVisibleMonth = useMemo14(() => {
+    const setValue = (v) => {
+      if (v.toString() !== visibleMonthRef.current.toString()) {
+        visibleMonthRef.current = v;
+        forceUpdate({});
+      }
+    };
+    setValue(selectedDate);
+    return setValue;
+  }, [selectedDate]);
+  const handleOpenChange = useCallback36(
+    (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]
+  );
+  const handleDateSelection = useCallback36(
+    (e, date2) => {
+      setDate(date2);
+      console.log(date2.toString());
+      visibleMonthRef.current = date2;
+      handleOpenChange(false, "select");
+      onChange(date2);
+    },
+    [handleOpenChange, onChange]
+  );
+  const handleVisibleMonthChange = useCallback36(
+    (e, date2) => {
+      setVisibleMonth(date2);
+    },
+    [setVisibleMonth]
+  );
+  return {
+    calendarRef,
+    date,
+    handleOpenChange,
+    isOpen,
+    onSelectedDateChange: handleDateSelection,
+    onVisibleMonthChange: handleVisibleMonthChange,
+    triggererRef,
+    visibleMonth: visibleMonthRef.current
+  };
+};
+
+// src/date-popup/DatePopup.tsx
+import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
+var classBase12 = "vuuDatePopup";
+var tz = $14e0f24ef4ac5c92$export$aa8b41735afcabd2();
+var today = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3(tz);
+var DatePopup = forwardRef18(
+  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__ */ jsxs11(
+      DropdownBase,
+      {
+        ...htmlAttributes,
+        className: classBase12,
+        isOpen,
+        placement: "below",
+        onOpenChange: handleOpenChange,
+        children: [
+          /* @__PURE__ */ jsx27(
+            IconButton,
+            {
+              "data-embedded": dataEmbedded,
+              icon: "date",
+              ref: useForkRef8(forwardedRef, triggererRef),
+              variant: "secondary",
+              className: cx14({ "saltButton-active": isOpen })
+            }
+          ),
+          /* @__PURE__ */ jsx27(
+            Calendar,
+            {
+              visibleMonth,
+              ref: calendarRef,
+              selectedDate: date,
+              selectionVariant: "default",
+              onSelectedDateChange,
+              onVisibleMonthChange,
+              className: `${classBase12}-calendar`
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+// src/date-input/useDatePicker.ts
+import { useCallback as useCallback37 } from "react";
+function useDatePicker({ onBlur }) {
+  const handleOnBlur = useCallback37(
+    (e) => {
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        onBlur == null ? void 0 : onBlur();
+      }
+    },
+    [onBlur]
+  );
+  return {
+    handleOnBlur
+  };
+}
+
+// src/date-input/DateInput.tsx
+import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
+var classBase13 = "vuuDateInput";
+var DateInput = ({
+  selectedDate,
+  onChange,
+  onBlur,
+  className,
+  ...htmlAttributes
+}) => {
+  var _a2;
+  const { handleOnBlur } = useDatePicker({ onBlur });
+  const popupRef = useRef32(null);
+  const onInputChange = useCallback38(
+    (e) => {
+      const v = e.target.value;
+      if (v === "")
+        return;
+      else
+        onChange(toCalendarDate(new Date(v)));
+    },
+    [onChange]
+  );
+  const onKeyDown = useCallback38((e) => {
+    if (e.key === "Tab" && !e.shiftKey) {
+      console.log({ button: popupRef.current });
+      requestAnimationFrame(() => {
+        var _a3;
+        (_a3 = popupRef.current) == null ? void 0 : _a3.focus();
+      });
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      ...htmlAttributes,
+      className: clsx7(classBase13, className),
+      onBlur: handleOnBlur,
+      children: [
+        /* @__PURE__ */ jsx28(
+          "input",
+          {
+            "aria-label": "date-input",
+            className: clsx7("saltInput-input", classBase13, className),
+            type: "date",
+            value: (_a2 = selectedDate == null ? void 0 : selectedDate.toString()) != null ? _a2 : "",
+            onChange: onInputChange,
+            onKeyDown,
+            max: "9999-12-31"
+          }
+        ),
+        /* @__PURE__ */ jsx28(
+          DatePopup,
+          {
+            "data-embedded": true,
+            onBlur,
+            onChange,
+            ref: popupRef,
+            selectedDate,
+            selectionVariant: "default"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/date-input/DateRangeInput.tsx
+import { toCalendarDate as toCalendarDate2 } from "@vuu-ui/vuu-utils";
+import cx15 from "clsx";
+import { useCallback as useCallback39 } from "react";
+import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
+var classBase14 = "vuuDateInput";
+var DateRangeInput = ({
+  selectedDateRange,
+  onChange,
+  className,
+  onBlur
+}) => {
+  var _a2, _b, _c, _d;
+  const { handleOnBlur } = useDatePicker({ onBlur });
+  const getHandleInputChange = useCallback39(
+    (k) => (e) => {
+      const v = e.target.value;
+      onChange({ ...selectedDateRange, [k]: toCalendarDate2(new Date(v)) });
+    },
+    [selectedDateRange, onChange]
+  );
+  const handleDateInputChange = useCallback39(
+    (dateRange) => {
+      console.log("date range change", {
+        dateRange
+      });
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      className: cx15("saltInput saltInput-primary", classBase14, className),
+      onBlur: handleOnBlur,
+      children: [
+        /* @__PURE__ */ jsx29(
+          "input",
+          {
+            className: cx15("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__ */ jsx29("span", { children: "\u2014" }),
+        /* @__PURE__ */ jsx29(
+          "input",
+          {
+            className: cx15("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__ */ jsx29(
+          DatePopup,
+          {
+            onBlur,
+            onChange: handleDateInputChange,
+            selectedDate: selectedDateRange == null ? void 0 : selectedDateRange["startDate"],
+            selectionVariant: "range"
+          }
+        )
+      ]
+    }
+  );
+};
+
 // src/date-picker/DatePicker.tsx
-import { useCallback as useCallback39, useMemo as useMemo14 } from "react";
-import { clsx as clsx9 } from "clsx";
+import { useCallback as useCallback43, useMemo as useMemo15 } from "react";
+import { clsx as clsx10 } from "clsx";
 
 // src/date-picker/input/DatePickerInput.tsx
-import { useCallback as useCallback36 } from "react";
-import { toCalendarDate } from "@vuu-ui/vuu-utils";
-import { clsx as clsx7 } from "clsx";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { useCallback as useCallback40 } from "react";
+import { toCalendarDate as toCalendarDate3 } from "@vuu-ui/vuu-utils";
+import { clsx as clsx8 } from "clsx";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var baseClass2 = "vuuDatePickerInput";
 var DatePickerInput = (props) => {
   var _a2;
   const { value, onChange, className } = props;
-  const onInputChange = useCallback36(
+  const onInputChange = useCallback40(
     (e) => {
       const v = e.target.value;
       if (v === "")
         return;
       else
-        onChange(toCalendarDate(new Date(v)));
+        onChange(toCalendarDate3(new Date(v)));
     },
     [onChange]
   );
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx30(
     "input",
     {
-      className: clsx7("saltInput-input", baseClass2, className),
+      className: clsx8("saltInput-input", baseClass2, className),
       type: "date",
       value: (_a2 = value == null ? void 0 : value.toString()) != null ? _a2 : "",
       onChange: onInputChange,
@@ -9421,33 +9801,33 @@ var DatePickerInput = (props) => {
 // src/date-picker/internal/CalendarIconButton.tsx
 import { Button as Button4 } from "@salt-ds/core";
 import { CalendarIcon } from "@salt-ds/icons";
-import { forwardRef as forwardRef17 } from "react";
-import clsx8 from "clsx";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { forwardRef as forwardRef19 } from "react";
+import clsx9 from "clsx";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var baseClass3 = "vuuDatePicker-calendarIconButton";
-var CalendarIconButton = forwardRef17(function CalendarIconButton2({ className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx26(
+var CalendarIconButton = forwardRef19(function CalendarIconButton2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx31(
     Button4,
     {
-      className: clsx8(baseClass3, className),
+      className: clsx9(baseClass3, className),
       variant: "secondary",
       "aria-label": "calendar-icon-button",
       ref,
       ...rest,
-      children: /* @__PURE__ */ jsx26(CalendarIcon, {})
+      children: /* @__PURE__ */ jsx31(CalendarIcon, {})
     }
   );
 });
 
 // src/date-picker/useBaseDatePicker.ts
-import { useCallback as useCallback37, useState as useState17 } from "react";
+import { useCallback as useCallback41, useState as useState18 } from "react";
 function useBaseDatePicker(props) {
   var _a2;
   const { onBlur } = props;
-  const [visibleMonth, setVisibleMonth] = useState17(
+  const [visibleMonth, setVisibleMonth] = useState18(
     props.variant === "default" ? props.selectedDate : (_a2 = props.selectedDate) == null ? void 0 : _a2.startDate
   );
-  const handleOnBlur = useCallback37(
+  const handleOnBlur = useCallback41(
     (e) => {
       if (!e.currentTarget.contains(e.relatedTarget)) {
         onBlur == null ? void 0 : onBlur();
@@ -9463,15 +9843,15 @@ function useBaseDatePicker(props) {
 }
 
 // src/date-picker/useBaseDatePickerDropdown.ts
-import { useCallback as useCallback38, useRef as useRef31, useState as useState18 } from "react";
+import { useCallback as useCallback42, useRef as useRef33, useState as useState19 } from "react";
 function useBaseDatePickerDropdown({
   onVisibleMonthChange,
   onSelectedDateChange,
   shouldCloseOnSelectionChange
 }) {
-  const [isOpen, setIsOpen] = useState18(false);
-  const triggererRef = useRef31(null);
-  const handleDateSelection = useCallback38(
+  const [isOpen, setIsOpen] = useState19(false);
+  const triggererRef = useRef33(null);
+  const handleDateSelection = useCallback42(
     (_, d) => {
       var _a2;
       onSelectedDateChange(d);
@@ -9481,7 +9861,7 @@ function useBaseDatePickerDropdown({
     },
     [onSelectedDateChange, shouldCloseOnSelectionChange]
   );
-  const handleVisibleMonthChange = useCallback38(
+  const handleVisibleMonthChange = useCallback42(
     (_, d) => {
       var _a2;
       onVisibleMonthChange(d);
@@ -9499,26 +9879,26 @@ function useBaseDatePickerDropdown({
 }
 
 // src/date-picker/DatePicker.tsx
-import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs14 } from "react/jsx-runtime";
 var baseClass4 = "vuuDatePicker";
 var DatePicker = (props) => {
   const { selectedDate, onSelectedDateChange, onBlur, className } = props;
   const { visibleMonth, handleVisibleMonthChange, handleOnBlur } = useBaseDatePicker({ variant: "default", selectedDate, onBlur });
-  const handleInputChange = useCallback39(
+  const handleInputChange = useCallback43(
     (d) => {
       onSelectedDateChange(d);
       handleVisibleMonthChange(d);
     },
     [onSelectedDateChange, handleVisibleMonthChange]
   );
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
-      className: clsx9("saltInput saltInput-primary", baseClass4, className),
+      className: clsx10("saltInput saltInput-primary", baseClass4, className),
       onBlur: handleOnBlur,
       children: [
-        /* @__PURE__ */ jsx27(DatePickerInput, { value: selectedDate, onChange: handleInputChange }),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx32(DatePickerInput, { value: selectedDate, onChange: handleInputChange }),
+        /* @__PURE__ */ jsx32(
           DatePickerDropdown,
           {
             visibleMonth,
@@ -9538,7 +9918,7 @@ var DatePickerDropdown = (props) => {
     className,
     ...rest
   } = props;
-  const shouldCloseOnSelectionChange = useCallback39(
+  const shouldCloseOnSelectionChange = useCallback43(
     () => !!closeOnSelection,
     [closeOnSelection]
   );
@@ -9553,8 +9933,8 @@ var DatePickerDropdown = (props) => {
     onSelectedDateChange,
     shouldCloseOnSelectionChange
   });
-  const defaultSelectedDate = useMemo14(() => $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()), []);
-  return /* @__PURE__ */ jsxs11(
+  const defaultSelectedDate = useMemo15(() => $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()), []);
+  return /* @__PURE__ */ jsxs14(
     DropdownBase,
     {
       placement: "below",
@@ -9562,8 +9942,8 @@ var DatePickerDropdown = (props) => {
       onOpenChange: handleOpenChange,
       className,
       children: [
-        /* @__PURE__ */ jsx27(CalendarIconButton, { ref: triggererRef }),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx32(CalendarIconButton, { ref: triggererRef }),
+        /* @__PURE__ */ jsx32(
           Calendar,
           {
             selectionVariant: "default",
@@ -9580,32 +9960,32 @@ var DatePickerDropdown = (props) => {
 };
 
 // src/date-picker/DateRangePicker.tsx
-import { useCallback as useCallback41, useMemo as useMemo15 } from "react";
-import { clsx as clsx11 } from "clsx";
+import { useCallback as useCallback45, useMemo as useMemo16 } from "react";
+import { clsx as clsx12 } from "clsx";
 
 // src/date-picker/input/DateRangePickerInput.tsx
-import { useCallback as useCallback40 } from "react";
-import { clsx as clsx10 } from "clsx";
-import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useCallback as useCallback44 } from "react";
+import { clsx as clsx11 } from "clsx";
+import { jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
 var baseClass5 = "vuuDateRangePickerInput";
 var DateRangePickerInput = (props) => {
   const { value, onChange, className } = props;
-  const getHandleInputChange = useCallback40(
+  const getHandleInputChange = useCallback44(
     (k) => (d) => {
       onChange({ ...value, [k]: d });
     },
     [value, onChange]
   );
-  return /* @__PURE__ */ jsxs12("div", { className: clsx10(baseClass5, className), children: [
-    /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs15("div", { className: clsx11(baseClass5, className), children: [
+    /* @__PURE__ */ jsx33(
       DatePickerInput,
       {
         value: value == null ? void 0 : value["startDate"],
         onChange: getHandleInputChange("startDate")
       }
     ),
-    /* @__PURE__ */ jsx28("span", { children: "\u2014" }),
-    /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsx33("span", { children: "\u2014" }),
+    /* @__PURE__ */ jsx33(
       DatePickerInput,
       {
         value: value == null ? void 0 : value["endDate"],
@@ -9616,12 +9996,12 @@ var DateRangePickerInput = (props) => {
 };
 
 // src/date-picker/DateRangePicker.tsx
-import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs16 } from "react/jsx-runtime";
 var baseClass6 = "vuuDatePicker";
 var DateRangePicker = (props) => {
   const { selectedDate, onSelectedDateChange, className, onBlur } = props;
   const { visibleMonth, handleVisibleMonthChange, handleOnBlur } = useBaseDatePicker({ variant: "range", selectedDate, onBlur });
-  const handleInputChange = useCallback41(
+  const handleInputChange = useCallback45(
     (r) => {
       var _a2;
       onSelectedDateChange(r);
@@ -9629,14 +10009,14 @@ var DateRangePicker = (props) => {
     },
     [onSelectedDateChange, handleVisibleMonthChange]
   );
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
-      className: clsx11("saltInput saltInput-primary", baseClass6, className),
+      className: clsx12("saltInput saltInput-primary", baseClass6, className),
       onBlur: handleOnBlur,
       children: [
-        /* @__PURE__ */ jsx29(DateRangePickerInput, { value: selectedDate, onChange: handleInputChange }),
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx34(DateRangePickerInput, { value: selectedDate, onChange: handleInputChange }),
+        /* @__PURE__ */ jsx34(
           DateRangePickerDropdown,
           {
             ...props,
@@ -9656,7 +10036,7 @@ var DateRangePickerDropdown = (props) => {
     className,
     ...rest
   } = props;
-  const shouldCloseOnSelectionChange = useCallback41(
+  const shouldCloseOnSelectionChange = useCallback45(
     (r) => !!(closeOnSelection && r.endDate),
     [closeOnSelection]
   );
@@ -9671,11 +10051,11 @@ var DateRangePickerDropdown = (props) => {
     onSelectedDateChange,
     shouldCloseOnSelectionChange
   });
-  const defaultSelectedDate = useMemo15(
+  const defaultSelectedDate = useMemo16(
     () => ({ startDate: $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()) }),
     []
   );
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs16(
     DropdownBase,
     {
       placement: "below",
@@ -9683,8 +10063,8 @@ var DateRangePickerDropdown = (props) => {
       className,
       onOpenChange: handleOpenChange,
       children: [
-        /* @__PURE__ */ jsx29(CalendarIconButton, { ref: triggererRef }),
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx34(CalendarIconButton, { ref: triggererRef }),
+        /* @__PURE__ */ jsx34(
           Calendar,
           {
             selectionVariant: "range",
@@ -9737,9 +10117,9 @@ function applyRules(rules, value) {
 import { useLayoutEffectSkipFirst as useLayoutEffectSkipFirst4 } from "@vuu-ui/vuu-utils";
 import { dispatchCustomEvent as dispatchCustomEvent3 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback42,
-  useRef as useRef32,
-  useState as useState19
+  useCallback as useCallback46,
+  useRef as useRef34,
+  useState as useState20
 } from "react";
 var WarnCommit = () => {
   console.warn(
@@ -9753,15 +10133,15 @@ var useEditableText = ({
   onCommit,
   type
 }) => {
-  const [message, setMessage] = useState19();
-  const [value, setValue] = useState19(initialValue);
-  const initialValueRef = useRef32(initialValue);
-  const isDirtyRef = useRef32(false);
-  const hasCommittedRef = useRef32(false);
+  const [message, setMessage] = useState20();
+  const [value, setValue] = useState20(initialValue);
+  const initialValueRef = useRef34(initialValue);
+  const isDirtyRef = useRef34(false);
+  const hasCommittedRef = useRef34(false);
   useLayoutEffectSkipFirst4(() => {
     setValue(initialValue);
   }, [initialValue]);
-  const commit = useCallback42(
+  const commit = useCallback46(
     (target) => {
       if (isDirtyRef.current) {
         hasCommittedRef.current = true;
@@ -9787,7 +10167,7 @@ var useEditableText = ({
     },
     [clientSideEditValidationCheck, onCommit, value]
   );
-  const handleKeyDown = useCallback42(
+  const handleKeyDown = useCallback46(
     (evt) => {
       if (evt.key === "Enter") {
         commit(evt.target);
@@ -9803,7 +10183,7 @@ var useEditableText = ({
     },
     [commit]
   );
-  const handleBlur = useCallback42(
+  const handleBlur = useCallback46(
     (evt) => {
       if (isDirtyRef.current) {
         commit(evt.target);
@@ -9811,7 +10191,7 @@ var useEditableText = ({
     },
     [commit]
   );
-  const handleChange = useCallback42(
+  const handleChange = useCallback46(
     (evt) => {
       let typedValue = evt.target.value;
       if (type === "number" && !isNaN(parseFloat(typedValue))) {
@@ -9840,17 +10220,17 @@ var useEditableText = ({
 };
 
 // src/editable-label/EditableLabel.tsx
-import cx12 from "clsx";
+import cx16 from "clsx";
 import {
-  useCallback as useCallback43,
+  useCallback as useCallback47,
   useLayoutEffect as useLayoutEffect3,
-  forwardRef as forwardRef18,
-  useRef as useRef33
+  forwardRef as forwardRef20,
+  useRef as useRef35
 } from "react";
 import { Input as Input2, useControlled as useControlled8 } from "@salt-ds/core";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var classBase10 = "vuuEditableLabel";
-var EditableLabel = forwardRef18(function EditableLabel2({
+import { jsx as jsx35 } from "react/jsx-runtime";
+var classBase15 = "vuuEditableLabel";
+var EditableLabel = forwardRef20(function EditableLabel2({
   className: classNameProp,
   defaultEditing,
   defaultValue,
@@ -9861,8 +10241,8 @@ var EditableLabel = forwardRef18(function EditableLabel2({
   value: valueProp,
   ...restProps
 }, forwardedRef) {
-  const inputRef = useRef33(null);
-  const editingRef = useRef33(false);
+  const inputRef = useRef35(null);
+  const editingRef = useRef35(false);
   const [value, setValue] = useControlled8({
     controlled: valueProp,
     default: defaultValue != null ? defaultValue : "",
@@ -9875,13 +10255,13 @@ var EditableLabel = forwardRef18(function EditableLabel2({
     name: "EditableLabel",
     state: "editing"
   });
-  const setEditing = useCallback43(
+  const setEditing = useCallback47(
     (value2) => {
       _setEditing(editingRef.current = value2);
     },
     [_setEditing]
   );
-  const initialValue = useRef33(value);
+  const initialValue = useRef35(value);
   useLayoutEffect3(() => {
     if (editing) {
       if (inputRef.current !== null) {
@@ -9890,7 +10270,7 @@ var EditableLabel = forwardRef18(function EditableLabel2({
       }
     }
   }, [editing, inputRef]);
-  const enterEditMode = useCallback43(() => {
+  const enterEditMode = useCallback47(() => {
     setEditing(true);
     onEnterEditMode && onEnterEditMode();
   }, [onEnterEditMode, setEditing]);
@@ -9932,10 +10312,10 @@ var EditableLabel = forwardRef18(function EditableLabel2({
       exitEditMode({ cancelEdit: true });
     }
   };
-  const className = cx12(classBase10, classNameProp, {
-    [`${classBase10}-editing`]: editing
+  const className = cx16(classBase15, classNameProp, {
+    [`${classBase15}-editing`]: editing
   });
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       ...restProps,
@@ -9943,10 +10323,10 @@ var EditableLabel = forwardRef18(function EditableLabel2({
       onDoubleClick: handleDoubleClick,
       "data-text": value,
       ref: forwardedRef,
-      children: editing ? /* @__PURE__ */ jsx30(
+      children: editing ? /* @__PURE__ */ jsx35(
         Input2,
         {
-          inputProps: { className: `${classBase10}-input`, spellCheck: false },
+          inputProps: { className: `${classBase15}-input`, spellCheck: false },
           value,
           onBlur: handleBlur,
           onChange: handleChange,
@@ -9956,30 +10336,30 @@ var EditableLabel = forwardRef18(function EditableLabel2({
           textAlign: "left",
           variant: "secondary"
         }
-      ) : /* @__PURE__ */ jsx30("span", { className: `${classBase10}-label`, children: value })
+      ) : /* @__PURE__ */ jsx35("span", { className: `${classBase15}-label`, children: value })
     }
   );
 });
 
 // src/expando-input/ExpandoInput.tsx
-import cx14 from "clsx";
-import { forwardRef as forwardRef20 } from "react";
+import cx18 from "clsx";
+import { forwardRef as forwardRef22 } from "react";
 
 // src/vuu-input/VuuInput.tsx
 import { Tooltip as Tooltip3, useTooltip } from "@vuu-ui/vuu-popups";
 import { isValidNumber as isValidNumber4, useId as useId7 } from "@vuu-ui/vuu-utils";
 import { Input as Input3 } from "@salt-ds/core";
-import cx13 from "clsx";
+import cx17 from "clsx";
 import {
-  forwardRef as forwardRef19,
-  useCallback as useCallback44
+  forwardRef as forwardRef21,
+  useCallback as useCallback48
 } from "react";
-import { Fragment as Fragment3, jsx as jsx31, jsxs as jsxs14 } from "react/jsx-runtime";
-var classBase11 = "vuuInput";
+import { Fragment as Fragment3, jsx as jsx36, jsxs as jsxs17 } from "react/jsx-runtime";
+var classBase16 = "vuuInput";
 var constantInputProps = {
   autoComplete: "off"
 };
-var VuuInput = forwardRef19(function VuuInput2({
+var VuuInput = forwardRef21(function VuuInput2({
   className,
   errorMessage,
   id: idProp,
@@ -9993,7 +10373,7 @@ var VuuInput = forwardRef19(function VuuInput2({
     id,
     tooltipContent: errorMessage
   });
-  const commitValue = useCallback44(
+  const commitValue = useCallback48(
     (evt, value) => {
       if (type === "number") {
         const numericValue = parseFloat(value);
@@ -10010,7 +10390,7 @@ var VuuInput = forwardRef19(function VuuInput2({
     },
     [onCommit, type]
   );
-  const handleKeyDown = useCallback44(
+  const handleKeyDown = useCallback48(
     (evt) => {
       if (evt.key === "Enter") {
         evt.preventDefault();
@@ -10022,23 +10402,23 @@ var VuuInput = forwardRef19(function VuuInput2({
     },
     [commitValue, onKeyDown]
   );
-  const handleBlur = useCallback44(
+  const handleBlur = useCallback48(
     (evt) => {
       const { value } = evt.target;
       commitValue(evt, value);
     },
     [commitValue]
   );
-  const endAdornment = errorMessage ? /* @__PURE__ */ jsx31(
+  const endAdornment = errorMessage ? /* @__PURE__ */ jsx36(
     "span",
     {
       ...anchorProps,
-      className: `${classBase11}-errorIcon`,
+      className: `${classBase16}-errorIcon`,
       "data-icon": "error"
     }
   ) : void 0;
-  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
-    /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs17(Fragment3, { children: [
+    /* @__PURE__ */ jsx36(
       Input3,
       {
         ...props,
@@ -10048,23 +10428,23 @@ var VuuInput = forwardRef19(function VuuInput2({
           ...constantInputProps,
           ...props.inputProps
         },
-        className: cx13(classBase11, className, {
-          [`${classBase11}-errror`]: errorMessage
+        className: cx17(classBase16, className, {
+          [`${classBase16}-errror`]: errorMessage
         }),
         onBlur: handleBlur,
         ref: forwardedRef,
         onKeyDown: handleKeyDown
       }
     ),
-    tooltipProps ? /* @__PURE__ */ jsx31(Tooltip3, { ...tooltipProps, status: "error" }) : null
+    tooltipProps ? /* @__PURE__ */ jsx36(Tooltip3, { ...tooltipProps, status: "error" }) : null
   ] });
 });
 
 // src/expando-input/ExpandoInput.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
-var classBase12 = "vuuExpandoInput";
+import { jsx as jsx37 } from "react/jsx-runtime";
+var classBase17 = "vuuExpandoInput";
 var noop = () => void 0;
-var ExpandoInput = forwardRef20(function ExpandoInput2({
+var ExpandoInput = forwardRef22(function ExpandoInput2({
   className: classNameProp,
   errorMessage,
   value,
@@ -10072,19 +10452,19 @@ var ExpandoInput = forwardRef20(function ExpandoInput2({
   onCommit = noop,
   ...props
 }, forwardedRef) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx37(
     "div",
     {
-      className: cx14(classBase12, classNameProp, {
-        [`${classBase12}-error`]: errorMessage
+      className: cx18(classBase17, classNameProp, {
+        [`${classBase17}-error`]: errorMessage
       }),
       "data-text": value,
-      children: /* @__PURE__ */ jsx32(
+      children: /* @__PURE__ */ jsx37(
         VuuInput,
         {
           ...props,
           errorMessage,
-          inputProps: { ...inputProps, className: `${classBase12}-input` },
+          inputProps: { ...inputProps, className: `${classBase17}-input` },
           onCommit,
           ref: forwardedRef,
           style: { padding: 0 },
@@ -10097,53 +10477,18 @@ var ExpandoInput = forwardRef20(function ExpandoInput2({
   );
 });
 
-// src/icon-button/Icon.tsx
-import cx15 from "clsx";
-import { jsx as jsx33 } from "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__ */ jsx33(
-    "span",
-    {
-      ...htmlAttributes,
-      className: cx15(classBase13, className),
-      "data-icon": name,
-      style
-    }
-  );
-};
-
-// src/icon-button/IconButton.tsx
-import cx16 from "clsx";
-import { Button as Button5 } from "@salt-ds/core";
-import { forwardRef as forwardRef21 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
-var classBase14 = "vuuIconButton";
-var IconButton = forwardRef21(
-  function IconButton2({ className, icon, ...buttonProps }, ref) {
-    return /* @__PURE__ */ jsx34(Button5, { ...buttonProps, className: cx16(classBase14, className), ref, children: /* @__PURE__ */ jsx34(Icon, { name: icon }) });
-  }
-);
-
 // src/inputs/Checkbox.tsx
-import { jsx as jsx35, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs18 } from "react/jsx-runtime";
 var Checkbox = (props) => {
   const { onToggle, checked, label } = props;
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       className: "vuuCheckbox",
       onClick: onToggle,
       onKeyUp: (e) => e.key === " " && onToggle(),
       children: [
-        /* @__PURE__ */ jsx35(CheckboxIcon, { tabIndex: 0, checked }),
+        /* @__PURE__ */ jsx38(CheckboxIcon, { tabIndex: 0, checked }),
         label
       ]
     }
@@ -10151,13 +10496,13 @@ var Checkbox = (props) => {
 };
 
 // src/inputs/RadioButton.tsx
-import { jsx as jsx36, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
 var RadioButton = (props) => {
   const { onClick, checked, label, groupName } = props;
-  return /* @__PURE__ */ jsxs16("div", { className: "vuuRadioButton", onClick, children: [
-    /* @__PURE__ */ jsxs16("div", { className: "radio", children: [
-      /* @__PURE__ */ jsx36("input", { type: "radio", name: groupName }),
-      /* @__PURE__ */ jsx36(RadioIcon, { checked })
+  return /* @__PURE__ */ jsxs19("div", { className: "vuuRadioButton", onClick, children: [
+    /* @__PURE__ */ jsxs19("div", { className: "radio", children: [
+      /* @__PURE__ */ jsx39("input", { type: "radio", name: groupName }),
+      /* @__PURE__ */ jsx39(RadioIcon, { checked })
     ] }),
     label
   ] });
@@ -10167,12 +10512,12 @@ var RadioButton = (props) => {
 import { Table } from "@vuu-ui/vuu-table";
 import { useId as useId8 } from "@vuu-ui/vuu-utils";
 import { Input as Input4 } from "@salt-ds/core";
-import { forwardRef as forwardRef22, useMemo as useMemo17 } from "react";
+import { forwardRef as forwardRef23, useMemo as useMemo18 } from "react";
 
 // src/instrument-picker/SearchCell.tsx
 import { registerComponent } from "@vuu-ui/vuu-utils";
-import { jsx as jsx37, jsxs as jsxs17 } from "react/jsx-runtime";
-var classBase15 = "vuuSearchCell";
+import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
+var classBase18 = "vuuSearchCell";
 var SearchCell = ({
   column,
   columnMap,
@@ -10180,8 +10525,8 @@ var SearchCell = ({
 }) => {
   const key = columnMap[column.name];
   const value = row[key];
-  return /* @__PURE__ */ jsxs17("div", { className: classBase15, tabIndex: -1, children: [
-    /* @__PURE__ */ jsx37("span", { "data-icon": "draggable" }),
+  return /* @__PURE__ */ jsxs20("div", { className: classBase18, tabIndex: -1, children: [
+    /* @__PURE__ */ jsx40("span", { "data-icon": "draggable" }),
     value
   ] });
 };
@@ -10190,44 +10535,38 @@ registerComponent("search-cell", SearchCell, "cell-renderer", {
 });
 
 // src/instrument-picker/useInstrumentPicker.ts
-import {
-  useControlledTableNavigation
-} from "@vuu-ui/vuu-table";
-import { useCallback as useCallback45, useMemo as useMemo16, useState as useState20 } from "react";
-var defaultItemToString = (columns, columnMap) => (row) => {
-  return columns.map(({ name }) => row[columnMap[name]]).join(" ");
-};
+import { useControlledTableNavigation } from "@vuu-ui/vuu-table";
+import { useCallback as useCallback49, useMemo as useMemo17, useState as useState21 } from "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] = useState20("");
+  const [value, setValue] = useState21("");
   const [isOpen, setIsOpen] = useControlled({
     controlled: isOpenProp,
     default: defaultIsOpen != null ? defaultIsOpen : false,
     name: "useDropdownList"
   });
   const { highlightedIndexRef, onKeyDown, tableRef } = useControlledTableNavigation(-1, dataSource.size);
-  const baseFilterPattern = useMemo16(
+  const baseFilterPattern = useMemo17(
     // TODO make this contains once server supports it
     () => searchColumns.map((col) => `${col} starts "__VALUE__"`).join(" or "),
     [searchColumns]
   );
-  const handleOpenChange = useCallback45(
+  const handleOpenChange = useCallback49(
     (open, closeReason) => {
       setIsOpen(open);
       onOpenChange == null ? void 0 : onOpenChange(open, closeReason);
     },
     [onOpenChange, setIsOpen]
   );
-  const handleInputChange = useCallback45(
+  const handleInputChange = useCallback49(
     (evt) => {
       const { value: value2 } = evt.target;
       setValue(value2);
@@ -10245,11 +10584,11 @@ var useInstrumentPicker = ({
     },
     [baseFilterPattern, dataSource, setIsOpen]
   );
-  const handleSelectRow = useCallback45(
+  const handleSelectRow = useCallback49(
     (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]
@@ -10276,12 +10615,12 @@ var useInstrumentPicker = ({
 };
 
 // src/instrument-picker/InstrumentPicker.tsx
-import { jsx as jsx38, jsxs as jsxs18 } from "react/jsx-runtime";
-var classBase16 = "vuuInstrumentPicker";
+import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
+var classBase19 = "vuuInstrumentPicker";
 if (typeof SearchCell !== "function") {
   console.warn("Instrument Picker: SearchCell module not loaded ");
 }
-var InstrumentPicker = forwardRef22(function InstrumentPicker2({
+var InstrumentPicker = forwardRef23(function InstrumentPicker2({
   TableProps: { dataSource, ...TableProps3 },
   className,
   columnMap,
@@ -10313,7 +10652,7 @@ var InstrumentPicker = forwardRef22(function InstrumentPicker2({
     onSelect,
     searchColumns
   });
-  const endAdornment = useMemo17(() => /* @__PURE__ */ jsx38("span", { "data-icon": "chevron-down" }), []);
+  const endAdornment = useMemo18(() => /* @__PURE__ */ jsx41("span", { "data-icon": "chevron-down" }), []);
   const tableProps = {
     ...TableProps3,
     config: {
@@ -10321,7 +10660,7 @@ var InstrumentPicker = forwardRef22(function InstrumentPicker2({
       zebraStripes: false
     }
   };
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs21(
     DropdownBase,
     {
       ...htmlAttributes,
@@ -10334,7 +10673,7 @@ var InstrumentPicker = forwardRef22(function InstrumentPicker2({
       ref: forwardedRef,
       width,
       children: [
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx41(
           Input4,
           {
             ...inputProps,
@@ -10343,14 +10682,14 @@ var InstrumentPicker = forwardRef22(function InstrumentPicker2({
             value
           }
         ),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx41(
           Table,
           {
             rowHeight: 25,
             renderBufferSize: 100,
             ...tableProps,
             ...tableHandlers,
-            className: `${classBase16}-list`,
+            className: `${classBase19}-list`,
             height: 200,
             highlightedIndex,
             dataSource,
@@ -10371,13 +10710,13 @@ import {
   useControlledTableNavigation as useControlledTableNavigation2
 } from "@vuu-ui/vuu-table";
 import { Input as Input5 } from "@salt-ds/core";
-import cx17 from "clsx";
-import { useCallback as useCallback47 } from "react";
+import cx19 from "clsx";
+import { useCallback as useCallback51 } from "react";
 
 // src/instrument-search/SearchCell.tsx
 import { registerComponent as registerComponent2 } from "@vuu-ui/vuu-utils";
-import { jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
-var classBase17 = "vuuSearchCell";
+import { jsx as jsx42, jsxs as jsxs22 } from "react/jsx-runtime";
+var classBase20 = "vuuSearchCell";
 var SearchCell2 = ({
   column,
   columnMap,
@@ -10385,8 +10724,8 @@ var SearchCell2 = ({
 }) => {
   const key = columnMap[column.name];
   const value = row[key];
-  return /* @__PURE__ */ jsxs19("div", { className: classBase17, tabIndex: -1, children: [
-    /* @__PURE__ */ jsx39("span", { "data-icon": "draggable" }),
+  return /* @__PURE__ */ jsxs22("div", { className: classBase20, tabIndex: -1, children: [
+    /* @__PURE__ */ jsx42("span", { "data-icon": "draggable" }),
     value
   ] });
 };
@@ -10395,18 +10734,18 @@ registerComponent2("search-cell", SearchCell2, "cell-renderer", {
 });
 
 // src/instrument-search/useInstrumentSearch.ts
-import { useCallback as useCallback46, useMemo as useMemo18, useState as useState21 } from "react";
+import { useCallback as useCallback50, useMemo as useMemo19, useState as useState22 } from "react";
 var useInstrumentSearch = ({
   dataSource,
   searchColumns = ["description"]
 }) => {
-  const [searchState, setSearchState] = useState21({ searchText: "", filter: "" });
-  const baseFilterPattern = useMemo18(
+  const [searchState, setSearchState] = useState22({ searchText: "", filter: "" });
+  const baseFilterPattern = useMemo19(
     // TODO make this contains once server supports it
     () => searchColumns.map((col) => `${col} starts "__VALUE__"`).join(" or "),
     [searchColumns]
   );
-  const handleChange = useCallback46(
+  const handleChange = useCallback50(
     (evt) => {
       const { value } = evt.target;
       const filter = baseFilterPattern.replaceAll("__VALUE__", value);
@@ -10430,8 +10769,8 @@ var useInstrumentSearch = ({
 };
 
 // src/instrument-search/InstrumentSearch.tsx
-import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
-var classBase18 = "vuuInstrumentSearch";
+import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
+var classBase21 = "vuuInstrumentSearch";
 if (typeof SearchCell2 !== "function") {
   console.warn("Instrument Search: SearchCell module not loaded ");
 }
@@ -10451,7 +10790,7 @@ var defaultTableConfig = {
   ],
   rowSeparators: true
 };
-var searchIcon = /* @__PURE__ */ jsx40("span", { "data-icon": "search" });
+var searchIcon = /* @__PURE__ */ jsx43("span", { "data-icon": "search" });
 var InstrumentSearch = ({
   TableProps: TableProps3,
   autoFocus = false,
@@ -10467,14 +10806,14 @@ var InstrumentSearch = ({
     searchColumns
   });
   const { highlightedIndexRef, onHighlight, onKeyDown, tableRef } = useControlledTableNavigation2(-1, (_a2 = dataSource == null ? void 0 : dataSource.size) != null ? _a2 : 0);
-  const searchCallbackRef = useCallback47((el) => {
+  const searchCallbackRef = useCallback51((el) => {
     setTimeout(() => {
       var _a3;
       (_a3 = el == null ? void 0 : el.querySelector("input")) == null ? void 0 : _a3.focus();
     }, 100);
   }, []);
-  return /* @__PURE__ */ jsxs20("div", { ...htmlAttributes, className: cx17(classBase18, className), children: [
-    /* @__PURE__ */ jsx40("div", { className: `${classBase18}-inputField`, children: /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsxs23("div", { ...htmlAttributes, className: cx19(classBase21, className), children: [
+    /* @__PURE__ */ jsx43("div", { className: `${classBase21}-inputField`, children: /* @__PURE__ */ jsx43(
       Input5,
       {
         inputProps: { onKeyDown },
@@ -10485,7 +10824,7 @@ var InstrumentSearch = ({
         onChange
       }
     ) }),
-    dataSource ? /* @__PURE__ */ jsx40(
+    dataSource ? /* @__PURE__ */ jsx43(
       Table2,
       {
         disableFocus: true,
@@ -10495,7 +10834,7 @@ var InstrumentSearch = ({
         highlightedIndex: highlightedIndexRef.current,
         renderBufferSize: 100,
         ...TableProps3,
-        className: `${classBase18}-list`,
+        className: `${classBase21}-list`,
         dataSource,
         navigationStyle: "row",
         onHighlight,
@@ -10514,10 +10853,10 @@ import {
   isValidNumber as isValidNumber5,
   numericFormatter
 } from "@vuu-ui/vuu-utils";
-import { memo, useMemo as useMemo19, useRef as useRef34 } from "react";
-import cx18 from "clsx";
-import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
-var classBase19 = "vuuPriceTicker";
+import { memo, useMemo as useMemo20, useRef as useRef36 } from "react";
+import cx20 from "clsx";
+import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
+var classBase22 = "vuuPriceTicker";
 var getValueFormatter = (decimals) => numericFormatter({
   type: {
     name: "number",
@@ -10536,14 +10875,14 @@ var PriceTicker = memo(
     showArrow,
     ...htmlAttributes
   }) => {
-    const ref = useRef34(INITIAL_VALUE);
+    const ref = useRef36(INITIAL_VALUE);
     const [prevValue, prevDirection] = ref.current;
-    const formatNumber = useMemo19(() => getValueFormatter(decimals), [decimals]);
+    const formatNumber = useMemo20(() => getValueFormatter(decimals), [decimals]);
     const direction = isValidNumber5(prevValue) ? getMovingValueDirection(price, prevDirection, prevValue, decimals) : "";
     ref.current = [price, direction];
-    return /* @__PURE__ */ jsxs21("div", { ...htmlAttributes, className: cx18(classBase19, className, direction), children: [
+    return /* @__PURE__ */ jsxs24("div", { ...htmlAttributes, className: cx20(classBase22, className, direction), children: [
       formatNumber(price),
-      showArrow ? /* @__PURE__ */ jsx41("span", { "data-icon": "price-arrow" }) : null
+      showArrow ? /* @__PURE__ */ jsx44("span", { "data-icon": "price-arrow" }) : null
     ] });
   }
 );
@@ -10551,24 +10890,30 @@ PriceTicker.displayName = "PriceTicker";
 
 // src/split-button/SplitButton.tsx
 import { PopupMenu as PopupMenu2 } from "@vuu-ui/vuu-popups";
-import { Button as Button6 } from "@salt-ds/core";
+import { Button as Button5, useForkRef as useForkRef9 } from "@salt-ds/core";
+import { forwardRef as forwardRef24 } from "react";
 
 // src/split-button/useSplitButton.ts
 import { dispatchMouseEvent as dispatchMouseEvent2 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback48,
-  useRef as useRef35
+  useCallback as useCallback52,
+  useRef as useRef37
 } from "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 = useRef35(null);
-  const rootRef = useRef35(null);
-  const onMenuClose = useCallback48((reason) => {
+  const buttonRef = useRef37(null);
+  const rootRef = useRef37(null);
+  const onMenuClose = useCallback52((reason) => {
     var _a2;
     if ((reason == null ? void 0 : reason.type) !== "tab-away") {
       const buttonMain = (_a2 = rootRef.current) == null ? void 0 : _a2.querySelector(
@@ -10580,17 +10925,23 @@ var useSplitButton = ({
   const menuProps = {
     ...PopupMenuProps3,
     anchorElement: rootRef,
-    menuClassName: `${classBase26}-menu`,
+    menuClassName: `${classBase30}-menu`,
     onMenuClose,
     popupPlacement: "below-full-width"
   };
-  const handleRootFocus = useCallback48(() => {
+  const handleRootFocus = useCallback52((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 = useCallback48((evt) => {
+  const handleRootBlur = useCallback52((evt) => {
     const { current: splitButton } = rootRef;
     const target = evt.relatedTarget;
     if (!(splitButton == null ? void 0 : splitButton.contains(target))) {
@@ -10599,29 +10950,23 @@ var useSplitButton = ({
       }
     }
   }, []);
-  const handleButtonKeyDown = useCallback48(
+  const handleButtonKeyDown = useCallback52(
     (evt) => {
       var _a2;
       if (evt.key === "ArrowDown") {
         const popupTrigger = (_a2 = rootRef.current) == null ? void 0 : _a2.querySelector(
-          `.${classBase26}-trigger`
+          `.${classBase30}-trigger`
         );
         if (popupTrigger) {
           dispatchMouseEvent2(popupTrigger, "click");
         }
       }
     },
-    [classBase26]
-  );
-  const handleClick = useCallback48(
-    (evt) => {
-      onClick == null ? void 0 : onClick(evt);
-    },
-    [onClick]
+    [classBase30]
   );
   const ButtonProps6 = {
     ...ButtonPropsProp,
-    onClick: segmented ? handleClick : void 0,
+    onClick,
     onKeyDown: handleButtonKeyDown
   };
   return {
@@ -10629,83 +10974,103 @@ var useSplitButton = ({
     PopupMenuProps: menuProps,
     buttonRef,
     rootRef,
-    onClick: segmented ? void 0 : handleClick,
     onBlur: handleRootBlur,
     onFocus: handleRootFocus
   };
 };
 
 // src/split-button/SplitButton.tsx
-import cx19 from "clsx";
-import { jsx as jsx42, jsxs as jsxs22 } from "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({
+import cx21 from "clsx";
+import { jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
+var classBase23 = "vuuSplitButton";
+var SplitButton = forwardRef24(
+  function SplitButton2({
     ButtonProps: ButtonPropsProp,
     PopupMenuProps: PopupMenuPropsProp,
-    classBase: classBase20,
+    children,
+    className,
+    disabled = false,
     onClick,
-    segmented
-  });
-  return /* @__PURE__ */ jsxs22(
-    "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__ */ jsxs25(
+      "div",
+      {
+        ...htmlAttributes,
+        ...rootProps,
+        className: cx21(classBase23, `${classBase23}-${variant}`, className, {
+          [`${classBase23}-disabled`]: disabled,
+          [`${classBase23}-segmented`]: segmented
+        }),
+        ref: useForkRef9(forwardedRef, rootRef),
+        "data-showcase-center": true,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsx45(
+            Button5,
+            {
+              ...ButtonProps6,
+              className: `${classBase23}-main`,
+              disabled,
+              ref: buttonRef,
+              variant,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx45(
+            PopupMenu2,
+            {
+              ...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
+import cx22 from "clsx";
+import { forwardRef as forwardRef25 } from "react";
+import { jsx as jsx46 } from "react/jsx-runtime";
+var classBase24 = "vuuSplitStateButton";
+var SplitStateButton = forwardRef25(function SplitStateButton2({ className, selected, ...splitButtonProps }, forwardedRef) {
+  return /* @__PURE__ */ jsx46(
+    SplitButton,
     {
-      ...htmlAttributes,
-      ...rootProps,
-      className: cx19(classBase20, `${classBase20}-${variant}`, {
-        [`${classBase20}-disabled`]: disabled,
-        [`${classBase20}-segmented`]: segmented
-      }),
-      ref: rootRef,
-      "data-showcase-center": true,
-      children: [
-        /* @__PURE__ */ jsx42(
-          Button6,
-          {
-            ...ButtonProps6,
-            className: `${classBase20}-main`,
-            disabled,
-            ref: buttonRef,
-            variant,
-            children: buttonText
-          }
-        ),
-        /* @__PURE__ */ jsx42(
-          PopupMenu2,
-          {
-            ...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: cx22(classBase24, className),
+      ref: forwardedRef
     }
   );
-};
+});
 
 // src/tabstrip/Tabstrip.tsx
 import { asReactElements as asReactElements2, useId as useId9 } from "@vuu-ui/vuu-utils";
-import cx20 from "clsx";
-import React4, { useMemo as useMemo21, useRef as useRef39 } from "react";
+import cx23 from "clsx";
+import React4, { useMemo as useMemo22, useRef as useRef41 } from "react";
 
 // src/tabstrip/useTabstrip.ts
 import { dispatchMouseEvent as dispatchMouseEvent4 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback52,
-  useRef as useRef38
+  useCallback as useCallback56,
+  useRef as useRef40
 } from "react";
 
 // src/tabstrip/TabMenuOptions.ts
@@ -10739,22 +11104,22 @@ var getIndexOfEditedItem = (container) => getIndexOfItem(container, ".vuuEditabl
 
 // src/tabstrip/useAnimatedSelectionThumb.ts
 import { isValidNumber as isValidNumber6, MEASURES as MEASURES2 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback49, useMemo as useMemo20, useRef as useRef36 } from "react";
+import { useCallback as useCallback53, useMemo as useMemo21, useRef as useRef38 } from "react";
 var useAnimatedSelectionThumb = (containerRef, activeTabIndex, orientation = "horizontal") => {
-  const animationSuspendedRef = useRef36(false);
-  const suspendAnimation = useCallback49(() => {
+  const animationSuspendedRef = useRef38(false);
+  const suspendAnimation = useCallback53(() => {
     animationSuspendedRef.current = true;
   }, []);
-  const resumeAnimation = useCallback49(() => {
+  const resumeAnimation = useCallback53(() => {
     animationSuspendedRef.current = false;
   }, []);
-  const onTransitionEnd = useCallback49(() => {
+  const onTransitionEnd = useCallback53(() => {
     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 = useRef36(-1);
-  return useMemo20(() => {
+  const lastSelectedRef = useRef38(-1);
+  return useMemo21(() => {
     var _a2, _b;
     let offset = 0;
     let size = 0;
@@ -10828,9 +11193,9 @@ import {
   getFocusableElement
 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback50,
-  useRef as useRef37,
-  useState as useState22
+  useCallback as useCallback54,
+  useRef as useRef39,
+  useState as useState23
 } from "react";
 import {
   ArrowDown as ArrowDown2,
@@ -10888,23 +11253,23 @@ var useKeyboardNavigation2 = ({
   selectedIndex: selectedTabIndex = 0
 }) => {
   const manualActivation = keyBoardActivation === "manual";
-  const mouseClickPending = useRef37(false);
-  const focusedRef = useRef37(-1);
-  const [hasFocus, setHasFocus] = useState22(false);
-  const [, forceRefresh] = useState22({});
+  const mouseClickPending = useRef39(false);
+  const focusedRef = useRef39(-1);
+  const [hasFocus, setHasFocus] = useState23(false);
+  const [, forceRefresh] = useState23({});
   const [highlightedIdx, _setHighlightedIdx] = useControlled9({
     controlled: highlightedIdxProp,
     default: defaultHighlightedIdx,
     name: "UseKeyboardNavigation"
   });
-  const setHighlightedIdx = useCallback50(
+  const setHighlightedIdx = useCallback54(
     (value) => {
       _setHighlightedIdx(focusedRef.current = value);
     },
     [_setHighlightedIdx]
   );
-  const keyboardNavigation = useRef37(false);
-  const focusTab = useCallback50(
+  const keyboardNavigation = useRef39(false);
+  const focusTab = useCallback54(
     (tabIndex, immediateFocus = false, withKeyboard, delay = 70) => {
       setHighlightedIdx(tabIndex);
       if (withKeyboard === true && !keyboardNavigation.current) {
@@ -10944,14 +11309,14 @@ var useKeyboardNavigation2 = ({
       }
     }
   };
-  const getIndexCount = useCallback50(
+  const getIndexCount = useCallback54(
     () => {
       var _a2, _b;
       return (_b = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelectorAll(`[data-index]`).length) != null ? _b : 0;
     },
     [containerRef]
   );
-  const nextFocusableItemIdx = useCallback50(
+  const nextFocusableItemIdx = useCallback54(
     (direction = "fwd", idx) => {
       const indexCount = getIndexCount();
       const index = typeof idx === "number" ? idx : indexCount;
@@ -10971,7 +11336,7 @@ var useKeyboardNavigation2 = ({
     },
     [containerRef, getIndexCount]
   );
-  const navigateChildItems = useCallback50(
+  const navigateChildItems = useCallback54(
     (e, forceFocusVisible = false) => {
       const direction = navigation[orientation][e.key];
       const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
@@ -10993,14 +11358,14 @@ var useKeyboardNavigation2 = ({
       orientation
     ]
   );
-  const highlightedTabHasMenu = useCallback50(() => {
+  const highlightedTabHasMenu = useCallback54(() => {
     const el = getElementByPosition(containerRef.current, highlightedIdx);
     if (el) {
       return el.querySelector(".vuuPopupMenu") != null;
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const activateTabMenu = useCallback50(() => {
+  const activateTabMenu = useCallback54(() => {
     const el = getElementByPosition(containerRef.current, highlightedIdx);
     const menuEl = el == null ? void 0 : el.querySelector(".vuuPopupMenu");
     if (menuEl) {
@@ -11008,7 +11373,7 @@ var useKeyboardNavigation2 = ({
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const handleKeyDown = useCallback50(
+  const handleKeyDown = useCallback54(
     (e) => {
       if (getIndexCount() > 0 && isNavigationKey2(e.key, orientation)) {
         e.preventDefault();
@@ -11033,7 +11398,7 @@ var useKeyboardNavigation2 = ({
   const handleItemClick = (_, tabIndex) => {
     setHighlightedIdx(tabIndex);
   };
-  const handleFocus = useCallback50(() => {
+  const handleFocus = useCallback54(() => {
     if (!hasFocus) {
       setHasFocus(true);
       if (!mouseClickPending.current) {
@@ -11043,7 +11408,7 @@ var useKeyboardNavigation2 = ({
       }
     }
   }, [hasFocus]);
-  const handleContainerMouseDown = useCallback50(() => {
+  const handleContainerMouseDown = useCallback54(() => {
     if (!hasFocus) {
       mouseClickPending.current = true;
     }
@@ -11081,7 +11446,7 @@ var useKeyboardNavigation2 = ({
 
 // src/tabstrip/useSelection.ts
 import { useControlled as useControlled10 } from "@salt-ds/core";
-import { useCallback as useCallback51 } from "react";
+import { useCallback as useCallback55 } from "react";
 var defaultSelectionKeys2 = ["Enter", " "];
 var isTabElement = (el) => el && el.matches('[class*="vuuTab "]');
 var useSelection2 = ({
@@ -11096,18 +11461,18 @@ var useSelection2 = ({
     name: "Tabstrip",
     state: "value"
   });
-  const isSelectionEvent = useCallback51(
+  const isSelectionEvent = useCallback55(
     (evt) => defaultSelectionKeys2.includes(evt.key),
     []
   );
-  const selectItem = useCallback51(
+  const selectItem = useCallback55(
     (tabIndex) => {
       setSelected(tabIndex);
       onSelectionChange == null ? void 0 : onSelectionChange(tabIndex);
     },
     [onSelectionChange, setSelected]
   );
-  const handleKeyDown = useCallback51(
+  const handleKeyDown = useCallback55(
     (e) => {
       const targetElement = e.target;
       if (isSelectionEvent(e) && highlightedIdx !== selected && isTabElement(targetElement)) {
@@ -11118,7 +11483,7 @@ var useSelection2 = ({
     },
     [isSelectionEvent, highlightedIdx, selected, selectItem]
   );
-  const onClick = useCallback51(
+  const onClick = useCallback55(
     (e, tabIndex) => {
       if (tabIndex !== selected) {
         selectItem(tabIndex);
@@ -11158,7 +11523,7 @@ var useTabstrip = ({
   orientation,
   keyBoardActivation
 }) => {
-  const lastSelection = useRef38(activeTabIndexProp);
+  const lastSelection = useRef40(activeTabIndexProp);
   const {
     focusTab: keyboardHookFocusTab,
     highlightedIdx,
@@ -11188,7 +11553,7 @@ var useTabstrip = ({
     animateSelectionThumb ? selectionHookSelected : -1,
     orientation
   );
-  const handleDrop = useCallback52(
+  const handleDrop = useCallback56(
     ({ fromIndex, toIndex }) => {
       const { current: selected } = lastSelection;
       console.log(
@@ -11230,7 +11595,7 @@ var useTabstrip = ({
     orientation: "horizontal",
     itemQuery: ".vuuOverflowContainer-item"
   });
-  const handleExitEditMode = useCallback52(
+  const handleExitEditMode = useCallback56(
     (originalValue, editedValue, allowDeactivation, tabIndex) => {
       console.log(
         `handleExitEditMode ${originalValue} ${editedValue} ${allowDeactivation} ${tabIndex}`
@@ -11242,7 +11607,7 @@ var useTabstrip = ({
     },
     [keyboardHookFocusTab, onExitEditMode]
   );
-  const handleClick = useCallback52(
+  const handleClick = useCallback56(
     (evt, tabIndex) => {
       keyboardHookHandleClick(evt, tabIndex);
       selectionHookHandleClick(evt, tabIndex);
@@ -11250,7 +11615,7 @@ var useTabstrip = ({
     // [dragDropHook.isDragging, keyboardHook, selectionHook]
     [keyboardHookHandleClick, selectionHookHandleClick]
   );
-  const getEditableLabel = useCallback52(
+  const getEditableLabel = useCallback56(
     (tabIndex = highlightedIdx) => {
       const targetEl = getElementWithIndex(containerRef.current, tabIndex);
       if (targetEl) {
@@ -11259,7 +11624,7 @@ var useTabstrip = ({
     },
     [containerRef, highlightedIdx]
   );
-  const tabInEditMode = useCallback52(
+  const tabInEditMode = useCallback56(
     (tabIndex = highlightedIdx) => {
       const editableLabel = getEditableLabel(tabIndex);
       if (editableLabel) {
@@ -11269,7 +11634,7 @@ var useTabstrip = ({
     },
     [getEditableLabel, highlightedIdx]
   );
-  const editTab = useCallback52(
+  const editTab = useCallback56(
     (tabIndex = highlightedIdx) => {
       const editableLabelEl = getEditableLabel(tabIndex);
       if (editableLabelEl) {
@@ -11278,7 +11643,7 @@ var useTabstrip = ({
     },
     [getEditableLabel, highlightedIdx]
   );
-  const handleKeyDown = useCallback52(
+  const handleKeyDown = useCallback56(
     (evt) => {
       keyboardHookHandleKeyDown(evt);
       if (!evt.defaultPrevented) {
@@ -11290,7 +11655,7 @@ var useTabstrip = ({
     },
     [editTab, keyboardHookHandleKeyDown, selectionHookHandleKeyDown]
   );
-  const handleCloseTabFromMenu = useCallback52(
+  const handleCloseTabFromMenu = useCallback56(
     (tabIndex) => {
       const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);
       const newActiveTabIndex = selectedTabIndex > tabIndex ? selectedTabIndex - 1 : selectedTabIndex === tabIndex ? 0 : selectedTabIndex;
@@ -11303,14 +11668,14 @@ var useTabstrip = ({
     },
     [containerRef, onCloseTab, resumeAnimation, suspendAnimation]
   );
-  const handleRenameTabFromMenu = useCallback52(
+  const handleRenameTabFromMenu = useCallback56(
     (tabIndex) => {
       editTab(tabIndex);
       return true;
     },
     [editTab]
   );
-  const handleTabMenuAction = useCallback52(
+  const handleTabMenuAction = useCallback56(
     (action) => {
       if (isTabMenuOptions(action.options)) {
         switch (action.menuId) {
@@ -11326,7 +11691,7 @@ var useTabstrip = ({
     },
     [handleCloseTabFromMenu, handleRenameTabFromMenu]
   );
-  const handleTabMenuClose = useCallback52(() => {
+  const handleTabMenuClose = useCallback56(() => {
     if (!tabInEditMode()) {
       keyboardHookFocusTab(highlightedIdx);
     } else {
@@ -11338,7 +11703,7 @@ var useTabstrip = ({
     keyboardHookSetHighlightedIndex,
     tabInEditMode
   ]);
-  const onSwitchWrappedItemIntoView = useCallback52(
+  const onSwitchWrappedItemIntoView = useCallback56(
     (item) => {
       const index = parseInt(item.index);
       if (!isNaN(index)) {
@@ -11351,7 +11716,7 @@ var useTabstrip = ({
     onFocus: keyboardHook.onFocus,
     onKeyDown: handleKeyDown
   };
-  const handleAddTabClick = useCallback52(() => {
+  const handleAddTabClick = useCallback56(() => {
     onAddTab == null ? void 0 : onAddTab();
     requestAnimationFrame(() => {
       const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);
@@ -11384,9 +11749,9 @@ var useTabstrip = ({
 };
 
 // src/tabstrip/Tabstrip.tsx
-import { Fragment as Fragment4, jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
-var classBase21 = "vuuTabstrip";
+var classBase25 = "vuuTabstrip";
 var Tabstrip = ({
   activeTabIndex: activeTabIndexProp,
   allowAddTab,
@@ -11408,9 +11773,10 @@ var Tabstrip = ({
   showTabMenuButton,
   style: styleProp,
   tabClassName,
+  variant = "secondary",
   ...htmlAttributes
 }) => {
-  const rootRef = useRef39(null);
+  const rootRef = useRef41(null);
   const {
     activeTabIndex,
     focusVisible,
@@ -11433,12 +11799,12 @@ var Tabstrip = ({
     orientation
   });
   const id = useId9(idProp);
-  const className = cx20(classBase21, `${classBase21}-${orientation}`, classNameProp);
+  const className = cx23(classBase25, classNameProp);
   const style = styleProp || containerStyle ? {
     ...styleProp,
     ...containerStyle
   } : void 0;
-  const tabs = useMemo21(
+  const tabs = useMemo22(
     () => asReactElements2(children).map((child, index) => {
       const {
         id: tabId = `${id}-tab-${index}`,
@@ -11452,7 +11818,7 @@ var Tabstrip = ({
       return React4.cloneElement(child, {
         ...tabProps,
         ...tabstripHook.navigationProps,
-        className: cx20(className2, tabClassName),
+        className: cx23(className2, tabClassName),
         closeable,
         "data-overflow-priority": selected ? "1" : void 0,
         dragging: draggedItemIndex === index,
@@ -11461,7 +11827,7 @@ var Tabstrip = ({
         id: tabId,
         index,
         key: index,
-        location: cx20(location, tabLocation),
+        location: cx23(location, tabLocation),
         selected,
         showMenuButton,
         tabIndex: selected ? 0 : -1
@@ -11472,7 +11838,8 @@ var Tabstrip = ({
         {
           ...tabstripHook.navigationProps,
           "aria-label": "Create Tab",
-          className: `${classBase21}-addTabButton`,
+          className: `${classBase25}-addTabButton`,
+          "data-embedded": true,
           icon: "add",
           "data-overflow-priority": "1",
           key: "addButton",
@@ -11499,14 +11866,13 @@ var Tabstrip = ({
       location
     ]
   );
-  return /* @__PURE__ */ jsxs23(Fragment4, { children: [
-    /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsxs26(Fragment4, { children: [
+    /* @__PURE__ */ jsx47(
       OverflowContainer,
       {
         ...htmlAttributes,
         ...tabstripHook.containerProps,
-        className,
-        height: 29,
+        className: cx23(className, `${classBase25}-${variant}`),
         id,
         orientation,
         overflowIcon: "more-horiz",
@@ -11521,20 +11887,20 @@ var Tabstrip = ({
 };
 
 // src/tabstrip/Tab.tsx
-import { useForkRef as useForkRef8 } from "@salt-ds/core";
-import cx22 from "clsx";
+import { useForkRef as useForkRef10 } from "@salt-ds/core";
+import cx25 from "clsx";
 import {
-  forwardRef as forwardRef23,
-  useCallback as useCallback53,
-  useRef as useRef40
+  forwardRef as forwardRef26,
+  useCallback as useCallback57,
+  useRef as useRef42
 } from "react";
 
 // src/tabstrip/TabMenu.tsx
 import { PopupMenu as PopupMenu3 } from "@vuu-ui/vuu-popups";
-import { useMemo as useMemo22 } from "react";
-import cx21 from "clsx";
-import { jsx as jsx44 } from "react/jsx-runtime";
-var classBase22 = "vuuTabMenu";
+import { useMemo as useMemo23 } from "react";
+import cx24 from "clsx";
+import { jsx as jsx48 } from "react/jsx-runtime";
+var classBase26 = "vuuTabMenu";
 var TabMenu = ({
   allowClose,
   allowRename,
@@ -11545,7 +11911,7 @@ var TabMenu = ({
   onMenuClose,
   index
 }) => {
-  const [menuBuilder, menuOptions] = useMemo22(
+  const [menuBuilder, menuOptions] = useMemo23(
     () => [
       (_location, options) => {
         const menuItems = [];
@@ -11571,26 +11937,27 @@ var TabMenu = ({
       index
     ]
   );
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx48(
     PopupMenu3,
     {
-      className: classBase22,
+      "aria-label": "context menu",
+      className: classBase26,
+      "data-embedded": true,
       menuBuilder,
       menuActionHandler: onMenuAction,
-      menuLocation: cx21("tab", location),
+      menuLocation: cx24("tab", location),
       menuOptions,
       onMenuClose,
-      tabIndex: -1,
-      "aria-label": "context menu"
+      tabIndex: -1
     }
   );
 };
 
 // src/tabstrip/Tab.tsx
-import { jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
-var classBase23 = "vuuTab";
+import { jsx as jsx49, jsxs as jsxs27 } from "react/jsx-runtime";
+var classBase27 = "vuuTab";
 var noop2 = () => void 0;
-var Tab = forwardRef23(function Tab2({
+var Tab = forwardRef26(function Tab2({
   ariaControls,
   children,
   className,
@@ -11619,10 +11986,10 @@ var Tab = forwardRef23(function Tab2({
   if (showMenuButton && typeof onMenuAction !== "function") {
     throw Error("Tab onMenuAction must be provided if showMenuButton is set");
   }
-  const rootRef = useRef40(null);
-  const editableRef = useRef40(null);
-  const setForkRef = useForkRef8(ref, rootRef);
-  const handleClick = useCallback53(
+  const rootRef = useRef42(null);
+  const editableRef = useRef42(null);
+  const setForkRef = useForkRef10(ref, rootRef);
+  const handleClick = useCallback57(
     (e) => {
       if (!editing) {
         e.preventDefault();
@@ -11647,7 +12014,7 @@ var Tab = forwardRef23(function Tab2({
   };
   const getLabel = () => {
     if (editable) {
-      return /* @__PURE__ */ jsx45(
+      return /* @__PURE__ */ jsx49(
         EditableLabel,
         {
           editing,
@@ -11672,18 +12039,18 @@ var Tab = forwardRef23(function Tab2({
     }
     onFocusProp == null ? void 0 : onFocusProp(evt);
   };
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       ...props,
       "aria-controls": ariaControls,
       "aria-selected": selected,
-      className: cx22(classBase23, className, {
-        [`${classBase23}-closeable`]: closeable,
+      className: cx25(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,
@@ -11693,15 +12060,15 @@ var Tab = forwardRef23(function Tab2({
       role: "tab",
       tabIndex,
       children: [
-        /* @__PURE__ */ jsx45("div", { className: `${classBase23}-main`, children: /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx49("div", { className: `${classBase27}-main`, children: /* @__PURE__ */ jsx49(
           "span",
           {
-            className: `${classBase23}-text`,
+            className: `${classBase27}-text`,
             "data-text": editable ? void 0 : label,
             children: children != null ? children : getLabel()
           }
         ) }),
-        showMenuButton ? /* @__PURE__ */ jsx45(
+        showMenuButton ? /* @__PURE__ */ jsx49(
           TabMenu,
           {
             allowClose: closeable,
@@ -11721,14 +12088,14 @@ var Tab = forwardRef23(function Tab2({
 
 // src/toolbar/Toolbar.tsx
 import { asReactElements as asReactElements3, useId as useId10 } from "@vuu-ui/vuu-utils";
-import cx23 from "clsx";
-import React5, { useMemo as useMemo23, useRef as useRef43 } from "react";
+import cx26 from "clsx";
+import React5, { useMemo as useMemo24, useRef as useRef45 } from "react";
 
 // src/toolbar/useToolbar.ts
 import { isValidNumber as isValidNumber7 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback56,
-  useRef as useRef42
+  useCallback as useCallback60,
+  useRef as useRef44
 } from "react";
 
 // src/toolbar/useKeyboardNavigation.ts
@@ -11740,9 +12107,9 @@ import {
   getFocusableElement as getFocusableElement2
 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback54,
-  useRef as useRef41,
-  useState as useState23
+  useCallback as useCallback58,
+  useRef as useRef43,
+  useState as useState24
 } from "react";
 import {
   ArrowDown as ArrowDown3,
@@ -11849,22 +12216,22 @@ var useKeyboardNavigation3 = ({
   onNavigateOutOfBounds,
   orientation
 }) => {
-  const mouseClickPending = useRef41(false);
-  const focusedRef = useRef41(-1);
-  const [hasFocus, setHasFocus] = useState23(false);
+  const mouseClickPending = useRef43(false);
+  const focusedRef = useRef43(-1);
+  const [hasFocus, setHasFocus] = useState24(false);
   const [highlightedIdx, _setHighlightedIdx] = useControlled11({
     controlled: highlightedIdxProp,
     default: defaultHighlightedIdx,
     name: "UseKeyboardNavigation"
   });
-  const setHighlightedIdx = useCallback54(
+  const setHighlightedIdx = useCallback58(
     (value) => {
       _setHighlightedIdx(focusedRef.current = value);
     },
     [_setHighlightedIdx]
   );
-  const keyboardNavigation = useRef41(false);
-  const focusItem = useCallback54(
+  const keyboardNavigation = useRef43(false);
+  const focusItem = useCallback58(
     (itemIndex, immediateFocus = false, withKeyboard, delay = 70) => {
       console.log(`focus item ${itemIndex}`);
       setHighlightedIdx(itemIndex);
@@ -11906,14 +12273,14 @@ var useKeyboardNavigation3 = ({
       }
     }
   };
-  const getIndexCount = useCallback54(
+  const getIndexCount = useCallback58(
     () => {
       var _a2, _b;
       return (_b = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelectorAll(`[data-index]`).length) != null ? _b : 0;
     },
     [containerRef]
   );
-  const nextFocusableItemIdx = useCallback54(
+  const nextFocusableItemIdx = useCallback58(
     (direction = "fwd", idx) => {
       var _a2;
       const indexCount = getIndexCount();
@@ -11941,7 +12308,7 @@ var useKeyboardNavigation3 = ({
     },
     [containerRef, getIndexCount]
   );
-  const navigateChildItems = useCallback54(
+  const navigateChildItems = useCallback58(
     (e) => {
       const direction = navigation2[orientation][e.key];
       const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
@@ -11961,21 +12328,21 @@ var useKeyboardNavigation3 = ({
       onNavigateOutOfBounds
     ]
   );
-  const highlightedItemHasMenu = useCallback54(() => {
+  const highlightedItemHasMenu = useCallback58(() => {
     const el = getElementByPosition2(containerRef.current, highlightedIdx);
     if (el) {
       return el.querySelector(".vuuPopupMenu") != null;
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const highlightedItemInEditState = useCallback54(() => {
+  const highlightedItemInEditState = useCallback58(() => {
     const el = getElementByPosition2(containerRef.current, highlightedIdx);
     if (el) {
       return el.querySelector(".vuuEditableLabel-input") != null;
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const activateItemMenu = useCallback54(() => {
+  const activateItemMenu = useCallback58(() => {
     const el = getElementByPosition2(containerRef.current, highlightedIdx);
     const menuEl = el == null ? void 0 : el.querySelector(".vuuPopupMenu");
     if (menuEl) {
@@ -11983,7 +12350,7 @@ var useKeyboardNavigation3 = ({
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const handleKeyDown = useCallback54(
+  const handleKeyDown = useCallback58(
     (e) => {
       if (getIndexCount() > 0 && isNavigationKey3(e.key, orientation)) {
         e.preventDefault();
@@ -12009,7 +12376,7 @@ var useKeyboardNavigation3 = ({
   const handleItemClick = (_, itemIndex) => {
     setHighlightedIdx(itemIndex);
   };
-  const handleFocus = useCallback54(() => {
+  const handleFocus = useCallback58(() => {
     if (!hasFocus) {
       setHasFocus(true);
       if (!mouseClickPending.current) {
@@ -12019,13 +12386,13 @@ var useKeyboardNavigation3 = ({
       }
     }
   }, [hasFocus]);
-  const handleContainerMouseDown = useCallback54(() => {
+  const handleContainerMouseDown = useCallback58(() => {
     if (!hasFocus) {
       mouseClickPending.current = true;
     }
     keyboardNavigation.current = false;
   }, [hasFocus]);
-  const handleOverflowMenuClose = useCallback54(
+  const handleOverflowMenuClose = useCallback58(
     (closeReason) => {
       if ((closeReason == null ? void 0 : closeReason.type) === "escape") {
         const index = getIndexOfOverflowItem(containerRef.current);
@@ -12070,7 +12437,7 @@ var useKeyboardNavigation3 = ({
 
 // src/toolbar/useSelection.ts
 import { isSelectableElement as isSelectableElement2, getClosestIndexItem } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback55 } from "react";
+import { useCallback as useCallback59 } from "react";
 var defaultSelectionKeys3 = ["Enter", " "];
 var NO_SELECTION_HANDLERS = {};
 var useSelection3 = ({
@@ -12086,11 +12453,11 @@ var useSelection3 = ({
     name: "useSelection",
     state: "selected"
   });
-  const isSelectionEvent = useCallback55(
+  const isSelectionEvent = useCallback59(
     (evt) => defaultSelectionKeys3.includes(evt.key),
     []
   );
-  const selectItem = useCallback55(
+  const selectItem = useCallback59(
     (itemIndex, specialKey = false) => {
       const newSelected = allowMultipleSelection(selectionStrategy, specialKey) ? selected.concat(itemIndex) : [itemIndex];
       setSelected(newSelected);
@@ -12098,7 +12465,7 @@ var useSelection3 = ({
     },
     [onSelectionChange, selected, selectionStrategy, setSelected]
   );
-  const deselectItem = useCallback55(
+  const deselectItem = useCallback59(
     (itemIndex, specialKey = false) => {
       const newSelected = selectionStrategy === "deselectable" || selectionStrategy === "multiple-special-key" && !specialKey ? [] : selected.filter((index) => index !== itemIndex);
       setSelected(newSelected);
@@ -12106,7 +12473,7 @@ var useSelection3 = ({
     },
     [onSelectionChange, selected, selectionStrategy, setSelected]
   );
-  const handleKeyDown = useCallback55(
+  const handleKeyDown = useCallback59(
     (e) => {
       if (isSelectionEvent(e) && isSelectableElement2(e.target)) {
         if (!selected.includes(highlightedIdx)) {
@@ -12129,7 +12496,7 @@ var useSelection3 = ({
       deselectItem
     ]
   );
-  const handleClick = useCallback55(
+  const handleClick = useCallback59(
     (e, itemIndex) => {
       const element = getClosestIndexItem(e.target);
       if (isSelectableElement2(element)) {
@@ -12165,7 +12532,7 @@ var useToolbar = ({
   orientation,
   selectionStrategy
 }) => {
-  const lastSelection = useRef42(activeItemIndexProp);
+  const lastSelection = useRef44(activeItemIndexProp);
   const {
     focusItem: keyboardHookFocusItem,
     highlightedIdx,
@@ -12192,7 +12559,7 @@ var useToolbar = ({
     selectionStrategy
   });
   lastSelection.current = selectionHookSelected;
-  const handleClick = useCallback56(
+  const handleClick = useCallback60(
     (evt) => {
       var _a2;
       const target = evt.target;
@@ -12207,7 +12574,7 @@ var useToolbar = ({
     },
     [keyboardHookHandleClick, onClick]
   );
-  const handleKeyDown = useCallback56(
+  const handleKeyDown = useCallback60(
     (evt) => {
       keyboardHookHandleKeyDown(evt);
       if (!evt.defaultPrevented) {
@@ -12216,7 +12583,7 @@ var useToolbar = ({
     },
     [keyboardHookHandleKeyDown, onKeyDown]
   );
-  const onSwitchWrappedItemIntoView = useCallback56(
+  const onSwitchWrappedItemIntoView = useCallback60(
     (item) => {
       const index = parseInt(item.index);
       if (!isNaN(index)) {
@@ -12248,8 +12615,8 @@ var useToolbar = ({
 };
 
 // src/toolbar/Toolbar.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
-var classBase24 = "vuuToolbar";
+import { jsx as jsx50 } from "react/jsx-runtime";
+var classBase28 = "vuuToolbar";
 var Toolbar = ({
   activeItemIndex: activeItemIndexProp,
   alignItems = "start",
@@ -12264,7 +12631,7 @@ var Toolbar = ({
   showSeparators = false,
   ...props
 }) => {
-  const rootRef = useRef43(null);
+  const rootRef = useRef45(null);
   const {
     activeItemIndex,
     focusableIdx,
@@ -12281,7 +12648,7 @@ var Toolbar = ({
     selectionStrategy
   });
   const id = useId10(idProp);
-  const items = useMemo23(
+  const items = useMemo24(
     () => asReactElements3(children).map((child, index) => {
       const {
         id: itemId = `${id}-tab-${index}`,
@@ -12291,7 +12658,7 @@ var Toolbar = ({
       const selected = activeItemIndex.includes(index);
       return React5.cloneElement(child, {
         ...forwardCallbackProps(ownProps, itemProps),
-        className: cx23("vuuToolbarItem", itemClassName),
+        className: cx26("vuuToolbarItem", itemClassName),
         "data-overflow-priority": selected ? "1" : void 0,
         id: itemId,
         key: index,
@@ -12301,15 +12668,15 @@ var Toolbar = ({
     }),
     [activeItemIndex, children, focusableIdx, id, itemProps]
   );
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx50(
     OverflowContainer,
     {
       ...props,
       ...toolbarHook.containerProps,
-      className: cx23(className, classBase24, `${classBase24}-${orientation}`, {
-        [`${classBase24}-alignCenter`]: alignItems === "center",
-        [`${classBase24}-alignEnd`]: alignItems === "end",
-        [`${classBase24}-withSeparators`]: showSeparators
+      className: cx26(className, classBase28, `${classBase28}-${orientation}`, {
+        [`${classBase28}-alignCenter`]: alignItems === "center",
+        [`${classBase28}-alignEnd`]: alignItems === "end",
+        [`${classBase28}-withSeparators`]: showSeparators
       }),
       ...props,
       ref: rootRef,
@@ -12319,11 +12686,11 @@ var Toolbar = ({
 };
 
 // src/tree/Tree.tsx
-import { useForkRef as useForkRef9, useIdMemo as useId11 } from "@salt-ds/core";
-import cx24 from "clsx";
+import { useForkRef as useForkRef11, useIdMemo as useId11 } from "@salt-ds/core";
+import cx27 from "clsx";
 import {
-  forwardRef as forwardRef24,
-  useRef as useRef50
+  forwardRef as forwardRef27,
+  useRef as useRef52
 } from "react";
 
 // src/tree/list-dom-utils.ts
@@ -12342,7 +12709,7 @@ var closestListItem2 = (el) => el.closest("[data-idx],[aria-posinset]");
 var closestListItemIndex2 = (el) => listItemIndex2(closestListItem2(el));
 
 // src/tree/use-items-with-ids.ts
-import { useCallback as useCallback57, useMemo as useMemo24 } from "react";
+import { useCallback as useCallback61, useMemo as useMemo25 } from "react";
 var PathSeparators2 = /* @__PURE__ */ new Set(["/", "-", "."]);
 var isPathSeparator2 = (char) => PathSeparators2.has(char);
 var isParentPath2 = (parentPath, childPath) => childPath.startsWith(parentPath) && isPathSeparator2(childPath[parentPath.length]);
@@ -12366,7 +12733,7 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
       return 0;
     }
   };
-  const isExpanded2 = useCallback57(
+  const isExpanded2 = useCallback61(
     (path) => {
       if (Array.isArray(revealSelected)) {
         return revealSelected.some((id) => isParentPath2(path, id));
@@ -12375,7 +12742,7 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
     },
     [defaultExpanded, revealSelected]
   );
-  const normalizeItems = useCallback57(
+  const normalizeItems = useCallback61(
     (items, indexer, level = 1, path = "", results = [], flattenedSource2 = []) => {
       let count2 = 0;
       items.forEach((item, i, all) => {
@@ -12419,10 +12786,10 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
     },
     [collapsibleHeaders, idRoot, isExpanded2]
   );
-  const [count, sourceWithIds, flattenedSource] = useMemo24(() => {
+  const [count, sourceWithIds, flattenedSource] = useMemo25(() => {
     return normalizeItems(sourceProp, { index: 0 });
   }, [normalizeItems, sourceProp]);
-  const sourceItemById = useCallback57(
+  const sourceItemById = useCallback61(
     (id, target = sourceWithIds) => {
       const sourceWithId = target.find(
         (i) => {
@@ -12443,8 +12810,8 @@ var useItemsWithIds = (sourceProp, idRoot = "root", {
 
 // src/tree/use-selection.ts
 import {
-  useCallback as useCallback58,
-  useRef as useRef44
+  useCallback as useCallback62,
+  useRef as useRef46
 } from "react";
 import { useControlled as useControlled12 } from "@salt-ds/core";
 var SINGLE = "single";
@@ -12467,8 +12834,8 @@ var useSelection4 = ({
   const singleSelect = selection === SINGLE;
   const multiSelect = selection === MULTI || selection.startsWith(CHECKBOX2);
   const extendedSelect = selection === EXTENDED;
-  const lastActive = useRef44(-1);
-  const isSelectionEvent = useCallback58(
+  const lastActive = useRef46(-1);
+  const isSelectionEvent = useCallback62(
     (evt) => selectionKeys.includes(evt.key),
     [selectionKeys]
   );
@@ -12477,7 +12844,7 @@ var useSelection4 = ({
     default: defaultSelected != null ? defaultSelected : [],
     name: "selected"
   });
-  const selectItemAtIndex = useCallback58(
+  const selectItemAtIndex = useCallback62(
     (evt, idx, id, rangeSelect, preserveExistingSelection = false) => {
       const { current: active } = lastActive;
       const isSelected2 = selected == null ? void 0 : selected.includes(id);
@@ -12518,7 +12885,7 @@ var useSelection4 = ({
       singleSelect
     ]
   );
-  const handleKeyDown = useCallback58(
+  const handleKeyDown = useCallback62(
     (evt) => {
       if (~highlightedIdx && isSelectionEvent(evt)) {
         evt.preventDefault();
@@ -12543,7 +12910,7 @@ var useSelection4 = ({
       selectItemAtIndex
     ]
   );
-  const handleKeyboardNavigation = useCallback58(
+  const handleKeyboardNavigation = useCallback62(
     (evt, currentIndex) => {
       if (extendedSelect && evt.shiftKey) {
         const item = treeNodes[currentIndex];
@@ -12556,7 +12923,7 @@ var useSelection4 = ({
     onKeyDown: handleKeyDown,
     onKeyboardNavigation: handleKeyboardNavigation
   };
-  const handleClick = useCallback58(
+  const handleClick = useCallback62(
     (evt) => {
       if (highlightedIdx !== -1) {
         const item = treeNodes[highlightedIdx];
@@ -12591,18 +12958,18 @@ var useSelection4 = ({
 
 // src/tree/use-viewport-tracking.ts
 import {
-  useCallback as useCallback59,
+  useCallback as useCallback63,
   useEffect as useEffect11,
   useLayoutEffect as useLayoutEffect4,
-  useRef as useRef45
+  useRef as useRef47
 } from "react";
 var HeightOnly4 = ["height", "scrollHeight"];
 var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
-  const scrollTop = useRef45(0);
-  const scrolling = useRef45(false);
-  const rootHeight = useRef45(0);
-  const rootScrollHeight = useRef45(0);
-  const scrollIntoView = useCallback59(
+  const scrollTop = useRef47(0);
+  const scrolling = useRef47(false);
+  const rootHeight = useRef47(0);
+  const rootScrollHeight = useRef47(0);
+  const scrollIntoView = useCallback63(
     (el) => {
       const targetEl = el.ariaExpanded ? el.firstChild : el;
       const headerHeight = stickyHeaders ? 30 : 0;
@@ -12623,7 +12990,7 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
     },
     [root, stickyHeaders]
   );
-  const scrollHandler = useCallback59((e) => {
+  const scrollHandler = useCallback63((e) => {
     scrollTop.current = e.target.scrollTop;
   }, []);
   useEffect11(() => {
@@ -12656,7 +13023,7 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
   }, [highlightedIdx, root, scrollIntoView]);
   useEffect11(() => {
   }, [stickyHeaders]);
-  const onResize = useCallback59(({ height, scrollHeight }) => {
+  const onResize = useCallback63(({ height, scrollHeight }) => {
     rootHeight.current = height;
     rootScrollHeight.current = scrollHeight;
   }, []);
@@ -12665,10 +13032,10 @@ var useViewportTracking2 = (root, highlightedIdx, stickyHeaders = false) => {
 };
 
 // src/tree/useTree.ts
-import { useCallback as useCallback63, useRef as useRef49 } from "react";
+import { useCallback as useCallback67, useRef as useRef51 } from "react";
 
 // src/tree/use-keyboard-navigation.ts
-import { useCallback as useCallback60, useMemo as useMemo25, useRef as useRef46 } from "react";
+import { useCallback as useCallback64, useMemo as useMemo26, useRef as useRef48 } from "react";
 
 // src/tree/hierarchical-data-utils.ts
 var getNodeParentPath = ({ id }) => {
@@ -12818,7 +13185,7 @@ var useKeyboardNavigation4 = ({
   onKeyboardNavigation,
   selected = []
 }) => {
-  const { bwd: ArrowBwd, fwd: ArrowFwd } = useMemo25(
+  const { bwd: ArrowBwd, fwd: ArrowFwd } = useMemo26(
     () => ({
       bwd: ArrowUp4,
       fwd: ArrowDown4
@@ -12830,14 +13197,14 @@ var useKeyboardNavigation4 = ({
     default: defaultHighlightedIdx,
     name: "highlightedIdx"
   });
-  const setHighlightedIndex = useCallback60(
+  const setHighlightedIndex = useCallback64(
     (idx) => {
       onHighlight == null ? void 0 : onHighlight(idx);
       setHighlightedIdx(idx);
     },
     [onHighlight, setHighlightedIdx]
   );
-  const nextFocusableItemIdx = useCallback60(
+  const nextFocusableItemIdx = useCallback64(
     (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])) {
@@ -12847,10 +13214,10 @@ var useKeyboardNavigation4 = ({
     },
     [ArrowBwd, ArrowFwd, treeNodes]
   );
-  const keyBoardNavigation = useRef46(true);
-  const ignoreFocus = useRef46(false);
+  const keyBoardNavigation = useRef48(true);
+  const ignoreFocus = useRef48(false);
   const setIgnoreFocus = (value) => ignoreFocus.current = value;
-  const handleFocus = useCallback60(() => {
+  const handleFocus = useCallback64(() => {
     if (ignoreFocus.current) {
       ignoreFocus.current = false;
     } else if (selected.length > 0) {
@@ -12863,7 +13230,7 @@ var useKeyboardNavigation4 = ({
       setHighlightedIndex(nextFocusableItemIdx());
     }
   }, [treeNodes, nextFocusableItemIdx, selected, setHighlightedIndex]);
-  const navigateChildItems = useCallback60(
+  const navigateChildItems = useCallback64(
     (e) => {
       const nextIdx = nextFocusableItemIdx(e.key, highlightedIdx);
       if (nextIdx !== highlightedIdx) {
@@ -12878,7 +13245,7 @@ var useKeyboardNavigation4 = ({
       setHighlightedIndex
     ]
   );
-  const handleKeyDown = useCallback60(
+  const handleKeyDown = useCallback64(
     (e) => {
       if (treeNodes.length > 0 && isNavigationKey4(e, "vertical")) {
         e.preventDefault();
@@ -12889,7 +13256,7 @@ var useKeyboardNavigation4 = ({
     },
     [treeNodes, navigateChildItems]
   );
-  const listProps = useMemo25(
+  const listProps = useMemo26(
     () => ({
       onBlur: () => {
         setHighlightedIndex(-1);
@@ -12927,7 +13294,7 @@ var useKeyboardNavigation4 = ({
 };
 
 // src/tree/use-hierarchical-data.ts
-import { useRef as useRef47, useState as useState24 } from "react";
+import { useRef as useRef49, useState as useState25 } from "react";
 var populateIndices = (nodes, results = [], idx = { value: 0 }) => {
   let skipToNextHeader = false;
   for (const node of nodes) {
@@ -12949,10 +13316,10 @@ var populateIndices = (nodes, results = [], idx = { value: 0 }) => {
   return results;
 };
 var useHierarchicalData = (source) => {
-  const externalSource = useRef47(source);
-  const statefulSource = useRef47(source);
-  const indexPositions = useRef47(populateIndices(source));
-  const [, forceUpdate] = useState24({});
+  const externalSource = useRef49(source);
+  const statefulSource = useRef49(source);
+  const indexPositions = useRef49(populateIndices(source));
+  const [, forceUpdate] = useState25({});
   if (source !== externalSource.current) {
     externalSource.current = source;
     statefulSource.current = source;
@@ -12972,7 +13339,7 @@ var useHierarchicalData = (source) => {
 };
 
 // src/tree/use-collapsible-groups.ts
-import { useCallback as useCallback61, useRef as useRef48 } from "react";
+import { useCallback as useCallback65, useRef as useRef50 } from "react";
 var NO_HANDLERS4 = {};
 var isToggleElement = (element) => element && element.hasAttribute("aria-expanded");
 var useCollapsibleGroups2 = ({
@@ -12982,23 +13349,23 @@ var useCollapsibleGroups2 = ({
   setVisibleData,
   source
 }) => {
-  const fullSource = useRef48(source);
-  const stateSource = useRef48(fullSource.current);
-  const setSource = useCallback61(
+  const fullSource = useRef50(source);
+  const stateSource = useRef50(fullSource.current);
+  const setSource = useCallback65(
     (value) => {
       setVisibleData(stateSource.current = value);
     },
     [setVisibleData]
   );
-  const expandNode = useCallback61(
+  const expandNode = useCallback65(
     (nodeList, { id }) => replaceNode(nodeList, id, { expanded: true }),
     []
   );
-  const collapseNode = useCallback61(
+  const collapseNode = useCallback65(
     (nodeList, { id }) => replaceNode(nodeList, id, { expanded: false }),
     []
   );
-  const handleKeyDown = useCallback61(
+  const handleKeyDown = useCallback65(
     (e) => {
       if (e.key === ArrowRight4 || e.key === Enter2) {
         const node = treeNodes[highlightedIdx];
@@ -13024,7 +13391,7 @@ var useCollapsibleGroups2 = ({
   const listHandlers = collapsibleHeaders ? {
     onKeyDown: handleKeyDown
   } : NO_HANDLERS4;
-  const handleClick = useCallback61(
+  const handleClick = useCallback65(
     (evt) => {
       const el = closestListItem2(evt.target);
       if (isToggleElement(el)) {
@@ -13050,14 +13417,14 @@ var useCollapsibleGroups2 = ({
 };
 
 // src/tree/use-tree-keyboard-navigation.ts
-import { useCallback as useCallback62 } from "react";
+import { useCallback as useCallback66 } from "react";
 var useTreeKeyboardNavigation = ({
   highlightedIdx,
   hiliteItemAtIndex,
   indexPositions,
   source
 }) => {
-  const handleKeyDown = useCallback62(
+  const handleKeyDown = useCallback66(
     (e) => {
       if (e.key === ArrowLeft4) {
         const node = indexPositions[highlightedIdx];
@@ -13094,7 +13461,7 @@ var useTree = ({
   selected: selectedProp,
   selection
 }) => {
-  const lastSelection = useRef49(EMPTY_ARRAY2);
+  const lastSelection = useRef51(EMPTY_ARRAY2);
   const dataHook = useHierarchicalData(sourceWithIds);
   const handleKeyboardNavigation = (evt, nextIdx) => {
     var _a2, _b;
@@ -13127,7 +13494,7 @@ var useTree = ({
     hiliteItemAtIndex: keyboardHook.hiliteItemAtIndex,
     indexPositions: dataHook.indexPositions
   });
-  const handleClick = useCallback63(
+  const handleClick = useCallback67(
     (evt) => {
       var _a2, _b, _c;
       (_a2 = collapsibleHook.listItemHandlers) == null ? void 0 : _a2.onClick(evt);
@@ -13137,7 +13504,7 @@ var useTree = ({
     },
     [collapsibleHook, selectionHook]
   );
-  const handleKeyDown = useCallback63(
+  const handleKeyDown = useCallback67(
     (evt) => {
       var _a2, _b, _c, _d, _e, _f, _g, _h;
       (_b = (_a2 = keyboardHook.listProps).onKeyDown) == null ? void 0 : _b.call(_a2, evt);
@@ -13187,14 +13554,14 @@ var useTree = ({
 };
 
 // src/tree/Tree.tsx
-import { jsx as jsx47, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs28 } from "react/jsx-runtime";
 import { createElement as createElement3 } from "react";
-var classBase25 = "vuuTree";
+var classBase29 = "vuuTree";
 var isExpanded = (node) => node.expanded === true;
 var TreeNode = ({ children, idx, ...props }) => {
-  return /* @__PURE__ */ jsx47("li", { ...props, children });
+  return /* @__PURE__ */ jsx51("li", { ...props, children });
 };
-var Tree = forwardRef24(function Tree2({
+var Tree = forwardRef27(function Tree2({
   allowDragDrop,
   className,
   defaultSelected,
@@ -13210,7 +13577,7 @@ var Tree = forwardRef24(function Tree2({
 }, forwardedRef) {
   var _a2;
   const id = useId11(idProp);
-  const rootRef = useRef50(null);
+  const rootRef = useRef52(null);
   const [, sourceWithIds, sourceItemById] = useItemsWithIds(source, id, {
     revealSelected: revealSelected ? (_a2 = selectedProp != null ? selectedProp : defaultSelected) != null ? _a2 : false : void 0
   });
@@ -13253,14 +13620,14 @@ var Tree = forwardRef24(function Tree2({
   const allowGroupSelect = groupSelectionEnabled2(groupSelection);
   function addLeafNode(list, item, idx) {
     list.push(
-      /* @__PURE__ */ jsxs25(
+      /* @__PURE__ */ jsxs28(
         TreeNode,
         {
           ...propsCommonToAllListItems,
           ...getListItemProps(item, idx, highlightedIdx, selected, focusVisible),
           children: [
-            item.icon ? /* @__PURE__ */ jsx47("span", { className: `${classBase25}Node-icon`, "data-icon": item.icon }) : null,
-            /* @__PURE__ */ jsx47("span", { children: item.label })
+            item.icon ? /* @__PURE__ */ jsx51("span", { className: `${classBase29}Node-icon`, "data-icon": item.icon }) : null,
+            /* @__PURE__ */ jsx51("span", { children: item.label })
           ]
         }
       )
@@ -13278,9 +13645,9 @@ var Tree = forwardRef24(function Tree2({
           "aria-expanded": child.expanded,
           "aria-level": child.level,
           "aria-selected": selected.includes(id2) || void 0,
-          className: cx24(`${classBase25}Node`, {
+          className: cx27(`${classBase29}Node`, {
             focusVisible: focusVisible === i,
-            [`${classBase25}Node-toggle`]: !allowGroupSelect
+            [`${classBase29}Node-toggle`]: !allowGroupSelect
           }),
           "data-idx": i,
           "data-highlighted": i === highlightedIdx || void 0,
@@ -13288,20 +13655,20 @@ var Tree = forwardRef24(function Tree2({
           id: id2,
           key: `header-${i}`
         },
-        allowGroupSelect ? /* @__PURE__ */ jsxs25("div", { className: `${classBase25}Node-label`, children: [
-          /* @__PURE__ */ jsx47("span", { className: `${classBase25}Node-toggle` }),
+        allowGroupSelect ? /* @__PURE__ */ jsxs28("div", { className: `${classBase29}Node-label`, children: [
+          /* @__PURE__ */ jsx51("span", { className: `${classBase29}Node-toggle` }),
           title
-        ] }) : /* @__PURE__ */ jsxs25("div", { className: `${classBase25}Node-label`, children: [
-          child.icon ? /* @__PURE__ */ jsx47(
+        ] }) : /* @__PURE__ */ jsxs28("div", { className: `${classBase29}Node-label`, children: [
+          child.icon ? /* @__PURE__ */ jsx51(
             "span",
             {
-              className: `${classBase25}Node-icon`,
+              className: `${classBase29}Node-icon`,
               "data-icon": child.icon
             }
           ) : null,
-          /* @__PURE__ */ jsx47("span", { children: title })
+          /* @__PURE__ */ jsx51("span", { children: title })
         ] }),
-        /* @__PURE__ */ jsx47("ul", { role: "group", children: isExpanded(child) ? renderSourceContent(child.childNodes, idx) : "" })
+        /* @__PURE__ */ jsx51("ul", { role: "group", children: isExpanded(child) ? renderSourceContent(child.childNodes, idx) : "" })
       )
     );
   }
@@ -13318,14 +13685,14 @@ var Tree = forwardRef24(function Tree2({
       return listItems;
     }
   }
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx51(
     "ul",
     {
       ...htmlAttributes,
       ...listProps,
-      className: cx24(classBase25, className),
+      className: cx27(classBase29, className),
       id: `Tree-${id}`,
-      ref: useForkRef9(rootRef, forwardedRef),
+      ref: useForkRef11(rootRef, forwardedRef),
       role: "tree",
       tabIndex: 0,
       children: renderSourceContent(visibleData)
@@ -13339,7 +13706,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: cx24("vuuTreeNode", className, {
+  className: cx27("vuuTreeNode", className, {
     focusVisible: focusVisible === idx.value
   })
 });
@@ -13359,7 +13726,10 @@ export {
   CollectionProvider,
   ComboBox,
   CycleStateButton,
+  DateInput,
   DatePicker,
+  DatePopup,
+  DateRangeInput,
   DateRangePicker,
   DragDropProvider,
   DragDropState,
@@ -13400,6 +13770,7 @@ export {
   RadioIcon,
   Space,
   SplitButton,
+  SplitStateButton,
   Tab,
   Tabstrip,
   Toolbar,