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

package/esm/index.js

@@ -2536,9 +2536,9 @@ var getNonWrappedAndWrappedItems = (container, orientation = "horizontal") => {
   }
   return [nonWrappedItems, wrappedItems];
 };
-var applyOverflowClassToWrappedItems = (container, overflowedItems, classBase24) => {
+var applyOverflowClassToWrappedItems = (container, overflowedItems, classBase26) => {
   let ignoreOverflow = false;
-  const className = classBase24 ? `${classBase24}-overflowed` : "overflow";
+  const className = classBase26 ? `${classBase26}-overflowed` : "overflow";
   if (overflowedItems.find(({ index }) => index === "overflow")) {
     if (overflowedItems.length === 1) {
       ignoreOverflow = true;
@@ -10097,8 +10097,43 @@ 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 jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs15 } from "react/jsx-runtime";
 var Checkbox = (props) => {
   const { onToggle, checked, label } = props;
   return /* @__PURE__ */ jsxs15(
@@ -10108,7 +10143,7 @@ var Checkbox = (props) => {
       onClick: onToggle,
       onKeyUp: (e) => e.key === " " && onToggle(),
       children: [
-        /* @__PURE__ */ jsx33(CheckboxIcon, { tabIndex: 0, checked }),
+        /* @__PURE__ */ jsx35(CheckboxIcon, { tabIndex: 0, checked }),
         label
       ]
     }
@@ -10116,13 +10151,13 @@ var Checkbox = (props) => {
 };
 
 // src/inputs/RadioButton.tsx
-import { jsx as jsx34, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs16 } 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__ */ jsx34("input", { type: "radio", name: groupName }),
-      /* @__PURE__ */ jsx34(RadioIcon, { checked })
+      /* @__PURE__ */ jsx36("input", { type: "radio", name: groupName }),
+      /* @__PURE__ */ jsx36(RadioIcon, { checked })
     ] }),
     label
   ] });
@@ -10132,12 +10167,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 forwardRef21, useMemo as useMemo17 } from "react";
+import { forwardRef as forwardRef22, useMemo as useMemo17 } from "react";
 
 // src/instrument-picker/SearchCell.tsx
 import { registerComponent } from "@vuu-ui/vuu-utils";
-import { jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
-var classBase13 = "vuuSearchCell";
+import { jsx as jsx37, jsxs as jsxs17 } from "react/jsx-runtime";
+var classBase15 = "vuuSearchCell";
 var SearchCell = ({
   column,
   columnMap,
@@ -10145,8 +10180,8 @@ var SearchCell = ({
 }) => {
   const key = columnMap[column.name];
   const value = row[key];
-  return /* @__PURE__ */ jsxs17("div", { className: classBase13, tabIndex: -1, children: [
-    /* @__PURE__ */ jsx35("span", { "data-icon": "draggable" }),
+  return /* @__PURE__ */ jsxs17("div", { className: classBase15, tabIndex: -1, children: [
+    /* @__PURE__ */ jsx37("span", { "data-icon": "draggable" }),
     value
   ] });
 };
@@ -10241,12 +10276,12 @@ var useInstrumentPicker = ({
 };
 
 // src/instrument-picker/InstrumentPicker.tsx
-import { jsx as jsx36, jsxs as jsxs18 } from "react/jsx-runtime";
-var classBase14 = "vuuInstrumentPicker";
+import { jsx as jsx38, jsxs as jsxs18 } from "react/jsx-runtime";
+var classBase16 = "vuuInstrumentPicker";
 if (typeof SearchCell !== "function") {
   console.warn("Instrument Picker: SearchCell module not loaded ");
 }
-var InstrumentPicker = forwardRef21(function InstrumentPicker2({
+var InstrumentPicker = forwardRef22(function InstrumentPicker2({
   TableProps: { dataSource, ...TableProps3 },
   className,
   columnMap,
@@ -10278,7 +10313,7 @@ var InstrumentPicker = forwardRef21(function InstrumentPicker2({
     onSelect,
     searchColumns
   });
-  const endAdornment = useMemo17(() => /* @__PURE__ */ jsx36("span", { "data-icon": "chevron-down" }), []);
+  const endAdornment = useMemo17(() => /* @__PURE__ */ jsx38("span", { "data-icon": "chevron-down" }), []);
   const tableProps = {
     ...TableProps3,
     config: {
@@ -10299,7 +10334,7 @@ var InstrumentPicker = forwardRef21(function InstrumentPicker2({
       ref: forwardedRef,
       width,
       children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx38(
           Input4,
           {
             ...inputProps,
@@ -10308,14 +10343,14 @@ var InstrumentPicker = forwardRef21(function InstrumentPicker2({
             value
           }
         ),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx38(
           Table,
           {
             rowHeight: 25,
             renderBufferSize: 100,
             ...tableProps,
             ...tableHandlers,
-            className: `${classBase14}-list`,
+            className: `${classBase16}-list`,
             height: 200,
             highlightedIndex,
             dataSource,
@@ -10336,13 +10371,13 @@ import {
   useControlledTableNavigation as useControlledTableNavigation2
 } from "@vuu-ui/vuu-table";
 import { Input as Input5 } from "@salt-ds/core";
-import cx15 from "clsx";
+import cx17 from "clsx";
 import { useCallback as useCallback47 } from "react";
 
 // src/instrument-search/SearchCell.tsx
 import { registerComponent as registerComponent2 } from "@vuu-ui/vuu-utils";
-import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
-var classBase15 = "vuuSearchCell";
+import { jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
+var classBase17 = "vuuSearchCell";
 var SearchCell2 = ({
   column,
   columnMap,
@@ -10350,8 +10385,8 @@ var SearchCell2 = ({
 }) => {
   const key = columnMap[column.name];
   const value = row[key];
-  return /* @__PURE__ */ jsxs19("div", { className: classBase15, tabIndex: -1, children: [
-    /* @__PURE__ */ jsx37("span", { "data-icon": "draggable" }),
+  return /* @__PURE__ */ jsxs19("div", { className: classBase17, tabIndex: -1, children: [
+    /* @__PURE__ */ jsx39("span", { "data-icon": "draggable" }),
     value
   ] });
 };
@@ -10395,8 +10430,8 @@ var useInstrumentSearch = ({
 };
 
 // src/instrument-search/InstrumentSearch.tsx
-import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
-var classBase16 = "vuuInstrumentSearch";
+import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
+var classBase18 = "vuuInstrumentSearch";
 if (typeof SearchCell2 !== "function") {
   console.warn("Instrument Search: SearchCell module not loaded ");
 }
@@ -10416,7 +10451,7 @@ var defaultTableConfig = {
   ],
   rowSeparators: true
 };
-var searchIcon = /* @__PURE__ */ jsx38("span", { "data-icon": "search" });
+var searchIcon = /* @__PURE__ */ jsx40("span", { "data-icon": "search" });
 var InstrumentSearch = ({
   TableProps: TableProps3,
   autoFocus = false,
@@ -10438,8 +10473,8 @@ var InstrumentSearch = ({
       (_a3 = el == null ? void 0 : el.querySelector("input")) == null ? void 0 : _a3.focus();
     }, 100);
   }, []);
-  return /* @__PURE__ */ jsxs20("div", { ...htmlAttributes, className: cx15(classBase16, className), children: [
-    /* @__PURE__ */ jsx38("div", { className: `${classBase16}-inputField`, children: /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs20("div", { ...htmlAttributes, className: cx17(classBase18, className), children: [
+    /* @__PURE__ */ jsx40("div", { className: `${classBase18}-inputField`, children: /* @__PURE__ */ jsx40(
       Input5,
       {
         inputProps: { onKeyDown },
@@ -10450,7 +10485,7 @@ var InstrumentSearch = ({
         onChange
       }
     ) }),
-    dataSource ? /* @__PURE__ */ jsx38(
+    dataSource ? /* @__PURE__ */ jsx40(
       Table2,
       {
         disableFocus: true,
@@ -10460,7 +10495,7 @@ var InstrumentSearch = ({
         highlightedIndex: highlightedIndexRef.current,
         renderBufferSize: 100,
         ...TableProps3,
-        className: `${classBase16}-list`,
+        className: `${classBase18}-list`,
         dataSource,
         navigationStyle: "row",
         onHighlight,
@@ -10480,9 +10515,9 @@ import {
   numericFormatter
 } from "@vuu-ui/vuu-utils";
 import { memo, useMemo as useMemo19, useRef as useRef34 } from "react";
-import cx16 from "clsx";
-import { jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
-var classBase17 = "vuuPriceTicker";
+import cx18 from "clsx";
+import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
+var classBase19 = "vuuPriceTicker";
 var getValueFormatter = (decimals) => numericFormatter({
   type: {
     name: "number",
@@ -10506,9 +10541,9 @@ var PriceTicker = memo(
     const formatNumber = useMemo19(() => getValueFormatter(decimals), [decimals]);
     const direction = isValidNumber5(prevValue) ? getMovingValueDirection(price, prevDirection, prevValue, decimals) : "";
     ref.current = [price, direction];
-    return /* @__PURE__ */ jsxs21("div", { ...htmlAttributes, className: cx16(classBase17, className, direction), children: [
+    return /* @__PURE__ */ jsxs21("div", { ...htmlAttributes, className: cx18(classBase19, className, direction), children: [
       formatNumber(price),
-      showArrow ? /* @__PURE__ */ jsx39("span", { "data-icon": "price-arrow" }) : null
+      showArrow ? /* @__PURE__ */ jsx41("span", { "data-icon": "price-arrow" }) : null
     ] });
   }
 );
@@ -10516,7 +10551,7 @@ PriceTicker.displayName = "PriceTicker";
 
 // src/split-button/SplitButton.tsx
 import { PopupMenu as PopupMenu2 } from "@vuu-ui/vuu-popups";
-import { Button as Button5 } from "@salt-ds/core";
+import { Button as Button6 } from "@salt-ds/core";
 
 // src/split-button/useSplitButton.ts
 import { dispatchMouseEvent as dispatchMouseEvent2 } from "@vuu-ui/vuu-utils";
@@ -10527,7 +10562,7 @@ import {
 var useSplitButton = ({
   ButtonProps: ButtonPropsProp,
   PopupMenuProps: PopupMenuProps3,
-  classBase: classBase24,
+  classBase: classBase26,
   onClick,
   segmented
 }) => {
@@ -10536,39 +10571,47 @@ var useSplitButton = ({
   const onMenuClose = useCallback48((reason) => {
     var _a2;
     if ((reason == null ? void 0 : reason.type) !== "tab-away") {
-      (_a2 = rootRef.current) == null ? void 0 : _a2.focus();
+      const buttonMain = (_a2 = rootRef.current) == null ? void 0 : _a2.querySelector(
+        ".vuuSplitButton-main"
+      );
+      buttonMain == null ? void 0 : buttonMain.focus();
     }
   }, []);
   const menuProps = {
     ...PopupMenuProps3,
     anchorElement: rootRef,
-    menuClassName: `${classBase24}-menu`,
+    menuClassName: `${classBase26}-menu`,
     onMenuClose,
     popupPlacement: "below-full-width"
   };
-  const handleRootFocus = useCallback48(
-    (evt) => {
-      var _a2;
-      const { classList } = evt.target;
-      if (!segmented && classList.contains(classBase24)) {
-        (_a2 = buttonRef.current) == null ? void 0 : _a2.focus();
+  const handleRootFocus = useCallback48(() => {
+    const { current: splitButton } = rootRef;
+    if (!(splitButton == null ? void 0 : splitButton.classList.contains("vuuFocusVisible"))) {
+      splitButton == null ? void 0 : splitButton.classList.add("vuuFocusVisible");
+    }
+  }, []);
+  const handleRootBlur = useCallback48((evt) => {
+    const { current: splitButton } = rootRef;
+    const target = evt.relatedTarget;
+    if (!(splitButton == null ? void 0 : splitButton.contains(target))) {
+      if (splitButton == null ? void 0 : splitButton.classList.contains("vuuFocusVisible")) {
+        splitButton.classList.remove("vuuFocusVisible");
       }
-    },
-    [classBase24, segmented]
-  );
+    }
+  }, []);
   const handleButtonKeyDown = useCallback48(
     (evt) => {
       var _a2;
       if (evt.key === "ArrowDown") {
         const popupTrigger = (_a2 = rootRef.current) == null ? void 0 : _a2.querySelector(
-          `.${classBase24}-secondary`
+          `.${classBase26}-trigger`
         );
         if (popupTrigger) {
           dispatchMouseEvent2(popupTrigger, "click");
         }
       }
     },
-    [classBase24]
+    [classBase26]
   );
   const handleClick = useCallback48(
     (evt) => {
@@ -10576,71 +10619,76 @@ var useSplitButton = ({
     },
     [onClick]
   );
-  const ButtonProps5 = {
+  const ButtonProps6 = {
     ...ButtonPropsProp,
     onClick: segmented ? handleClick : void 0,
     onKeyDown: handleButtonKeyDown
   };
   return {
-    ButtonProps: ButtonProps5,
+    ButtonProps: ButtonProps6,
     PopupMenuProps: menuProps,
     buttonRef,
     rootRef,
     onClick: segmented ? void 0 : handleClick,
+    onBlur: handleRootBlur,
     onFocus: handleRootFocus
   };
 };
 
 // src/split-button/SplitButton.tsx
-import cx17 from "clsx";
-import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
-var classBase18 = "vuuSplitButton";
+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: ButtonProps5, buttonRef, rootRef, PopupMenuProps: PopupMenuProps3, ...rootProps } = useSplitButton({
+  const { ButtonProps: ButtonProps6, buttonRef, rootRef, PopupMenuProps: PopupMenuProps3, ...rootProps } = useSplitButton({
     ButtonProps: ButtonPropsProp,
     PopupMenuProps: PopupMenuPropsProp,
-    classBase: classBase18,
+    classBase: classBase20,
     onClick,
     segmented
   });
-  console.log({ ButtonProps: ButtonProps5 });
   return /* @__PURE__ */ jsxs22(
     "div",
     {
       ...htmlAttributes,
       ...rootProps,
-      className: cx17(classBase18, {
-        [`${classBase18}-segmented`]: segmented
+      className: cx19(classBase20, `${classBase20}-${variant}`, {
+        [`${classBase20}-disabled`]: disabled,
+        [`${classBase20}-segmented`]: segmented
       }),
       ref: rootRef,
       "data-showcase-center": true,
-      tabIndex: segmented ? void 0 : 0,
       children: [
-        /* @__PURE__ */ jsx40(
-          Button5,
+        /* @__PURE__ */ jsx42(
+          Button6,
           {
-            ...ButtonProps5,
-            className: `${classBase18}-primary`,
+            ...ButtonProps6,
+            className: `${classBase20}-main`,
+            disabled,
             ref: buttonRef,
-            variant: "secondary",
+            variant,
             children: buttonText
           }
         ),
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx42(
           PopupMenu2,
           {
             ...PopupMenuProps3,
-            className: `${classBase18}-secondary`,
+            className: `${classBase20}-trigger`,
+            disabled,
             icon: (_a2 = PopupMenuProps3 == null ? void 0 : PopupMenuProps3.icon) != null ? _a2 : "chevron-down",
-            tabIndex: segmented ? 0 : -1
+            tabIndex: segmented ? 0 : -1,
+            variant
           }
         )
       ]
@@ -10650,8 +10698,7 @@ var SplitButton = ({
 
 // src/tabstrip/Tabstrip.tsx
 import { asReactElements as asReactElements2, useId as useId9 } from "@vuu-ui/vuu-utils";
-import { Button as Button6 } from "@salt-ds/core";
-import cx18 from "clsx";
+import cx20 from "clsx";
 import React4, { useMemo as useMemo21, useRef as useRef39 } from "react";
 
 // src/tabstrip/useTabstrip.ts
@@ -11337,9 +11384,9 @@ var useTabstrip = ({
 };
 
 // src/tabstrip/Tabstrip.tsx
-import { Fragment as Fragment4, jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
-var classBase19 = "vuuTabstrip";
+var classBase21 = "vuuTabstrip";
 var Tabstrip = ({
   activeTabIndex: activeTabIndexProp,
   allowAddTab,
@@ -11386,7 +11433,7 @@ var Tabstrip = ({
     orientation
   });
   const id = useId9(idProp);
-  const className = cx18(classBase19, `${classBase19}-${orientation}`, classNameProp);
+  const className = cx20(classBase21, `${classBase21}-${orientation}`, classNameProp);
   const style = styleProp || containerStyle ? {
     ...styleProp,
     ...containerStyle
@@ -11405,7 +11452,7 @@ var Tabstrip = ({
       return React4.cloneElement(child, {
         ...tabProps,
         ...tabstripHook.navigationProps,
-        className: cx18(className2, tabClassName),
+        className: cx20(className2, tabClassName),
         closeable,
         "data-overflow-priority": selected ? "1" : void 0,
         dragging: draggedItemIndex === index,
@@ -11414,19 +11461,19 @@ var Tabstrip = ({
         id: tabId,
         index,
         key: index,
-        location: cx18(location, tabLocation),
+        location: cx20(location, tabLocation),
         selected,
         showMenuButton,
         tabIndex: selected ? 0 : -1
       });
     }).concat(
       allowAddTab ? /* @__PURE__ */ createElement2(
-        Button6,
+        IconButton,
         {
           ...tabstripHook.navigationProps,
           "aria-label": "Create Tab",
-          className: `${classBase19}-addTabButton`,
-          "data-icon": "add",
+          className: `${classBase21}-addTabButton`,
+          icon: "add",
           "data-overflow-priority": "1",
           key: "addButton",
           onClick: onClickAddTab,
@@ -11453,7 +11500,7 @@ var Tabstrip = ({
     ]
   );
   return /* @__PURE__ */ jsxs23(Fragment4, { children: [
-    /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx43(
       OverflowContainer,
       {
         ...htmlAttributes,
@@ -11475,9 +11522,9 @@ var Tabstrip = ({
 
 // src/tabstrip/Tab.tsx
 import { useForkRef as useForkRef8 } from "@salt-ds/core";
-import cx20 from "clsx";
+import cx22 from "clsx";
 import {
-  forwardRef as forwardRef22,
+  forwardRef as forwardRef23,
   useCallback as useCallback53,
   useRef as useRef40
 } from "react";
@@ -11485,9 +11532,9 @@ import {
 // src/tabstrip/TabMenu.tsx
 import { PopupMenu as PopupMenu3 } from "@vuu-ui/vuu-popups";
 import { useMemo as useMemo22 } from "react";
-import cx19 from "clsx";
-import { jsx as jsx42 } from "react/jsx-runtime";
-var classBase20 = "vuuTabMenu";
+import cx21 from "clsx";
+import { jsx as jsx44 } from "react/jsx-runtime";
+var classBase22 = "vuuTabMenu";
 var TabMenu = ({
   allowClose,
   allowRename,
@@ -11524,13 +11571,13 @@ var TabMenu = ({
       index
     ]
   );
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx44(
     PopupMenu3,
     {
-      className: classBase20,
+      className: classBase22,
       menuBuilder,
       menuActionHandler: onMenuAction,
-      menuLocation: cx19("tab", location),
+      menuLocation: cx21("tab", location),
       menuOptions,
       onMenuClose,
       tabIndex: -1,
@@ -11540,10 +11587,10 @@ var TabMenu = ({
 };
 
 // src/tabstrip/Tab.tsx
-import { jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
-var classBase21 = "vuuTab";
+import { jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
+var classBase23 = "vuuTab";
 var noop2 = () => void 0;
-var Tab = forwardRef22(function Tab2({
+var Tab = forwardRef23(function Tab2({
   ariaControls,
   children,
   className,
@@ -11600,7 +11647,7 @@ var Tab = forwardRef22(function Tab2({
   };
   const getLabel = () => {
     if (editable) {
-      return /* @__PURE__ */ jsx43(
+      return /* @__PURE__ */ jsx45(
         EditableLabel,
         {
           editing,
@@ -11631,12 +11678,12 @@ var Tab = forwardRef22(function Tab2({
       ...props,
       "aria-controls": ariaControls,
       "aria-selected": selected,
-      className: cx20(classBase21, className, {
-        [`${classBase21}-closeable`]: closeable,
+      className: cx22(classBase23, className, {
+        [`${classBase23}-closeable`]: closeable,
         "vuuDraggable-dragAway": dragging,
-        [`${classBase21}-editing`]: editing,
-        [`${classBase21}-selected`]: selected || void 0,
-        [`${classBase21}-vertical`]: orientation === "vertical",
+        [`${classBase23}-editing`]: editing,
+        [`${classBase23}-selected`]: selected || void 0,
+        [`${classBase23}-vertical`]: orientation === "vertical",
         [`vuuFocusVisible`]: focusVisible
       }),
       onClick: handleClick,
@@ -11646,15 +11693,15 @@ var Tab = forwardRef22(function Tab2({
       role: "tab",
       tabIndex,
       children: [
-        /* @__PURE__ */ jsx43("div", { className: `${classBase21}-main`, children: /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx45("div", { className: `${classBase23}-main`, children: /* @__PURE__ */ jsx45(
           "span",
           {
-            className: `${classBase21}-text`,
+            className: `${classBase23}-text`,
             "data-text": editable ? void 0 : label,
             children: children != null ? children : getLabel()
           }
         ) }),
-        showMenuButton ? /* @__PURE__ */ jsx43(
+        showMenuButton ? /* @__PURE__ */ jsx45(
           TabMenu,
           {
             allowClose: closeable,
@@ -11674,7 +11721,7 @@ var Tab = forwardRef22(function Tab2({
 
 // src/toolbar/Toolbar.tsx
 import { asReactElements as asReactElements3, useId as useId10 } from "@vuu-ui/vuu-utils";
-import cx21 from "clsx";
+import cx23 from "clsx";
 import React5, { useMemo as useMemo23, useRef as useRef43 } from "react";
 
 // src/toolbar/useToolbar.ts
@@ -12201,8 +12248,8 @@ var useToolbar = ({
 };
 
 // src/toolbar/Toolbar.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
-var classBase22 = "vuuToolbar";
+import { jsx as jsx46 } from "react/jsx-runtime";
+var classBase24 = "vuuToolbar";
 var Toolbar = ({
   activeItemIndex: activeItemIndexProp,
   alignItems = "start",
@@ -12244,7 +12291,7 @@ var Toolbar = ({
       const selected = activeItemIndex.includes(index);
       return React5.cloneElement(child, {
         ...forwardCallbackProps(ownProps, itemProps),
-        className: cx21("vuuToolbarItem", itemClassName),
+        className: cx23("vuuToolbarItem", itemClassName),
         "data-overflow-priority": selected ? "1" : void 0,
         id: itemId,
         key: index,
@@ -12254,15 +12301,15 @@ var Toolbar = ({
     }),
     [activeItemIndex, children, focusableIdx, id, itemProps]
   );
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx46(
     OverflowContainer,
     {
       ...props,
       ...toolbarHook.containerProps,
-      className: cx21(className, classBase22, `${classBase22}-${orientation}`, {
-        [`${classBase22}-alignCenter`]: alignItems === "center",
-        [`${classBase22}-alignEnd`]: alignItems === "end",
-        [`${classBase22}-withSeparators`]: showSeparators
+      className: cx23(className, classBase24, `${classBase24}-${orientation}`, {
+        [`${classBase24}-alignCenter`]: alignItems === "center",
+        [`${classBase24}-alignEnd`]: alignItems === "end",
+        [`${classBase24}-withSeparators`]: showSeparators
       }),
       ...props,
       ref: rootRef,
@@ -12273,9 +12320,9 @@ var Toolbar = ({
 
 // src/tree/Tree.tsx
 import { useForkRef as useForkRef9, useIdMemo as useId11 } from "@salt-ds/core";
-import cx22 from "clsx";
+import cx24 from "clsx";
 import {
-  forwardRef as forwardRef23,
+  forwardRef as forwardRef24,
   useRef as useRef50
 } from "react";
 
@@ -13140,14 +13187,14 @@ var useTree = ({
 };
 
 // src/tree/Tree.tsx
-import { jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs25 } from "react/jsx-runtime";
 import { createElement as createElement3 } from "react";
-var classBase23 = "vuuTree";
+var classBase25 = "vuuTree";
 var isExpanded = (node) => node.expanded === true;
 var TreeNode = ({ children, idx, ...props }) => {
-  return /* @__PURE__ */ jsx45("li", { ...props, children });
+  return /* @__PURE__ */ jsx47("li", { ...props, children });
 };
-var Tree = forwardRef23(function Tree2({
+var Tree = forwardRef24(function Tree2({
   allowDragDrop,
   className,
   defaultSelected,
@@ -13212,8 +13259,8 @@ var Tree = forwardRef23(function Tree2({
           ...propsCommonToAllListItems,
           ...getListItemProps(item, idx, highlightedIdx, selected, focusVisible),
           children: [
-            item.icon ? /* @__PURE__ */ jsx45("span", { className: `${classBase23}Node-icon`, "data-icon": item.icon }) : null,
-            /* @__PURE__ */ jsx45("span", { children: item.label })
+            item.icon ? /* @__PURE__ */ jsx47("span", { className: `${classBase25}Node-icon`, "data-icon": item.icon }) : null,
+            /* @__PURE__ */ jsx47("span", { children: item.label })
           ]
         }
       )
@@ -13231,9 +13278,9 @@ var Tree = forwardRef23(function Tree2({
           "aria-expanded": child.expanded,
           "aria-level": child.level,
           "aria-selected": selected.includes(id2) || void 0,
-          className: cx22(`${classBase23}Node`, {
+          className: cx24(`${classBase25}Node`, {
             focusVisible: focusVisible === i,
-            [`${classBase23}Node-toggle`]: !allowGroupSelect
+            [`${classBase25}Node-toggle`]: !allowGroupSelect
           }),
           "data-idx": i,
           "data-highlighted": i === highlightedIdx || void 0,
@@ -13241,20 +13288,20 @@ var Tree = forwardRef23(function Tree2({
           id: id2,
           key: `header-${i}`
         },
-        allowGroupSelect ? /* @__PURE__ */ jsxs25("div", { className: `${classBase23}Node-label`, children: [
-          /* @__PURE__ */ jsx45("span", { className: `${classBase23}Node-toggle` }),
+        allowGroupSelect ? /* @__PURE__ */ jsxs25("div", { className: `${classBase25}Node-label`, children: [
+          /* @__PURE__ */ jsx47("span", { className: `${classBase25}Node-toggle` }),
           title
-        ] }) : /* @__PURE__ */ jsxs25("div", { className: `${classBase23}Node-label`, children: [
-          child.icon ? /* @__PURE__ */ jsx45(
+        ] }) : /* @__PURE__ */ jsxs25("div", { className: `${classBase25}Node-label`, children: [
+          child.icon ? /* @__PURE__ */ jsx47(
             "span",
             {
-              className: `${classBase23}Node-icon`,
+              className: `${classBase25}Node-icon`,
               "data-icon": child.icon
             }
           ) : null,
-          /* @__PURE__ */ jsx45("span", { children: title })
+          /* @__PURE__ */ jsx47("span", { children: title })
         ] }),
-        /* @__PURE__ */ jsx45("ul", { role: "group", children: isExpanded(child) ? renderSourceContent(child.childNodes, idx) : "" })
+        /* @__PURE__ */ jsx47("ul", { role: "group", children: isExpanded(child) ? renderSourceContent(child.childNodes, idx) : "" })
       )
     );
   }
@@ -13271,12 +13318,12 @@ var Tree = forwardRef23(function Tree2({
       return listItems;
     }
   }
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx47(
     "ul",
     {
       ...htmlAttributes,
       ...listProps,
-      className: cx22(classBase23, className),
+      className: cx24(classBase25, className),
       id: `Tree-${id}`,
       ref: useForkRef9(rootRef, forwardedRef),
       role: "tree",
@@ -13292,7 +13339,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: cx22("vuuTreeNode", className, {
+  className: cx24("vuuTreeNode", className, {
     focusVisible: focusVisible === idx.value
   })
 });
@@ -13331,6 +13378,8 @@ export {
   HeightOnly,
   Highlighter,
   Home,
+  Icon,
+  IconButton,
   InstrumentPicker,
   InstrumentSearch,
   LIST_FOCUS_VISIBLE,