@deadragdoll/reactnu 0.1.52 → 0.1.73

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,41 +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,
-                    /* @__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,
@@ -410,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,
@@ -421,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)) {
@@ -466,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,
@@ -488,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
@@ -507,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));
   }, []);
@@ -577,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
@@ -645,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
@@ -662,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
@@ -689,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,
@@ -705,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(() => {
@@ -758,7 +830,7 @@ function Button({
             className: cx("nu-button__face", slotClassNames?.face),
             style: slotStyles?.face,
             children: [
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx7(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -770,7 +842,7 @@ function Button({
                   style: slotStyles?.focusIndicatorLeft
                 }
               ),
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx7(
                 "span",
                 {
                   className: cx("nu-button__label", slotClassNames?.label),
@@ -778,7 +850,7 @@ function Button({
                   children: renderMnemonicNode(children)
                 }
               ),
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx7(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -793,7 +865,7 @@ function Button({
             ]
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           "span",
           {
             "aria-hidden": "true",
@@ -805,7 +877,7 @@ function Button({
             style: slotStyles?.shadowRight
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           "span",
           {
             "aria-hidden": "true",
@@ -830,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
@@ -879,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(" "),
@@ -908,7 +980,7 @@ import {
   useContext,
   useEffect as useEffect3,
   useMemo as useMemo2,
-  useRef as useRef3
+  useRef as useRef4
 } from "react";
 
 // src/components/_shared/themePortal.ts
@@ -935,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();
@@ -1037,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;
@@ -1058,7 +1130,7 @@ function useNuDragSource({
   sourceType
 }) {
   const controller = useNuDragDrop();
-  const stateRef = useRef3({
+  const stateRef = useRef4({
     dragging: false,
     pointerId: -1,
     sourceElement: null,
@@ -1133,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",
@@ -1152,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
         }
       )
     }
@@ -1166,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,
@@ -1208,7 +1280,7 @@ function ListBoxItemViewInner({
   function handleToggleCheck() {
     onToggleCheck(itemId);
   }
-  const checkControl = item.checkable ? /* @__PURE__ */ jsx10(
+  const checkControl = item.checkable ? /* @__PURE__ */ jsx12(
     ListBoxCheckControl,
     {
       isChecked,
@@ -1246,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
       ]
     }
@@ -1255,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,
@@ -1274,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,
@@ -1286,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,
@@ -1312,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,
@@ -1332,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]
@@ -1344,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(
@@ -1504,7 +1576,7 @@ function ListBoxInner({
         break;
     }
   }
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       ...props,
@@ -1515,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,
@@ -1535,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";
@@ -1571,7 +1643,7 @@ function Stack({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       ...props,
@@ -1591,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;
@@ -1631,7 +1703,7 @@ function MdiWindowPickerDialog({
     ),
     [domain, windows]
   );
-  const [selectedId, setSelectedId] = useState5(
+  const [selectedId, setSelectedId] = useState6(
     activeWindowId ?? resolvedWindows[0]?.id ?? ""
   );
   const resolvedSelectedId = resolvedWindows.some(
@@ -1645,7 +1717,7 @@ function MdiWindowPickerDialog({
     onClose();
   }
   return /* @__PURE__ */ jsxs8(Stack, { gap: "md", children: [
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx16(
       ListBox,
       {
         data: [
@@ -1654,6 +1726,7 @@ function MdiWindowPickerDialog({
             items: resolvedWindows.map((windowEntry, index) => ({
               id: windowEntry.id,
               name: {
+                icon: windowEntry.icon,
                 text: `${index + 1} ${formatPickerWindowTitle(windows, windowEntry)}`
               },
               selected: windowEntry.id === activeWindowId
@@ -1680,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 {
@@ -1726,7 +1799,7 @@ function openMdiWindowPicker(bridge) {
   bridge.openDialog({
     appModal: true,
     border: "double",
-    content: ({ close }) => /* @__PURE__ */ jsx15(
+    content: ({ close }) => /* @__PURE__ */ jsx17(
       MdiWindowPickerDialog,
       {
         activeWindowId,
@@ -1769,6 +1842,7 @@ function buildStandardMdiMenuItems(bridge) {
     ...mdiWindows.map((windowEntry, index) => ({
       checked: windowEntry.id === activeWindowId,
       id: `mdi.window.${windowEntry.id}`,
+      icon: windowEntry.icon,
       onSelect: () => bridge?.activateWindow(windowEntry.id),
       text: `${index + 1} ${windowEntry.title}`
     })),
@@ -1796,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)
@@ -1843,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(
@@ -1865,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
   ] });
 }
@@ -1877,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,
@@ -1902,7 +1976,7 @@ function StatusBarItem({
   grow = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     "span",
     {
       ...props,
@@ -1918,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,
@@ -1934,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
       ]
@@ -1951,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(
@@ -1981,7 +2055,7 @@ function WindowTitleButton({
   variant = icon === "close" ? "close" : "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx21(
     "button",
     {
       ...props,
@@ -2003,9 +2077,10 @@ 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,
   onDragStart,
   titleButtons,
   title
@@ -2021,8 +2096,9 @@ function WindowTitleBar({
         "--nu-window-title-controls-width": controlsWidth
       },
       children: [
-        /* @__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,
@@ -2103,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) {
@@ -2121,16 +2197,23 @@ function getWindowGeometry(node) {
     width: rect.width
   };
 }
+function getValidAspectRatio(value) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : void 0;
+}
 function WindowInner({
   active = true,
+  aspectRatio,
   bodyClassName,
   border = "single",
   children,
   className,
   closeable = true,
   draggable,
+  icon,
   maximizable,
   maximized = false,
+  minHeight,
+  minWidth,
   minimizable,
   minimized = false,
   mode = "dialog",
@@ -2151,15 +2234,16 @@ 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";
-  const isMaximizable = maximizable ?? mode === "window";
+  const resolvedAspectRatio = getValidAspectRatio(aspectRatio);
+  const isMaximizable = resolvedAspectRatio === void 0 && (maximizable ?? mode === "window");
   const isMinimizable = minimizable ?? mode === "window";
   const isResizable = resizable ?? mode === "window";
   const mdiBridge = useMemo6(
@@ -2185,7 +2269,7 @@ function WindowInner({
     onToggleMinimized
   });
   const resolvedTitleButtons = titleButtons ?? systemTitleButtons;
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!onBoundsChange || !windowRef.current || minimized) {
       return;
     }
@@ -2309,22 +2393,16 @@ function WindowInner({
     } = getWindowGeometry(windowNode);
     const layerBounds = getWindowLayerBounds(windowNode);
     const computedStyle = window.getComputedStyle(windowNode);
-    const minWidth = Math.max(
-      Number.parseFloat(computedStyle.minWidth || "0") || 0,
-      240
-    );
-    const minHeight = Math.max(
-      Number.parseFloat(computedStyle.minHeight || "0") || 0,
-      120
-    );
-    const maxWidth = Math.max(
-      minWidth,
-      (layerBounds?.width ?? window.innerWidth) - left
-    );
-    const maxHeight = Math.max(
-      minHeight,
-      (layerBounds?.height ?? window.innerHeight) - top
-    );
+    const minWidth2 = Number.parseFloat(computedStyle.minWidth || "0") || 0;
+    const minHeight2 = Number.parseFloat(computedStyle.minHeight || "0") || 0;
+    const availableWidth = (layerBounds?.width ?? window.innerWidth) - left;
+    const availableHeight = (layerBounds?.height ?? window.innerHeight) - top;
+    const ratioMinWidth = resolvedAspectRatio ? Math.max(minWidth2, minHeight2 * resolvedAspectRatio) : minWidth2;
+    const maxWidth = resolvedAspectRatio ? Math.max(
+      ratioMinWidth,
+      Math.min(availableWidth, availableHeight * resolvedAspectRatio)
+    ) : Math.max(minWidth2, availableWidth);
+    const maxHeight = resolvedAspectRatio ? maxWidth / resolvedAspectRatio : Math.max(minHeight2, availableHeight);
     const hadTransform = computedStyle.transform !== "none";
     let didResize = false;
     if (hadTransform) {
@@ -2349,14 +2427,16 @@ function WindowInner({
       resizeFrameRef.current = window.requestAnimationFrame(flushResize);
     }
     function handlePointerMove(moveEvent) {
-      const nextWidth = Math.min(
+      const widthDelta = moveEvent.clientX - startClientX;
+      const heightDelta = moveEvent.clientY - startClientY;
+      const nextWidth = resolvedAspectRatio ? Math.min(
         maxWidth,
-        Math.max(minWidth, startWidth + moveEvent.clientX - startClientX)
-      );
-      const nextHeight = Math.min(
-        maxHeight,
-        Math.max(minHeight, startHeight + moveEvent.clientY - startClientY)
-      );
+        Math.max(
+          ratioMinWidth,
+          startWidth + (Math.abs(widthDelta) >= Math.abs(heightDelta * resolvedAspectRatio) ? widthDelta : heightDelta * resolvedAspectRatio)
+        )
+      ) : Math.min(maxWidth, Math.max(minWidth2, startWidth + widthDelta));
+      const nextHeight = resolvedAspectRatio ? nextWidth / resolvedAspectRatio : Math.min(maxHeight, Math.max(minHeight2, startHeight + heightDelta));
       didResize = true;
       scheduleResize({
         height: nextHeight,
@@ -2396,16 +2476,20 @@ function WindowInner({
       "data-mode": mode,
       onPointerDownCapture: handleRootPointerDownCapture,
       ref: windowRef,
-      style,
+      style: {
+        ...style,
+        minHeight: minHeight ?? style?.minHeight ?? 120,
+        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,
@@ -2413,17 +2497,18 @@ function WindowInner({
           }
         ),
         /* @__PURE__ */ jsxs12(WindowMenuContext.Provider, { value: menuState, children: [
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx23(
             WindowTitleBar,
             {
               draggable: isDraggable,
+              icon,
               onDragStart: handleTitlePointerDown,
               title,
               titleButtons: resolvedTitleButtons
             }
           ),
-          hasVisibleMainMenuItems(resolvedMainMenu) ? /* @__PURE__ */ jsx21(MainMenu, { items: resolvedMainMenu }) : null,
-          /* @__PURE__ */ jsx21(
+          hasVisibleMainMenuItems(resolvedMainMenu) ? /* @__PURE__ */ jsx23(MainMenu, { items: resolvedMainMenu }) : null,
+          /* @__PURE__ */ jsx23(
             "div",
             {
               className: [
@@ -2434,7 +2519,7 @@ function WindowInner({
               children
             }
           ),
-          mode === "window" && (statusBar || isResizable) ? /* @__PURE__ */ jsx21(
+          mode === "window" && (statusBar || isResizable) ? /* @__PURE__ */ jsx23(
             WindowStatusBar,
             {
               onResizeStart: handleResizePointerDown,
@@ -2451,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: [
@@ -2543,7 +2628,7 @@ function AppBarItem(props) {
 }
 
 // src/windowing/WindowBar.tsx
-import { jsx as jsx23 } 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();
@@ -2552,6 +2637,7 @@ function buildWindowBarGroups(items) {
       groups.push({
         active: Boolean(item.active),
         id: item.id,
+        icon: item.icon,
         items: [item],
         label: item.title
       });
@@ -2563,6 +2649,7 @@ function buildWindowBarGroups(items) {
         active: Boolean(item.active),
         domain: item.domain,
         id: item.id,
+        icon: item.icon,
         items: [item],
         label: item.title
       };
@@ -2572,10 +2659,16 @@ function buildWindowBarGroups(items) {
     }
     existingGroup.items.push(item);
     existingGroup.active = existingGroup.active || Boolean(item.active);
+    if (item.active) {
+      existingGroup.icon = item.icon;
+    }
     existingGroup.label = `${item.domain} (${existingGroup.items.length})`;
   });
   return groups;
 }
+function getGroupIcon(group) {
+  return group.items.find((item) => item.active)?.icon ?? group.icon;
+}
 function WindowBar({ items, onActivateWindow }) {
   const windowManager = useContext6(NuWindowContext);
   const groups = buildWindowBarGroups(items);
@@ -2595,7 +2688,7 @@ function WindowBar({ items, onActivateWindow }) {
     const dialogDefinition = {
       appModal: true,
       border: "double",
-      content: ({ close }) => /* @__PURE__ */ jsx23(
+      content: ({ close }) => /* @__PURE__ */ jsx25(
         MdiWindowPickerDialog,
         {
           activeWindowId: activeGroupWindowId,
@@ -2616,30 +2709,36 @@ 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) => /* @__PURE__ */ jsx23(
-    AppBarItem,
-    {
-      active: group.active,
-      className: "nu-window-bar__item",
-      interactive: true,
-      onClick: () => activateGroup(group),
-      children: group.label
-    },
-    group.id
-  )) });
+  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,
+      {
+        active: group.active,
+        className: "nu-window-bar__item",
+        interactive: true,
+        onClick: () => activateGroup(group),
+        children: [
+          icon ? /* @__PURE__ */ jsx25("span", { "aria-hidden": true, className: "nu-window-bar__icon", children: icon }) : null,
+          group.label
+        ]
+      },
+      group.id
+    );
+  }) });
 }
 
 // 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 jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 function TextField({
   className,
   debounceMs = 0,
@@ -2660,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;
@@ -2690,14 +2789,14 @@ function TextField({
     }
     onChange?.(event);
   }
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "label",
     {
       className: cx("nu-text-field", slotClassNames?.root, className),
       htmlFor: fieldId,
       style: slotStyles?.root,
       children: [
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx26(
           "span",
           {
             className: cx("nu-text-field__label", slotClassNames?.label),
@@ -2705,13 +2804,13 @@ function TextField({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsxs14(
           "span",
           {
             className: cx("nu-text-field__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx26(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -2720,7 +2819,7 @@ function TextField({
                   children: "["
                 }
               ),
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx26(
                 "span",
                 {
                   className: cx(
@@ -2728,7 +2827,7 @@ function TextField({
                     slotClassNames?.inputShell
                   ),
                   style: slotStyles?.inputShell,
-                  children: /* @__PURE__ */ jsx24(
+                  children: /* @__PURE__ */ jsx26(
                     "input",
                     {
                       ...props,
@@ -2747,7 +2846,7 @@ function TextField({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx26(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -2759,7 +2858,7 @@ function TextField({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx24(
+        hint ? /* @__PURE__ */ jsx26(
           "span",
           {
             className: cx("nu-text-field__hint", slotClassNames?.hint),
@@ -2774,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,
@@ -2783,7 +2882,7 @@ function NuView({
   scroll = "auto",
   ...props
 }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       ...props,
@@ -2797,7 +2896,7 @@ function NuView({
 }
 
 // src/windowing/dialogHelpers.tsx
-import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 function getPresetButtons(preset) {
   switch (preset) {
     case "ok-cancel":
@@ -2900,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__ */ jsxs14(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 ? {
@@ -2910,8 +3009,8 @@ function MessageBoxDialogContent({
         children: message
       }
     ),
-    /* @__PURE__ */ jsxs14(Stack, { direction: "row", gap: "sm", justify: "center", children: [
-      ok ? /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsxs15(Stack, { direction: "row", gap: "sm", justify: "center", children: [
+      ok ? /* @__PURE__ */ jsx28(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2920,7 +3019,7 @@ function MessageBoxDialogContent({
           children: okLabel
         }
       ) : null,
-      yes ? /* @__PURE__ */ jsx26(
+      yes ? /* @__PURE__ */ jsx28(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2929,7 +3028,7 @@ function MessageBoxDialogContent({
           children: yesLabel
         }
       ) : null,
-      no ? /* @__PURE__ */ jsx26(
+      no ? /* @__PURE__ */ jsx28(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2938,7 +3037,7 @@ function MessageBoxDialogContent({
           children: noLabel
         }
       ) : null,
-      cancel ? /* @__PURE__ */ jsx26(
+      cancel ? /* @__PURE__ */ jsx28(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2959,9 +3058,9 @@ function InputBoxDialogContent({
   onResolve,
   placeholder
 }) {
-  const [value, setValue] = useState8(defaultValue ?? "");
-  return /* @__PURE__ */ jsx26(NuView, { padding: "cell", children: /* @__PURE__ */ jsxs14(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,
@@ -2972,8 +3071,8 @@ function InputBoxDialogContent({
         placeholder
       }
     ),
-    /* @__PURE__ */ jsxs14(Stack, { direction: "row", gap: "sm", justify: "center", children: [
-      /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsxs15(Stack, { direction: "row", gap: "sm", justify: "center", children: [
+      /* @__PURE__ */ jsx28(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2982,7 +3081,7 @@ function InputBoxDialogContent({
           children: okLabel
         }
       ),
-      /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsx28(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2996,7 +3095,7 @@ function InputBoxDialogContent({
 }
 
 // src/windowing/NuWindowProvider.tsx
-import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 function getDefaultWindowStyle(mode, index) {
   const offset = index * 18;
   return {
@@ -3071,6 +3170,7 @@ function buildWindowRecord(definition, currentWindows, windowBoundsById, creatio
     ownerCenteredStyle,
     index
   );
+  const hasAspectRatio = typeof definition.aspectRatio === "number" && Number.isFinite(definition.aspectRatio) && definition.aspectRatio > 0;
   return {
     ...definition,
     appModal,
@@ -3079,18 +3179,18 @@ function buildWindowRecord(definition, currentWindows, windowBoundsById, creatio
     creationOrder,
     draggable: mode === "window",
     id,
-    maximizable: definition.maximizable ?? mode === "window",
+    maximizable: !hasAspectRatio && (definition.maximizable ?? mode === "window"),
     modalOwnerId,
     minimizable: definition.minimizable ?? mode === "window",
     mode,
     resizable: definition.resizable ?? mode === "window",
-    restoreStyle: savedWindowState.restoreStyle,
+    restoreStyle: hasAspectRatio ? void 0 : savedWindowState.restoreStyle,
     title: resolveManagedWindowTitle(currentWindows, titleBase),
     titleBase,
     style: {
       ...savedWindowState.style
     },
-    maximized: savedWindowState.maximized,
+    maximized: hasAspectRatio ? false : savedWindowState.maximized,
     minimized: savedWindowState.minimized
   };
 }
@@ -3140,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;
@@ -3305,7 +3405,7 @@ function NuWindowProvider({
   const toggleWindowMaximized = useCallback3((id) => {
     setWindows(
       (currentWindows) => currentWindows.map((windowEntry) => {
-        if (windowEntry.id !== id) {
+        if (windowEntry.id !== id || !windowEntry.maximizable) {
           return windowEntry;
         }
         if (windowEntry.maximized) {
@@ -3390,7 +3490,7 @@ function NuWindowProvider({
       openDialog({
         appModal: options.appModal ?? true,
         closeable: true,
-        content: ({ close }) => /* @__PURE__ */ jsx27(
+        content: ({ close }) => /* @__PURE__ */ jsx29(
           MessageBoxDialogContent,
           {
             cancel: buttons.cancel,
@@ -3433,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",
@@ -3471,21 +3571,32 @@ function NuWindowProvider({
   const topmostAppModalIndex = findTopmostAppModalIndex(visibleWindows);
   const topmostAppModalId = topmostAppModalIndex >= 0 ? visibleWindows[topmostAppModalIndex]?.id : void 0;
   const activeWindowId = topmostAppModalIndex >= 0 ? visibleWindows[topmostAppModalIndex]?.id : visibleWindows[visibleWindows.length - 1]?.id;
+  const activeWindow = activeWindowId ? windows.find((windowEntry) => windowEntry.id === activeWindowId) : void 0;
+  const activeActivationGroup = topmostAppModalIndex >= 0 ? void 0 : activeWindow?.activationGroup;
   const hasAppModal = topmostAppModalIndex >= 0;
+  const isWindowActive = useCallback3(
+    (windowEntry) => windowEntry.id === activeWindowId || activeActivationGroup !== void 0 && windowEntry.activationGroup === activeActivationGroup,
+    [activeActivationGroup, activeWindowId]
+  );
   const windowsInfo = useMemo7(
     () => [...windows].sort(
       (leftWindow, rightWindow) => leftWindow.creationOrder - rightWindow.creationOrder
     ).map((windowEntry) => ({
-      active: windowEntry.id === activeWindowId,
+      active: isWindowActive(windowEntry),
+      activationGroup: windowEntry.activationGroup,
+      aspectRatio: windowEntry.aspectRatio,
       bodyClassName: windowEntry.bodyClassName,
       appModal: windowEntry.appModal,
       border: windowEntry.border,
       className: windowEntry.className,
       closeable: windowEntry.closeable,
       domain: windowEntry.domain,
+      icon: windowEntry.icon,
       id: windowEntry.id,
       maximizable: windowEntry.maximizable,
       maximized: windowEntry.maximized,
+      minHeight: windowEntry.minHeight,
+      minWidth: windowEntry.minWidth,
       modal: windowEntry.modalOwnerId ?? false,
       minimizable: windowEntry.minimizable,
       minimized: windowEntry.minimized,
@@ -3496,7 +3607,7 @@ function NuWindowProvider({
       title: windowEntry.title,
       titleButtons: windowEntry.titleButtons
     })),
-    [activeWindowId, windows]
+    [isWindowActive, windows]
   );
   const mdiBridge = useMemo7(
     () => ({
@@ -3553,10 +3664,10 @@ function NuWindowProvider({
   useEffect6(() => {
     onAppModalChange?.(hasAppModal);
   }, [hasAppModal, onAppModalChange]);
-  return /* @__PURE__ */ jsx27(NuWindowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs15("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) => {
-      const isActiveWindow = windowEntry.id === activeWindowId;
+    /* @__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;
       const ownerBounds = windowEntry.modalOwnerId ? windowBoundsById[windowEntry.modalOwnerId] : void 0;
@@ -3584,30 +3695,34 @@ function NuWindowProvider({
         update: handleUpdate
       };
       const content = typeof windowEntry.content === "function" ? windowEntry.content(controls) : windowEntry.content;
-      return /* @__PURE__ */ jsxs15(Fragment3, { children: [
-        isTopmostAppModal ? /* @__PURE__ */ jsx27(
+      return /* @__PURE__ */ jsxs16(Fragment3, { children: [
+        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,
+            aspectRatio: windowEntry.aspectRatio,
             bodyClassName: windowEntry.bodyClassName,
             border: windowEntry.border,
             className: windowEntry.className,
             closeable: windowEntry.closeable,
             draggable: windowEntry.draggable,
+            icon: windowEntry.icon,
             maximizable: windowEntry.maximizable,
+            minHeight: windowEntry.minHeight,
+            minWidth: windowEntry.minWidth,
             minimizable: windowEntry.minimizable,
             maximized: windowEntry.maximized,
             minimized: windowEntry.minimized,
@@ -3631,13 +3746,14 @@ function NuWindowProvider({
         )
       ] }, windowEntry.id);
     }) }),
-    renderAppBar ? /* @__PURE__ */ jsx27(AppBarHost, { children: /* @__PURE__ */ jsx27(
+    renderAppBar ? /* @__PURE__ */ jsx29(AppBarHost, { children: /* @__PURE__ */ jsx29(
       WindowBar,
       {
         items: windowsInfo.map((windowEntry) => ({
           active: windowEntry.active,
           domain: windowEntry.domain,
           id: windowEntry.id,
+          icon: windowEntry.icon,
           minimized: windowEntry.minimized,
           title: windowEntry.title
         })),
@@ -3648,11 +3764,11 @@ function NuWindowProvider({
 }
 
 // src/components/Desktop/Desktop.tsx
-import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
 function DesktopWindowRegion({ appBar, children }) {
-  return /* @__PURE__ */ jsxs16(Fragment4, { children: [
-    /* @__PURE__ */ jsx28("div", { className: "nu-desktop__workspace", children }),
-    appBar ? /* @__PURE__ */ jsx28("div", { className: "nu-desktop__app-bar", children: appBar }) : null
+  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    /* @__PURE__ */ jsx30("div", { className: "nu-desktop__workspace", children }),
+    appBar ? /* @__PURE__ */ jsx30("div", { className: "nu-desktop__app-bar", children: appBar }) : null
   ] });
 }
 function NuDesktop({
@@ -3662,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,
@@ -3695,21 +3811,21 @@ function NuDesktopShell({
     appHostContext.mainMenu,
     appHostContext.windowBridge
   );
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       ...props,
       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 })
           }
         )
       ]
@@ -3718,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`;
@@ -3739,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,
@@ -3751,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",
@@ -3763,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,
@@ -3781,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",
@@ -3795,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
       ))
@@ -3804,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 jsxs17 } 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,
@@ -3824,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) {
@@ -3832,19 +3948,19 @@ function CheckBox({
     }
     onCheckedChange?.(event.target.checked, event);
   }
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "label",
     {
       className: cx("nu-check-box", slotClassNames?.root, className),
       style: slotStyles?.root,
       children: [
-        /* @__PURE__ */ jsxs17(
+        /* @__PURE__ */ jsxs18(
           "span",
           {
             className: cx("nu-check-box__main", slotClassNames?.main),
             style: slotStyles?.main,
             children: [
-              /* @__PURE__ */ jsx30(
+              /* @__PURE__ */ jsx32(
                 "input",
                 {
                   ...props,
@@ -3858,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),
@@ -3882,7 +3998,7 @@ function CheckBox({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx30(
+              /* @__PURE__ */ jsx32(
                 "span",
                 {
                   className: cx("nu-check-box__label", slotClassNames?.label),
@@ -3893,7 +4009,7 @@ function CheckBox({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx30(
+        hint ? /* @__PURE__ */ jsx32(
           "span",
           {
             className: cx("nu-check-box__hint", slotClassNames?.hint),
@@ -3912,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),
@@ -3944,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),
@@ -3964,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) {
@@ -4028,7 +4144,7 @@ function usePopupPosition({
   popupRef,
   portalRoot = defaultPortalRoot()
 }) {
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const anchor = anchorRef.current;
     const popupNode = popupRef.current;
     if (!open || !anchor || !popupNode) {
@@ -4067,7 +4183,7 @@ function usePopupPosition({
 }
 
 // src/components/Dropdown/Dropdown.tsx
-import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
 function flattenDropdownOptions(data) {
   const options = [];
   data.forEach((group) => {
@@ -4116,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),
@@ -4233,7 +4349,7 @@ function Dropdown({
         break;
     }
   }
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       ...props,
@@ -4241,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),
@@ -4250,7 +4366,7 @@ function Dropdown({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx34(
           "button",
           {
             "aria-describedby": hintId,
@@ -4268,20 +4384,20 @@ function Dropdown({
             },
             style: slotStyles?.trigger,
             type: "button",
-            children: /* @__PURE__ */ jsxs18(
+            children: /* @__PURE__ */ jsxs19(
               "span",
               {
                 className: cx("nu-dropdown__slot", slotClassNames?.slot),
                 style: slotStyles?.slot,
                 children: [
-                  /* @__PURE__ */ jsxs18(
+                  /* @__PURE__ */ jsxs19(
                     "span",
                     {
                       className: cx("nu-dropdown__field", slotClassNames?.field),
                       ref: fieldRef,
                       style: slotStyles?.field,
                       children: [
-                        /* @__PURE__ */ jsx32(
+                        /* @__PURE__ */ jsx34(
                           "span",
                           {
                             "aria-hidden": "true",
@@ -4290,7 +4406,7 @@ function Dropdown({
                             children: "["
                           }
                         ),
-                        /* @__PURE__ */ jsx32(
+                        /* @__PURE__ */ jsx34(
                           "span",
                           {
                             className: cx(
@@ -4298,7 +4414,7 @@ function Dropdown({
                               slotClassNames?.valueShell
                             ),
                             style: slotStyles?.valueShell,
-                            children: /* @__PURE__ */ jsx32(
+                            children: /* @__PURE__ */ jsx34(
                               "span",
                               {
                                 className: cx("nu-dropdown__value", slotClassNames?.value),
@@ -4308,7 +4424,7 @@ function Dropdown({
                             )
                           }
                         ),
-                        /* @__PURE__ */ jsx32(
+                        /* @__PURE__ */ jsx34(
                           "span",
                           {
                             "aria-hidden": "true",
@@ -4320,7 +4436,7 @@ function Dropdown({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx32(
+                  /* @__PURE__ */ jsx34(
                     ControlOpener,
                     {
                       ariaHidden: true,
@@ -4331,7 +4447,7 @@ function Dropdown({
                         slotClassNames?.arrowShell
                       ),
                       style: slotStyles?.arrowShell,
-                      children: /* @__PURE__ */ jsx32(
+                      children: /* @__PURE__ */ jsx34(
                         NuGlyph,
                         {
                           className: cx(
@@ -4350,7 +4466,7 @@ function Dropdown({
             )
           }
         ),
-        hint ? /* @__PURE__ */ jsx32(
+        hint ? /* @__PURE__ */ jsx34(
           "span",
           {
             className: cx("nu-dropdown__hint", slotClassNames?.hint),
@@ -4360,7 +4476,7 @@ function Dropdown({
           }
         ) : null,
         open && typeof document !== "undefined" ? createPortal(
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx34(
             "div",
             {
               className: cx("nu-dropdown__popup", slotClassNames?.popup),
@@ -4369,7 +4485,7 @@ function Dropdown({
                 { left: 0, top: 0, visibility: "hidden", width: 0 },
                 slotStyles?.popup
               ),
-              children: /* @__PURE__ */ jsx32(
+              children: /* @__PURE__ */ jsx34(
                 "div",
                 {
                   className: cx(
@@ -4378,7 +4494,7 @@ function Dropdown({
                   ),
                   ref: popupListRef,
                   style: slotStyles?.popupShell,
-                  children: /* @__PURE__ */ jsx32(
+                  children: /* @__PURE__ */ jsx34(
                     ListBox,
                     {
                       className: cx(
@@ -4411,7 +4527,7 @@ function Dropdown({
 }
 
 // src/components/Frame/Frame.tsx
-import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
 function Frame({
   children,
   className,
@@ -4432,7 +4548,7 @@ function Frame({
 }) {
   const resolvedTitleContent = titleContent ?? (title ? renderMnemonicText(title) : null);
   const hasTitleShell = Boolean(titleStart || resolvedTitleContent || titleEnd);
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "section",
     {
       ...props,
@@ -4449,13 +4565,13 @@ function Frame({
         ...slotStyles?.root
       },
       children: [
-        hasTitleShell ? /* @__PURE__ */ jsxs19(
+        hasTitleShell ? /* @__PURE__ */ jsxs20(
           "span",
           {
             className: cx("nu-frame__title", slotClassNames?.title),
             style: mergeSlotStyle(titleStyle, slotStyles?.title),
             children: [
-              titleStart ? /* @__PURE__ */ jsx33(
+              titleStart ? /* @__PURE__ */ jsx35(
                 "span",
                 {
                   className: cx(
@@ -4466,7 +4582,7 @@ function Frame({
                   children: titleStart
                 }
               ) : null,
-              resolvedTitleContent ? /* @__PURE__ */ jsx33(
+              resolvedTitleContent ? /* @__PURE__ */ jsx35(
                 "span",
                 {
                   className: cx(
@@ -4477,7 +4593,7 @@ function Frame({
                   children: resolvedTitleContent
                 }
               ) : null,
-              titleEnd ? /* @__PURE__ */ jsx33(
+              titleEnd ? /* @__PURE__ */ jsx35(
                 "span",
                 {
                   className: cx("nu-frame__title-end", slotClassNames?.titleEnd),
@@ -4488,7 +4604,7 @@ function Frame({
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx35(
           "div",
           {
             className: cx("nu-frame__body", slotClassNames?.body),
@@ -4502,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,
@@ -4511,7 +4627,7 @@ function Info({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       ...props,
@@ -4535,7 +4651,7 @@ function InfoAccent({
   upper = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx36(
     "span",
     {
       ...props,
@@ -4552,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));
@@ -4608,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();
@@ -4647,7 +4765,7 @@ function PopupMenu({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [resolvedOpen, setResolvedOpen]);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     if (!resolvedOpen || !anchor || !rootRef.current) {
       return;
     }
@@ -4697,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,
@@ -4717,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,
@@ -4736,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);
   }
@@ -4796,7 +4914,7 @@ function useNuIconGridContext() {
 }
 
 // src/components/IconGrid/NuIconGrid.tsx
-import { Fragment as Fragment5, jsx as jsx36, jsxs as jsxs20 } 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) {
@@ -4854,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
@@ -5010,8 +5128,8 @@ function NuIconGridItem({
     manager.selectIcon(icon.id);
     contextMenu.openAtElement(event.currentTarget);
   }
-  return /* @__PURE__ */ jsxs20(Fragment5, { children: [
-    /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(Fragment5, { children: [
+    /* @__PURE__ */ jsxs21(
       "button",
       {
         "aria-haspopup": contextMenuItems.length > 0 ? "menu" : void 0,
@@ -5030,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,
@@ -5061,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();
@@ -5080,7 +5198,7 @@ function NuIconGrid({
     [acceptsDrop, onDrop]
   );
   useNuDropTarget(gridElement, sharedDropTargetOptions);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (!gridElement) {
       return;
     }
@@ -5101,7 +5219,7 @@ function NuIconGrid({
     resizeObserver.observe(gridElement);
     return () => resizeObserver.disconnect();
   }, [arrangeIcons, defaultArrangeMode, gridElement, setGridSize]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (!gridElement) {
       return;
     }
@@ -5125,7 +5243,7 @@ function NuIconGrid({
     manager.selectIcon(null);
     contextMenu.openAtPoint(event.clientX, event.clientY, event.currentTarget);
   }
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       ...props,
@@ -5144,7 +5262,7 @@ function NuIconGrid({
       ref: setGridElement,
       role: "group",
       children: [
-        manager.icons.map((icon) => /* @__PURE__ */ jsx36(
+        manager.icons.map((icon) => /* @__PURE__ */ jsx38(
           NuIconGridItem,
           {
             gridElement,
@@ -5154,7 +5272,7 @@ function NuIconGrid({
           },
           icon.id
         )),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx38(
           PopupMenu,
           {
             anchor: contextMenu.anchor,
@@ -5172,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;
@@ -5240,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) => {
@@ -5323,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
@@ -5331,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 jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
 function flattenComboBoxOptions(data) {
   const options = [];
   data.forEach((group) => {
@@ -5376,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;
@@ -5418,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;
@@ -5495,7 +5613,7 @@ function ComboBox({
         break;
     }
   }
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       ...props,
@@ -5503,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),
@@ -5513,20 +5631,20 @@ function ComboBox({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsxs22(
           "span",
           {
             className: cx("nu-combo-box__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsxs21(
+              /* @__PURE__ */ jsxs22(
                 "span",
                 {
                   className: cx("nu-combo-box__field", slotClassNames?.field),
                   ref: fieldRef,
                   style: slotStyles?.field,
                   children: [
-                    /* @__PURE__ */ jsx38(
+                    /* @__PURE__ */ jsx40(
                       "span",
                       {
                         "aria-hidden": "true",
@@ -5535,7 +5653,7 @@ function ComboBox({
                         children: "["
                       }
                     ),
-                    /* @__PURE__ */ jsx38(
+                    /* @__PURE__ */ jsx40(
                       "span",
                       {
                         className: cx(
@@ -5543,7 +5661,7 @@ function ComboBox({
                           slotClassNames?.inputShell
                         ),
                         style: slotStyles?.inputShell,
-                        children: /* @__PURE__ */ jsx38(
+                        children: /* @__PURE__ */ jsx40(
                           "input",
                           {
                             "aria-autocomplete": "list",
@@ -5570,7 +5688,7 @@ function ComboBox({
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsx38(
+                    /* @__PURE__ */ jsx40(
                       "span",
                       {
                         "aria-hidden": "true",
@@ -5582,7 +5700,7 @@ function ComboBox({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx40(
                 ControlOpener,
                 {
                   "aria-label": open ? "Collapse list" : "Expand list",
@@ -5600,7 +5718,7 @@ function ComboBox({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx38(
+        hint ? /* @__PURE__ */ jsx40(
           "span",
           {
             className: cx("nu-combo-box__hint", slotClassNames?.hint),
@@ -5610,7 +5728,7 @@ function ComboBox({
           }
         ) : null,
         open && popupRoot ? createPortal3(
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx40(
             "div",
             {
               className: cx("nu-combo-box__popup", slotClassNames?.popup),
@@ -5620,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,
@@ -5658,7 +5776,7 @@ function ComboBox({
 import {
   Fragment as Fragment6
 } from "react";
-import { jsx as jsx39, jsxs as jsxs22 } 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",
@@ -5699,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) {
@@ -5707,8 +5825,8 @@ function CommandButton({
     }
     popupMenu.openFromClick(event);
   }
-  return /* @__PURE__ */ jsxs22(Fragment6, { children: [
-    /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(Fragment6, { children: [
+    /* @__PURE__ */ jsxs23(
       "button",
       {
         ...props,
@@ -5724,7 +5842,7 @@ function CommandButton({
         type,
         onClick: handleClick,
         children: [
-          resolvedIcon ? /* @__PURE__ */ jsx39(
+          resolvedIcon ? /* @__PURE__ */ jsx41(
             "span",
             {
               className: cx(
@@ -5736,7 +5854,7 @@ function CommandButton({
               children: resolvedIcon
             }
           ) : null,
-          children ? /* @__PURE__ */ jsx39(
+          children ? /* @__PURE__ */ jsx41(
             "span",
             {
               className: cx(
@@ -5748,7 +5866,7 @@ function CommandButton({
               children: renderMnemonicNode(children)
             }
           ) : null,
-          showCaret ? /* @__PURE__ */ jsx39(
+          showCaret ? /* @__PURE__ */ jsx41(
             "span",
             {
               className: cx(
@@ -5757,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,
@@ -5778,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 jsxs23 } 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;
@@ -5805,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;
@@ -5913,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__ */ jsxs23(
+  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",
@@ -5923,7 +6041,7 @@ function NuCrtGlitch({
       x: "-15%",
       y: "-5%",
       children: [
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx42(
           "feTurbulence",
           {
             baseFrequency: "0.001 0.045",
@@ -5934,7 +6052,7 @@ function NuCrtGlitch({
             type: "turbulence"
           }
         ),
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx42(
           "feDisplacementMap",
           {
             in: "SourceGraphic",
@@ -5946,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",
@@ -5956,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",
@@ -5965,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",
@@ -5975,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" })
       ]
     }
   ) }) });
@@ -5989,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
@@ -6028,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",
@@ -6048,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",
@@ -6068,7 +6186,7 @@ function ListViewCheckControl({
 }
 
 // src/components/ListView/internals/ListViewRow.tsx
-import { jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
 function ListViewRowInner({
   columns,
   isActive,
@@ -6099,7 +6217,7 @@ function ListViewRowInner({
   function handleToggleCheck() {
     onToggleCheck(rowId);
   }
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       "aria-disabled": row.disabled || void 0,
@@ -6120,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,
@@ -6129,7 +6247,7 @@ function ListViewRowInner({
             uncheckedShape
           }
         ) }) : null,
-        columns.map((column) => /* @__PURE__ */ jsx42(
+        columns.map((column) => /* @__PURE__ */ jsx44(
           "span",
           {
             className: [
@@ -6149,7 +6267,7 @@ function ListViewRowInner({
 var ListViewRow = memo3(ListViewRowInner);
 
 // src/components/ListView/ListView.tsx
-import { jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs26 } from "react/jsx-runtime";
 function ListViewInner({
   activeRowId: activeRowIdProp,
   checkedIds,
@@ -6167,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;
@@ -6317,7 +6435,7 @@ function ListViewInner({
         break;
     }
   }
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       ...props,
@@ -6328,7 +6446,7 @@ function ListViewInner({
       role: "grid",
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ jsxs25(
+        /* @__PURE__ */ jsxs26(
           "div",
           {
             className: "nu-list-view__header",
@@ -6337,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: [
@@ -6354,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,
@@ -6371,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 }) })
       ]
     }
   );
@@ -6383,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
@@ -6549,7 +6667,7 @@ function getMaskedFieldState(mask, rawValue) {
 }
 
 // src/components/MaskedField/MaskedField.tsx
-import { jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs27 } from "react/jsx-runtime";
 function MaskedField({
   "aria-invalid": ariaInvalid,
   className,
@@ -6572,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;
@@ -6621,7 +6739,7 @@ function MaskedField({
     }
     onChange?.(event);
   }
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "label",
     {
       className: cx(
@@ -6633,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),
@@ -6641,13 +6759,13 @@ function MaskedField({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ jsxs26(
+        /* @__PURE__ */ jsxs27(
           "span",
           {
             className: cx("nu-masked-field__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsx44(
+              /* @__PURE__ */ jsx46(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -6656,7 +6774,7 @@ function MaskedField({
                   children: "["
                 }
               ),
-              /* @__PURE__ */ jsx44(
+              /* @__PURE__ */ jsx46(
                 "span",
                 {
                   className: cx(
@@ -6664,7 +6782,7 @@ function MaskedField({
                     slotClassNames?.inputShell
                   ),
                   style: slotStyles?.inputShell,
-                  children: /* @__PURE__ */ jsx44(
+                  children: /* @__PURE__ */ jsx46(
                     "input",
                     {
                       ...props,
@@ -6682,7 +6800,7 @@ function MaskedField({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx44(
+              /* @__PURE__ */ jsx46(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -6694,7 +6812,7 @@ function MaskedField({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx44(
+        hint ? /* @__PURE__ */ jsx46(
           "span",
           {
             className: cx("nu-masked-field__hint", slotClassNames?.hint),
@@ -6710,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,
@@ -6732,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) {
@@ -6742,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(" "),
@@ -6755,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,
@@ -6772,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 jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs28 } from "react/jsx-runtime";
 function PageControl({
   activePageId: activePageIdProp,
   className,
@@ -6789,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;
@@ -6860,7 +6978,7 @@ function PageControl({
         break;
     }
   }
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       ...props,
@@ -6871,7 +6989,7 @@ function PageControl({
         slotStyles?.root
       ),
       children: [
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx48(
           "div",
           {
             className: cx("nu-page-control__tabs", slotClassNames?.tabs),
@@ -6882,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,
@@ -6906,7 +7024,7 @@ function PageControl({
             })
           }
         ),
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx48(
           "div",
           {
             "aria-labelledby": resolvedActivePage ? `${generatedId}-tab-${resolvedActivePage.id}` : void 0,
@@ -6923,7 +7041,7 @@ function PageControl({
 }
 
 // src/components/Panel/Panel.tsx
-import { jsx as jsx47, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
 function Panel({
   children,
   className,
@@ -6934,14 +7052,14 @@ function Panel({
   title,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "section",
     {
       ...props,
       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),
@@ -6949,7 +7067,7 @@ function Panel({
             children: renderMnemonicText(title)
           }
         ) : null,
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx49(
           "div",
           {
             className: cx(
@@ -6961,7 +7079,7 @@ function Panel({
             children
           }
         ),
-        footer ? /* @__PURE__ */ jsx47(
+        footer ? /* @__PURE__ */ jsx49(
           "footer",
           {
             className: cx("nu-panel__footer", slotClassNames?.footer),
@@ -6978,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 jsxs29 } 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) {
@@ -7089,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(
@@ -7106,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) {
@@ -7225,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,
@@ -7236,13 +7354,13 @@ 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);
-          return /* @__PURE__ */ jsxs29(
+          return /* @__PURE__ */ jsxs30(
             "div",
             {
               className: "nu-property-grid__row",
@@ -7251,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",
@@ -7271,32 +7389,32 @@ function PropertyGrid({
                       "--nu-property-grid-depth": row.depth
                     },
                     type: "button",
-                    children: /* @__PURE__ */ jsxs29("span", { className: "nu-property-grid__lead", children: [
-                      /* @__PURE__ */ jsx48("span", { className: "nu-property-grid__expander", children: /* @__PURE__ */ jsx48(
+                    children: /* @__PURE__ */ jsxs30("span", { className: "nu-property-grid__lead", children: [
+                      /* @__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
           );
         }
         const editorId = `${editorIdPrefix}-editor-${row.entry.id}`;
-        return /* @__PURE__ */ jsxs29(
+        return /* @__PURE__ */ jsxs30(
           "div",
           {
             className: "nu-property-grid__row",
             "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",
@@ -7316,21 +7434,21 @@ function PropertyGrid({
                     "--nu-property-grid-depth": row.depth
                   },
                   type: "button",
-                  children: /* @__PURE__ */ jsxs29("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) })
+                  children: /* @__PURE__ */ jsxs30("span", { className: "nu-property-grid__lead", children: [
+                    /* @__PURE__ */ jsx50("span", { className: "nu-property-grid__expander-placeholder" }),
+                    /* @__PURE__ */ jsx50("span", { className: "nu-property-grid__label-text", children: renderMnemonicText(row.entry.label) })
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsxs29(
+              /* @__PURE__ */ jsxs30(
                 "div",
                 {
                   className: "nu-property-grid__editor",
                   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
                   ]
                 }
               )
@@ -7344,7 +7462,7 @@ function PropertyGrid({
 }
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { jsx as jsx49, jsxs as jsxs30 } 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));
 }
@@ -7368,7 +7486,7 @@ function ProgressBar({
   const clampedValue = clamp3(value, min, safeMax);
   const percent = Math.round((clampedValue - min) / (safeMax - min) * 100);
   const renderedValue = valueRenderer ? valueRenderer(percent, clampedValue, min, safeMax) : `${percent}%`;
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       ...props,
@@ -7380,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),
@@ -7388,7 +7506,7 @@ function ProgressBar({
             children: renderMnemonicText(label)
           }
         ) : null,
-        /* @__PURE__ */ jsxs30(
+        /* @__PURE__ */ jsxs31(
           "div",
           {
             className: cx("nu-progress-bar__track", slotClassNames?.track),
@@ -7399,7 +7517,7 @@ function ProgressBar({
               slotStyles?.track
             ),
             children: [
-              /* @__PURE__ */ jsx49(
+              /* @__PURE__ */ jsx51(
                 "div",
                 {
                   className: cx("nu-progress-bar__fill", slotClassNames?.fill),
@@ -7412,7 +7530,7 @@ function ProgressBar({
                   )
                 }
               ),
-              showValue ? /* @__PURE__ */ jsx49(
+              showValue ? /* @__PURE__ */ jsx51(
                 "span",
                 {
                   className: cx("nu-progress-bar__value", slotClassNames?.value),
@@ -7423,7 +7541,7 @@ function ProgressBar({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx49(
+        hint ? /* @__PURE__ */ jsx51(
           "span",
           {
             className: cx("nu-progress-bar__hint", slotClassNames?.hint),
@@ -7437,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 jsxs31 } 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,
@@ -7454,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) {
@@ -7462,9 +7580,9 @@ function RadioButton({
     }
     onCheckedChange?.(event.target.checked, event);
   }
-  return /* @__PURE__ */ jsxs31("label", { className: ["nu-radio-button", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs31("span", { className: "nu-radio-button__main", children: [
-      /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsxs32("label", { className: ["nu-radio-button", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs32("span", { className: "nu-radio-button__main", children: [
+      /* @__PURE__ */ jsx52(
         "input",
         {
           ...props,
@@ -7477,19 +7595,19 @@ function RadioButton({
           type: "radio"
         }
       ),
-      /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: "nu-radio-button__control", children: /* @__PURE__ */ jsxs31("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 jsxs32 } 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,
@@ -7508,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) {
@@ -7516,7 +7634,7 @@ function RadioGroup({
     }
     onValueChange?.(nextValue);
   }
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "fieldset",
     {
       ...props,
@@ -7524,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),
@@ -7532,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,
@@ -7556,7 +7674,7 @@ function RadioGroup({
             ))
           }
         ),
-        hint ? /* @__PURE__ */ jsx51(
+        hint ? /* @__PURE__ */ jsx53(
           "span",
           {
             className: cx("nu-radio-group__hint", slotClassNames?.hint),
@@ -7571,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,
@@ -7597,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 jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs34 } from "react/jsx-runtime";
 function resolveSearchBoxPortalRoot() {
   return document.body;
 }
@@ -7629,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(() => {
@@ -7670,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;
@@ -7751,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,
@@ -7796,7 +7914,7 @@ function SearchBox({
         break;
     }
   }
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "div",
     {
       ...props,
@@ -7804,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__ */ jsxs33("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("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__ */ 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",
@@ -7832,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",
@@ -7857,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 jsxs34 } 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) {
@@ -7909,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;
@@ -7972,14 +8090,14 @@ function SpinBox({
     () => disabled || max !== void 0 && numericValue >= max,
     [disabled, max, numericValue]
   );
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "label",
     {
       className: cx("nu-spin-box", slotClassNames?.root, className),
       htmlFor: fieldId,
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsx56(
           "span",
           {
             className: cx("nu-spin-box__label", slotClassNames?.label),
@@ -7987,13 +8105,13 @@ function SpinBox({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ jsxs34(
+        /* @__PURE__ */ jsxs35(
           "span",
           {
             className: cx("nu-spin-box__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsx54(
+              /* @__PURE__ */ jsx56(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -8002,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,
@@ -8026,7 +8144,7 @@ function SpinBox({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx54(
+              /* @__PURE__ */ jsx56(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -8035,13 +8153,13 @@ function SpinBox({
                   children: "]"
                 }
               ),
-              /* @__PURE__ */ jsxs34(
+              /* @__PURE__ */ jsxs35(
                 "span",
                 {
                   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),
@@ -8052,7 +8170,7 @@ function SpinBox({
                         children: "-"
                       }
                     ),
-                    /* @__PURE__ */ jsx54(
+                    /* @__PURE__ */ jsx56(
                       "button",
                       {
                         className: cx("nu-spin-box__button", slotClassNames?.button),
@@ -8069,7 +8187,7 @@ function SpinBox({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx54(
+        hint ? /* @__PURE__ */ jsx56(
           "span",
           {
             className: cx("nu-spin-box__hint", slotClassNames?.hint),
@@ -8087,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 jsxs35 } 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));
 }
@@ -8121,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,
@@ -8245,7 +8363,7 @@ function Splitter({
       commitValue(max);
     }
   }
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "div",
     {
       ...props,
@@ -8257,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}`,
@@ -8271,7 +8389,7 @@ function Splitter({
             onPointerDown: handlePointerDown,
             role: "separator",
             tabIndex: 0,
-            children: /* @__PURE__ */ jsx55(
+            children: /* @__PURE__ */ jsx57(
               "span",
               {
                 "aria-hidden": "true",
@@ -8281,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 })
       ]
     }
   );
@@ -8292,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 jsxs36 } 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));
 }
@@ -8340,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(() => {
@@ -8431,7 +8549,7 @@ function TickBar({
     }
     onKeyDown?.(event);
   }
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     "div",
     {
       ...props,
@@ -8444,7 +8562,7 @@ function TickBar({
         slotStyles?.root
       ),
       children: [
-        label ? /* @__PURE__ */ jsx56(
+        label ? /* @__PURE__ */ jsx58(
           "span",
           {
             className: cx("nu-tick-bar__label", slotClassNames?.label),
@@ -8452,13 +8570,13 @@ function TickBar({
             children: renderMnemonicText(label)
           }
         ) : null,
-        /* @__PURE__ */ jsxs36(
+        /* @__PURE__ */ jsxs37(
           "div",
           {
             className: cx("nu-tick-bar__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsxs36(
+              /* @__PURE__ */ jsxs37(
                 "div",
                 {
                   "aria-describedby": hintId,
@@ -8500,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",
@@ -8523,7 +8641,7 @@ function TickBar({
                         ))
                       }
                     ),
-                    /* @__PURE__ */ jsx56(
+                    /* @__PURE__ */ jsx58(
                       "div",
                       {
                         "aria-hidden": "true",
@@ -8541,7 +8659,7 @@ function TickBar({
                   ]
                 }
               ),
-              showValue ? /* @__PURE__ */ jsx56(
+              showValue ? /* @__PURE__ */ jsx58(
                 "span",
                 {
                   className: cx("nu-tick-bar__value", slotClassNames?.value),
@@ -8552,7 +8670,7 @@ function TickBar({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx56(
+        hint ? /* @__PURE__ */ jsx58(
           "span",
           {
             className: cx("nu-tick-bar__hint", slotClassNames?.hint),
@@ -8567,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,
@@ -8586,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
+      ]
     }
   );
 }
@@ -8596,7 +8720,7 @@ function ToolButton({
   slotStyles,
   ...props
 }) {
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx59(
     CommandButton,
     {
       ...props,
@@ -8626,7 +8750,7 @@ function ToolDropButton({
   uncheckedShape,
   ...props
 }) {
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx59(
     CommandButton,
     {
       ...props,
@@ -8652,7 +8776,7 @@ function ToolDropButton({
   );
 }
 function ToolSeparator({ className, ...props }) {
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx59(
     "div",
     {
       ...props,
@@ -8675,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
@@ -8774,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 jsxs37 } 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;
@@ -8848,8 +8972,8 @@ function TreeViewItemInner({
     handleActivate();
     onToggleItemCheck?.(item, !isChecked);
   }
-  return /* @__PURE__ */ jsxs37("div", { className: "nu-tree-view__row", role: "none", children: [
-    /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs39("div", { className: "nu-tree-view__row", role: "none", children: [
+    /* @__PURE__ */ jsxs39(
       "div",
       {
         "aria-checked": isCheckable ? isChecked : void 0,
@@ -8868,8 +8992,8 @@ function TreeViewItemInner({
         ref: (node) => registerItemRef(itemId, node),
         role: "treeitem",
         children: [
-          /* @__PURE__ */ jsxs37("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",
@@ -8880,7 +9004,7 @@ function TreeViewItemInner({
               },
               `${itemId}-guide-${guideIndex}`
             )),
-            /* @__PURE__ */ jsxs37(
+            /* @__PURE__ */ jsxs39(
               "span",
               {
                 className: "nu-tree-view__lead",
@@ -8888,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",
@@ -8908,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"
@@ -8917,7 +9041,7 @@ function TreeViewItemInner({
                         }
                       )
                     }
-                  ) : depth > 0 ? /* @__PURE__ */ jsx58(
+                  ) : depth > 0 ? /* @__PURE__ */ jsx60(
                     "span",
                     {
                       className: "nu-tree-view__expander-placeholder",
@@ -8928,8 +9052,8 @@ function TreeViewItemInner({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs37("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",
@@ -8937,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",
@@ -8953,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,
@@ -8996,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,
@@ -9011,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),
@@ -9038,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) {
@@ -9247,7 +9371,7 @@ function TreeViewInner({
       setExpandedState
     ]
   );
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx61(
     "div",
     {
       ...props,
@@ -9257,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,
@@ -9277,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 })
     }
   );
 }
@@ -9290,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
@@ -9384,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 jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx62, jsxs as jsxs40 } from "react/jsx-runtime";
 function renderTreeTitleContent(item) {
-  return /* @__PURE__ */ jsxs38(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) {
@@ -9514,8 +9638,8 @@ function TreeListViewRowInner({
     handleActivate();
     onToggleItemCheck?.(item, !isChecked);
   }
-  return /* @__PURE__ */ jsxs38(Fragment7, { children: [
-    /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsxs40(Fragment7, { children: [
+    /* @__PURE__ */ jsx62(
       "div",
       {
         "aria-disabled": item.disabled || void 0,
@@ -9543,7 +9667,7 @@ function TreeListViewRowInner({
           "--nu-tree-list-view-columns": templateColumns
         },
         children: columns.map(
-          (column, columnIndex) => column.id === treeColumnId ? /* @__PURE__ */ jsxs38(
+          (column, columnIndex) => column.id === treeColumnId ? /* @__PURE__ */ jsxs40(
             "span",
             {
               className: [
@@ -9555,8 +9679,8 @@ function TreeListViewRowInner({
               "data-column-id": column.id,
               role: "gridcell",
               children: [
-                /* @__PURE__ */ jsxs38("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",
@@ -9567,7 +9691,7 @@ function TreeListViewRowInner({
                     },
                     `${itemId}-guide-${guideIndex}`
                   )),
-                  /* @__PURE__ */ jsxs38(
+                  /* @__PURE__ */ jsxs40(
                     "span",
                     {
                       className: "nu-tree-list-view__lead",
@@ -9575,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",
@@ -9595,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"
@@ -9604,7 +9728,7 @@ function TreeListViewRowInner({
                               }
                             )
                           }
-                        ) : depth > 0 ? /* @__PURE__ */ jsx60(
+                        ) : depth > 0 ? /* @__PURE__ */ jsx62(
                           "span",
                           {
                             className: "nu-tree-list-view__expander-placeholder",
@@ -9615,8 +9739,8 @@ function TreeListViewRowInner({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs38("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",
@@ -9624,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",
@@ -9640,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: [
@@ -9669,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,
@@ -9716,7 +9840,7 @@ var TreeListViewRow = memo5(
 );
 
 // src/components/TreeListView/TreeListView.tsx
-import { jsx as jsx61, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs41 } from "react/jsx-runtime";
 function TreeListViewInner({
   acceptsDrop,
   activeItemId: activeItemIdProp,
@@ -9743,23 +9867,23 @@ 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 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({});
   const isActiveControlled = activeItemIdProp !== void 0;
   const resolvedExpandedIds = isExpandedControlled ? expandedIds : uncontrolledExpandedIds;
   const expandedIdSet = useMemo20(
@@ -9776,7 +9900,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(
@@ -9835,7 +9959,7 @@ function TreeListViewInner({
     (item) => onItemDoubleClick?.(item),
     [onItemDoubleClick]
   );
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     const rootNode = rootRef.current;
     if (!rootNode) {
       return;
@@ -10160,7 +10284,7 @@ function TreeListViewInner({
     window.addEventListener("pointermove", handleColumnResizeMove);
     window.addEventListener("pointerup", handleColumnResizeEnd);
   }
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
       ...props,
@@ -10172,7 +10296,7 @@ function TreeListViewInner({
       role: "treegrid",
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ jsx61(
+        /* @__PURE__ */ jsx63(
           "div",
           {
             className: "nu-tree-list-view__header",
@@ -10180,7 +10304,7 @@ function TreeListViewInner({
             style: {
               "--nu-tree-list-view-columns": templateColumns
             },
-            children: columns.map((column, columnIndex) => /* @__PURE__ */ jsxs39(
+            children: columns.map((column, columnIndex) => /* @__PURE__ */ jsxs41(
               "span",
               {
                 className: [
@@ -10191,8 +10315,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`,
@@ -10208,7 +10332,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,
@@ -10238,7 +10362,7 @@ 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 }) })
       ]
     }
   );
@@ -10250,7 +10374,7 @@ import {
   useCallback as useCallback9,
   useId as useId18,
   useMemo as useMemo21,
-  useState as useState31
+  useState as useState32
 } from "react";
 
 // src/theme/themes.ts
@@ -10480,6 +10604,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,
@@ -10541,7 +10667,7 @@ function useNuTheme() {
 }
 
 // src/theme/NuThemeProvider.tsx
-import { jsx as jsx62, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs42 } from "react/jsx-runtime";
 function NuThemeProvider({
   children,
   className,
@@ -10561,10 +10687,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;
@@ -10632,7 +10758,7 @@ function NuThemeProvider({
       handleThemeChange
     ]
   );
-  return /* @__PURE__ */ jsx62(NuThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsx64(NuThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs42(
     "div",
     {
       className: ["nu-theme-root", className].filter(Boolean).join(" "),
@@ -10647,7 +10773,7 @@ function NuThemeProvider({
         ...style
       },
       children: [
-        crtGlitch ? /* @__PURE__ */ jsx62(NuCrtGlitch, { ...typeof crtGlitch === "object" ? crtGlitch : {} }) : null,
+        crtGlitch ? /* @__PURE__ */ jsx64(NuCrtGlitch, { ...typeof crtGlitch === "object" ? crtGlitch : {} }) : null,
         children
       ]
     }
@@ -10692,6 +10818,7 @@ export {
   RadioGroup,
   ReportCell,
   SearchBox,
+  Spacer,
   SpinBox,
   Splitter,
   Stack,
@@ -10715,6 +10842,7 @@ export {
   hasVisibleMainMenuItems,
   isMainMenuDivider,
   isMainMenuItem,
+  isMainMenuSpacer,
   isNuThemeName,
   nuThemes,
   resolveNuTheme,