@deadragdoll/reactnu 0.1.56 → 0.1.74

package/dist/index.js

@@ -2,18 +2,21 @@
 import {
   Fragment as Fragment4,
   useContext as useContext8,
-  useState as useState10
+  useState as useState11
 } from "react";
 
 // src/components/MainMenu/MainMenu.tsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef as useRef2, useState as useState2 } from "react";
 
 // src/components/MainMenu/MainMenu.types.ts
 function isMainMenuDivider(item) {
   return item.type === "divider";
 }
+function isMainMenuSpacer(item) {
+  return item.type === "spacer";
+}
 function isMainMenuItem(item) {
-  return item.type !== "divider";
+  return item.type === void 0 || item.type === "item";
 }
 
 // src/components/Glyph/NuGlyph.tsx
@@ -239,8 +242,66 @@ function NuGlyph({ className, name, ...props }) {
   );
 }
 
+// src/components/Spacer/Spacer.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Spacer({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      ...props,
+      "aria-hidden": props["aria-hidden"] ?? true,
+      className: ["nu-spacer", className].filter(Boolean).join(" ")
+    }
+  );
+}
+
+// src/components/MainMenu/internals/MainMenuSubmenuShell.tsx
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function MainMenuSubmenuShell({
+  children,
+  placement
+}) {
+  const shellRef = useRef(null);
+  const [opensLeft, setOpensLeft] = useState(false);
+  useLayoutEffect(() => {
+    const shellNode = shellRef.current;
+    if (!shellNode) {
+      return;
+    }
+    const parentNode = shellNode.parentElement;
+    if (!parentNode) {
+      return;
+    }
+    const submenuNode = shellNode;
+    const ownerNode = parentNode;
+    function updateDirection() {
+      const parentBounds = ownerNode.getBoundingClientRect();
+      const viewportWidth = document.documentElement.clientWidth;
+      const shouldOpenLeft = parentBounds.right + submenuNode.offsetWidth > viewportWidth;
+      setOpensLeft(
+        (currentValue) => currentValue === shouldOpenLeft ? currentValue : shouldOpenLeft
+      );
+    }
+    updateDirection();
+    window.addEventListener("resize", updateDirection);
+    return () => {
+      window.removeEventListener("resize", updateDirection);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: `nu-main-menu__submenu-shell nu-main-menu__submenu-shell--${placement}`,
+      "data-open-left": opensLeft || void 0,
+      ref: shellRef,
+      children
+    }
+  );
+}
+
 // src/utils/renderMnemonicText.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function parseMnemonicText(inputText) {
   const outputChars = [];
   let mnemonicIndex = null;
@@ -277,7 +338,7 @@ function renderMnemonicText(text, keyClassName = "nu-mnemonic__key") {
   }
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
     parsedText.slice(0, mnemonicIndex),
-    /* @__PURE__ */ jsx2("span", { className: keyClassName, children: parsedText.slice(mnemonicIndex, mnemonicIndex + 1) }),
+    /* @__PURE__ */ jsx4("span", { className: keyClassName, children: parsedText.slice(mnemonicIndex, mnemonicIndex + 1) }),
     parsedText.slice(mnemonicIndex + 1)
   ] });
 }
@@ -286,7 +347,7 @@ function renderMnemonicNode(value, keyClassName = "nu-mnemonic__key") {
 }
 
 // src/components/MainMenu/internals/MainMenuList.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function getVisibleItems(items) {
   return items.filter((item) => !item.hidden);
 }
@@ -315,14 +376,14 @@ function MainMenuList({
   const visibleItems = getVisibleItems(items);
   const isRootBar = level === 0 && rootVariant === "bar";
   const isPopupRow = !isRootBar;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       className: isRootBar ? "nu-main-menu__bar" : "nu-main-menu__popup nu-main-menu__popup--submenu",
       role: "menu",
       children: visibleItems.map((item) => {
         if (isMainMenuDivider(item)) {
-          return /* @__PURE__ */ jsx3(
+          return /* @__PURE__ */ jsx5(
             "div",
             {
               className: "nu-main-menu__divider",
@@ -331,10 +392,18 @@ function MainMenuList({
             item.id
           );
         }
-        const hasChildren = Boolean(item.items?.some((child) => !child.hidden));
+        if (isMainMenuSpacer(item)) {
+          return isRootBar ? /* @__PURE__ */ jsx5(Spacer, { className: "nu-main-menu__spacer" }, item.id) : null;
+        }
+        const hasChildren = Boolean(
+          item.items?.some((child) => isMainMenuItem(child) && !child.hidden)
+        );
         const isCheckable = item.checkable === true;
         const isOpen = activePath[level] === item.id;
         const isChecked = item.checked === true;
+        const hasCheckMark = isCheckable || isChecked;
+        const hasLeadingAdornment = isPopupRow && (hasCheckMark || Boolean(item.icon));
+        const shortcut = isPopupRow && !hasChildren ? resolveItemShortcut(item) : null;
         return /* @__PURE__ */ jsxs3(
           "div",
           {
@@ -353,42 +422,42 @@ function MainMenuList({
                   "aria-expanded": hasChildren ? isOpen : void 0,
                   "aria-haspopup": hasChildren || void 0,
                   className: "nu-main-menu__item-button",
+                  "data-has-leading": hasLeadingAdornment || void 0,
                   disabled: item.disabled,
                   onClick: () => onActivateItem(item, level),
                   type: "button",
                   children: [
-                    isPopupRow ? /* @__PURE__ */ jsx3(
-                      "span",
-                      {
-                        "aria-hidden": "true",
-                        className: [
-                          "nu-main-menu__check",
-                          isChecked ? "nu-main-menu__check--active" : null
-                        ].filter(Boolean).join(" "),
-                        children: isCheckable ? /* @__PURE__ */ jsx3(
-                          "span",
-                          {
-                            className: "nu-main-menu__check-box",
-                            "data-unchecked-shape": uncheckedShape,
-                            children: isChecked ? /* @__PURE__ */ jsx3(NuGlyph, { name: "check-mark" }) : null
-                          }
-                        ) : isChecked ? /* @__PURE__ */ jsx3(NuGlyph, { name: "check-mark" }) : null
-                      }
-                    ) : null,
-                    isPopupRow ? /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", className: "nu-main-menu__icon", children: item.icon }) : null,
-                    /* @__PURE__ */ jsx3("span", { className: "nu-main-menu__label", children: renderItemLabel(item) }),
-                    isPopupRow ? /* @__PURE__ */ jsx3("span", { className: "nu-main-menu__shortcut", children: resolveItemShortcut(item) }) : null,
-                    isPopupRow ? /* @__PURE__ */ jsx3("span", { className: "nu-main-menu__submenu-arrow", children: hasChildren ? "\u25B6" : "" }) : null
+                    hasLeadingAdornment ? /* @__PURE__ */ jsxs3("span", { "aria-hidden": "true", className: "nu-main-menu__leading", children: [
+                      hasCheckMark ? /* @__PURE__ */ jsx5(
+                        "span",
+                        {
+                          className: [
+                            "nu-main-menu__check",
+                            isChecked ? "nu-main-menu__check--active" : null
+                          ].filter(Boolean).join(" "),
+                          children: isCheckable ? /* @__PURE__ */ jsx5(
+                            "span",
+                            {
+                              className: "nu-main-menu__check-box",
+                              "data-unchecked-shape": uncheckedShape,
+                              children: isChecked ? /* @__PURE__ */ jsx5(NuGlyph, { name: "check-mark" }) : null
+                            }
+                          ) : /* @__PURE__ */ jsx5(NuGlyph, { name: "check-mark" })
+                        }
+                      ) : null,
+                      item.icon ? /* @__PURE__ */ jsx5("span", { className: "nu-main-menu__icon", children: item.icon }) : null
+                    ] }) : null,
+                    /* @__PURE__ */ jsx5("span", { className: "nu-main-menu__label", children: renderItemLabel(item) }),
+                    shortcut ? /* @__PURE__ */ jsx5("span", { className: "nu-main-menu__shortcut", children: shortcut }) : null,
+                    isPopupRow && hasChildren ? /* @__PURE__ */ jsx5("span", { className: "nu-main-menu__submenu-arrow", children: "\u25B6" }) : null
                   ]
                 }
               ),
-              hasChildren && isOpen && item.items ? /* @__PURE__ */ jsx3(
-                "div",
+              hasChildren && isOpen && item.items ? /* @__PURE__ */ jsx5(
+                MainMenuSubmenuShell,
                 {
-                  className: [
-                    isRootBar ? "nu-main-menu__submenu-shell nu-main-menu__submenu-shell--root" : "nu-main-menu__submenu-shell nu-main-menu__submenu-shell--submenu"
-                  ].join(" "),
-                  children: /* @__PURE__ */ jsx3(
+                  placement: isRootBar ? "root" : "submenu",
+                  children: /* @__PURE__ */ jsx5(
                     MainMenuList,
                     {
                       activePath,
@@ -411,9 +480,11 @@ function MainMenuList({
 }
 
 // src/components/MainMenu/MainMenu.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function hasVisibleChildren(item) {
-  return Boolean(item.items?.some((child) => !child.hidden));
+  return Boolean(
+    item.items?.some((child) => isMainMenuItem(child) && !child.hidden)
+  );
 }
 function MainMenu({
   className,
@@ -422,8 +493,8 @@ function MainMenu({
   uncheckedShape = "box",
   ...props
 }) {
-  const rootRef = useRef(null);
-  const [activePath, setActivePath] = useState([]);
+  const rootRef = useRef2(null);
+  const [activePath, setActivePath] = useState2([]);
   useEffect(() => {
     function handlePointerDown(event) {
       if (!rootRef.current?.contains(event.target)) {
@@ -467,13 +538,13 @@ function MainMenu({
       return [...currentPath.slice(0, level), item.id];
     });
   }
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       ...props,
       className: ["nu-main-menu", className].filter(Boolean).join(" "),
       ref: rootRef,
-      children: /* @__PURE__ */ jsx4(
+      children: /* @__PURE__ */ jsx6(
         MainMenuList,
         {
           activePath,
@@ -489,10 +560,10 @@ function MainMenu({
 }
 
 // src/components/MainMenu/menuState.ts
-import { useCallback, useMemo, useState as useState2 } from "react";
+import { useCallback, useMemo, useState as useState3 } from "react";
 function patchMenuItem(items, id, patch) {
   return items.map((item) => {
-    if (item.id === id && !isMainMenuDivider(item)) {
+    if (item.id === id && isMainMenuItem(item)) {
       return {
         ...item,
         ...patch
@@ -508,10 +579,10 @@ function patchMenuItem(items, id, patch) {
   });
 }
 function hasVisibleMainMenuItems(items) {
-  return items.some((item) => !item.hidden);
+  return items.some((item) => isMainMenuItem(item) && !item.hidden);
 }
 function useMainMenuState(initialMainMenu = []) {
-  const [mainMenu, setMainMenu] = useState2(initialMainMenu);
+  const [mainMenu, setMainMenu] = useState3(initialMainMenu);
   const setMenuItem = useCallback((id, patch) => {
     setMainMenu((currentMenu) => patchMenuItem(currentMenu, id, patch));
   }, []);
@@ -578,7 +649,7 @@ function useMainMenuState(initialMainMenu = []) {
   const toggleMenuChecked = useCallback((id) => {
     setMainMenu(
       (currentMenu) => currentMenu.map((item) => {
-        if (item.id === id && !isMainMenuDivider(item)) {
+        if (item.id === id && isMainMenuItem(item)) {
           return {
             ...item,
             checked: !item.checked
@@ -646,7 +717,7 @@ function useMainMenuState(initialMainMenu = []) {
 }
 function toggleMenuCheckedInTree(items, id) {
   return items.map((item) => {
-    if (item.id === id && !isMainMenuDivider(item)) {
+    if (item.id === id && isMainMenuItem(item)) {
       return {
         ...item,
         checked: !item.checked
@@ -663,16 +734,16 @@ function toggleMenuCheckedInTree(items, id) {
 }
 
 // src/appHost/NuAppHostProvider.tsx
-import { useMemo as useMemo5, useState as useState6 } from "react";
+import { useMemo as useMemo5, useState as useState7 } from "react";
 
 // src/windowing/internals/MdiWindowPickerDialog.tsx
-import { useMemo as useMemo4, useState as useState5 } from "react";
+import { useMemo as useMemo4, useState as useState6 } from "react";
 
 // src/components/Button/Button.tsx
 import {
   useEffect as useEffect2,
-  useRef as useRef2,
-  useState as useState3
+  useRef as useRef3,
+  useState as useState4
 } from "react";
 
 // src/components/_shared/slotProps.ts
@@ -690,7 +761,7 @@ function mergeSlotStyle(baseStyle, slotStyle) {
 }
 
 // src/components/Button/Button.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function Button({
   children,
   className,
@@ -706,8 +777,8 @@ function Button({
   variant = "primary",
   ...props
 }) {
-  const buttonRef = useRef2(null);
-  const [uncontrolledFocused, setUncontrolledFocused] = useState3(defaultFocused);
+  const buttonRef = useRef3(null);
+  const [uncontrolledFocused, setUncontrolledFocused] = useState4(defaultFocused);
   const isControlled = focused !== void 0;
   const resolvedFocused = isControlled ? focused : uncontrolledFocused;
   useEffect2(() => {
@@ -759,7 +830,7 @@ function Button({
             className: cx("nu-button__face", slotClassNames?.face),
             style: slotStyles?.face,
             children: [
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx7(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -771,7 +842,7 @@ function Button({
                   style: slotStyles?.focusIndicatorLeft
                 }
               ),
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx7(
                 "span",
                 {
                   className: cx("nu-button__label", slotClassNames?.label),
@@ -779,7 +850,7 @@ function Button({
                   children: renderMnemonicNode(children)
                 }
               ),
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx7(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -794,7 +865,7 @@ function Button({
             ]
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           "span",
           {
             "aria-hidden": "true",
@@ -806,7 +877,7 @@ function Button({
             style: slotStyles?.shadowRight
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           "span",
           {
             "aria-hidden": "true",
@@ -831,8 +902,8 @@ import {
   useId,
   useImperativeHandle,
   useMemo as useMemo3,
-  useRef as useRef4,
-  useState as useState4
+  useRef as useRef5,
+  useState as useState5
 } from "react";
 
 // src/components/ListBox/internals/helpers.ts
@@ -880,18 +951,18 @@ function getListBoxItemChecked(item, checkedIds) {
 }
 
 // src/components/ListBox/internals/renderLabel.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function renderLabel(label, className) {
   return /* @__PURE__ */ jsxs5("span", { className, children: [
-    label.icon ? /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", className: `${className}-icon`, children: label.icon }) : null,
-    /* @__PURE__ */ jsx6("span", { className: `${className}-text`, children: label.text })
+    label.icon ? /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: `${className}-icon`, children: label.icon }) : null,
+    /* @__PURE__ */ jsx8("span", { className: `${className}-text`, children: label.text })
   ] });
 }
 
 // src/components/ListBox/internals/ListBoxCategoryView.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function ListBoxCategoryView({ category }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       className: ["nu-listbox__category", category.className].filter(Boolean).join(" "),
@@ -909,7 +980,7 @@ import {
   useContext,
   useEffect as useEffect3,
   useMemo as useMemo2,
-  useRef as useRef3
+  useRef as useRef4
 } from "react";
 
 // src/components/_shared/themePortal.ts
@@ -936,7 +1007,7 @@ function getThemePortalStyle(anchor) {
 }
 
 // src/components/DragDrop/NuDragDropProvider.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var DRAG_THRESHOLD = 3;
 function createDragPreview(sourceElement) {
   const rect = sourceElement.getBoundingClientRect();
@@ -1038,7 +1109,7 @@ var fallbackController = createController();
 var NuDragDropContext = createContext(null);
 function NuDragDropProvider({ children }) {
   const controller = useMemo2(() => createController(), []);
-  return /* @__PURE__ */ jsx8(NuDragDropContext.Provider, { value: controller, children });
+  return /* @__PURE__ */ jsx10(NuDragDropContext.Provider, { value: controller, children });
 }
 function useNuDragDrop() {
   return useContext(NuDragDropContext) ?? fallbackController;
@@ -1059,7 +1130,7 @@ function useNuDragSource({
   sourceType
 }) {
   const controller = useNuDragDrop();
-  const stateRef = useRef3({
+  const stateRef = useRef4({
     dragging: false,
     pointerId: -1,
     sourceElement: null,
@@ -1134,14 +1205,14 @@ function useNuDragSource({
 }
 
 // src/components/ListBox/internals/ListBoxCheckControl.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function ListBoxCheckControl({
   isChecked,
   onActivate,
   onToggleCheck,
   uncheckedShape
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     "button",
     {
       "aria-label": isChecked ? "Uncheck item" : "Check item",
@@ -1153,13 +1224,13 @@ function ListBoxCheckControl({
         onToggleCheck();
       },
       type: "button",
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx11(
         "span",
         {
           "aria-hidden": "true",
           className: "nu-listbox__check-box",
           "data-unchecked-shape": uncheckedShape,
-          children: isChecked ? /* @__PURE__ */ jsx9(NuGlyph, { className: "nu-listbox__check-indicator", name: "check-mark" }) : null
+          children: isChecked ? /* @__PURE__ */ jsx11(NuGlyph, { className: "nu-listbox__check-indicator", name: "check-mark" }) : null
         }
       )
     }
@@ -1167,7 +1238,7 @@ function ListBoxCheckControl({
 }
 
 // src/components/ListBox/internals/ListBoxItemView.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 function ListBoxItemViewInner({
   group,
   getDragItem,
@@ -1209,7 +1280,7 @@ function ListBoxItemViewInner({
   function handleToggleCheck() {
     onToggleCheck(itemId);
   }
-  const checkControl = item.checkable ? /* @__PURE__ */ jsx10(
+  const checkControl = item.checkable ? /* @__PURE__ */ jsx12(
     ListBoxCheckControl,
     {
       isChecked,
@@ -1247,7 +1318,7 @@ function ListBoxItemViewInner({
           rightCheckBox ? null : checkControl,
           renderLabel(item.name, "nu-listbox__item-label")
         ] }),
-        item.details ? /* @__PURE__ */ jsx10("span", { className: "nu-listbox__item-details", children: item.details }) : null,
+        item.details ? /* @__PURE__ */ jsx12("span", { className: "nu-listbox__item-details", children: item.details }) : null,
         rightCheckBox ? checkControl : null
       ]
     }
@@ -1256,7 +1327,7 @@ function ListBoxItemViewInner({
 var ListBoxItemView = memo(ListBoxItemViewInner);
 
 // src/components/ListBox/internals/ListBoxGroupView.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function ListBoxGroupView({
   group,
   groupIndex,
@@ -1275,7 +1346,7 @@ function ListBoxGroupView({
   uncheckedShape
 }) {
   return /* @__PURE__ */ jsxs7("div", { className: "nu-listbox__group", role: "group", children: [
-    group.category ? /* @__PURE__ */ jsx11(ListBoxCategoryView, { category: group.category }) : null,
+    group.category ? /* @__PURE__ */ jsx13(ListBoxCategoryView, { category: group.category }) : null,
     group.items.map((item, itemIndex) => {
       const itemId = buildListBoxItemId(
         listboxId,
@@ -1287,7 +1358,7 @@ function ListBoxGroupView({
       const isSelected = selectedId ? item.id === selectedId : item.selected;
       const isActive = resolvedActiveId === itemId;
       const isChecked = isItemChecked(item);
-      return /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx13(
         ListBoxItemView,
         {
           group,
@@ -1313,7 +1384,7 @@ function ListBoxGroupView({
 }
 
 // src/components/ListBox/ListBox.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function ListBoxInner({
   acceptsDrop,
   className,
@@ -1333,10 +1404,10 @@ function ListBoxInner({
   ...props
 }, ref) {
   const hasItems = data.some((group) => group.items.length > 0);
-  const rootRef = useRef4(null);
-  const [rootElement, setRootElement] = useState4(null);
+  const rootRef = useRef5(null);
+  const [rootElement, setRootElement] = useState5(null);
   const listboxId = useId();
-  const itemRefs = useRef4({});
+  const itemRefs = useRef5({});
   const flattenedItems = useMemo3(
     () => flattenListBoxData(data, listboxId),
     [data, listboxId]
@@ -1345,7 +1416,7 @@ function ListBoxInner({
     () => flattenedItems.filter(({ item }) => !item.disabled),
     [flattenedItems]
   );
-  const [activeId, setActiveId] = useState4(
+  const [activeId, setActiveId] = useState5(
     () => getInitialActiveId(selectableItems, selectedId)
   );
   const dropTargetOptions = useMemo3(
@@ -1505,7 +1576,7 @@ function ListBoxInner({
         break;
     }
   }
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       ...props,
@@ -1516,7 +1587,7 @@ function ListBoxInner({
       ref: setRootRef,
       role: "listbox",
       tabIndex: 0,
-      children: hasItems ? data.map((group, groupIndex) => /* @__PURE__ */ jsx12(
+      children: hasItems ? data.map((group, groupIndex) => /* @__PURE__ */ jsx14(
         ListBoxGroupView,
         {
           group,
@@ -1536,14 +1607,14 @@ function ListBoxInner({
           uncheckedShape
         },
         `${group.category?.text ?? "group"}-${groupIndex}`
-      )) : /* @__PURE__ */ jsx12("div", { className: "nu-listbox__empty", children: emptyText })
+      )) : /* @__PURE__ */ jsx14("div", { className: "nu-listbox__empty", children: emptyText })
     }
   );
 }
 var ListBox = forwardRef(ListBoxInner);
 
 // src/components/Stack/Stack.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function resolveFlexAlign(align) {
   if (align === "start") {
     return "flex-start";
@@ -1572,7 +1643,7 @@ function Stack({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       ...props,
@@ -1592,7 +1663,7 @@ function Stack({
 }
 
 // src/windowing/internals/MdiWindowPickerDialog.tsx
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 function isPickerEligibleWindow(windowEntry) {
   if (windowEntry.mode === "window") {
     return true;
@@ -1632,7 +1703,7 @@ function MdiWindowPickerDialog({
     ),
     [domain, windows]
   );
-  const [selectedId, setSelectedId] = useState5(
+  const [selectedId, setSelectedId] = useState6(
     activeWindowId ?? resolvedWindows[0]?.id ?? ""
   );
   const resolvedSelectedId = resolvedWindows.some(
@@ -1646,7 +1717,7 @@ function MdiWindowPickerDialog({
     onClose();
   }
   return /* @__PURE__ */ jsxs8(Stack, { gap: "md", children: [
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx16(
       ListBox,
       {
         data: [
@@ -1682,14 +1753,14 @@ function MdiWindowPickerDialog({
       }
     ),
     /* @__PURE__ */ jsxs8(Stack, { direction: "row", gap: "sm", children: [
-      /* @__PURE__ */ jsx14(Button, { defaultFocused: true, onClick: handleActivate, children: "Activate" }),
-      /* @__PURE__ */ jsx14(Button, { onClick: onClose, variant: "secondary", children: "Cancel" })
+      /* @__PURE__ */ jsx16(Button, { defaultFocused: true, onClick: handleActivate, children: "Activate" }),
+      /* @__PURE__ */ jsx16(Button, { onClick: onClose, variant: "secondary", children: "Cancel" })
     ] })
   ] });
 }
 
 // src/windowing/mdiMenu.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var MDI_HOST_ID = "mdi.host";
 function createMdiDivider(id) {
   return {
@@ -1728,7 +1799,7 @@ function openMdiWindowPicker(bridge) {
   bridge.openDialog({
     appModal: true,
     border: "double",
-    content: ({ close }) => /* @__PURE__ */ jsx15(
+    content: ({ close }) => /* @__PURE__ */ jsx17(
       MdiWindowPickerDialog,
       {
         activeWindowId,
@@ -1799,7 +1870,7 @@ function resolveMdiMainMenuItems(items, bridge) {
     if (isMainMenuDivider(item)) {
       return item;
     }
-    if (item.id === MDI_HOST_ID) {
+    if (isMainMenuItem(item) && item.id === MDI_HOST_ID) {
       return {
         ...item,
         items: mergeMdiMenuItems(item.items, bridge)
@@ -1846,13 +1917,13 @@ function useAppHostMenu() {
 }
 
 // src/appHost/NuAppHostProvider.tsx
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 function NuAppHostProvider({
   children,
   renderMenu = true
 }) {
   const menuState = useMainMenuState();
-  const [windowBridge, setWindowBridge] = useState6(
+  const [windowBridge, setWindowBridge] = useState7(
     null
   );
   const resolvedMainMenu = useMemo5(
@@ -1868,7 +1939,7 @@ function NuAppHostProvider({
     [menuState, windowBridge]
   );
   return /* @__PURE__ */ jsxs9(AppHostMenuContext.Provider, { value: contextValue, children: [
-    renderMenu && hasVisibleMainMenuItems(resolvedMainMenu) ? /* @__PURE__ */ jsx16(MainMenu, { items: resolvedMainMenu }) : null,
+    renderMenu && hasVisibleMainMenuItems(resolvedMainMenu) ? /* @__PURE__ */ jsx18(MainMenu, { items: resolvedMainMenu }) : null,
     children
   ] });
 }
@@ -1880,24 +1951,24 @@ import {
   useContext as useContext7,
   useEffect as useEffect6,
   useMemo as useMemo7,
-  useRef as useRef7,
-  useState as useState9
+  useRef as useRef8,
+  useState as useState10
 } from "react";
 
 // src/components/Window/Window.tsx
 import {
   memo as memo2,
   useContext as useContext5,
-  useLayoutEffect,
+  useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo6,
-  useRef as useRef5
+  useRef as useRef6
 } from "react";
 
 // src/components/Window/internals/WindowStatusBar.tsx
 import { Children } from "react";
 
 // src/components/Window/StatusBarItem.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function StatusBarItem({
   align = "start",
   children,
@@ -1905,7 +1976,7 @@ function StatusBarItem({
   grow = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     "span",
     {
       ...props,
@@ -1921,7 +1992,7 @@ function StatusBarItem({
 }
 
 // src/components/Window/internals/WindowStatusBar.tsx
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 function WindowStatusBar({
   children,
   onResizeStart,
@@ -1937,15 +2008,15 @@ function WindowStatusBar({
     {
       className: ["nu-window__status-bar", statusBarClassName].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ jsx18("span", { className: "nu-window__status-bar-items", children: hasCustomItems ? resolvedChildren : resolvedChildren.map((child, index) => /* @__PURE__ */ jsx18(StatusBarItem, { grow: index === 0, children: child }, `status-item-${index}`)) }),
-        resizable ? /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx20("span", { className: "nu-window__status-bar-items", children: hasCustomItems ? resolvedChildren : resolvedChildren.map((child, index) => /* @__PURE__ */ jsx20(StatusBarItem, { grow: index === 0, children: child }, `status-item-${index}`)) }),
+        resizable ? /* @__PURE__ */ jsx20(
           "button",
           {
             "aria-label": "Resize window",
             className: "nu-window__resize-handle",
             onPointerDown: onResizeStart,
             type: "button",
-            children: /* @__PURE__ */ jsx18(NuGlyph, { name: "window-resize" })
+            children: /* @__PURE__ */ jsx20(NuGlyph, { name: "window-resize" })
           }
         ) : null
       ]
@@ -1954,18 +2025,18 @@ function WindowStatusBar({
 }
 
 // src/components/Window/WindowTitleButton.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function renderWindowTriangleGlyph(icon) {
   const glyphNameByIcon = {
     maximize: "window-maximize",
     minimize: "window-minimize",
     restore: "window-restore"
   };
-  return /* @__PURE__ */ jsx19(NuGlyph, { className: "nu-window__title-glyph", name: glyphNameByIcon[icon] });
+  return /* @__PURE__ */ jsx21(NuGlyph, { className: "nu-window__title-glyph", name: glyphNameByIcon[icon] });
 }
 function renderTitleButtonIcon(icon) {
   if (icon === "close") {
-    return /* @__PURE__ */ jsx19(NuGlyph, { className: "nu-window__title-glyph", name: "window-close" });
+    return /* @__PURE__ */ jsx21(NuGlyph, { className: "nu-window__title-glyph", name: "window-close" });
   }
   if (icon === "minimize" || icon === "maximize" || icon === "restore") {
     return renderWindowTriangleGlyph(
@@ -1984,7 +2055,7 @@ function WindowTitleButton({
   variant = icon === "close" ? "close" : "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx21(
     "button",
     {
       ...props,
@@ -2006,7 +2077,7 @@ function WindowTitleButton({
 }
 
 // src/components/Window/internals/WindowTitleBar.tsx
-import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
 function WindowTitleBar({
   draggable,
   icon,
@@ -2025,9 +2096,9 @@ function WindowTitleBar({
         "--nu-window-title-controls-width": controlsWidth
       },
       children: [
-        /* @__PURE__ */ jsx20("span", { "aria-hidden": true, className: "nu-window__title-icon", children: icon }),
-        /* @__PURE__ */ jsx20("span", { className: "nu-window__title", children: renderMnemonicText(title) }),
-        titleButtons.length > 0 ? /* @__PURE__ */ jsx20("span", { className: "nu-window__title-controls", children: titleButtons.map((button, index) => /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx22("span", { "aria-hidden": true, className: "nu-window__title-icon", children: icon }),
+        /* @__PURE__ */ jsx22("span", { className: "nu-window__title", children: renderMnemonicText(title) }),
+        titleButtons.length > 0 ? /* @__PURE__ */ jsx22("span", { className: "nu-window__title-controls", children: titleButtons.map((button, index) => /* @__PURE__ */ jsx22(
           WindowTitleButton,
           {
             ariaLabel: button.ariaLabel,
@@ -2108,7 +2179,7 @@ function useWindowMenu() {
 }
 
 // src/components/Window/Window.tsx
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 function getWindowLayerBounds(node) {
   const parentNode = node.parentElement;
   if (!parentNode) {
@@ -2163,11 +2234,11 @@ function WindowInner({
   title,
   ...props
 }) {
-  const windowRef = useRef5(null);
-  const dragFrameRef = useRef5(null);
-  const dragPositionRef = useRef5(null);
-  const resizeFrameRef = useRef5(null);
-  const resizeSizeRef = useRef5(null);
+  const windowRef = useRef6(null);
+  const dragFrameRef = useRef6(null);
+  const dragPositionRef = useRef6(null);
+  const resizeFrameRef = useRef6(null);
+  const resizeSizeRef = useRef6(null);
   const menuState = useMainMenuState();
   const windowManager = useContext5(NuWindowContext);
   const isDraggable = draggable ?? mode === "window";
@@ -2198,7 +2269,7 @@ function WindowInner({
     onToggleMinimized
   });
   const resolvedTitleButtons = titleButtons ?? systemTitleButtons;
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!onBoundsChange || !windowRef.current || minimized) {
       return;
     }
@@ -2411,14 +2482,14 @@ function WindowInner({
         minWidth: minWidth ?? style?.minWidth ?? 240
       },
       children: [
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx23(
           "span",
           {
             "aria-hidden": true,
             className: "nu-window__shadow nu-window__shadow--right"
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx23(
           "span",
           {
             "aria-hidden": true,
@@ -2426,7 +2497,7 @@ function WindowInner({
           }
         ),
         /* @__PURE__ */ jsxs12(WindowMenuContext.Provider, { value: menuState, children: [
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx23(
             WindowTitleBar,
             {
               draggable: isDraggable,
@@ -2436,8 +2507,8 @@ function WindowInner({
               titleButtons: resolvedTitleButtons
             }
           ),
-          hasVisibleMainMenuItems(resolvedMainMenu) ? /* @__PURE__ */ jsx21(MainMenu, { items: resolvedMainMenu }) : null,
-          /* @__PURE__ */ jsx21(
+          hasVisibleMainMenuItems(resolvedMainMenu) ? /* @__PURE__ */ jsx23(MainMenu, { items: resolvedMainMenu }) : null,
+          /* @__PURE__ */ jsx23(
             "div",
             {
               className: [
@@ -2448,7 +2519,7 @@ function WindowInner({
               children
             }
           ),
-          mode === "window" && (statusBar || isResizable) ? /* @__PURE__ */ jsx21(
+          mode === "window" && (statusBar || isResizable) ? /* @__PURE__ */ jsx23(
             WindowStatusBar,
             {
               onResizeStart: handleResizePointerDown,
@@ -2465,9 +2536,9 @@ function WindowInner({
 var Window = memo2(WindowInner);
 
 // src/windowing/AppBarHost.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function AppBarHost({ children, inline = false }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx24(
     "aside",
     {
       className: [
@@ -2557,7 +2628,7 @@ function AppBarItem(props) {
 }
 
 // src/windowing/WindowBar.tsx
-import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 function buildWindowBarGroups(items) {
   const groups = [];
   const groupsByDomain = /* @__PURE__ */ new Map();
@@ -2617,7 +2688,7 @@ function WindowBar({ items, onActivateWindow }) {
     const dialogDefinition = {
       appModal: true,
       border: "double",
-      content: ({ close }) => /* @__PURE__ */ jsx23(
+      content: ({ close }) => /* @__PURE__ */ jsx25(
         MdiWindowPickerDialog,
         {
           activeWindowId: activeGroupWindowId,
@@ -2638,7 +2709,7 @@ function WindowBar({ items, onActivateWindow }) {
     };
     windowManager.openDialog(dialogDefinition);
   }
-  return /* @__PURE__ */ jsx23("div", { className: "nu-window-bar", role: "group", "aria-label": "Open windows", children: groups.map((group) => {
+  return /* @__PURE__ */ jsx25("div", { className: "nu-window-bar", role: "group", "aria-label": "Open windows", children: groups.map((group) => {
     const icon = getGroupIcon(group);
     return /* @__PURE__ */ jsxs13(
       AppBarItem,
@@ -2648,7 +2719,7 @@ function WindowBar({ items, onActivateWindow }) {
         interactive: true,
         onClick: () => activateGroup(group),
         children: [
-          icon ? /* @__PURE__ */ jsx23("span", { "aria-hidden": true, className: "nu-window-bar__icon", children: icon }) : null,
+          icon ? /* @__PURE__ */ jsx25("span", { "aria-hidden": true, className: "nu-window-bar__icon", children: icon }) : null,
           group.label
         ]
       },
@@ -2658,16 +2729,16 @@ function WindowBar({ items, onActivateWindow }) {
 }
 
 // src/windowing/dialogHelpers.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 
 // src/components/TextField/TextField.tsx
 import {
   useEffect as useEffect5,
   useId as useId2,
-  useRef as useRef6,
-  useState as useState7
+  useRef as useRef7,
+  useState as useState8
 } from "react";
-import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 function TextField({
   className,
   debounceMs = 0,
@@ -2688,8 +2759,8 @@ function TextField({
   const fieldId = id ?? generatedId;
   const hintId = hint ? `${fieldId}-hint` : void 0;
   const isControlled = value !== void 0;
-  const hasMountedRef = useRef6(false);
-  const [uncontrolledValue, setUncontrolledValue] = useState7(
+  const hasMountedRef = useRef7(false);
+  const [uncontrolledValue, setUncontrolledValue] = useState8(
     () => defaultValue == null ? "" : String(defaultValue)
   );
   const resolvedValue = isControlled ? value == null ? "" : String(value) : uncontrolledValue;
@@ -2725,7 +2796,7 @@ function TextField({
       htmlFor: fieldId,
       style: slotStyles?.root,
       children: [
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx26(
           "span",
           {
             className: cx("nu-text-field__label", slotClassNames?.label),
@@ -2739,7 +2810,7 @@ function TextField({
             className: cx("nu-text-field__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx26(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -2748,7 +2819,7 @@ function TextField({
                   children: "["
                 }
               ),
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx26(
                 "span",
                 {
                   className: cx(
@@ -2756,7 +2827,7 @@ function TextField({
                     slotClassNames?.inputShell
                   ),
                   style: slotStyles?.inputShell,
-                  children: /* @__PURE__ */ jsx24(
+                  children: /* @__PURE__ */ jsx26(
                     "input",
                     {
                       ...props,
@@ -2775,7 +2846,7 @@ function TextField({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx26(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -2787,7 +2858,7 @@ function TextField({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx24(
+        hint ? /* @__PURE__ */ jsx26(
           "span",
           {
             className: cx("nu-text-field__hint", slotClassNames?.hint),
@@ -2802,7 +2873,7 @@ function TextField({
 }
 
 // src/components/View/NuView.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function NuView({
   children,
   className,
@@ -2811,7 +2882,7 @@ function NuView({
   scroll = "auto",
   ...props
 }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       ...props,
@@ -2825,7 +2896,7 @@ function NuView({
 }
 
 // src/windowing/dialogHelpers.tsx
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 function getPresetButtons(preset) {
   switch (preset) {
     case "ok-cancel":
@@ -2928,8 +2999,8 @@ function MessageBoxDialogContent({
   const bodyStyle = kind === "error" ? {
     background: "var(--nu-color-button-danger)"
   } : void 0;
-  return /* @__PURE__ */ jsx26(NuView, { padding: "cell", style: bodyStyle, children: /* @__PURE__ */ jsxs15(Stack, { gap: "md", children: [
-    /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx28(NuView, { padding: "cell", style: bodyStyle, children: /* @__PURE__ */ jsxs15(Stack, { gap: "md", children: [
+    /* @__PURE__ */ jsx28(
       "div",
       {
         style: tone ? {
@@ -2939,7 +3010,7 @@ function MessageBoxDialogContent({
       }
     ),
     /* @__PURE__ */ jsxs15(Stack, { direction: "row", gap: "sm", justify: "center", children: [
-      ok ? /* @__PURE__ */ jsx26(
+      ok ? /* @__PURE__ */ jsx28(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2948,7 +3019,7 @@ function MessageBoxDialogContent({
           children: okLabel
         }
       ) : null,
-      yes ? /* @__PURE__ */ jsx26(
+      yes ? /* @__PURE__ */ jsx28(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2957,7 +3028,7 @@ function MessageBoxDialogContent({
           children: yesLabel
         }
       ) : null,
-      no ? /* @__PURE__ */ jsx26(
+      no ? /* @__PURE__ */ jsx28(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2966,7 +3037,7 @@ function MessageBoxDialogContent({
           children: noLabel
         }
       ) : null,
-      cancel ? /* @__PURE__ */ jsx26(
+      cancel ? /* @__PURE__ */ jsx28(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2987,9 +3058,9 @@ function InputBoxDialogContent({
   onResolve,
   placeholder
 }) {
-  const [value, setValue] = useState8(defaultValue ?? "");
-  return /* @__PURE__ */ jsx26(NuView, { padding: "cell", children: /* @__PURE__ */ jsxs15(Stack, { gap: "md", children: [
-    /* @__PURE__ */ jsx26(
+  const [value, setValue] = useState9(defaultValue ?? "");
+  return /* @__PURE__ */ jsx28(NuView, { padding: "cell", children: /* @__PURE__ */ jsxs15(Stack, { gap: "md", children: [
+    /* @__PURE__ */ jsx28(
       TextField,
       {
         autoFocus: true,
@@ -3001,7 +3072,7 @@ function InputBoxDialogContent({
       }
     ),
     /* @__PURE__ */ jsxs15(Stack, { direction: "row", gap: "sm", justify: "center", children: [
-      /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsx28(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -3010,7 +3081,7 @@ function InputBoxDialogContent({
           children: okLabel
         }
       ),
-      /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsx28(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -3024,7 +3095,7 @@ function InputBoxDialogContent({
 }
 
 // src/windowing/NuWindowProvider.tsx
-import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 function getDefaultWindowStyle(mode, index) {
   const offset = index * 18;
   return {
@@ -3169,11 +3240,11 @@ function NuWindowProvider({
   onAppModalChange,
   renderAppBar = false
 }) {
-  const creationOrderRef = useRef7(0);
-  const idRef = useRef7(0);
-  const windowBoundsByIdRef = useRef7({});
-  const [windows, setWindows] = useState9([]);
-  const [windowBoundsById, setWindowBoundsById] = useState9({});
+  const creationOrderRef = useRef8(0);
+  const idRef = useRef8(0);
+  const windowBoundsByIdRef = useRef8({});
+  const [windows, setWindows] = useState10([]);
+  const [windowBoundsById, setWindowBoundsById] = useState10({});
   const appHostMenuContext = useContext7(AppHostMenuContext);
   const nextId = useCallback3(() => {
     idRef.current += 1;
@@ -3419,7 +3490,7 @@ function NuWindowProvider({
       openDialog({
         appModal: options.appModal ?? true,
         closeable: true,
-        content: ({ close }) => /* @__PURE__ */ jsx27(
+        content: ({ close }) => /* @__PURE__ */ jsx29(
           MessageBoxDialogContent,
           {
             cancel: buttons.cancel,
@@ -3462,7 +3533,7 @@ function NuWindowProvider({
       openDialog({
         appModal: options.appModal ?? true,
         closeable: true,
-        content: ({ close }) => /* @__PURE__ */ jsx27(
+        content: ({ close }) => /* @__PURE__ */ jsx29(
           InputBoxDialogContent,
           {
             cancelLabel: options.cancelLabel ?? "&Cancel",
@@ -3593,9 +3664,9 @@ function NuWindowProvider({
   useEffect6(() => {
     onAppModalChange?.(hasAppModal);
   }, [hasAppModal, onAppModalChange]);
-  return /* @__PURE__ */ jsx27(NuWindowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs16("div", { className: ["nu-window-host", className].filter(Boolean).join(" "), children: [
+  return /* @__PURE__ */ jsx29(NuWindowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs16("div", { className: ["nu-window-host", className].filter(Boolean).join(" "), children: [
     children,
-    /* @__PURE__ */ jsx27("div", { className: "nu-window-layer", children: renderWindows.map((windowEntry) => {
+    /* @__PURE__ */ jsx29("div", { className: "nu-window-layer", children: renderWindows.map((windowEntry) => {
       const isActiveWindow = isWindowActive(windowEntry);
       const stackIndex = stackIndexById.get(windowEntry.id);
       const isTopmostAppModal = windowEntry.id === topmostAppModalId;
@@ -3625,20 +3696,20 @@ function NuWindowProvider({
       };
       const content = typeof windowEntry.content === "function" ? windowEntry.content(controls) : windowEntry.content;
       return /* @__PURE__ */ jsxs16(Fragment3, { children: [
-        isTopmostAppModal ? /* @__PURE__ */ jsx27(
+        isTopmostAppModal ? /* @__PURE__ */ jsx29(
           "div",
           {
             className: "nu-window-layer__modal-backdrop",
             style: { zIndex: visibleWindows.length + 1 }
           }
-        ) : ownerBackdropStyle ? /* @__PURE__ */ jsx27(
+        ) : ownerBackdropStyle ? /* @__PURE__ */ jsx29(
           "div",
           {
             className: "nu-window-layer__modal-backdrop",
             style: ownerBackdropStyle
           }
         ) : null,
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx29(
           Window,
           {
             active: isActiveWindow,
@@ -3675,7 +3746,7 @@ function NuWindowProvider({
         )
       ] }, windowEntry.id);
     }) }),
-    renderAppBar ? /* @__PURE__ */ jsx27(AppBarHost, { children: /* @__PURE__ */ jsx27(
+    renderAppBar ? /* @__PURE__ */ jsx29(AppBarHost, { children: /* @__PURE__ */ jsx29(
       WindowBar,
       {
         items: windowsInfo.map((windowEntry) => ({
@@ -3693,11 +3764,11 @@ function NuWindowProvider({
 }
 
 // src/components/Desktop/Desktop.tsx
-import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
 function DesktopWindowRegion({ appBar, children }) {
   return /* @__PURE__ */ jsxs17(Fragment4, { children: [
-    /* @__PURE__ */ jsx28("div", { className: "nu-desktop__workspace", children }),
-    appBar ? /* @__PURE__ */ jsx28("div", { className: "nu-desktop__app-bar", children: appBar }) : null
+    /* @__PURE__ */ jsx30("div", { className: "nu-desktop__workspace", children }),
+    appBar ? /* @__PURE__ */ jsx30("div", { className: "nu-desktop__app-bar", children: appBar }) : null
   ] });
 }
 function NuDesktop({
@@ -3707,12 +3778,12 @@ function NuDesktop({
   className,
   ...props
 }) {
-  const [hasAppModal, setHasAppModal] = useState10(false);
+  const [hasAppModal, setHasAppModal] = useState11(false);
   const appHostContext = useContext8(AppHostMenuContext);
   if (appHostContext) {
     throw new Error("NuDesktop should not be nested inside another app host.");
   }
-  return /* @__PURE__ */ jsx28(NuAppHostProvider, { renderMenu: false, children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx30(NuAppHostProvider, { renderMenu: false, children: /* @__PURE__ */ jsx30(
     NuDesktopShell,
     {
       appBar: appBar ?? appBarContent,
@@ -3747,14 +3818,14 @@ function NuDesktopShell({
       className: ["nu-desktop", className].filter(Boolean).join(" "),
       "data-modal-active": hasAppModal || void 0,
       children: [
-        hasVisibleMainMenuItems(resolvedMainMenu) ? /* @__PURE__ */ jsx28("div", { className: "nu-desktop__menu", children: /* @__PURE__ */ jsx28(MainMenu, { items: resolvedMainMenu }) }) : null,
-        /* @__PURE__ */ jsx28(
+        hasVisibleMainMenuItems(resolvedMainMenu) ? /* @__PURE__ */ jsx30("div", { className: "nu-desktop__menu", children: /* @__PURE__ */ jsx30(MainMenu, { items: resolvedMainMenu }) }) : null,
+        /* @__PURE__ */ jsx30(
           NuWindowProvider,
           {
             className: "nu-desktop__window-region",
             onAppModalChange,
             renderAppBar: false,
-            children: /* @__PURE__ */ jsx28(DesktopWindowRegion, { appBar, children })
+            children: /* @__PURE__ */ jsx30(DesktopWindowRegion, { appBar, children })
           }
         )
       ]
@@ -3763,7 +3834,7 @@ function NuDesktopShell({
 }
 
 // src/components/Dashboard/Dashboard.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function resolveDashboardGap(gap) {
   if (typeof gap === "number") {
     return `${gap}px`;
@@ -3784,7 +3855,7 @@ function Dashboard({
   const resolvedGap = resolveDashboardGap(gap);
   if (layout === "lanes") {
     const lanes = Array.from({ length: laneCount }, (_, index) => index + 1);
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx31(
       "div",
       {
         ...props,
@@ -3796,7 +3867,7 @@ function Dashboard({
           "--nu-dashboard-gap": resolvedGap,
           "--nu-dashboard-lane-count": laneCount
         },
-        children: lanes.map((lane) => /* @__PURE__ */ jsx29("div", { className: "nu-dashboard__lane", children: items.filter((item) => (item.lane ?? 1) === lane).map((item) => /* @__PURE__ */ jsx29(
+        children: lanes.map((lane) => /* @__PURE__ */ jsx31("div", { className: "nu-dashboard__lane", children: items.filter((item) => (item.lane ?? 1) === lane).map((item) => /* @__PURE__ */ jsx31(
           "div",
           {
             className: "nu-dashboard__cell",
@@ -3808,14 +3879,14 @@ function Dashboard({
               minWidth: item.minWidth,
               width: item.width
             },
-            children: /* @__PURE__ */ jsx29("div", { className: "nu-dashboard__content", children: item.content })
+            children: /* @__PURE__ */ jsx31("div", { className: "nu-dashboard__content", children: item.content })
           },
           item.id
         )) }, lane))
       }
     );
   }
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx31(
     "div",
     {
       ...props,
@@ -3826,7 +3897,7 @@ function Dashboard({
         "--nu-dashboard-column-count": columnCount,
         "--nu-dashboard-gap": resolvedGap
       },
-      children: items.map((item) => /* @__PURE__ */ jsx29(
+      children: items.map((item) => /* @__PURE__ */ jsx31(
         "div",
         {
           className: "nu-dashboard__cell",
@@ -3840,7 +3911,7 @@ function Dashboard({
             minWidth: item.minWidth,
             width: item.width
           },
-          children: /* @__PURE__ */ jsx29("div", { className: "nu-dashboard__content", children: item.content })
+          children: /* @__PURE__ */ jsx31("div", { className: "nu-dashboard__content", children: item.content })
         },
         item.id
       ))
@@ -3849,8 +3920,8 @@ function Dashboard({
 }
 
 // src/components/CheckBox/CheckBox.tsx
-import { useId as useId3, useState as useState11 } from "react";
-import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useId as useId3, useState as useState12 } from "react";
+import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 function CheckBox({
   checked,
   className,
@@ -3869,7 +3940,7 @@ function CheckBox({
   const inputId = id ?? generatedId;
   const hintId = hint ? `${inputId}-hint` : void 0;
   const isControlled = checked !== void 0;
-  const [uncontrolledChecked, setUncontrolledChecked] = useState11(defaultChecked);
+  const [uncontrolledChecked, setUncontrolledChecked] = useState12(defaultChecked);
   const resolvedChecked = isControlled ? checked : uncontrolledChecked;
   function handleChange(event) {
     if (!isControlled) {
@@ -3889,7 +3960,7 @@ function CheckBox({
             className: cx("nu-check-box__main", slotClassNames?.main),
             style: slotStyles?.main,
             children: [
-              /* @__PURE__ */ jsx30(
+              /* @__PURE__ */ jsx32(
                 "input",
                 {
                   ...props,
@@ -3903,19 +3974,19 @@ function CheckBox({
                   type: "checkbox"
                 }
               ),
-              /* @__PURE__ */ jsx30(
+              /* @__PURE__ */ jsx32(
                 "span",
                 {
                   "aria-hidden": "true",
                   className: cx("nu-check-box__control", slotClassNames?.control),
                   style: slotStyles?.control,
-                  children: /* @__PURE__ */ jsx30(
+                  children: /* @__PURE__ */ jsx32(
                     "span",
                     {
                       className: cx("nu-check-box__box", slotClassNames?.box),
                       "data-unchecked-shape": uncheckedShape,
                       style: slotStyles?.box,
-                      children: resolvedChecked ? /* @__PURE__ */ jsx30(
+                      children: resolvedChecked ? /* @__PURE__ */ jsx32(
                         NuGlyph,
                         {
                           className: cx("nu-check-box__mark", slotClassNames?.mark),
@@ -3927,7 +3998,7 @@ function CheckBox({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx30(
+              /* @__PURE__ */ jsx32(
                 "span",
                 {
                   className: cx("nu-check-box__label", slotClassNames?.label),
@@ -3938,7 +4009,7 @@ function CheckBox({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx30(
+        hint ? /* @__PURE__ */ jsx32(
           "span",
           {
             className: cx("nu-check-box__hint", slotClassNames?.hint),
@@ -3957,26 +4028,26 @@ import {
   useEffect as useEffect7,
   useId as useId4,
   useMemo as useMemo8,
-  useRef as useRef8,
-  useState as useState12
+  useRef as useRef9,
+  useState as useState13
 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/_shared/ControlOpener.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function ControlOpener(props) {
   const { children, className, glyphClassName, glyphStyle, style } = props;
   if (props.as === "button") {
     const { as: _as2, type = "button", ...buttonProps } = props;
     void _as2;
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx33(
       "button",
       {
         ...buttonProps,
         className: cx("nu-control-opener", className),
         style,
         type,
-        children: children ?? /* @__PURE__ */ jsx31(
+        children: children ?? /* @__PURE__ */ jsx33(
           NuGlyph,
           {
             className: cx("nu-control-opener__glyph", glyphClassName),
@@ -3989,14 +4060,14 @@ function ControlOpener(props) {
   }
   const { ariaHidden = false, as: _as, ...spanProps } = props;
   void _as;
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     "span",
     {
       ...spanProps,
       "aria-hidden": ariaHidden,
       className: cx("nu-control-opener", className),
       style,
-      children: children ?? /* @__PURE__ */ jsx31(
+      children: children ?? /* @__PURE__ */ jsx33(
         NuGlyph,
         {
           className: cx("nu-control-opener__glyph", glyphClassName),
@@ -4009,7 +4080,7 @@ function ControlOpener(props) {
 }
 
 // src/components/_shared/usePopupPosition.ts
-import { useLayoutEffect as useLayoutEffect2 } from "react";
+import { useLayoutEffect as useLayoutEffect3 } from "react";
 
 // src/components/_shared/portalPositioning.ts
 function isDocumentViewportRoot(portalRoot) {
@@ -4073,7 +4144,7 @@ function usePopupPosition({
   popupRef,
   portalRoot = defaultPortalRoot()
 }) {
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const anchor = anchorRef.current;
     const popupNode = popupRef.current;
     if (!open || !anchor || !popupNode) {
@@ -4112,7 +4183,7 @@ function usePopupPosition({
 }
 
 // src/components/Dropdown/Dropdown.tsx
-import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
 function flattenDropdownOptions(data) {
   const options = [];
   data.forEach((group) => {
@@ -4161,19 +4232,19 @@ function Dropdown({
   style,
   ...props
 }) {
-  const rootRef = useRef8(null);
-  const triggerRef = useRef8(null);
-  const fieldRef = useRef8(null);
-  const popupRef = useRef8(null);
-  const popupListRef = useRef8(null);
-  const [open, setOpen] = useState12(false);
+  const rootRef = useRef9(null);
+  const triggerRef = useRef9(null);
+  const fieldRef = useRef9(null);
+  const popupRef = useRef9(null);
+  const popupListRef = useRef9(null);
+  const [open, setOpen] = useState13(false);
   const options = useMemo8(() => flattenDropdownOptions(data), [data]);
   const generatedId = useId4();
   const fieldId = `${generatedId}-dropdown`;
   const labelId = `${fieldId}-label`;
   const hintId = hint ? `${fieldId}-hint` : void 0;
   const isControlled = value !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = useState12(() => getInitialValue(options, defaultValue));
+  const [uncontrolledValue, setUncontrolledValue] = useState13(() => getInitialValue(options, defaultValue));
   const resolvedValue = isControlled ? value : uncontrolledValue;
   const selectedOption = useMemo8(
     () => findSelectedOption(options, resolvedValue),
@@ -4286,7 +4357,7 @@ function Dropdown({
       ref: rootRef,
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx34(
           "span",
           {
             className: cx("nu-dropdown__label", slotClassNames?.label),
@@ -4295,7 +4366,7 @@ function Dropdown({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx34(
           "button",
           {
             "aria-describedby": hintId,
@@ -4326,7 +4397,7 @@ function Dropdown({
                       ref: fieldRef,
                       style: slotStyles?.field,
                       children: [
-                        /* @__PURE__ */ jsx32(
+                        /* @__PURE__ */ jsx34(
                           "span",
                           {
                             "aria-hidden": "true",
@@ -4335,7 +4406,7 @@ function Dropdown({
                             children: "["
                           }
                         ),
-                        /* @__PURE__ */ jsx32(
+                        /* @__PURE__ */ jsx34(
                           "span",
                           {
                             className: cx(
@@ -4343,7 +4414,7 @@ function Dropdown({
                               slotClassNames?.valueShell
                             ),
                             style: slotStyles?.valueShell,
-                            children: /* @__PURE__ */ jsx32(
+                            children: /* @__PURE__ */ jsx34(
                               "span",
                               {
                                 className: cx("nu-dropdown__value", slotClassNames?.value),
@@ -4353,7 +4424,7 @@ function Dropdown({
                             )
                           }
                         ),
-                        /* @__PURE__ */ jsx32(
+                        /* @__PURE__ */ jsx34(
                           "span",
                           {
                             "aria-hidden": "true",
@@ -4365,7 +4436,7 @@ function Dropdown({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx32(
+                  /* @__PURE__ */ jsx34(
                     ControlOpener,
                     {
                       ariaHidden: true,
@@ -4376,7 +4447,7 @@ function Dropdown({
                         slotClassNames?.arrowShell
                       ),
                       style: slotStyles?.arrowShell,
-                      children: /* @__PURE__ */ jsx32(
+                      children: /* @__PURE__ */ jsx34(
                         NuGlyph,
                         {
                           className: cx(
@@ -4395,7 +4466,7 @@ function Dropdown({
             )
           }
         ),
-        hint ? /* @__PURE__ */ jsx32(
+        hint ? /* @__PURE__ */ jsx34(
           "span",
           {
             className: cx("nu-dropdown__hint", slotClassNames?.hint),
@@ -4405,7 +4476,7 @@ function Dropdown({
           }
         ) : null,
         open && typeof document !== "undefined" ? createPortal(
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx34(
             "div",
             {
               className: cx("nu-dropdown__popup", slotClassNames?.popup),
@@ -4414,7 +4485,7 @@ function Dropdown({
                 { left: 0, top: 0, visibility: "hidden", width: 0 },
                 slotStyles?.popup
               ),
-              children: /* @__PURE__ */ jsx32(
+              children: /* @__PURE__ */ jsx34(
                 "div",
                 {
                   className: cx(
@@ -4423,7 +4494,7 @@ function Dropdown({
                   ),
                   ref: popupListRef,
                   style: slotStyles?.popupShell,
-                  children: /* @__PURE__ */ jsx32(
+                  children: /* @__PURE__ */ jsx34(
                     ListBox,
                     {
                       className: cx(
@@ -4456,7 +4527,7 @@ function Dropdown({
 }
 
 // src/components/Frame/Frame.tsx
-import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
 function Frame({
   children,
   className,
@@ -4500,7 +4571,7 @@ function Frame({
             className: cx("nu-frame__title", slotClassNames?.title),
             style: mergeSlotStyle(titleStyle, slotStyles?.title),
             children: [
-              titleStart ? /* @__PURE__ */ jsx33(
+              titleStart ? /* @__PURE__ */ jsx35(
                 "span",
                 {
                   className: cx(
@@ -4511,7 +4582,7 @@ function Frame({
                   children: titleStart
                 }
               ) : null,
-              resolvedTitleContent ? /* @__PURE__ */ jsx33(
+              resolvedTitleContent ? /* @__PURE__ */ jsx35(
                 "span",
                 {
                   className: cx(
@@ -4522,7 +4593,7 @@ function Frame({
                   children: resolvedTitleContent
                 }
               ) : null,
-              titleEnd ? /* @__PURE__ */ jsx33(
+              titleEnd ? /* @__PURE__ */ jsx35(
                 "span",
                 {
                   className: cx("nu-frame__title-end", slotClassNames?.titleEnd),
@@ -4533,7 +4604,7 @@ function Frame({
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx35(
           "div",
           {
             className: cx("nu-frame__body", slotClassNames?.body),
@@ -4547,7 +4618,7 @@ function Frame({
 }
 
 // src/components/Info/Info.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function Info({
   accentColor,
   children,
@@ -4556,7 +4627,7 @@ function Info({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       ...props,
@@ -4580,7 +4651,7 @@ function InfoAccent({
   upper = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx36(
     "span",
     {
       ...props,
@@ -4597,24 +4668,26 @@ function InfoAccent({
 
 // src/components/IconGrid/NuIconGrid.tsx
 import {
-  useLayoutEffect as useLayoutEffect4,
+  useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo9,
-  useRef as useRef10,
-  useState as useState15
+  useRef as useRef11,
+  useState as useState16
 } from "react";
 
 // src/components/PopupMenu/PopupMenu.tsx
 import {
   useCallback as useCallback4,
   useEffect as useEffect8,
-  useLayoutEffect as useLayoutEffect3,
-  useRef as useRef9,
-  useState as useState13
+  useLayoutEffect as useLayoutEffect4,
+  useRef as useRef10,
+  useState as useState14
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function hasVisibleChildren2(item) {
-  return Boolean(item.items?.some((child) => !child.hidden));
+  return Boolean(
+    item.items?.some((child) => isMainMenuItem(child) && !child.hidden)
+  );
 }
 function clamp(value, min, max) {
   return Math.min(max, Math.max(min, value));
@@ -4653,9 +4726,9 @@ function PopupMenu({
   uncheckedShape = "box",
   ...props
 }) {
-  const rootRef = useRef9(null);
-  const [activePath, setActivePath] = useState13([]);
-  const [uncontrolledOpen, setUncontrolledOpen] = useState13(defaultOpen);
+  const rootRef = useRef10(null);
+  const [activePath, setActivePath] = useState14([]);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState14(defaultOpen);
   const isControlled = open !== void 0;
   const resolvedOpen = isControlled ? open : uncontrolledOpen;
   const portalRoot = resolvePortalRoot();
@@ -4692,7 +4765,7 @@ function PopupMenu({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [resolvedOpen, setResolvedOpen]);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     if (!resolvedOpen || !anchor || !rootRef.current) {
       return;
     }
@@ -4742,11 +4815,11 @@ function PopupMenu({
     }
     setActivePath((currentPath) => [...currentPath.slice(0, level), item.id]);
   }
-  if (!resolvedOpen || !anchor || !portalRoot || items.every((item) => item.hidden)) {
+  if (!resolvedOpen || !anchor || !portalRoot || !hasVisibleMainMenuItems(items)) {
     return null;
   }
   return createPortal2(
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx37(
       "div",
       {
         ...props,
@@ -4762,7 +4835,7 @@ function PopupMenu({
           top: 0,
           visibility: "hidden"
         },
-        children: /* @__PURE__ */ jsx35("div", { className: "nu-popup-menu__shell", children: /* @__PURE__ */ jsx35(
+        children: /* @__PURE__ */ jsx37("div", { className: "nu-popup-menu__shell", children: /* @__PURE__ */ jsx37(
           MainMenuList,
           {
             activePath,
@@ -4781,10 +4854,10 @@ function PopupMenu({
 }
 
 // src/components/PopupMenu/usePopupMenu.ts
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 function usePopupMenu() {
-  const [anchor, setAnchor] = useState14(null);
-  const [open, setOpen] = useState14(false);
+  const [anchor, setAnchor] = useState15(null);
+  const [open, setOpen] = useState15(false);
   function close() {
     setOpen(false);
   }
@@ -4841,7 +4914,7 @@ function useNuIconGridContext() {
 }
 
 // src/components/IconGrid/NuIconGrid.tsx
-import { Fragment as Fragment5, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
 var DRAG_THRESHOLD2 = 3;
 var gridRegistrations = /* @__PURE__ */ new Map();
 function clamp2(value, minimum, maximum) {
@@ -4899,11 +4972,11 @@ function NuIconGridItem({
   const manager = useNuIconGridContext();
   const dragDrop = useNuDragDrop();
   const contextMenu = usePopupMenu();
-  const dragStartRef = useRef10(void 0);
-  const isDraggingRef = useRef10(false);
-  const [isDragging, setIsDragging] = useState15(false);
-  const suppressClickRef = useRef10(false);
-  const latestPositionRef = useRef10(icon.position);
+  const dragStartRef = useRef11(void 0);
+  const isDraggingRef = useRef11(false);
+  const [isDragging, setIsDragging] = useState16(false);
+  const suppressClickRef = useRef11(false);
+  const latestPositionRef = useRef11(icon.position);
   const contextMenuItems = resolveIconContextMenuItems(
     icon.contextMenuItems,
     icon
@@ -5075,12 +5148,12 @@ function NuIconGridItem({
         style: { left: icon.position.x, top: icon.position.y },
         type: "button",
         children: [
-          /* @__PURE__ */ jsx36("span", { "aria-hidden": "true", className: "nu-icon-grid__glyph", children: typeof icon.icon === "string" ? /* @__PURE__ */ jsx36("img", { alt: "", draggable: false, src: icon.icon }) : icon.icon }),
-          /* @__PURE__ */ jsx36("span", { className: "nu-icon-grid__label", children: renderMnemonicText(icon.label) })
+          /* @__PURE__ */ jsx38("span", { "aria-hidden": "true", className: "nu-icon-grid__glyph", children: typeof icon.icon === "string" ? /* @__PURE__ */ jsx38("img", { alt: "", draggable: false, src: icon.icon }) : icon.icon }),
+          /* @__PURE__ */ jsx38("span", { className: "nu-icon-grid__label", children: renderMnemonicText(icon.label) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx38(
       PopupMenu,
       {
         anchor: contextMenu.anchor,
@@ -5106,9 +5179,9 @@ function NuIconGrid({
   onPointerDown,
   ...props
 }) {
-  const [gridElement, setGridElement] = useState15(null);
+  const [gridElement, setGridElement] = useState16(null);
   const manager = useNuIconGridContext();
-  const hasAppliedDefaultArrangementRef = useRef10(false);
+  const hasAppliedDefaultArrangementRef = useRef11(false);
   const arrangeIcons = manager.arrangeIcons;
   const setGridSize = manager.setGridSize;
   const contextMenu = usePopupMenu();
@@ -5125,7 +5198,7 @@ function NuIconGrid({
     [acceptsDrop, onDrop]
   );
   useNuDropTarget(gridElement, sharedDropTargetOptions);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (!gridElement) {
       return;
     }
@@ -5146,7 +5219,7 @@ function NuIconGrid({
     resizeObserver.observe(gridElement);
     return () => resizeObserver.disconnect();
   }, [arrangeIcons, defaultArrangeMode, gridElement, setGridSize]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (!gridElement) {
       return;
     }
@@ -5189,7 +5262,7 @@ function NuIconGrid({
       ref: setGridElement,
       role: "group",
       children: [
-        manager.icons.map((icon) => /* @__PURE__ */ jsx36(
+        manager.icons.map((icon) => /* @__PURE__ */ jsx38(
           NuIconGridItem,
           {
             gridElement,
@@ -5199,7 +5272,7 @@ function NuIconGrid({
           },
           icon.id
         )),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx38(
           PopupMenu,
           {
             anchor: contextMenu.anchor,
@@ -5217,10 +5290,10 @@ function NuIconGrid({
 import {
   useCallback as useCallback5,
   useMemo as useMemo10,
-  useRef as useRef11,
-  useState as useState16
+  useRef as useRef12,
+  useState as useState17
 } from "react";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var GRID_PADDING = 12;
 var ICON_CELL_HEIGHT = 104;
 var ICON_CELL_WIDTH = 104;
@@ -5285,12 +5358,12 @@ function NuIconProvider({
   children,
   defaultIcons = []
 }) {
-  const idRef = useRef11(defaultIcons.length);
-  const gridSizeRef = useRef11({ height: 0, width: 0 });
-  const [icons, setIcons] = useState16(
+  const idRef = useRef12(defaultIcons.length);
+  const gridSizeRef = useRef12({ height: 0, width: 0 });
+  const [icons, setIcons] = useState17(
     () => getInitialIcons(defaultIcons)
   );
-  const [selectedIconId, setSelectedIconId] = useState16(null);
+  const [selectedIconId, setSelectedIconId] = useState17(null);
   const addIcon = useCallback5((definition) => {
     const id = definition.id ?? `nu-icon-${++idRef.current}`;
     setIcons((currentIcons) => {
@@ -5368,7 +5441,7 @@ function NuIconProvider({
       updateIcon
     ]
   );
-  return /* @__PURE__ */ jsx37(NuIconContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx39(NuIconContext.Provider, { value: contextValue, children });
 }
 
 // src/components/ComboBox/ComboBox.tsx
@@ -5376,11 +5449,11 @@ import {
   useEffect as useEffect9,
   useId as useId5,
   useMemo as useMemo11,
-  useRef as useRef12,
-  useState as useState17
+  useRef as useRef13,
+  useState as useState18
 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
 function flattenComboBoxOptions(data) {
   const options = [];
   data.forEach((group) => {
@@ -5421,21 +5494,21 @@ function ComboBox({
   value,
   ...props
 }) {
-  const rootRef = useRef12(null);
-  const inputRef = useRef12(null);
-  const fieldRef = useRef12(null);
-  const popupRef = useRef12(null);
+  const rootRef = useRef13(null);
+  const inputRef = useRef13(null);
+  const fieldRef = useRef13(null);
+  const popupRef = useRef13(null);
   const generatedId = useId5();
   const fieldId = `${generatedId}-combo-box`;
   const labelId = `${fieldId}-label`;
   const hintId = hint ? `${fieldId}-hint` : void 0;
-  const [open, setOpen] = useState17(false);
+  const [open, setOpen] = useState18(false);
   const options = useMemo11(() => flattenComboBoxOptions(data), [data]);
   const isValueControlled = value !== void 0;
   const isInputControlled = inputValueProp !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = useState17(() => defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState18(() => defaultValue);
   const initialSelectedOption = findComboBoxOption(options, defaultValue);
-  const [uncontrolledInputValue, setUncontrolledInputValue] = useState17(
+  const [uncontrolledInputValue, setUncontrolledInputValue] = useState18(
     () => defaultInputValue ?? initialSelectedOption?.item.name.text ?? ""
   );
   const resolvedValue = isValueControlled ? value : uncontrolledValue;
@@ -5463,7 +5536,7 @@ function ComboBox({
     [filteredData]
   );
   const popupRoot = typeof document === "undefined" ? null : resolveComboBoxPortalRoot();
-  const [themePortalStyle, setThemePortalStyle] = useState17(() => void 0);
+  const [themePortalStyle, setThemePortalStyle] = useState18(() => void 0);
   useEffect9(() => {
     if (!open) {
       return;
@@ -5548,7 +5621,7 @@ function ComboBox({
       ref: rootRef,
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx40(
           "label",
           {
             className: cx("nu-combo-box__label", slotClassNames?.label),
@@ -5571,7 +5644,7 @@ function ComboBox({
                   ref: fieldRef,
                   style: slotStyles?.field,
                   children: [
-                    /* @__PURE__ */ jsx38(
+                    /* @__PURE__ */ jsx40(
                       "span",
                       {
                         "aria-hidden": "true",
@@ -5580,7 +5653,7 @@ function ComboBox({
                         children: "["
                       }
                     ),
-                    /* @__PURE__ */ jsx38(
+                    /* @__PURE__ */ jsx40(
                       "span",
                       {
                         className: cx(
@@ -5588,7 +5661,7 @@ function ComboBox({
                           slotClassNames?.inputShell
                         ),
                         style: slotStyles?.inputShell,
-                        children: /* @__PURE__ */ jsx38(
+                        children: /* @__PURE__ */ jsx40(
                           "input",
                           {
                             "aria-autocomplete": "list",
@@ -5615,7 +5688,7 @@ function ComboBox({
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsx38(
+                    /* @__PURE__ */ jsx40(
                       "span",
                       {
                         "aria-hidden": "true",
@@ -5627,7 +5700,7 @@ function ComboBox({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx40(
                 ControlOpener,
                 {
                   "aria-label": open ? "Collapse list" : "Expand list",
@@ -5645,7 +5718,7 @@ function ComboBox({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx38(
+        hint ? /* @__PURE__ */ jsx40(
           "span",
           {
             className: cx("nu-combo-box__hint", slotClassNames?.hint),
@@ -5655,7 +5728,7 @@ function ComboBox({
           }
         ) : null,
         open && popupRoot ? createPortal3(
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx40(
             "div",
             {
               className: cx("nu-combo-box__popup", slotClassNames?.popup),
@@ -5665,12 +5738,12 @@ function ComboBox({
                 themePortalStyle,
                 slotStyles?.popup
               ),
-              children: /* @__PURE__ */ jsx38(
+              children: /* @__PURE__ */ jsx40(
                 "div",
                 {
                   className: cx("nu-combo-box__listbox", slotClassNames?.listbox),
                   style: slotStyles?.listbox,
-                  children: /* @__PURE__ */ jsx38(
+                  children: /* @__PURE__ */ jsx40(
                     ListBox,
                     {
                       data: filteredData,
@@ -5703,7 +5776,7 @@ function ComboBox({
 import {
   Fragment as Fragment6
 } from "react";
-import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
 var COMMAND_BUTTON_GLYPH_NAMES = /* @__PURE__ */ new Set([
   "check-fill",
   "check-mark",
@@ -5744,7 +5817,7 @@ function CommandButton({
   const hasMenu = menuItems.length > 0;
   const showCaret = dropdown || hasMenu;
   const resolvedToggled = toggled ?? pressed;
-  const resolvedIcon = typeof icon === "string" && isCommandButtonGlyphName(icon) ? /* @__PURE__ */ jsx39(NuGlyph, { name: icon }) : icon ?? null;
+  const resolvedIcon = typeof icon === "string" && isCommandButtonGlyphName(icon) ? /* @__PURE__ */ jsx41(NuGlyph, { name: icon }) : icon ?? null;
   function handleClick(event) {
     onClick?.(event);
     if (event.defaultPrevented || !hasMenu) {
@@ -5769,7 +5842,7 @@ function CommandButton({
         type,
         onClick: handleClick,
         children: [
-          resolvedIcon ? /* @__PURE__ */ jsx39(
+          resolvedIcon ? /* @__PURE__ */ jsx41(
             "span",
             {
               className: cx(
@@ -5781,7 +5854,7 @@ function CommandButton({
               children: resolvedIcon
             }
           ) : null,
-          children ? /* @__PURE__ */ jsx39(
+          children ? /* @__PURE__ */ jsx41(
             "span",
             {
               className: cx(
@@ -5793,7 +5866,7 @@ function CommandButton({
               children: renderMnemonicNode(children)
             }
           ) : null,
-          showCaret ? /* @__PURE__ */ jsx39(
+          showCaret ? /* @__PURE__ */ jsx41(
             "span",
             {
               className: cx(
@@ -5802,13 +5875,13 @@ function CommandButton({
                 slotClassNames?.caret
               ),
               style: slotStyles?.caret,
-              children: /* @__PURE__ */ jsx39(NuGlyph, { name: "dropdown-arrow" })
+              children: /* @__PURE__ */ jsx41(NuGlyph, { name: "dropdown-arrow" })
             }
           ) : null
         ]
       }
     ),
-    hasMenu ? /* @__PURE__ */ jsx39(
+    hasMenu ? /* @__PURE__ */ jsx41(
       PopupMenu,
       {
         anchor: popupMenu.anchor,
@@ -5823,8 +5896,8 @@ function CommandButton({
 }
 
 // src/components/CrtGlitch/CrtGlitch.tsx
-import { useEffect as useEffect10, useId as useId6, useRef as useRef13 } from "react";
-import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useEffect as useEffect10, useId as useId6, useRef as useRef14 } from "react";
+import { jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
 var DEFAULT_INTERVAL_MS = 3e3;
 var DEFAULT_DURATION_MS = 2500;
 var DEFAULT_TOP_LEVEL_RATIO = 1 / 3;
@@ -5850,12 +5923,12 @@ function NuCrtGlitch({
   topLevelRatio = DEFAULT_TOP_LEVEL_RATIO
 }) {
   const filterId = useId6().replace(/:/g, "");
-  const turbulenceRef = useRef13(null);
-  const warpRef = useRef13(null);
-  const rOffsetRef = useRef13(null);
-  const bOffsetRef = useRef13(null);
-  const rafRef = useRef13(null);
-  const targetElRef = useRef13(null);
+  const turbulenceRef = useRef14(null);
+  const warpRef = useRef14(null);
+  const rOffsetRef = useRef14(null);
+  const bOffsetRef = useRef14(null);
+  const rafRef = useRef14(null);
+  const targetElRef = useRef14(null);
   useEffect10(() => {
     if (!enabled) {
       return;
@@ -5958,7 +6031,7 @@ function NuCrtGlitch({
       }
     };
   }, [durationMs, enabled, filterId, intervalMs, targetSelector, topLevelRatio]);
-  return /* @__PURE__ */ jsx40("svg", { "aria-hidden": "true", height: "0", style: { position: "absolute" }, width: "0", children: /* @__PURE__ */ jsx40("defs", { children: /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsx42("svg", { "aria-hidden": "true", height: "0", style: { position: "absolute" }, width: "0", children: /* @__PURE__ */ jsx42("defs", { children: /* @__PURE__ */ jsxs24(
     "filter",
     {
       "color-interpolation-filters": "sRGB",
@@ -5968,7 +6041,7 @@ function NuCrtGlitch({
       x: "-15%",
       y: "-5%",
       children: [
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx42(
           "feTurbulence",
           {
             baseFrequency: "0.001 0.045",
@@ -5979,7 +6052,7 @@ function NuCrtGlitch({
             type: "turbulence"
           }
         ),
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx42(
           "feDisplacementMap",
           {
             in: "SourceGraphic",
@@ -5991,8 +6064,8 @@ function NuCrtGlitch({
             yChannelSelector: "A"
           }
         ),
-        /* @__PURE__ */ jsx40("feOffset", { dx: 0, dy: 0, in: "warped", ref: rOffsetRef, result: "rOff" }),
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx42("feOffset", { dx: 0, dy: 0, in: "warped", ref: rOffsetRef, result: "rOff" }),
+        /* @__PURE__ */ jsx42(
           "feColorMatrix",
           {
             in: "rOff",
@@ -6001,7 +6074,7 @@ function NuCrtGlitch({
             values: "1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0"
           }
         ),
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx42(
           "feColorMatrix",
           {
             in: "warped",
@@ -6010,8 +6083,8 @@ function NuCrtGlitch({
             values: "0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0"
           }
         ),
-        /* @__PURE__ */ jsx40("feOffset", { dx: 0, dy: 0, in: "warped", ref: bOffsetRef, result: "bOff" }),
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx42("feOffset", { dx: 0, dy: 0, in: "warped", ref: bOffsetRef, result: "bOff" }),
+        /* @__PURE__ */ jsx42(
           "feColorMatrix",
           {
             in: "bOff",
@@ -6020,8 +6093,8 @@ function NuCrtGlitch({
             values: "0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0"
           }
         ),
-        /* @__PURE__ */ jsx40("feBlend", { in: "rOnly", in2: "gOnly", mode: "screen", result: "rg" }),
-        /* @__PURE__ */ jsx40("feBlend", { in: "rg", in2: "bOnly", mode: "screen" })
+        /* @__PURE__ */ jsx42("feBlend", { in: "rOnly", in2: "gOnly", mode: "screen", result: "rg" }),
+        /* @__PURE__ */ jsx42("feBlend", { in: "rg", in2: "bOnly", mode: "screen" })
       ]
     }
   ) }) });
@@ -6034,8 +6107,8 @@ import {
   useEffect as useEffect11,
   useImperativeHandle as useImperativeHandle2,
   useMemo as useMemo12,
-  useRef as useRef14,
-  useState as useState18
+  useRef as useRef15,
+  useState as useState19
 } from "react";
 
 // src/components/ListView/internals/helpers.ts
@@ -6073,14 +6146,14 @@ function renderListViewCellValue(row, column) {
 import { memo as memo3 } from "react";
 
 // src/components/ListView/internals/ListViewCheckControl.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function ListViewCheckControl({
   isChecked,
   onActivate,
   onToggleCheck,
   uncheckedShape
 }) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx43(
     "button",
     {
       "aria-label": isChecked ? "Uncheck row" : "Check row",
@@ -6093,13 +6166,13 @@ function ListViewCheckControl({
         onToggleCheck();
       },
       type: "button",
-      children: /* @__PURE__ */ jsx41(
+      children: /* @__PURE__ */ jsx43(
         "span",
         {
           "aria-hidden": "true",
           className: "nu-list-view__check-box",
           "data-unchecked-shape": uncheckedShape,
-          children: isChecked ? /* @__PURE__ */ jsx41(
+          children: isChecked ? /* @__PURE__ */ jsx43(
             NuGlyph,
             {
               className: "nu-list-view__check-indicator",
@@ -6113,7 +6186,7 @@ function ListViewCheckControl({
 }
 
 // src/components/ListView/internals/ListViewRow.tsx
-import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
 function ListViewRowInner({
   columns,
   isActive,
@@ -6165,7 +6238,7 @@ function ListViewRowInner({
         "--nu-list-view-columns": templateColumns
       },
       children: [
-        showCheckBox ? /* @__PURE__ */ jsx42("span", { className: "nu-list-view__check-cell", role: "gridcell", children: /* @__PURE__ */ jsx42(
+        showCheckBox ? /* @__PURE__ */ jsx44("span", { className: "nu-list-view__check-cell", role: "gridcell", children: /* @__PURE__ */ jsx44(
           ListViewCheckControl,
           {
             isChecked,
@@ -6174,7 +6247,7 @@ function ListViewRowInner({
             uncheckedShape
           }
         ) }) : null,
-        columns.map((column) => /* @__PURE__ */ jsx42(
+        columns.map((column) => /* @__PURE__ */ jsx44(
           "span",
           {
             className: [
@@ -6194,7 +6267,7 @@ function ListViewRowInner({
 var ListViewRow = memo3(ListViewRowInner);
 
 // src/components/ListView/ListView.tsx
-import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs26 } from "react/jsx-runtime";
 function ListViewInner({
   activeRowId: activeRowIdProp,
   checkedIds,
@@ -6212,14 +6285,14 @@ function ListViewInner({
   uncheckedShape = "box",
   ...props
 }, ref) {
-  const rootRef = useRef14(null);
-  const rowRefs = useRef14({});
+  const rootRef = useRef15(null);
+  const rowRefs = useRef15({});
   const selectableRows = useMemo12(
     () => data.filter((row) => !row.disabled),
     [data]
   );
   const isActiveControlled = activeRowIdProp !== void 0;
-  const [uncontrolledActiveRowId, setUncontrolledActiveRowId] = useState18(
+  const [uncontrolledActiveRowId, setUncontrolledActiveRowId] = useState19(
     () => defaultActiveRowId ?? getInitialActiveRowId(selectableRows, selectedId)
   );
   const activeRowId = activeRowIdProp !== void 0 ? activeRowIdProp : uncontrolledActiveRowId;
@@ -6382,8 +6455,8 @@ function ListViewInner({
               "--nu-list-view-columns": templateColumns
             },
             children: [
-              showCheckBox ? /* @__PURE__ */ jsx43("span", { className: "nu-list-view__header-cell", role: "columnheader" }) : null,
-              columns.map((column) => /* @__PURE__ */ jsx43(
+              showCheckBox ? /* @__PURE__ */ jsx45("span", { className: "nu-list-view__header-cell", role: "columnheader" }) : null,
+              columns.map((column) => /* @__PURE__ */ jsx45(
                 "span",
                 {
                   className: [
@@ -6399,7 +6472,7 @@ function ListViewInner({
             ]
           }
         ),
-        /* @__PURE__ */ jsx43("div", { className: "nu-list-view__body", children: data.length > 0 ? data.map((row) => /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx45("div", { className: "nu-list-view__body", children: data.length > 0 ? data.map((row) => /* @__PURE__ */ jsx45(
           ListViewRow,
           {
             columns,
@@ -6416,7 +6489,7 @@ function ListViewInner({
             uncheckedShape
           },
           row.id
-        )) : /* @__PURE__ */ jsx43("div", { className: "nu-list-view__empty", children: emptyText }) })
+        )) : /* @__PURE__ */ jsx45("div", { className: "nu-list-view__empty", children: emptyText }) })
       ]
     }
   );
@@ -6428,8 +6501,8 @@ import {
   useEffect as useEffect12,
   useId as useId7,
   useMemo as useMemo13,
-  useRef as useRef15,
-  useState as useState19
+  useRef as useRef16,
+  useState as useState20
 } from "react";
 
 // src/components/MaskedField/textMask.ts
@@ -6594,7 +6667,7 @@ function getMaskedFieldState(mask, rawValue) {
 }
 
 // src/components/MaskedField/MaskedField.tsx
-import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs27 } from "react/jsx-runtime";
 function MaskedField({
   "aria-invalid": ariaInvalid,
   className,
@@ -6617,8 +6690,8 @@ function MaskedField({
   const fieldId = id ?? generatedId;
   const hintId = hint ? `${fieldId}-hint` : void 0;
   const isControlled = value !== void 0;
-  const hasMountedRef = useRef15(false);
-  const [uncontrolledValue, setUncontrolledValue] = useState19(
+  const hasMountedRef = useRef16(false);
+  const [uncontrolledValue, setUncontrolledValue] = useState20(
     () => defaultValue == null ? "" : getMaskedFieldState(mask, String(defaultValue)).formattedValue
   );
   const rawResolvedValue = isControlled ? value == null ? "" : String(value) : uncontrolledValue;
@@ -6678,7 +6751,7 @@ function MaskedField({
       htmlFor: fieldId,
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx46(
           "span",
           {
             className: cx("nu-masked-field__label", slotClassNames?.label),
@@ -6692,7 +6765,7 @@ function MaskedField({
             className: cx("nu-masked-field__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsx44(
+              /* @__PURE__ */ jsx46(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -6701,7 +6774,7 @@ function MaskedField({
                   children: "["
                 }
               ),
-              /* @__PURE__ */ jsx44(
+              /* @__PURE__ */ jsx46(
                 "span",
                 {
                   className: cx(
@@ -6709,7 +6782,7 @@ function MaskedField({
                     slotClassNames?.inputShell
                   ),
                   style: slotStyles?.inputShell,
-                  children: /* @__PURE__ */ jsx44(
+                  children: /* @__PURE__ */ jsx46(
                     "input",
                     {
                       ...props,
@@ -6727,7 +6800,7 @@ function MaskedField({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx44(
+              /* @__PURE__ */ jsx46(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -6739,7 +6812,7 @@ function MaskedField({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx44(
+        hint ? /* @__PURE__ */ jsx46(
           "span",
           {
             className: cx("nu-masked-field__hint", slotClassNames?.hint),
@@ -6755,9 +6828,9 @@ function MaskedField({
 
 // src/components/Memo/Memo.tsx
 import {
-  useState as useState20
+  useState as useState21
 } from "react";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function Memo({
   background,
   className,
@@ -6777,7 +6850,7 @@ function Memo({
   const isControlled = value !== void 0;
   const resolvedInitialValue = defaultValue == null ? content ?? "" : String(defaultValue);
   const resolvedValue = value == null ? "" : Array.isArray(value) ? value.join("\n") : String(value);
-  const [uncontrolledValue, setUncontrolledValue] = useState20(
+  const [uncontrolledValue, setUncontrolledValue] = useState21(
     () => resolvedInitialValue
   );
   function handleChange(event) {
@@ -6787,7 +6860,7 @@ function Memo({
     onValueChange?.(event.target.value);
     onChange?.(event);
   }
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx47(
     "div",
     {
       className: ["nu-memo", className].filter(Boolean).join(" "),
@@ -6800,7 +6873,7 @@ function Memo({
         "--nu-memo-focus-text": focusTextColor,
         "--nu-memo-text": textColor
       },
-      children: /* @__PURE__ */ jsx45("div", { className: "nu-memo__viewport", children: /* @__PURE__ */ jsx45(
+      children: /* @__PURE__ */ jsx47("div", { className: "nu-memo__viewport", children: /* @__PURE__ */ jsx47(
         "textarea",
         {
           ...props,
@@ -6817,10 +6890,10 @@ function Memo({
 import {
   useId as useId8,
   useMemo as useMemo14,
-  useRef as useRef16,
-  useState as useState21
+  useRef as useRef17,
+  useState as useState22
 } from "react";
-import { jsx as jsx46, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs28 } from "react/jsx-runtime";
 function PageControl({
   activePageId: activePageIdProp,
   className,
@@ -6834,8 +6907,8 @@ function PageControl({
 }) {
   const generatedId = useId8();
   const isControlled = activePageIdProp !== void 0;
-  const tabRefs = useRef16({});
-  const [uncontrolledActivePageId, setUncontrolledActivePageId] = useState21(
+  const tabRefs = useRef17({});
+  const [uncontrolledActivePageId, setUncontrolledActivePageId] = useState22(
     () => defaultActivePageId ?? pages.find((page) => !page.disabled)?.id ?? pages[0]?.id
   );
   const activePageId = isControlled ? activePageIdProp : uncontrolledActivePageId;
@@ -6916,7 +6989,7 @@ function PageControl({
         slotStyles?.root
       ),
       children: [
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx48(
           "div",
           {
             className: cx("nu-page-control__tabs", slotClassNames?.tabs),
@@ -6927,7 +7000,7 @@ function PageControl({
               const isActive = page.id === resolvedActivePage?.id;
               const panelId = `${generatedId}-panel-${page.id}`;
               const tabId = `${generatedId}-tab-${page.id}`;
-              return /* @__PURE__ */ jsx46(
+              return /* @__PURE__ */ jsx48(
                 "button",
                 {
                   "aria-controls": panelId,
@@ -6951,7 +7024,7 @@ function PageControl({
             })
           }
         ),
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx48(
           "div",
           {
             "aria-labelledby": resolvedActivePage ? `${generatedId}-tab-${resolvedActivePage.id}` : void 0,
@@ -6968,7 +7041,7 @@ function PageControl({
 }
 
 // src/components/Panel/Panel.tsx
-import { jsx as jsx47, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
 function Panel({
   children,
   className,
@@ -6986,7 +7059,7 @@ function Panel({
       className: cx("nu-panel", slotClassNames?.root, className),
       style: mergeSlotStyle(props.style, slotStyles?.root),
       children: [
-        title ? /* @__PURE__ */ jsx47(
+        title ? /* @__PURE__ */ jsx49(
           "header",
           {
             className: cx("nu-panel__header", slotClassNames?.header),
@@ -6994,7 +7067,7 @@ function Panel({
             children: renderMnemonicText(title)
           }
         ) : null,
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx49(
           "div",
           {
             className: cx(
@@ -7006,7 +7079,7 @@ function Panel({
             children
           }
         ),
-        footer ? /* @__PURE__ */ jsx47(
+        footer ? /* @__PURE__ */ jsx49(
           "footer",
           {
             className: cx("nu-panel__footer", slotClassNames?.footer),
@@ -7023,10 +7096,10 @@ function Panel({
 import {
   useId as useId9,
   useMemo as useMemo15,
-  useRef as useRef17,
-  useState as useState22
+  useRef as useRef18,
+  useState as useState23
 } from "react";
-import { jsx as jsx48, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs30 } from "react/jsx-runtime";
 function collectGroupIds(entries) {
   const groupIds = /* @__PURE__ */ new Set();
   function visit(nextEntries) {
@@ -7134,11 +7207,11 @@ function PropertyGrid({
   ...props
 }) {
   const editorIdPrefix = useId9();
-  const rowButtonRefs = useRef17({});
+  const rowButtonRefs = useRef18({});
   const groupIds = useMemo15(() => collectGroupIds(entries), [entries]);
   const isExpandedControlled = expandedIdsProp !== void 0;
   const isActiveControlled = activeIdProp !== void 0;
-  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState22(() => getInitialExpandedIds(entries, defaultExpandedIds));
+  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState23(() => getInitialExpandedIds(entries, defaultExpandedIds));
   const resolvedExpandedIds = expandedIdsProp ?? uncontrolledExpandedIds;
   const expandedIdSet = useMemo15(
     () => new Set(
@@ -7151,7 +7224,7 @@ function PropertyGrid({
     [entries, expandedIdSet]
   );
   const interactiveRows = useMemo15(() => collectInteractiveRows(rows), [rows]);
-  const [uncontrolledActiveId, setUncontrolledActiveId] = useState22(() => getInitialActiveId2(interactiveRows, defaultActiveId));
+  const [uncontrolledActiveId, setUncontrolledActiveId] = useState23(() => getInitialActiveId2(interactiveRows, defaultActiveId));
   const requestedActiveId = isActiveControlled ? activeIdProp : uncontrolledActiveId;
   const resolvedActiveId = requestedActiveId && interactiveRows.some((row) => row.id === requestedActiveId) ? requestedActiveId : interactiveRows[0]?.id;
   function updateExpandedIds(nextExpandedIds) {
@@ -7270,7 +7343,7 @@ function PropertyGrid({
     const nextExpandedIds = expandedIdSet.has(entry.id) ? resolvedExpandedIds.filter((expandedId) => expandedId !== entry.id) : [...resolvedExpandedIds, entry.id];
     updateExpandedIds(nextExpandedIds);
   }
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx50(
     "div",
     {
       ...props,
@@ -7281,9 +7354,9 @@ function PropertyGrid({
         ...style,
         "--nu-property-grid-label-width": labelWidth
       },
-      children: /* @__PURE__ */ jsx48("div", { className: "nu-property-grid__body", children: rows.map((row) => {
+      children: /* @__PURE__ */ jsx50("div", { className: "nu-property-grid__body", children: rows.map((row) => {
         if (row.type === "section") {
-          return /* @__PURE__ */ jsx48("div", { className: "nu-property-grid__section", children: renderMnemonicText(row.entry.title) }, row.entry.id);
+          return /* @__PURE__ */ jsx50("div", { className: "nu-property-grid__section", children: renderMnemonicText(row.entry.title) }, row.entry.id);
         }
         if (row.type === "group") {
           const isExpanded = expandedIdSet.has(row.entry.id);
@@ -7296,7 +7369,7 @@ function PropertyGrid({
               "data-expanded": isExpanded || void 0,
               "data-group": true,
               children: [
-                /* @__PURE__ */ jsx48(
+                /* @__PURE__ */ jsx50(
                   "button",
                   {
                     className: "nu-property-grid__label nu-property-grid__label-button",
@@ -7317,17 +7390,17 @@ function PropertyGrid({
                     },
                     type: "button",
                     children: /* @__PURE__ */ jsxs30("span", { className: "nu-property-grid__lead", children: [
-                      /* @__PURE__ */ jsx48("span", { className: "nu-property-grid__expander", children: /* @__PURE__ */ jsx48(
+                      /* @__PURE__ */ jsx50("span", { className: "nu-property-grid__expander", children: /* @__PURE__ */ jsx50(
                         NuGlyph,
                         {
                           name: isExpanded ? "tree-caret-down" : "tree-caret-right"
                         }
                       ) }),
-                      /* @__PURE__ */ jsx48("span", { className: "nu-property-grid__label-text", children: renderMnemonicText(row.entry.label) })
+                      /* @__PURE__ */ jsx50("span", { className: "nu-property-grid__label-text", children: renderMnemonicText(row.entry.label) })
                     ] })
                   }
                 ),
-                /* @__PURE__ */ jsx48("div", { className: "nu-property-grid__editor", children: row.entry.summary ? /* @__PURE__ */ jsx48("div", { className: "nu-property-grid__control", children: row.entry.summary }) : null })
+                /* @__PURE__ */ jsx50("div", { className: "nu-property-grid__editor", children: row.entry.summary ? /* @__PURE__ */ jsx50("div", { className: "nu-property-grid__control", children: row.entry.summary }) : null })
               ]
             },
             row.entry.id
@@ -7341,7 +7414,7 @@ function PropertyGrid({
             "data-active": resolvedActiveId === row.entry.id || void 0,
             "data-disabled": row.entry.disabled || void 0,
             children: [
-              /* @__PURE__ */ jsx48(
+              /* @__PURE__ */ jsx50(
                 "button",
                 {
                   className: "nu-property-grid__label nu-property-grid__label-button",
@@ -7362,8 +7435,8 @@ function PropertyGrid({
                   },
                   type: "button",
                   children: /* @__PURE__ */ jsxs30("span", { className: "nu-property-grid__lead", children: [
-                    /* @__PURE__ */ jsx48("span", { className: "nu-property-grid__expander-placeholder" }),
-                    /* @__PURE__ */ jsx48("span", { className: "nu-property-grid__label-text", children: renderMnemonicText(row.entry.label) })
+                    /* @__PURE__ */ jsx50("span", { className: "nu-property-grid__expander-placeholder" }),
+                    /* @__PURE__ */ jsx50("span", { className: "nu-property-grid__label-text", children: renderMnemonicText(row.entry.label) })
                   ] })
                 }
               ),
@@ -7374,8 +7447,8 @@ function PropertyGrid({
                   id: editorId,
                   onFocusCapture: () => updateActiveId(row.entry.id),
                   children: [
-                    /* @__PURE__ */ jsx48("div", { className: "nu-property-grid__control", children: row.entry.content }),
-                    row.entry.hint ? /* @__PURE__ */ jsx48("div", { className: "nu-property-grid__hint", children: row.entry.hint }) : null
+                    /* @__PURE__ */ jsx50("div", { className: "nu-property-grid__control", children: row.entry.content }),
+                    row.entry.hint ? /* @__PURE__ */ jsx50("div", { className: "nu-property-grid__hint", children: row.entry.hint }) : null
                   ]
                 }
               )
@@ -7389,7 +7462,7 @@ function PropertyGrid({
 }
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { jsx as jsx49, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs31 } from "react/jsx-runtime";
 function clamp3(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
@@ -7425,7 +7498,7 @@ function ProgressBar({
       role: "progressbar",
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        label ? /* @__PURE__ */ jsx49(
+        label ? /* @__PURE__ */ jsx51(
           "span",
           {
             className: cx("nu-progress-bar__label", slotClassNames?.label),
@@ -7444,7 +7517,7 @@ function ProgressBar({
               slotStyles?.track
             ),
             children: [
-              /* @__PURE__ */ jsx49(
+              /* @__PURE__ */ jsx51(
                 "div",
                 {
                   className: cx("nu-progress-bar__fill", slotClassNames?.fill),
@@ -7457,7 +7530,7 @@ function ProgressBar({
                   )
                 }
               ),
-              showValue ? /* @__PURE__ */ jsx49(
+              showValue ? /* @__PURE__ */ jsx51(
                 "span",
                 {
                   className: cx("nu-progress-bar__value", slotClassNames?.value),
@@ -7468,7 +7541,7 @@ function ProgressBar({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx49(
+        hint ? /* @__PURE__ */ jsx51(
           "span",
           {
             className: cx("nu-progress-bar__hint", slotClassNames?.hint),
@@ -7482,8 +7555,8 @@ function ProgressBar({
 }
 
 // src/components/RadioGroup/RadioButton.tsx
-import { useId as useId10, useState as useState23 } from "react";
-import { jsx as jsx50, jsxs as jsxs32 } from "react/jsx-runtime";
+import { useId as useId10, useState as useState24 } from "react";
+import { jsx as jsx52, jsxs as jsxs32 } from "react/jsx-runtime";
 function RadioButton({
   checked,
   className,
@@ -7499,7 +7572,7 @@ function RadioButton({
   const inputId = id ?? generatedId;
   const hintId = hint ? `${inputId}-hint` : void 0;
   const isControlled = checked !== void 0;
-  const [uncontrolledChecked, setUncontrolledChecked] = useState23(defaultChecked);
+  const [uncontrolledChecked, setUncontrolledChecked] = useState24(defaultChecked);
   const resolvedChecked = isControlled ? checked : uncontrolledChecked;
   function handleChange(event) {
     if (!isControlled) {
@@ -7509,7 +7582,7 @@ function RadioButton({
   }
   return /* @__PURE__ */ jsxs32("label", { className: ["nu-radio-button", className].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ jsxs32("span", { className: "nu-radio-button__main", children: [
-      /* @__PURE__ */ jsx50(
+      /* @__PURE__ */ jsx52(
         "input",
         {
           ...props,
@@ -7522,19 +7595,19 @@ function RadioButton({
           type: "radio"
         }
       ),
-      /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: "nu-radio-button__control", children: /* @__PURE__ */ jsxs32("span", { className: "nu-radio-button__disc", children: [
-        /* @__PURE__ */ jsx50(NuGlyph, { className: "nu-radio-button__ring", name: "radio-ring" }),
-        resolvedChecked ? /* @__PURE__ */ jsx50(NuGlyph, { className: "nu-radio-button__fill", name: "radio-fill" }) : null
+      /* @__PURE__ */ jsx52("span", { "aria-hidden": "true", className: "nu-radio-button__control", children: /* @__PURE__ */ jsxs32("span", { className: "nu-radio-button__disc", children: [
+        /* @__PURE__ */ jsx52(NuGlyph, { className: "nu-radio-button__ring", name: "radio-ring" }),
+        resolvedChecked ? /* @__PURE__ */ jsx52(NuGlyph, { className: "nu-radio-button__fill", name: "radio-fill" }) : null
       ] }) }),
-      /* @__PURE__ */ jsx50("span", { className: "nu-radio-button__label", children: renderMnemonicText(label) })
+      /* @__PURE__ */ jsx52("span", { className: "nu-radio-button__label", children: renderMnemonicText(label) })
     ] }),
-    hint ? /* @__PURE__ */ jsx50("span", { className: "nu-radio-button__hint", id: hintId, children: hint }) : null
+    hint ? /* @__PURE__ */ jsx52("span", { className: "nu-radio-button__hint", id: hintId, children: hint }) : null
   ] });
 }
 
 // src/components/RadioGroup/RadioGroup.tsx
-import { useId as useId11, useState as useState24 } from "react";
-import { jsx as jsx51, jsxs as jsxs33 } from "react/jsx-runtime";
+import { useId as useId11, useState as useState25 } from "react";
+import { jsx as jsx53, jsxs as jsxs33 } from "react/jsx-runtime";
 function RadioGroup({
   className,
   defaultValue,
@@ -7553,7 +7626,7 @@ function RadioGroup({
   const groupName = name ?? generatedId;
   const hintId = hint ? `${groupName}-hint` : void 0;
   const isControlled = value !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = useState24(defaultValue ?? options[0]?.value);
+  const [uncontrolledValue, setUncontrolledValue] = useState25(defaultValue ?? options[0]?.value);
   const resolvedValue = isControlled ? value : uncontrolledValue;
   function commitValue(nextValue) {
     if (!isControlled) {
@@ -7569,7 +7642,7 @@ function RadioGroup({
       className: cx("nu-radio-group", slotClassNames?.root, className),
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        label ? /* @__PURE__ */ jsx51(
+        label ? /* @__PURE__ */ jsx53(
           "legend",
           {
             className: cx("nu-radio-group__label", slotClassNames?.label),
@@ -7577,12 +7650,12 @@ function RadioGroup({
             children: renderMnemonicText(label)
           }
         ) : null,
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx53(
           "div",
           {
             className: cx("nu-radio-group__options", slotClassNames?.options),
             style: slotStyles?.options,
-            children: options.map((option) => /* @__PURE__ */ jsx51(
+            children: options.map((option) => /* @__PURE__ */ jsx53(
               RadioButton,
               {
                 checked: resolvedValue === option.value,
@@ -7601,7 +7674,7 @@ function RadioGroup({
             ))
           }
         ),
-        hint ? /* @__PURE__ */ jsx51(
+        hint ? /* @__PURE__ */ jsx53(
           "span",
           {
             className: cx("nu-radio-group__hint", slotClassNames?.hint),
@@ -7616,14 +7689,14 @@ function RadioGroup({
 }
 
 // src/components/ReportCell/ReportCell.tsx
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 function ReportCell({
   align = "start",
   className,
   tone = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx54(
     "span",
     {
       ...props,
@@ -7642,11 +7715,11 @@ import {
   useEffect as useEffect13,
   useId as useId12,
   useMemo as useMemo16,
-  useRef as useRef18,
-  useState as useState25
+  useRef as useRef19,
+  useState as useState26
 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { jsx as jsx53, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs34 } from "react/jsx-runtime";
 function resolveSearchBoxPortalRoot() {
   return document.body;
 }
@@ -7674,21 +7747,21 @@ function SearchBox({
   style,
   ...props
 }) {
-  const rootRef = useRef18(null);
-  const fieldRef = useRef18(null);
-  const inputRef = useRef18(null);
-  const popupRef = useRef18(null);
-  const requestIdRef = useRef18(0);
+  const rootRef = useRef19(null);
+  const fieldRef = useRef19(null);
+  const inputRef = useRef19(null);
+  const popupRef = useRef19(null);
+  const requestIdRef = useRef19(0);
   const generatedId = useId12();
   const fieldId = `${generatedId}-search-box`;
   const labelId = `${fieldId}-label`;
   const hintId = hint ? `${fieldId}-hint` : void 0;
   const isQueryControlled = queryProp !== void 0;
-  const [uncontrolledQuery, setUncontrolledQuery] = useState25(defaultQuery);
-  const [open, setOpen] = useState25(false);
-  const [status, setStatus] = useState25("idle");
-  const [results, setResults] = useState25([]);
-  const [selectedValue, setSelectedValue] = useState25(null);
+  const [uncontrolledQuery, setUncontrolledQuery] = useState26(defaultQuery);
+  const [open, setOpen] = useState26(false);
+  const [status, setStatus] = useState26("idle");
+  const [results, setResults] = useState26([]);
+  const [selectedValue, setSelectedValue] = useState26(null);
   const normalizedQuery = (isQueryControlled ? queryProp : uncontrolledQuery) ?? "";
   const trimmedQuery = normalizedQuery.trim();
   const resultOptions = useMemo16(() => {
@@ -7715,7 +7788,7 @@ function SearchBox({
     [resultOptions]
   );
   const popupRoot = typeof document === "undefined" ? null : resolveSearchBoxPortalRoot();
-  const [themePortalStyle, setThemePortalStyle] = useState25(() => void 0);
+  const [themePortalStyle, setThemePortalStyle] = useState26(() => void 0);
   useEffect13(() => {
     if (disabled) {
       return;
@@ -7796,15 +7869,15 @@ function SearchBox({
   }
   function renderPopupContent() {
     if (status === "loading") {
-      return /* @__PURE__ */ jsx53("div", { className: "nu-search-box__status", children: loadingText });
+      return /* @__PURE__ */ jsx55("div", { className: "nu-search-box__status", children: loadingText });
     }
     if (status === "error") {
-      return /* @__PURE__ */ jsx53("div", { className: "nu-search-box__status", children: errorText });
+      return /* @__PURE__ */ jsx55("div", { className: "nu-search-box__status", children: errorText });
     }
     if (trimmedQuery.length < minQueryLength) {
-      return /* @__PURE__ */ jsx53("div", { className: "nu-search-box__status", children: idleText });
+      return /* @__PURE__ */ jsx55("div", { className: "nu-search-box__status", children: idleText });
     }
-    return /* @__PURE__ */ jsx53("div", { className: "nu-search-box__listbox", children: /* @__PURE__ */ jsx53(
+    return /* @__PURE__ */ jsx55("div", { className: "nu-search-box__listbox", children: /* @__PURE__ */ jsx55(
       ListBox,
       {
         data: listBoxData,
@@ -7849,10 +7922,10 @@ function SearchBox({
       ref: rootRef,
       style,
       children: [
-        /* @__PURE__ */ jsx53("label", { className: "nu-search-box__label", htmlFor: fieldId, id: labelId, children: renderMnemonicText(label) }),
+        /* @__PURE__ */ jsx55("label", { className: "nu-search-box__label", htmlFor: fieldId, id: labelId, children: renderMnemonicText(label) }),
         /* @__PURE__ */ jsxs34("span", { className: "nu-search-box__slot", ref: fieldRef, children: [
-          /* @__PURE__ */ jsx53("span", { "aria-hidden": "true", className: "nu-search-box__bracket", children: "[" }),
-          /* @__PURE__ */ jsx53("span", { className: "nu-search-box__input-shell", children: /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx55("span", { "aria-hidden": "true", className: "nu-search-box__bracket", children: "[" }),
+          /* @__PURE__ */ jsx55("span", { className: "nu-search-box__input-shell", children: /* @__PURE__ */ jsx55(
             "input",
             {
               "aria-autocomplete": "list",
@@ -7877,11 +7950,11 @@ function SearchBox({
               value: normalizedQuery
             }
           ) }),
-          /* @__PURE__ */ jsx53("span", { "aria-hidden": "true", className: "nu-search-box__bracket", children: "]" })
+          /* @__PURE__ */ jsx55("span", { "aria-hidden": "true", className: "nu-search-box__bracket", children: "]" })
         ] }),
-        hint ? /* @__PURE__ */ jsx53("span", { className: "nu-search-box__hint", id: hintId, children: hint }) : null,
+        hint ? /* @__PURE__ */ jsx55("span", { className: "nu-search-box__hint", id: hintId, children: hint }) : null,
         open && popupRoot ? createPortal4(
-          /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx55(
             "div",
             {
               className: "nu-search-box__popup",
@@ -7902,9 +7975,9 @@ function SearchBox({
 import {
   useId as useId13,
   useMemo as useMemo17,
-  useState as useState26
+  useState as useState27
 } from "react";
-import { jsx as jsx54, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs35 } from "react/jsx-runtime";
 function clampSpinValue(value, min, max) {
   let nextValue = value;
   if (min !== void 0) {
@@ -7954,9 +8027,9 @@ function SpinBox({
     min,
     max
   );
-  const [uncontrolledValue, setUncontrolledValue] = useState26(initialNumericValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState27(initialNumericValue);
   const numericValue = isControlled ? clampSpinValue(value ?? initialNumericValue, min, max) : uncontrolledValue;
-  const [uncontrolledDraftValue, setUncontrolledDraftValue] = useState26(
+  const [uncontrolledDraftValue, setUncontrolledDraftValue] = useState27(
     () => formatSpinValue(initialNumericValue)
   );
   const draftValue = isControlled ? formatSpinValue(numericValue) : uncontrolledDraftValue;
@@ -8024,7 +8097,7 @@ function SpinBox({
       htmlFor: fieldId,
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsx56(
           "span",
           {
             className: cx("nu-spin-box__label", slotClassNames?.label),
@@ -8038,7 +8111,7 @@ function SpinBox({
             className: cx("nu-spin-box__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsx54(
+              /* @__PURE__ */ jsx56(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -8047,12 +8120,12 @@ function SpinBox({
                   children: "["
                 }
               ),
-              /* @__PURE__ */ jsx54(
+              /* @__PURE__ */ jsx56(
                 "span",
                 {
                   className: cx("nu-spin-box__input-shell", slotClassNames?.inputShell),
                   style: slotStyles?.inputShell,
-                  children: /* @__PURE__ */ jsx54(
+                  children: /* @__PURE__ */ jsx56(
                     "input",
                     {
                       ...props,
@@ -8071,7 +8144,7 @@ function SpinBox({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx54(
+              /* @__PURE__ */ jsx56(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -8086,7 +8159,7 @@ function SpinBox({
                   className: cx("nu-spin-box__controls", slotClassNames?.controls),
                   style: slotStyles?.controls,
                   children: [
-                    /* @__PURE__ */ jsx54(
+                    /* @__PURE__ */ jsx56(
                       "button",
                       {
                         className: cx("nu-spin-box__button", slotClassNames?.button),
@@ -8097,7 +8170,7 @@ function SpinBox({
                         children: "-"
                       }
                     ),
-                    /* @__PURE__ */ jsx54(
+                    /* @__PURE__ */ jsx56(
                       "button",
                       {
                         className: cx("nu-spin-box__button", slotClassNames?.button),
@@ -8114,7 +8187,7 @@ function SpinBox({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx54(
+        hint ? /* @__PURE__ */ jsx56(
           "span",
           {
             className: cx("nu-spin-box__hint", slotClassNames?.hint),
@@ -8132,10 +8205,10 @@ function SpinBox({
 import {
   useEffect as useEffect14,
   useId as useId14,
-  useRef as useRef19,
-  useState as useState27
+  useRef as useRef20,
+  useState as useState28
 } from "react";
-import { jsx as jsx55, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs36 } from "react/jsx-runtime";
 function clamp4(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
@@ -8166,12 +8239,12 @@ function Splitter({
     const parsedValue = Number(rawValue);
     return Number.isFinite(parsedValue) ? parsedValue : null;
   };
-  const [uncontrolledValue, setUncontrolledValue] = useState27(
+  const [uncontrolledValue, setUncontrolledValue] = useState28(
     clamp4(getSavedValue() ?? defaultValue, min, max)
   );
-  const rootRef = useRef19(null);
-  const dragFrameRef = useRef19(null);
-  const dragValueRef = useRef19(null);
+  const rootRef = useRef20(null);
+  const dragFrameRef = useRef20(null);
+  const dragValueRef = useRef20(null);
   const activeValue = clamp4(
     (isControlled ? value : uncontrolledValue) ?? defaultValue,
     min,
@@ -8302,8 +8375,8 @@ function Splitter({
         "--nu-splitter-value": `${activeValue * 100}%`
       },
       children: [
-        /* @__PURE__ */ jsx55("div", { className: "nu-splitter__pane", id: firstPaneId, children: first }),
-        /* @__PURE__ */ jsx55(
+        /* @__PURE__ */ jsx57("div", { className: "nu-splitter__pane", id: firstPaneId, children: first }),
+        /* @__PURE__ */ jsx57(
           "div",
           {
             "aria-controls": `${firstPaneId} ${secondPaneId}`,
@@ -8316,7 +8389,7 @@ function Splitter({
             onPointerDown: handlePointerDown,
             role: "separator",
             tabIndex: 0,
-            children: /* @__PURE__ */ jsx55(
+            children: /* @__PURE__ */ jsx57(
               "span",
               {
                 "aria-hidden": "true",
@@ -8326,7 +8399,7 @@ function Splitter({
             )
           }
         ),
-        /* @__PURE__ */ jsx55("div", { className: "nu-splitter__pane", id: secondPaneId, children: second })
+        /* @__PURE__ */ jsx57("div", { className: "nu-splitter__pane", id: secondPaneId, children: second })
       ]
     }
   );
@@ -8337,10 +8410,10 @@ import {
   useEffect as useEffect15,
   useId as useId15,
   useMemo as useMemo18,
-  useRef as useRef20,
-  useState as useState28
+  useRef as useRef21,
+  useState as useState29
 } from "react";
-import { jsx as jsx56, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs37 } from "react/jsx-runtime";
 function clamp5(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
@@ -8385,9 +8458,9 @@ function TickBar({
     min,
     safeMax
   );
-  const [uncontrolledValue, setUncontrolledValue] = useState28(initialValue);
-  const [dragging, setDragging] = useState28(false);
-  const trackRef = useRef20(null);
+  const [uncontrolledValue, setUncontrolledValue] = useState29(initialValue);
+  const [dragging, setDragging] = useState29(false);
+  const trackRef = useRef21(null);
   const resolvedValue = isControlled ? clamp5(snapToStep(value ?? initialValue, min, safeStep), min, safeMax) : uncontrolledValue;
   const ratio = safeMax === min ? 0 : (resolvedValue - min) / (safeMax - min);
   const derivedTickCount = useMemo18(() => {
@@ -8489,7 +8562,7 @@ function TickBar({
         slotStyles?.root
       ),
       children: [
-        label ? /* @__PURE__ */ jsx56(
+        label ? /* @__PURE__ */ jsx58(
           "span",
           {
             className: cx("nu-tick-bar__label", slotClassNames?.label),
@@ -8545,19 +8618,19 @@ function TickBar({
                   style: slotStyles?.track,
                   tabIndex: disabled ? -1 : 0,
                   children: [
-                    /* @__PURE__ */ jsx56(
+                    /* @__PURE__ */ jsx58(
                       "div",
                       {
                         className: cx("nu-tick-bar__rail", slotClassNames?.rail),
                         style: slotStyles?.rail
                       }
                     ),
-                    /* @__PURE__ */ jsx56(
+                    /* @__PURE__ */ jsx58(
                       "div",
                       {
                         className: cx("nu-tick-bar__ticks", slotClassNames?.ticks),
                         style: slotStyles?.ticks,
-                        children: Array.from({ length: derivedTickCount }, (_, index) => /* @__PURE__ */ jsx56(
+                        children: Array.from({ length: derivedTickCount }, (_, index) => /* @__PURE__ */ jsx58(
                           "span",
                           {
                             "aria-hidden": "true",
@@ -8568,7 +8641,7 @@ function TickBar({
                         ))
                       }
                     ),
-                    /* @__PURE__ */ jsx56(
+                    /* @__PURE__ */ jsx58(
                       "div",
                       {
                         "aria-hidden": "true",
@@ -8586,7 +8659,7 @@ function TickBar({
                   ]
                 }
               ),
-              showValue ? /* @__PURE__ */ jsx56(
+              showValue ? /* @__PURE__ */ jsx58(
                 "span",
                 {
                   className: cx("nu-tick-bar__value", slotClassNames?.value),
@@ -8597,7 +8670,7 @@ function TickBar({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx56(
+        hint ? /* @__PURE__ */ jsx58(
           "span",
           {
             className: cx("nu-tick-bar__hint", slotClassNames?.hint),
@@ -8612,17 +8685,19 @@ function TickBar({
 }
 
 // src/components/ToolBar/ToolBar.tsx
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs38 } from "react/jsx-runtime";
 function ToolBar({
   children,
   className,
+  endContent,
   fill = true,
   slotClassNames,
   slotStyles,
+  startContent,
   wrap = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsxs38(
     "div",
     {
       ...props,
@@ -8631,7 +8706,11 @@ function ToolBar({
       "data-wrap": wrap || void 0,
       role: "toolbar",
       style: mergeSlotStyle(props.style, slotStyles?.root),
-      children
+      children: [
+        startContent !== null && startContent !== void 0 ? /* @__PURE__ */ jsx59("span", { className: "nu-toolbar__static nu-toolbar__static--start", children: startContent }) : null,
+        children,
+        endContent !== null && endContent !== void 0 ? /* @__PURE__ */ jsx59("span", { className: "nu-toolbar__static nu-toolbar__static--end", children: endContent }) : null
+      ]
     }
   );
 }
@@ -8641,7 +8720,7 @@ function ToolButton({
   slotStyles,
   ...props
 }) {
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx59(
     CommandButton,
     {
       ...props,
@@ -8671,7 +8750,7 @@ function ToolDropButton({
   uncheckedShape,
   ...props
 }) {
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx59(
     CommandButton,
     {
       ...props,
@@ -8697,7 +8776,7 @@ function ToolDropButton({
   );
 }
 function ToolSeparator({ className, ...props }) {
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx59(
     "div",
     {
       ...props,
@@ -8720,8 +8799,8 @@ import {
   useId as useId16,
   useImperativeHandle as useImperativeHandle3,
   useMemo as useMemo19,
-  useRef as useRef21,
-  useState as useState29
+  useRef as useRef22,
+  useState as useState30
 } from "react";
 
 // src/components/_shared/treeData.ts
@@ -8819,7 +8898,7 @@ function collectVisibleTreeItems(items, expandedIds, depth = 0, guideMask = [],
 
 // src/components/TreeView/internals/TreeViewItem.tsx
 import { memo as memo4 } from "react";
-import { jsx as jsx58, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs39 } from "react/jsx-runtime";
 function areTreeViewGuideArraysEqual(previousArray, nextArray) {
   if (previousArray.length !== nextArray.length) {
     return false;
@@ -8893,8 +8972,8 @@ function TreeViewItemInner({
     handleActivate();
     onToggleItemCheck?.(item, !isChecked);
   }
-  return /* @__PURE__ */ jsxs38("div", { className: "nu-tree-view__row", role: "none", children: [
-    /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39("div", { className: "nu-tree-view__row", role: "none", children: [
+    /* @__PURE__ */ jsxs39(
       "div",
       {
         "aria-checked": isCheckable ? isChecked : void 0,
@@ -8913,8 +8992,8 @@ function TreeViewItemInner({
         ref: (node) => registerItemRef(itemId, node),
         role: "treeitem",
         children: [
-          /* @__PURE__ */ jsxs38("span", { "aria-hidden": "true", className: "nu-tree-view__prefix", children: [
-            guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ jsx58(
+          /* @__PURE__ */ jsxs39("span", { "aria-hidden": "true", className: "nu-tree-view__prefix", children: [
+            guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ jsx60(
               "span",
               {
                 className: "nu-tree-view__guide",
@@ -8925,7 +9004,7 @@ function TreeViewItemInner({
               },
               `${itemId}-guide-${guideIndex}`
             )),
-            /* @__PURE__ */ jsxs38(
+            /* @__PURE__ */ jsxs39(
               "span",
               {
                 className: "nu-tree-view__lead",
@@ -8933,19 +9012,19 @@ function TreeViewItemInner({
                   "--nu-tree-view-origin-offset": originOffset
                 },
                 children: [
-                  depth > 0 ? /* @__PURE__ */ jsx58(
+                  depth > 0 ? /* @__PURE__ */ jsx60(
                     "span",
                     {
                       className: "nu-tree-view__branch",
                       "data-branch": hasNextSibling ? "tee" : "elbow"
                     }
                   ) : null,
-                  hasChildren ? /* @__PURE__ */ jsx58(
+                  hasChildren ? /* @__PURE__ */ jsx60(
                     "span",
                     {
                       className: "nu-tree-view__expander",
                       "data-connector": depth > 0 ? "lead" : void 0,
-                      children: /* @__PURE__ */ jsx58(
+                      children: /* @__PURE__ */ jsx60(
                         "button",
                         {
                           "aria-label": isExpanded ? "Collapse item" : "Expand item",
@@ -8953,7 +9032,7 @@ function TreeViewItemInner({
                           onClick: handleToggleExpanded,
                           tabIndex: -1,
                           type: "button",
-                          children: /* @__PURE__ */ jsx58(
+                          children: /* @__PURE__ */ jsx60(
                             NuGlyph,
                             {
                               name: isExpanded ? "tree-caret-down" : "tree-caret-right"
@@ -8962,7 +9041,7 @@ function TreeViewItemInner({
                         }
                       )
                     }
-                  ) : depth > 0 ? /* @__PURE__ */ jsx58(
+                  ) : depth > 0 ? /* @__PURE__ */ jsx60(
                     "span",
                     {
                       className: "nu-tree-view__expander-placeholder",
@@ -8973,8 +9052,8 @@ function TreeViewItemInner({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs38("span", { className: "nu-tree-view__content", children: [
-            isCheckable ? /* @__PURE__ */ jsx58("span", { className: "nu-tree-view__check-slot", children: /* @__PURE__ */ jsx58(
+          /* @__PURE__ */ jsxs39("span", { className: "nu-tree-view__content", children: [
+            isCheckable ? /* @__PURE__ */ jsx60("span", { className: "nu-tree-view__check-slot", children: /* @__PURE__ */ jsx60(
               "button",
               {
                 "aria-label": isChecked ? "Uncheck item" : "Check item",
@@ -8982,12 +9061,12 @@ function TreeViewItemInner({
                 onClick: handleToggleChecked,
                 tabIndex: -1,
                 type: "button",
-                children: /* @__PURE__ */ jsx58(
+                children: /* @__PURE__ */ jsx60(
                   "span",
                   {
                     className: "nu-tree-view__check-box",
                     "data-unchecked-shape": uncheckedShape,
-                    children: isChecked ? /* @__PURE__ */ jsx58(
+                    children: isChecked ? /* @__PURE__ */ jsx60(
                       NuGlyph,
                       {
                         className: "nu-tree-view__check-mark",
@@ -8998,14 +9077,14 @@ function TreeViewItemInner({
                 )
               }
             ) }) : null,
-            item.icon ? /* @__PURE__ */ jsx58("span", { className: "nu-tree-view__icon", children: item.icon }) : null,
-            /* @__PURE__ */ jsx58("span", { className: "nu-tree-view__title", children: item.title }),
-            item.hint ? /* @__PURE__ */ jsx58("span", { className: "nu-tree-view__hint", children: item.hint }) : null
+            item.icon ? /* @__PURE__ */ jsx60("span", { className: "nu-tree-view__icon", children: item.icon }) : null,
+            /* @__PURE__ */ jsx60("span", { className: "nu-tree-view__title", children: item.title }),
+            item.hint ? /* @__PURE__ */ jsx60("span", { className: "nu-tree-view__hint", children: item.hint }) : null
           ] })
         ]
       }
     ),
-    hasChildren && isExpanded ? /* @__PURE__ */ jsx58("div", { role: "group", children: (item.children ?? []).map((child, index) => /* @__PURE__ */ jsx58(
+    hasChildren && isExpanded ? /* @__PURE__ */ jsx60("div", { role: "group", children: (item.children ?? []).map((child, index) => /* @__PURE__ */ jsx60(
       TreeViewItem,
       {
         depth: depth + 1,
@@ -9041,7 +9120,7 @@ function areTreeViewItemPropsEqual(previousProps, nextProps) {
 var TreeViewItem = memo4(TreeViewItemInner, areTreeViewItemPropsEqual);
 
 // src/components/TreeView/TreeView.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 function TreeViewInner({
   className,
   data,
@@ -9056,18 +9135,18 @@ function TreeViewInner({
   uncheckedShape = "box",
   ...props
 }, ref) {
-  const rootRef = useRef21(null);
+  const rootRef = useRef22(null);
   const treeId = useId16();
-  const itemRefs = useRef21({});
+  const itemRefs = useRef22({});
   const isExpandedControlled = expandedIds !== void 0;
-  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState29(() => {
+  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState30(() => {
     const expandedFromData = collectExpandedTreeIds(data);
     if (!defaultExpandedIds?.length) {
       return expandedFromData;
     }
     return Array.from(/* @__PURE__ */ new Set([...expandedFromData, ...defaultExpandedIds]));
   });
-  const [uncontrolledSelectedId, setUncontrolledSelectedId] = useState29(null);
+  const [uncontrolledSelectedId, setUncontrolledSelectedId] = useState30(null);
   const resolvedExpandedIds = isExpandedControlled ? expandedIds : uncontrolledExpandedIds;
   const expandedIdSet = useMemo19(
     () => new Set(resolvedExpandedIds),
@@ -9083,7 +9162,7 @@ function TreeViewInner({
   );
   const derivedSelectedId = selectedId ?? uncontrolledSelectedId ?? findSelectedTreeItemId(data) ?? selectableItems[0]?.itemId ?? null;
   const resolvedSelectedId = derivedSelectedId && selectableItems.some((entry) => entry.itemId === derivedSelectedId) ? derivedSelectedId : selectableItems[0]?.itemId ?? null;
-  const [activeId, setActiveId] = useState29(resolvedSelectedId);
+  const [activeId, setActiveId] = useState30(resolvedSelectedId);
   const resolvedActiveId = activeId && selectableItems.some((entry) => entry.itemId === activeId) ? activeId : resolvedSelectedId;
   useEffect16(() => {
     if (!resolvedActiveId) {
@@ -9292,7 +9371,7 @@ function TreeViewInner({
       setExpandedState
     ]
   );
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx61(
     "div",
     {
       ...props,
@@ -9302,7 +9381,7 @@ function TreeViewInner({
       ref: rootRef,
       role: "tree",
       tabIndex: 0,
-      children: visibleItems.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx59(
+      children: visibleItems.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx61(
         TreeViewItem,
         {
           depth: 0,
@@ -9322,7 +9401,7 @@ function TreeViewInner({
           uncheckedShape
         },
         item.id
-      )) : /* @__PURE__ */ jsx59("div", { className: "nu-tree-view__empty", children: emptyText })
+      )) : /* @__PURE__ */ jsx61("div", { className: "nu-tree-view__empty", children: emptyText })
     }
   );
 }
@@ -9335,10 +9414,10 @@ import {
   useEffect as useEffect17,
   useId as useId17,
   useImperativeHandle as useImperativeHandle4,
-  useLayoutEffect as useLayoutEffect5,
+  useLayoutEffect as useLayoutEffect6,
   useMemo as useMemo20,
-  useRef as useRef22,
-  useState as useState30
+  useRef as useRef23,
+  useState as useState31
 } from "react";
 
 // src/components/TreeListView/internals/helpers.ts
@@ -9429,11 +9508,11 @@ function renderTreeListCellValue(item, column) {
 
 // src/components/TreeListView/internals/TreeListViewRow.tsx
 import { memo as memo5 } from "react";
-import { Fragment as Fragment7, jsx as jsx60, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx62, jsxs as jsxs40 } from "react/jsx-runtime";
 function renderTreeTitleContent(item) {
-  return /* @__PURE__ */ jsxs39(Fragment7, { children: [
-    /* @__PURE__ */ jsx60("span", { className: "nu-tree-list-view__title", children: item.title }),
-    item.hint ? /* @__PURE__ */ jsx60("span", { className: "nu-tree-list-view__hint", children: item.hint }) : null
+  return /* @__PURE__ */ jsxs40(Fragment7, { children: [
+    /* @__PURE__ */ jsx62("span", { className: "nu-tree-list-view__title", children: item.title }),
+    item.hint ? /* @__PURE__ */ jsx62("span", { className: "nu-tree-list-view__hint", children: item.hint }) : null
   ] });
 }
 function renderReportCellContent(item, column, depth, rowIndex, getCellContent) {
@@ -9559,8 +9638,8 @@ function TreeListViewRowInner({
     handleActivate();
     onToggleItemCheck?.(item, !isChecked);
   }
-  return /* @__PURE__ */ jsxs39(Fragment7, { children: [
-    /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsxs40(Fragment7, { children: [
+    /* @__PURE__ */ jsx62(
       "div",
       {
         "aria-disabled": item.disabled || void 0,
@@ -9588,7 +9667,7 @@ function TreeListViewRowInner({
           "--nu-tree-list-view-columns": templateColumns
         },
         children: columns.map(
-          (column, columnIndex) => column.id === treeColumnId ? /* @__PURE__ */ jsxs39(
+          (column, columnIndex) => column.id === treeColumnId ? /* @__PURE__ */ jsxs40(
             "span",
             {
               className: [
@@ -9600,8 +9679,8 @@ function TreeListViewRowInner({
               "data-column-id": column.id,
               role: "gridcell",
               children: [
-                /* @__PURE__ */ jsxs39("span", { "aria-hidden": "true", className: "nu-tree-list-view__prefix", children: [
-                  guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ jsx60(
+                /* @__PURE__ */ jsxs40("span", { "aria-hidden": "true", className: "nu-tree-list-view__prefix", children: [
+                  guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ jsx62(
                     "span",
                     {
                       className: "nu-tree-list-view__guide",
@@ -9612,7 +9691,7 @@ function TreeListViewRowInner({
                     },
                     `${itemId}-guide-${guideIndex}`
                   )),
-                  /* @__PURE__ */ jsxs39(
+                  /* @__PURE__ */ jsxs40(
                     "span",
                     {
                       className: "nu-tree-list-view__lead",
@@ -9620,19 +9699,19 @@ function TreeListViewRowInner({
                         "--nu-tree-list-view-origin-offset": originOffset
                       },
                       children: [
-                        depth > 0 ? /* @__PURE__ */ jsx60(
+                        depth > 0 ? /* @__PURE__ */ jsx62(
                           "span",
                           {
                             className: "nu-tree-list-view__branch",
                             "data-branch": hasNextSibling ? "tee" : "elbow"
                           }
                         ) : null,
-                        hasChildren ? /* @__PURE__ */ jsx60(
+                        hasChildren ? /* @__PURE__ */ jsx62(
                           "span",
                           {
                             className: "nu-tree-list-view__expander",
                             "data-connector": depth > 0 ? "lead" : void 0,
-                            children: /* @__PURE__ */ jsx60(
+                            children: /* @__PURE__ */ jsx62(
                               "button",
                               {
                                 "aria-label": isExpanded ? "Collapse item" : "Expand item",
@@ -9640,7 +9719,7 @@ function TreeListViewRowInner({
                                 onClick: handleToggleExpanded,
                                 tabIndex: -1,
                                 type: "button",
-                                children: /* @__PURE__ */ jsx60(
+                                children: /* @__PURE__ */ jsx62(
                                   NuGlyph,
                                   {
                                     name: isExpanded ? "tree-caret-down" : "tree-caret-right"
@@ -9649,7 +9728,7 @@ function TreeListViewRowInner({
                               }
                             )
                           }
-                        ) : depth > 0 ? /* @__PURE__ */ jsx60(
+                        ) : depth > 0 ? /* @__PURE__ */ jsx62(
                           "span",
                           {
                             className: "nu-tree-list-view__expander-placeholder",
@@ -9660,8 +9739,8 @@ function TreeListViewRowInner({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs39("span", { className: "nu-tree-list-view__tree-content", children: [
-                  isCheckable ? /* @__PURE__ */ jsx60("span", { className: "nu-tree-list-view__check-slot", children: /* @__PURE__ */ jsx60(
+                /* @__PURE__ */ jsxs40("span", { className: "nu-tree-list-view__tree-content", children: [
+                  isCheckable ? /* @__PURE__ */ jsx62("span", { className: "nu-tree-list-view__check-slot", children: /* @__PURE__ */ jsx62(
                     "button",
                     {
                       "aria-label": isChecked ? "Uncheck item" : "Check item",
@@ -9669,12 +9748,12 @@ function TreeListViewRowInner({
                       onClick: handleToggleChecked,
                       tabIndex: -1,
                       type: "button",
-                      children: /* @__PURE__ */ jsx60(
+                      children: /* @__PURE__ */ jsx62(
                         "span",
                         {
                           className: "nu-tree-list-view__check-box",
                           "data-unchecked-shape": uncheckedShape,
-                          children: isChecked ? /* @__PURE__ */ jsx60(
+                          children: isChecked ? /* @__PURE__ */ jsx62(
                             NuGlyph,
                             {
                               className: "nu-tree-list-view__check-mark",
@@ -9685,13 +9764,13 @@ function TreeListViewRowInner({
                       )
                     }
                   ) }) : null,
-                  item.icon ? /* @__PURE__ */ jsx60("span", { className: "nu-tree-list-view__icon", children: item.icon }) : null,
+                  item.icon ? /* @__PURE__ */ jsx62("span", { className: "nu-tree-list-view__icon", children: item.icon }) : null,
                   renderTreeTitleContent(item)
                 ] })
               ]
             },
             column.id
-          ) : /* @__PURE__ */ jsx60(
+          ) : /* @__PURE__ */ jsx62(
             "span",
             {
               className: [
@@ -9714,7 +9793,7 @@ function TreeListViewRowInner({
         )
       }
     ),
-    hasChildren && isExpanded ? /* @__PURE__ */ jsx60("div", { role: "rowgroup", children: (item.children ?? []).map((child, index) => /* @__PURE__ */ jsx60(
+    hasChildren && isExpanded ? /* @__PURE__ */ jsx62("div", { role: "rowgroup", children: (item.children ?? []).map((child, index) => /* @__PURE__ */ jsx62(
       TreeListViewRow,
       {
         activeItemId,
@@ -9761,12 +9840,43 @@ var TreeListViewRow = memo5(
 );
 
 // src/components/TreeListView/TreeListView.tsx
-import { jsx as jsx61, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs41 } from "react/jsx-runtime";
+function getColumnStorageKey(columnStoreKey) {
+  const normalizedKey = columnStoreKey?.trim();
+  return normalizedKey ? `reactnu.${normalizedKey}` : null;
+}
+function readStoredColumnWidths(storageKey, columns) {
+  if (!storageKey || typeof window === "undefined") {
+    return {};
+  }
+  try {
+    const rawValue = window.localStorage.getItem(storageKey);
+    if (!rawValue) {
+      return {};
+    }
+    const parsedValue = JSON.parse(rawValue);
+    if (!parsedValue || typeof parsedValue !== "object") {
+      return {};
+    }
+    return Object.fromEntries(
+      columns.flatMap((column) => {
+        const width = parsedValue[column.id];
+        if (typeof width !== "number" || !Number.isFinite(width)) {
+          return [];
+        }
+        return [[column.id, Math.max(width, column.minWidth ?? 0)]];
+      })
+    );
+  } catch {
+    return {};
+  }
+}
 function TreeListViewInner({
   acceptsDrop,
   activeItemId: activeItemIdProp,
   checkedIds,
   className,
+  columnStoreKey,
   columns,
   onPopupMenu,
   data,
@@ -9788,23 +9898,26 @@ function TreeListViewInner({
   uncheckedShape = "box",
   ...props
 }, ref) {
-  const rootRef = useRef22(null);
-  const [rootElement, setRootElement] = useState30(null);
+  const rootRef = useRef23(null);
+  const [rootElement, setRootElement] = useState31(null);
   const treeId = useId17();
-  const itemRefs = useRef22({});
-  const resizeFrameRef = useRef22(null);
-  const resizeStateRef = useRef22(null);
+  const storageKey = getColumnStorageKey(columnStoreKey);
+  const loadedStorageKeyRef = useRef23(storageKey);
+  const shouldPersistColumnWidthsRef = useRef23(false);
+  const itemRefs = useRef23({});
+  const resizeFrameRef = useRef23(null);
+  const resizeStateRef = useRef23(null);
   const isExpandedControlled = expandedIds !== void 0;
-  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState30(() => {
+  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState31(() => {
     const expandedFromData = collectExpandedTreeListIds(data);
     if (!defaultExpandedIds?.length) {
       return expandedFromData;
     }
     return Array.from(/* @__PURE__ */ new Set([...expandedFromData, ...defaultExpandedIds]));
   });
-  const [uncontrolledSelectedId, setUncontrolledSelectedId] = useState30(null);
-  const [autoColumnWidths, setAutoColumnWidths] = useState30({});
-  const [userColumnWidths, setUserColumnWidths] = useState30({});
+  const [uncontrolledSelectedId, setUncontrolledSelectedId] = useState31(null);
+  const [autoColumnWidths, setAutoColumnWidths] = useState31({});
+  const [userColumnWidths, setUserColumnWidths] = useState31(() => readStoredColumnWidths(storageKey, columns));
   const isActiveControlled = activeItemIdProp !== void 0;
   const resolvedExpandedIds = isExpandedControlled ? expandedIds : uncontrolledExpandedIds;
   const expandedIdSet = useMemo20(
@@ -9821,7 +9934,7 @@ function TreeListViewInner({
   );
   const derivedSelectedId = selectedId ?? uncontrolledSelectedId ?? findSelectedTreeListItemId(data) ?? selectableItems[0]?.itemId ?? null;
   const resolvedSelectedId = derivedSelectedId && selectableItems.some((entry) => entry.itemId === derivedSelectedId) ? derivedSelectedId : selectableItems[0]?.itemId ?? null;
-  const [uncontrolledActiveItemId, setUncontrolledActiveItemId] = useState30(() => defaultActiveItemId ?? resolvedSelectedId);
+  const [uncontrolledActiveItemId, setUncontrolledActiveItemId] = useState31(() => defaultActiveItemId ?? resolvedSelectedId);
   const activeItemId = activeItemIdProp !== void 0 ? activeItemIdProp : uncontrolledActiveItemId;
   const resolvedActiveItemId = activeItemId && selectableItems.some((entry) => entry.itemId === activeItemId) ? activeItemId : resolvedSelectedId;
   const minColumnWidthById = useMemo20(
@@ -9866,6 +9979,27 @@ function TreeListViewInner({
       block: "nearest"
     });
   }, [resolvedActiveItemId]);
+  useEffect17(() => {
+    if (loadedStorageKeyRef.current === storageKey) {
+      return;
+    }
+    loadedStorageKeyRef.current = storageKey;
+    shouldPersistColumnWidthsRef.current = false;
+    setUserColumnWidths(readStoredColumnWidths(storageKey, columns));
+  }, [columns, storageKey]);
+  useEffect17(() => {
+    if (!shouldPersistColumnWidthsRef.current) {
+      return;
+    }
+    shouldPersistColumnWidthsRef.current = false;
+    if (!storageKey || typeof window === "undefined") {
+      return;
+    }
+    try {
+      window.localStorage.setItem(storageKey, JSON.stringify(userColumnWidths));
+    } catch {
+    }
+  }, [storageKey, userColumnWidths]);
   const registerItemRef = useCallback8(
     (itemId, node) => {
       itemRefs.current[itemId] = node;
@@ -9880,7 +10014,7 @@ function TreeListViewInner({
     (item) => onItemDoubleClick?.(item),
     [onItemDoubleClick]
   );
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     const rootNode = rootRef.current;
     if (!rootNode) {
       return;
@@ -10156,9 +10290,15 @@ function TreeListViewInner({
       return;
     }
     setUserColumnWidths(
-      (currentWidths) => currentWidths[resizeState.columnId] === resizeState.nextWidth ? currentWidths : {
-        ...currentWidths,
-        [resizeState.columnId]: resizeState.nextWidth
+      (currentWidths) => {
+        if (currentWidths[resizeState.columnId] === resizeState.nextWidth) {
+          return currentWidths;
+        }
+        shouldPersistColumnWidthsRef.current = true;
+        return {
+          ...currentWidths,
+          [resizeState.columnId]: resizeState.nextWidth
+        };
       }
     );
   }
@@ -10205,7 +10345,7 @@ function TreeListViewInner({
     window.addEventListener("pointermove", handleColumnResizeMove);
     window.addEventListener("pointerup", handleColumnResizeEnd);
   }
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
       ...props,
@@ -10217,7 +10357,7 @@ function TreeListViewInner({
       role: "treegrid",
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ jsx61(
+        /* @__PURE__ */ jsx63(
           "div",
           {
             className: "nu-tree-list-view__header",
@@ -10225,7 +10365,7 @@ function TreeListViewInner({
             style: {
               "--nu-tree-list-view-columns": templateColumns
             },
-            children: columns.map((column, columnIndex) => /* @__PURE__ */ jsxs40(
+            children: columns.map((column, columnIndex) => /* @__PURE__ */ jsxs41(
               "span",
               {
                 className: [
@@ -10236,8 +10376,8 @@ function TreeListViewInner({
                 "data-column-id": column.id,
                 role: "columnheader",
                 children: [
-                  /* @__PURE__ */ jsx61("span", { className: "nu-tree-list-view__header-label", children: renderMnemonicText(column.title) }),
-                  column.resizable !== false ? /* @__PURE__ */ jsx61(
+                  /* @__PURE__ */ jsx63("span", { className: "nu-tree-list-view__header-label", children: renderMnemonicText(column.title) }),
+                  column.resizable !== false ? /* @__PURE__ */ jsx63(
                     "button",
                     {
                       "aria-label": `Resize ${column.title} column`,
@@ -10253,7 +10393,7 @@ function TreeListViewInner({
             ))
           }
         ),
-        /* @__PURE__ */ jsx61("div", { className: "nu-tree-list-view__body", children: visibleItems.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx61(
+        /* @__PURE__ */ jsx63("div", { className: "nu-tree-list-view__body", children: visibleItems.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx63(
           TreeListViewRow,
           {
             activeItemId: resolvedActiveItemId,
@@ -10283,19 +10423,20 @@ function TreeListViewInner({
             uncheckedShape
           },
           item.id
-        )) : /* @__PURE__ */ jsx61("div", { className: "nu-tree-list-view__empty", children: emptyText }) })
+        )) : /* @__PURE__ */ jsx63("div", { className: "nu-tree-list-view__empty", children: emptyText }) })
       ]
     }
   );
 }
 var TreeListView = forwardRef4(TreeListViewInner);
+var TreeTable = TreeListView;
 
 // src/theme/NuThemeProvider.tsx
 import {
   useCallback as useCallback9,
   useId as useId18,
   useMemo as useMemo21,
-  useState as useState31
+  useState as useState32
 } from "react";
 
 // src/theme/themes.ts
@@ -10525,6 +10666,8 @@ function getNuThemeStyle(theme) {
     "--nu-color-button-face-alt": theme.tokens.buttonFaceAlt,
     "--nu-color-button-danger": theme.tokens.buttonDanger,
     "--nu-color-button-success": theme.tokens.buttonSuccess,
+    "--nu-text-danger": theme.tokens.buttonDanger,
+    "--nu-text-success": theme.tokens.buttonSuccess,
     "--nu-color-button-text": theme.tokens.buttonText,
     "--nu-color-field-bg": theme.tokens.fieldBackground,
     "--nu-color-field-text": theme.tokens.fieldText,
@@ -10586,7 +10729,7 @@ function useNuTheme() {
 }
 
 // src/theme/NuThemeProvider.tsx
-import { jsx as jsx62, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs42 } from "react/jsx-runtime";
 function NuThemeProvider({
   children,
   className,
@@ -10606,10 +10749,10 @@ function NuThemeProvider({
   theme
 }) {
   const generatedId = useId18();
-  const [internalTheme, setInternalTheme] = useState31(defaultTheme);
-  const [internalDesktopPatternMode, setInternalDesktopPatternMode] = useState31(defaultDesktopPatternMode);
-  const [internalFontFamily, setInternalFontFamily] = useState31(defaultFontFamily);
-  const [internalFontSize, setInternalFontSize] = useState31(defaultFontSize);
+  const [internalTheme, setInternalTheme] = useState32(defaultTheme);
+  const [internalDesktopPatternMode, setInternalDesktopPatternMode] = useState32(defaultDesktopPatternMode);
+  const [internalFontFamily, setInternalFontFamily] = useState32(defaultFontFamily);
+  const [internalFontSize, setInternalFontSize] = useState32(defaultFontSize);
   const currentTheme = theme ?? internalTheme;
   const resolvedDesktopPatternMode = desktopPatternMode ?? internalDesktopPatternMode;
   const resolvedFontFamily = fontFamily ?? internalFontFamily;
@@ -10677,7 +10820,7 @@ function NuThemeProvider({
       handleThemeChange
     ]
   );
-  return /* @__PURE__ */ jsx62(NuThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsx64(NuThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs42(
     "div",
     {
       className: ["nu-theme-root", className].filter(Boolean).join(" "),
@@ -10692,7 +10835,7 @@ function NuThemeProvider({
         ...style
       },
       children: [
-        crtGlitch ? /* @__PURE__ */ jsx62(NuCrtGlitch, { ...typeof crtGlitch === "object" ? crtGlitch : {} }) : null,
+        crtGlitch ? /* @__PURE__ */ jsx64(NuCrtGlitch, { ...typeof crtGlitch === "object" ? crtGlitch : {} }) : null,
         children
       ]
     }
@@ -10737,6 +10880,7 @@ export {
   RadioGroup,
   ReportCell,
   SearchBox,
+  Spacer,
   SpinBox,
   Splitter,
   Stack,
@@ -10749,6 +10893,7 @@ export {
   ToolDropButton,
   ToolSeparator,
   TreeListView,
+  TreeTable,
   TreeView,
   Window,
   WindowBar,
@@ -10760,6 +10905,7 @@ export {
   hasVisibleMainMenuItems,
   isMainMenuDivider,
   isMainMenuItem,
+  isMainMenuSpacer,
   isNuThemeName,
   nuThemes,
   resolveNuTheme,