@deadragdoll/reactnu 0.1.18 → 0.1.30

package/dist/index.js

@@ -4269,11 +4269,19 @@ function InfoAccent({
   );
 }
 
-// src/components/ComboBox/ComboBox.tsx
+// src/components/IconGrid/NuIconGrid.tsx
 import {
-  useEffect as useEffect7,
-  useId as useId5,
+  useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo8,
+  useRef as useRef9,
+  useState as useState15
+} from "react";
+
+// src/components/PopupMenu/PopupMenu.tsx
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect7,
+  useLayoutEffect as useLayoutEffect3,
   useRef as useRef8,
   useState as useState13
 } from "react";
@@ -4302,8 +4310,640 @@ function getThemePortalStyle(anchor) {
   return style;
 }
 
+// src/components/PopupMenu/PopupMenu.tsx
+import { jsx as jsx34 } from "react/jsx-runtime";
+function hasVisibleChildren2(item) {
+  return Boolean(item.items?.some((child) => !child.hidden));
+}
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function resolveAnchorPosition(anchor) {
+  if (!anchor) {
+    return null;
+  }
+  if (anchor.type === "point") {
+    return {
+      left: anchor.x,
+      top: anchor.y
+    };
+  }
+  const rect = anchor.element.getBoundingClientRect();
+  return {
+    left: rect.left,
+    top: rect.bottom - 1
+  };
+}
+function resolvePortalRoot() {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  return document.body;
+}
+function PopupMenu({
+  anchor,
+  className,
+  defaultOpen = false,
+  items,
+  onItemSelect,
+  onOpenChange,
+  open,
+  style: styleProp,
+  uncheckedShape = "box",
+  ...props
+}) {
+  const rootRef = useRef8(null);
+  const [activePath, setActivePath] = useState13([]);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState13(defaultOpen);
+  const isControlled = open !== void 0;
+  const resolvedOpen = isControlled ? open : uncontrolledOpen;
+  const portalRoot = resolvePortalRoot();
+  const setResolvedOpen = useCallback4(
+    (nextOpen) => {
+      if (!nextOpen) {
+        setActivePath([]);
+      }
+      if (!isControlled) {
+        setUncontrolledOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+  useEffect7(() => {
+    if (!resolvedOpen) {
+      return;
+    }
+    function handlePointerDown(event) {
+      if (!rootRef.current?.contains(event.target)) {
+        setResolvedOpen(false);
+      }
+    }
+    function handleKeyDown(event) {
+      if (event.key === "Escape") {
+        setResolvedOpen(false);
+      }
+    }
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [resolvedOpen, setResolvedOpen]);
+  useLayoutEffect3(() => {
+    if (!resolvedOpen || !anchor || !rootRef.current) {
+      return;
+    }
+    const rootNode = rootRef.current;
+    function updatePosition() {
+      const anchorPosition = resolveAnchorPosition(anchor);
+      if (!anchorPosition) {
+        return;
+      }
+      const viewportRect = getPortalViewportRect(portalRoot);
+      const relativePosition = toPortalCoordinates(portalRoot, anchorPosition);
+      const rect = rootNode.getBoundingClientRect();
+      const maxLeft = Math.max(0, viewportRect.width - rect.width);
+      const maxTop = Math.max(0, viewportRect.height - rect.height);
+      rootNode.style.left = `${clamp(relativePosition.left, 0, maxLeft)}px`;
+      rootNode.style.top = `${clamp(relativePosition.top, 0, maxTop)}px`;
+      rootNode.style.visibility = "visible";
+    }
+    rootNode.style.left = "0px";
+    rootNode.style.top = "0px";
+    rootNode.style.visibility = "hidden";
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [anchor, portalRoot, resolvedOpen]);
+  function handleActivateItem(item, level) {
+    if (item.disabled) {
+      return;
+    }
+    if (hasVisibleChildren2(item)) {
+      setActivePath(
+        (currentPath) => currentPath[level] === item.id ? currentPath.slice(0, level) : [...currentPath.slice(0, level), item.id]
+      );
+      return;
+    }
+    item.onSelect?.();
+    onItemSelect?.(item);
+    setResolvedOpen(false);
+  }
+  function handleHoverItem(item, level) {
+    if (item.disabled) {
+      return;
+    }
+    setActivePath((currentPath) => [...currentPath.slice(0, level), item.id]);
+  }
+  if (!resolvedOpen || !anchor || !portalRoot || items.every((item) => item.hidden)) {
+    return null;
+  }
+  return createPortal2(
+    /* @__PURE__ */ jsx34(
+      "div",
+      {
+        ...props,
+        className: ["nu-popup-menu", className].filter(Boolean).join(" "),
+        onContextMenu: (event) => event.preventDefault(),
+        ref: rootRef,
+        style: {
+          ...getThemePortalStyle(
+            anchor.type === "element" ? anchor.element : anchor.themeSource ?? null
+          ),
+          ...styleProp,
+          left: 0,
+          top: 0,
+          visibility: "hidden"
+        },
+        children: /* @__PURE__ */ jsx34("div", { className: "nu-popup-menu__shell", children: /* @__PURE__ */ jsx34(
+          MainMenuList,
+          {
+            activePath,
+            items,
+            level: 0,
+            onActivateItem: handleActivateItem,
+            onHoverItem: handleHoverItem,
+            rootVariant: "popup",
+            uncheckedShape
+          }
+        ) })
+      }
+    ),
+    portalRoot
+  );
+}
+
+// src/components/PopupMenu/usePopupMenu.ts
+import { useState as useState14 } from "react";
+function usePopupMenu() {
+  const [anchor, setAnchor] = useState14(null);
+  const [open, setOpen] = useState14(false);
+  function close() {
+    setOpen(false);
+  }
+  function openAtPoint(x, y, themeSource) {
+    setAnchor({
+      themeSource,
+      type: "point",
+      x,
+      y
+    });
+    setOpen(true);
+  }
+  function openAtElement(element) {
+    setAnchor({
+      element,
+      type: "element"
+    });
+    setOpen(true);
+  }
+  function openFromClick(event) {
+    openAtElement(event.currentTarget);
+  }
+  function openFromContextMenu(event) {
+    event.preventDefault();
+    openAtPoint(event.clientX, event.clientY, event.currentTarget);
+  }
+  return {
+    anchor,
+    close,
+    open,
+    openAtElement,
+    openAtPoint,
+    openFromClick,
+    openFromContextMenu,
+    setOpen
+  };
+}
+
+// src/components/IconGrid/iconContext.ts
+import { createContext as createContext4, useContext as useContext8 } from "react";
+var NuIconContext = createContext4(null);
+function useNuIconContext() {
+  const context = useContext8(NuIconContext);
+  if (!context) {
+    throw new Error("useNuIconManager must be used within a NuIconProvider.");
+  }
+  return context;
+}
+function useNuIconManager() {
+  return useNuIconContext();
+}
+function useNuIconGridContext() {
+  return useNuIconContext();
+}
+
+// src/components/IconGrid/NuIconGrid.tsx
+import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
+var DRAG_THRESHOLD = 3;
+function clamp2(value, minimum, maximum) {
+  return Math.min(Math.max(value, minimum), maximum);
+}
+function resolveIconContextMenuItems(source, icon) {
+  return typeof source === "function" ? source(icon) : source ?? [];
+}
+function resolveGridContextMenuItems(source, manager) {
+  return typeof source === "function" ? source(manager) : source ?? [];
+}
+function NuIconGridItem({ gridElement, icon }) {
+  const manager = useNuIconGridContext();
+  const contextMenu = usePopupMenu();
+  const dragStartRef = useRef9(void 0);
+  const isDraggingRef = useRef9(false);
+  const [isDragging, setIsDragging] = useState15(false);
+  const suppressClickRef = useRef9(false);
+  const latestPositionRef = useRef9(icon.position);
+  const contextMenuItems = resolveIconContextMenuItems(
+    icon.contextMenuItems,
+    icon
+  );
+  function handlePointerDown(event) {
+    if (event.button !== 0 || icon.disabled) {
+      return;
+    }
+    manager.selectIcon(icon.id);
+    latestPositionRef.current = icon.position;
+    isDraggingRef.current = false;
+    dragStartRef.current = {
+      clientX: event.clientX,
+      clientY: event.clientY,
+      pointerId: event.pointerId,
+      position: icon.position
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+  }
+  function handlePointerMove(event) {
+    const dragStart = dragStartRef.current;
+    if (!dragStart || dragStart.pointerId !== event.pointerId || !gridElement) {
+      return;
+    }
+    const deltaX = event.clientX - dragStart.clientX;
+    const deltaY = event.clientY - dragStart.clientY;
+    if (!isDraggingRef.current && Math.max(Math.abs(deltaX), Math.abs(deltaY)) < DRAG_THRESHOLD) {
+      return;
+    }
+    isDraggingRef.current = true;
+    setIsDragging(true);
+    const gridRect = gridElement.getBoundingClientRect();
+    const iconRect = event.currentTarget.getBoundingClientRect();
+    const position = {
+      x: Math.round(
+        clamp2(
+          dragStart.position.x + deltaX,
+          0,
+          Math.max(0, gridRect.width - iconRect.width)
+        )
+      ),
+      y: Math.round(
+        clamp2(
+          dragStart.position.y + deltaY,
+          0,
+          Math.max(0, gridRect.height - iconRect.height)
+        )
+      )
+    };
+    latestPositionRef.current = position;
+    manager.moveIcon(icon.id, position);
+  }
+  function finishDragging(event) {
+    const dragStart = dragStartRef.current;
+    if (!dragStart || dragStart.pointerId !== event.pointerId) {
+      return;
+    }
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    dragStartRef.current = void 0;
+    if (!isDraggingRef.current) {
+      return;
+    }
+    suppressClickRef.current = true;
+    isDraggingRef.current = false;
+    setIsDragging(false);
+    icon.onPositionChange?.(latestPositionRef.current, {
+      ...icon,
+      position: latestPositionRef.current
+    });
+  }
+  function handleClick(event) {
+    if (suppressClickRef.current) {
+      suppressClickRef.current = false;
+      event.preventDefault();
+      return;
+    }
+    manager.selectIcon(icon.id);
+    icon.onClick?.(event);
+  }
+  function handleContextMenu(event) {
+    event.stopPropagation();
+    manager.selectIcon(icon.id);
+    icon.onContextMenu?.(event);
+    if (event.defaultPrevented || contextMenuItems.length === 0) {
+      return;
+    }
+    event.preventDefault();
+    contextMenu.openAtPoint(event.clientX, event.clientY, event.currentTarget);
+  }
+  function handleKeyDown(event) {
+    if (event.key !== "ContextMenu" && !(event.key === "F10" && event.shiftKey) || contextMenuItems.length === 0) {
+      return;
+    }
+    event.preventDefault();
+    manager.selectIcon(icon.id);
+    contextMenu.openAtElement(event.currentTarget);
+  }
+  return /* @__PURE__ */ jsxs20(Fragment5, { children: [
+    /* @__PURE__ */ jsxs20(
+      "button",
+      {
+        "aria-haspopup": contextMenuItems.length > 0 ? "menu" : void 0,
+        className: "nu-icon-grid__icon",
+        "data-dragging": isDragging || void 0,
+        "data-selected": manager.selectedIconId === icon.id || void 0,
+        disabled: icon.disabled,
+        onClick: handleClick,
+        onContextMenu: handleContextMenu,
+        onDoubleClick: icon.onDoubleClick,
+        onKeyDown: handleKeyDown,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: finishDragging,
+        onPointerCancel: finishDragging,
+        style: { left: icon.position.x, top: icon.position.y },
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx35("span", { "aria-hidden": "true", className: "nu-icon-grid__glyph", children: typeof icon.icon === "string" ? /* @__PURE__ */ jsx35("img", { alt: "", draggable: false, src: icon.icon }) : icon.icon }),
+          /* @__PURE__ */ jsx35("span", { className: "nu-icon-grid__label", children: renderMnemonicText(icon.label) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx35(
+      PopupMenu,
+      {
+        anchor: contextMenu.anchor,
+        items: contextMenuItems,
+        onOpenChange: contextMenu.setOpen,
+        open: contextMenu.open
+      }
+    )
+  ] });
+}
+function NuIconGrid({
+  className,
+  contextMenuItems: contextMenuItemsSource,
+  defaultArrangeMode,
+  onContextMenu,
+  onPointerDown,
+  ...props
+}) {
+  const [gridElement, setGridElement] = useState15(null);
+  const manager = useNuIconGridContext();
+  const hasAppliedDefaultArrangementRef = useRef9(false);
+  const arrangeIcons = manager.arrangeIcons;
+  const setGridSize = manager.setGridSize;
+  const contextMenu = usePopupMenu();
+  const contextMenuItems = useMemo8(
+    () => resolveGridContextMenuItems(contextMenuItemsSource, manager),
+    [contextMenuItemsSource, manager]
+  );
+  useLayoutEffect4(() => {
+    if (!gridElement) {
+      return;
+    }
+    const activeGridElement = gridElement;
+    function updateGridSize() {
+      const size = {
+        height: activeGridElement.clientHeight,
+        width: activeGridElement.clientWidth
+      };
+      setGridSize(size);
+      if (defaultArrangeMode && !hasAppliedDefaultArrangementRef.current && size.height > 0 && size.width > 0) {
+        hasAppliedDefaultArrangementRef.current = true;
+        arrangeIcons(defaultArrangeMode);
+      }
+    }
+    updateGridSize();
+    const resizeObserver = new ResizeObserver(updateGridSize);
+    resizeObserver.observe(gridElement);
+    return () => resizeObserver.disconnect();
+  }, [arrangeIcons, defaultArrangeMode, gridElement, setGridSize]);
+  function handleContextMenu(event) {
+    onContextMenu?.(event);
+    if (event.defaultPrevented || contextMenuItems.length === 0) {
+      return;
+    }
+    event.preventDefault();
+    manager.selectIcon(null);
+    contextMenu.openAtPoint(event.clientX, event.clientY, event.currentTarget);
+  }
+  return /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      ...props,
+      "aria-label": props["aria-label"] ?? "Application icons",
+      className: ["nu-icon-grid", className].filter(Boolean).join(" "),
+      onContextMenu: handleContextMenu,
+      onPointerDown: (event) => {
+        onPointerDown?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        if (event.target === event.currentTarget) {
+          manager.selectIcon(null);
+        }
+      },
+      ref: setGridElement,
+      role: "group",
+      children: [
+        manager.icons.map((icon) => /* @__PURE__ */ jsx35(NuIconGridItem, { gridElement, icon }, icon.id)),
+        /* @__PURE__ */ jsx35(
+          PopupMenu,
+          {
+            anchor: contextMenu.anchor,
+            items: contextMenuItems,
+            onOpenChange: contextMenu.setOpen,
+            open: contextMenu.open
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/IconGrid/NuIconProvider.tsx
+import {
+  useCallback as useCallback5,
+  useMemo as useMemo9,
+  useRef as useRef10,
+  useState as useState16
+} from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var GRID_PADDING = 12;
+var ICON_CELL_HEIGHT = 104;
+var ICON_CELL_WIDTH = 104;
+function getDefaultPosition(index) {
+  return {
+    x: GRID_PADDING + Math.floor(index / 6) * ICON_CELL_WIDTH,
+    y: GRID_PADDING + index % 6 * ICON_CELL_HEIGHT
+  };
+}
+function getIconInfo(definition, index, id) {
+  return {
+    ...definition,
+    id,
+    position: definition.position ?? getDefaultPosition(index)
+  };
+}
+function getInitialIcons(definitions) {
+  const ids = /* @__PURE__ */ new Set();
+  return definitions.map((definition, index) => {
+    const baseId = definition.id ?? `nu-icon-${index + 1}`;
+    let id = baseId;
+    let duplicateIndex = 2;
+    while (ids.has(id)) {
+      id = `${baseId}-${duplicateIndex}`;
+      duplicateIndex += 1;
+    }
+    ids.add(id);
+    return getIconInfo(definition, index, id);
+  });
+}
+function getArrangedPositions(icons, mode, gridSize) {
+  const orderedIcons = mode === "name" ? [...icons].sort(
+    (left, right) => left.label.localeCompare(right.label, void 0, {
+      numeric: true,
+      sensitivity: "base"
+    })
+  ) : icons;
+  const cellsPerLine = Math.max(
+    1,
+    Math.floor(
+      ((mode === "rows" ? gridSize.width : gridSize.height) - GRID_PADDING * 2) / (mode === "rows" ? ICON_CELL_WIDTH : ICON_CELL_HEIGHT)
+    )
+  );
+  return new Map(
+    orderedIcons.map((icon, index) => {
+      const lineIndex = index % cellsPerLine;
+      const crossIndex = Math.floor(index / cellsPerLine);
+      return [
+        icon.id,
+        mode === "rows" ? {
+          x: GRID_PADDING + lineIndex * ICON_CELL_WIDTH,
+          y: GRID_PADDING + crossIndex * ICON_CELL_HEIGHT
+        } : {
+          x: GRID_PADDING + crossIndex * ICON_CELL_WIDTH,
+          y: GRID_PADDING + lineIndex * ICON_CELL_HEIGHT
+        }
+      ];
+    })
+  );
+}
+function NuIconProvider({
+  children,
+  defaultIcons = []
+}) {
+  const idRef = useRef10(defaultIcons.length);
+  const gridSizeRef = useRef10({ height: 0, width: 0 });
+  const [icons, setIcons] = useState16(
+    () => getInitialIcons(defaultIcons)
+  );
+  const [selectedIconId, setSelectedIconId] = useState16(null);
+  const addIcon = useCallback5((definition) => {
+    const id = definition.id ?? `nu-icon-${++idRef.current}`;
+    setIcons((currentIcons) => {
+      if (currentIcons.some((icon) => icon.id === id)) {
+        throw new Error(`An icon with id "${id}" already exists.`);
+      }
+      return [
+        ...currentIcons,
+        getIconInfo(definition, currentIcons.length, id)
+      ];
+    });
+    return id;
+  }, []);
+  const moveIcon = useCallback5((id, position) => {
+    setIcons(
+      (currentIcons) => currentIcons.map(
+        (icon) => icon.id === id ? { ...icon, position } : icon
+      )
+    );
+  }, []);
+  const removeIcon = useCallback5((id) => {
+    setIcons((currentIcons) => currentIcons.filter((icon) => icon.id !== id));
+    setSelectedIconId((currentId) => currentId === id ? null : currentId);
+  }, []);
+  const updateIcon = useCallback5(
+    (id, patch) => {
+      setIcons(
+        (currentIcons) => currentIcons.map(
+          (icon) => icon.id === id ? {
+            ...icon,
+            ...patch,
+            position: patch.position ?? icon.position
+          } : icon
+        )
+      );
+    },
+    []
+  );
+  const arrangeIcons = useCallback5((mode = "columns") => {
+    setIcons((currentIcons) => {
+      const positions = getArrangedPositions(
+        currentIcons,
+        mode,
+        gridSizeRef.current
+      );
+      return currentIcons.map((icon) => ({
+        ...icon,
+        position: positions.get(icon.id) ?? icon.position
+      }));
+    });
+  }, []);
+  const setGridSize = useCallback5((size) => {
+    gridSizeRef.current = size;
+  }, []);
+  const contextValue = useMemo9(
+    () => ({
+      addIcon,
+      arrangeIcons,
+      icons,
+      moveIcon,
+      removeIcon,
+      selectedIconId,
+      selectIcon: setSelectedIconId,
+      setGridSize,
+      updateIcon
+    }),
+    [
+      addIcon,
+      arrangeIcons,
+      icons,
+      moveIcon,
+      removeIcon,
+      selectedIconId,
+      setGridSize,
+      updateIcon
+    ]
+  );
+  return /* @__PURE__ */ jsx36(NuIconContext.Provider, { value: contextValue, children });
+}
+
 // src/components/ComboBox/ComboBox.tsx
-import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
+import {
+  useEffect as useEffect8,
+  useId as useId5,
+  useMemo as useMemo10,
+  useRef as useRef11,
+  useState as useState17
+} from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
 function flattenComboBoxOptions(data) {
   const options = [];
   data.forEach((group) => {
@@ -4344,31 +4984,31 @@ function ComboBox({
   value,
   ...props
 }) {
-  const rootRef = useRef8(null);
-  const inputRef = useRef8(null);
-  const fieldRef = useRef8(null);
-  const popupRef = useRef8(null);
+  const rootRef = useRef11(null);
+  const inputRef = useRef11(null);
+  const fieldRef = useRef11(null);
+  const popupRef = useRef11(null);
   const generatedId = useId5();
   const fieldId = `${generatedId}-combo-box`;
   const labelId = `${fieldId}-label`;
   const hintId = hint ? `${fieldId}-hint` : void 0;
-  const [open, setOpen] = useState13(false);
-  const options = useMemo8(() => flattenComboBoxOptions(data), [data]);
+  const [open, setOpen] = useState17(false);
+  const options = useMemo10(() => flattenComboBoxOptions(data), [data]);
   const isValueControlled = value !== void 0;
   const isInputControlled = inputValueProp !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = useState13(() => defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState17(() => defaultValue);
   const initialSelectedOption = findComboBoxOption(options, defaultValue);
-  const [uncontrolledInputValue, setUncontrolledInputValue] = useState13(
+  const [uncontrolledInputValue, setUncontrolledInputValue] = useState17(
     () => defaultInputValue ?? initialSelectedOption?.item.name.text ?? ""
   );
   const resolvedValue = isValueControlled ? value : uncontrolledValue;
-  const selectedOption = useMemo8(
+  const selectedOption = useMemo10(
     () => findComboBoxOption(options, resolvedValue),
     [options, resolvedValue]
   );
   const resolvedInputValue = isInputControlled ? inputValueProp ?? "" : uncontrolledInputValue;
   const normalizedFilter = resolvedInputValue.trim().toLowerCase();
-  const filteredData = useMemo8(() => {
+  const filteredData = useMemo10(() => {
     if (!normalizedFilter) {
       return data;
     }
@@ -4379,15 +5019,15 @@ function ComboBox({
       )
     })).filter((group) => group.items.length > 0);
   }, [data, normalizedFilter]);
-  const filteredOptions = useMemo8(
+  const filteredOptions = useMemo10(
     () => flattenComboBoxOptions(filteredData).filter(
       (option) => !option.item.disabled
     ),
     [filteredData]
   );
   const popupRoot = typeof document === "undefined" ? null : resolveComboBoxPortalRoot();
-  const [themePortalStyle, setThemePortalStyle] = useState13(() => void 0);
-  useEffect7(() => {
+  const [themePortalStyle, setThemePortalStyle] = useState17(() => void 0);
+  useEffect8(() => {
     if (!open) {
       return;
     }
@@ -4463,7 +5103,7 @@ function ComboBox({
         break;
     }
   }
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       ...props,
@@ -4471,7 +5111,7 @@ function ComboBox({
       ref: rootRef,
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx37(
           "label",
           {
             className: cx("nu-combo-box__label", slotClassNames?.label),
@@ -4481,20 +5121,20 @@ function ComboBox({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ jsxs20(
+        /* @__PURE__ */ jsxs21(
           "span",
           {
             className: cx("nu-combo-box__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsxs20(
+              /* @__PURE__ */ jsxs21(
                 "span",
                 {
                   className: cx("nu-combo-box__field", slotClassNames?.field),
                   ref: fieldRef,
                   style: slotStyles?.field,
                   children: [
-                    /* @__PURE__ */ jsx34(
+                    /* @__PURE__ */ jsx37(
                       "span",
                       {
                         "aria-hidden": "true",
@@ -4503,7 +5143,7 @@ function ComboBox({
                         children: "["
                       }
                     ),
-                    /* @__PURE__ */ jsx34(
+                    /* @__PURE__ */ jsx37(
                       "span",
                       {
                         className: cx(
@@ -4511,7 +5151,7 @@ function ComboBox({
                           slotClassNames?.inputShell
                         ),
                         style: slotStyles?.inputShell,
-                        children: /* @__PURE__ */ jsx34(
+                        children: /* @__PURE__ */ jsx37(
                           "input",
                           {
                             "aria-autocomplete": "list",
@@ -4538,316 +5178,95 @@ function ComboBox({
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsx34(
+                    /* @__PURE__ */ jsx37(
                       "span",
-                      {
-                        "aria-hidden": "true",
-                        className: cx("nu-combo-box__bracket", slotClassNames?.bracket),
-                        style: slotStyles?.bracket,
-                        children: "]"
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx34(
-                ControlOpener,
-                {
-                  "aria-label": open ? "Collapse list" : "Expand list",
-                  as: "button",
-                  className: cx(
-                    "nu-control-opener",
-                    "nu-combo-box__toggle",
-                    slotClassNames?.toggle
-                  ),
-                  disabled,
-                  onClick: handleToggle,
-                  style: slotStyles?.toggle
-                }
-              )
-            ]
-          }
-        ),
-        hint ? /* @__PURE__ */ jsx34(
-          "span",
-          {
-            className: cx("nu-combo-box__hint", slotClassNames?.hint),
-            id: hintId,
-            style: slotStyles?.hint,
-            children: hint
-          }
-        ) : null,
-        open && popupRoot ? createPortal2(
-          /* @__PURE__ */ jsx34(
-            "div",
-            {
-              className: cx("nu-combo-box__popup", slotClassNames?.popup),
-              id: `${fieldId}-popup`,
-              ref: popupRef,
-              style: mergeSlotStyle(
-                themePortalStyle,
-                slotStyles?.popup
-              ),
-              children: /* @__PURE__ */ jsx34(
-                "div",
-                {
-                  className: cx("nu-combo-box__listbox", slotClassNames?.listbox),
-                  style: slotStyles?.listbox,
-                  children: /* @__PURE__ */ jsx34(
-                    ListBox,
-                    {
-                      data: filteredData,
-                      emptyText: "No matches",
-                      onItemSelect: (item, group) => {
-                        const nextOption = filteredOptions.find(
-                          (option) => option.item === item && option.group === group
-                        );
-                        if (!nextOption) {
-                          return;
-                        }
-                        commitValue(nextOption.value, item, group);
-                      },
-                      selectedId: selectedOption?.value,
-                      style: slotStyles?.listbox
-                    }
-                  )
-                }
-              )
-            }
-          ),
-          popupRoot
-        ) : null
-      ]
-    }
-  );
-}
-
-// src/components/CommandButton/CommandButton.tsx
-import {
-  Fragment as Fragment5
-} from "react";
-
-// src/components/PopupMenu/PopupMenu.tsx
-import {
-  useCallback as useCallback4,
-  useEffect as useEffect8,
-  useLayoutEffect as useLayoutEffect3,
-  useRef as useRef9,
-  useState as useState14
-} from "react";
-import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx35 } from "react/jsx-runtime";
-function hasVisibleChildren2(item) {
-  return Boolean(item.items?.some((child) => !child.hidden));
-}
-function clamp(value, min, max) {
-  return Math.min(max, Math.max(min, value));
-}
-function resolveAnchorPosition(anchor) {
-  if (!anchor) {
-    return null;
-  }
-  if (anchor.type === "point") {
-    return {
-      left: anchor.x,
-      top: anchor.y
-    };
-  }
-  const rect = anchor.element.getBoundingClientRect();
-  return {
-    left: rect.left,
-    top: rect.bottom - 1
-  };
-}
-function resolvePortalRoot() {
-  if (typeof document === "undefined") {
-    return null;
-  }
-  return document.body;
-}
-function PopupMenu({
-  anchor,
-  className,
-  defaultOpen = false,
-  items,
-  onItemSelect,
-  onOpenChange,
-  open,
-  style: styleProp,
-  uncheckedShape = "box",
-  ...props
-}) {
-  const rootRef = useRef9(null);
-  const [activePath, setActivePath] = useState14([]);
-  const [uncontrolledOpen, setUncontrolledOpen] = useState14(defaultOpen);
-  const isControlled = open !== void 0;
-  const resolvedOpen = isControlled ? open : uncontrolledOpen;
-  const portalRoot = resolvePortalRoot();
-  const setResolvedOpen = useCallback4(
-    (nextOpen) => {
-      if (!nextOpen) {
-        setActivePath([]);
-      }
-      if (!isControlled) {
-        setUncontrolledOpen(nextOpen);
-      }
-      onOpenChange?.(nextOpen);
-    },
-    [isControlled, onOpenChange]
-  );
-  useEffect8(() => {
-    if (!resolvedOpen) {
-      return;
-    }
-    function handlePointerDown(event) {
-      if (!rootRef.current?.contains(event.target)) {
-        setResolvedOpen(false);
-      }
-    }
-    function handleKeyDown(event) {
-      if (event.key === "Escape") {
-        setResolvedOpen(false);
-      }
-    }
-    document.addEventListener("pointerdown", handlePointerDown);
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("pointerdown", handlePointerDown);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [resolvedOpen, setResolvedOpen]);
-  useLayoutEffect3(() => {
-    if (!resolvedOpen || !anchor || !rootRef.current) {
-      return;
-    }
-    const rootNode = rootRef.current;
-    function updatePosition() {
-      const anchorPosition = resolveAnchorPosition(anchor);
-      if (!anchorPosition) {
-        return;
-      }
-      const viewportRect = getPortalViewportRect(portalRoot);
-      const relativePosition = toPortalCoordinates(portalRoot, anchorPosition);
-      const rect = rootNode.getBoundingClientRect();
-      const maxLeft = Math.max(0, viewportRect.width - rect.width);
-      const maxTop = Math.max(0, viewportRect.height - rect.height);
-      rootNode.style.left = `${clamp(relativePosition.left, 0, maxLeft)}px`;
-      rootNode.style.top = `${clamp(relativePosition.top, 0, maxTop)}px`;
-      rootNode.style.visibility = "visible";
-    }
-    rootNode.style.left = "0px";
-    rootNode.style.top = "0px";
-    rootNode.style.visibility = "hidden";
-    updatePosition();
-    window.addEventListener("resize", updatePosition);
-    window.addEventListener("scroll", updatePosition, true);
-    return () => {
-      window.removeEventListener("resize", updatePosition);
-      window.removeEventListener("scroll", updatePosition, true);
-    };
-  }, [anchor, portalRoot, resolvedOpen]);
-  function handleActivateItem(item, level) {
-    if (item.disabled) {
-      return;
-    }
-    if (hasVisibleChildren2(item)) {
-      setActivePath(
-        (currentPath) => currentPath[level] === item.id ? currentPath.slice(0, level) : [...currentPath.slice(0, level), item.id]
-      );
-      return;
-    }
-    item.onSelect?.();
-    onItemSelect?.(item);
-    setResolvedOpen(false);
-  }
-  function handleHoverItem(item, level) {
-    if (item.disabled) {
-      return;
-    }
-    setActivePath((currentPath) => [...currentPath.slice(0, level), item.id]);
-  }
-  if (!resolvedOpen || !anchor || !portalRoot || items.every((item) => item.hidden)) {
-    return null;
-  }
-  return createPortal3(
-    /* @__PURE__ */ jsx35(
-      "div",
-      {
-        ...props,
-        className: ["nu-popup-menu", className].filter(Boolean).join(" "),
-        onContextMenu: (event) => event.preventDefault(),
-        ref: rootRef,
-        style: {
-          ...getThemePortalStyle(
-            anchor?.type === "element" ? anchor.element : null
-          ),
-          ...styleProp,
-          left: 0,
-          top: 0,
-          visibility: "hidden"
-        },
-        children: /* @__PURE__ */ jsx35("div", { className: "nu-popup-menu__shell", children: /* @__PURE__ */ jsx35(
-          MainMenuList,
+                      {
+                        "aria-hidden": "true",
+                        className: cx("nu-combo-box__bracket", slotClassNames?.bracket),
+                        style: slotStyles?.bracket,
+                        children: "]"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx37(
+                ControlOpener,
+                {
+                  "aria-label": open ? "Collapse list" : "Expand list",
+                  as: "button",
+                  className: cx(
+                    "nu-control-opener",
+                    "nu-combo-box__toggle",
+                    slotClassNames?.toggle
+                  ),
+                  disabled,
+                  onClick: handleToggle,
+                  style: slotStyles?.toggle
+                }
+              )
+            ]
+          }
+        ),
+        hint ? /* @__PURE__ */ jsx37(
+          "span",
           {
-            activePath,
-            items,
-            level: 0,
-            onActivateItem: handleActivateItem,
-            onHoverItem: handleHoverItem,
-            rootVariant: "popup",
-            uncheckedShape
+            className: cx("nu-combo-box__hint", slotClassNames?.hint),
+            id: hintId,
+            style: slotStyles?.hint,
+            children: hint
           }
-        ) })
-      }
-    ),
-    portalRoot
+        ) : null,
+        open && popupRoot ? createPortal3(
+          /* @__PURE__ */ jsx37(
+            "div",
+            {
+              className: cx("nu-combo-box__popup", slotClassNames?.popup),
+              id: `${fieldId}-popup`,
+              ref: popupRef,
+              style: mergeSlotStyle(
+                themePortalStyle,
+                slotStyles?.popup
+              ),
+              children: /* @__PURE__ */ jsx37(
+                "div",
+                {
+                  className: cx("nu-combo-box__listbox", slotClassNames?.listbox),
+                  style: slotStyles?.listbox,
+                  children: /* @__PURE__ */ jsx37(
+                    ListBox,
+                    {
+                      data: filteredData,
+                      emptyText: "No matches",
+                      onItemSelect: (item, group) => {
+                        const nextOption = filteredOptions.find(
+                          (option) => option.item === item && option.group === group
+                        );
+                        if (!nextOption) {
+                          return;
+                        }
+                        commitValue(nextOption.value, item, group);
+                      },
+                      selectedId: selectedOption?.value,
+                      style: slotStyles?.listbox
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          popupRoot
+        ) : null
+      ]
+    }
   );
 }
 
-// src/components/PopupMenu/usePopupMenu.ts
-import { useState as useState15 } from "react";
-function usePopupMenu() {
-  const [anchor, setAnchor] = useState15(null);
-  const [open, setOpen] = useState15(false);
-  function close() {
-    setOpen(false);
-  }
-  function openAtPoint(x, y) {
-    setAnchor({
-      type: "point",
-      x,
-      y
-    });
-    setOpen(true);
-  }
-  function openAtElement(element) {
-    setAnchor({
-      element,
-      type: "element"
-    });
-    setOpen(true);
-  }
-  function openFromClick(event) {
-    openAtElement(event.currentTarget);
-  }
-  function openFromContextMenu(event) {
-    event.preventDefault();
-    openAtPoint(event.clientX, event.clientY);
-  }
-  return {
-    anchor,
-    close,
-    open,
-    openAtElement,
-    openAtPoint,
-    openFromClick,
-    openFromContextMenu,
-    setOpen
-  };
-}
-
 // src/components/CommandButton/CommandButton.tsx
-import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
+import {
+  Fragment as Fragment6
+} from "react";
+import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
 var COMMAND_BUTTON_GLYPH_NAMES = /* @__PURE__ */ new Set([
   "check-fill",
   "check-mark",
@@ -4888,7 +5307,7 @@ function CommandButton({
   const hasMenu = menuItems.length > 0;
   const showCaret = dropdown || hasMenu;
   const resolvedToggled = toggled ?? pressed;
-  const resolvedIcon = typeof icon === "string" && isCommandButtonGlyphName(icon) ? /* @__PURE__ */ jsx36(NuGlyph, { name: icon }) : icon ?? null;
+  const resolvedIcon = typeof icon === "string" && isCommandButtonGlyphName(icon) ? /* @__PURE__ */ jsx38(NuGlyph, { name: icon }) : icon ?? null;
   function handleClick(event) {
     onClick?.(event);
     if (event.defaultPrevented || !hasMenu) {
@@ -4896,8 +5315,8 @@ function CommandButton({
     }
     popupMenu.openFromClick(event);
   }
-  return /* @__PURE__ */ jsxs21(Fragment5, { children: [
-    /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(Fragment6, { children: [
+    /* @__PURE__ */ jsxs22(
       "button",
       {
         ...props,
@@ -4913,7 +5332,7 @@ function CommandButton({
         type,
         onClick: handleClick,
         children: [
-          resolvedIcon ? /* @__PURE__ */ jsx36(
+          resolvedIcon ? /* @__PURE__ */ jsx38(
             "span",
             {
               className: cx(
@@ -4925,7 +5344,7 @@ function CommandButton({
               children: resolvedIcon
             }
           ) : null,
-          children ? /* @__PURE__ */ jsx36(
+          children ? /* @__PURE__ */ jsx38(
             "span",
             {
               className: cx(
@@ -4937,7 +5356,7 @@ function CommandButton({
               children: renderMnemonicNode(children)
             }
           ) : null,
-          showCaret ? /* @__PURE__ */ jsx36(
+          showCaret ? /* @__PURE__ */ jsx38(
             "span",
             {
               className: cx(
@@ -4946,13 +5365,13 @@ function CommandButton({
                 slotClassNames?.caret
               ),
               style: slotStyles?.caret,
-              children: /* @__PURE__ */ jsx36(NuGlyph, { name: "dropdown-arrow" })
+              children: /* @__PURE__ */ jsx38(NuGlyph, { name: "dropdown-arrow" })
             }
           ) : null
         ]
       }
     ),
-    hasMenu ? /* @__PURE__ */ jsx36(
+    hasMenu ? /* @__PURE__ */ jsx38(
       PopupMenu,
       {
         anchor: popupMenu.anchor,
@@ -4967,8 +5386,8 @@ function CommandButton({
 }
 
 // src/components/CrtGlitch/CrtGlitch.tsx
-import { useEffect as useEffect9, useId as useId6, useRef as useRef10 } from "react";
-import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
+import { useEffect as useEffect9, useId as useId6, useRef as useRef12 } from "react";
+import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
 var DEFAULT_INTERVAL_MS = 3e3;
 var DEFAULT_DURATION_MS = 2500;
 var DEFAULT_TOP_LEVEL_RATIO = 1 / 3;
@@ -4994,12 +5413,12 @@ function NuCrtGlitch({
   topLevelRatio = DEFAULT_TOP_LEVEL_RATIO
 }) {
   const filterId = useId6().replace(/:/g, "");
-  const turbulenceRef = useRef10(null);
-  const warpRef = useRef10(null);
-  const rOffsetRef = useRef10(null);
-  const bOffsetRef = useRef10(null);
-  const rafRef = useRef10(null);
-  const targetElRef = useRef10(null);
+  const turbulenceRef = useRef12(null);
+  const warpRef = useRef12(null);
+  const rOffsetRef = useRef12(null);
+  const bOffsetRef = useRef12(null);
+  const rafRef = useRef12(null);
+  const targetElRef = useRef12(null);
   useEffect9(() => {
     if (!enabled) {
       return;
@@ -5102,7 +5521,7 @@ function NuCrtGlitch({
       }
     };
   }, [durationMs, enabled, filterId, intervalMs, targetSelector, topLevelRatio]);
-  return /* @__PURE__ */ jsx37("svg", { "aria-hidden": "true", height: "0", style: { position: "absolute" }, width: "0", children: /* @__PURE__ */ jsx37("defs", { children: /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsx39("svg", { "aria-hidden": "true", height: "0", style: { position: "absolute" }, width: "0", children: /* @__PURE__ */ jsx39("defs", { children: /* @__PURE__ */ jsxs23(
     "filter",
     {
       "color-interpolation-filters": "sRGB",
@@ -5112,7 +5531,7 @@ function NuCrtGlitch({
       x: "-15%",
       y: "-5%",
       children: [
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx39(
           "feTurbulence",
           {
             baseFrequency: "0.001 0.045",
@@ -5123,7 +5542,7 @@ function NuCrtGlitch({
             type: "turbulence"
           }
         ),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx39(
           "feDisplacementMap",
           {
             in: "SourceGraphic",
@@ -5135,8 +5554,8 @@ function NuCrtGlitch({
             yChannelSelector: "A"
           }
         ),
-        /* @__PURE__ */ jsx37("feOffset", { dx: 0, dy: 0, in: "warped", ref: rOffsetRef, result: "rOff" }),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx39("feOffset", { dx: 0, dy: 0, in: "warped", ref: rOffsetRef, result: "rOff" }),
+        /* @__PURE__ */ jsx39(
           "feColorMatrix",
           {
             in: "rOff",
@@ -5145,7 +5564,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__ */ jsx37(
+        /* @__PURE__ */ jsx39(
           "feColorMatrix",
           {
             in: "warped",
@@ -5154,8 +5573,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__ */ jsx37("feOffset", { dx: 0, dy: 0, in: "warped", ref: bOffsetRef, result: "bOff" }),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx39("feOffset", { dx: 0, dy: 0, in: "warped", ref: bOffsetRef, result: "bOff" }),
+        /* @__PURE__ */ jsx39(
           "feColorMatrix",
           {
             in: "bOff",
@@ -5164,8 +5583,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__ */ jsx37("feBlend", { in: "rOnly", in2: "gOnly", mode: "screen", result: "rg" }),
-        /* @__PURE__ */ jsx37("feBlend", { in: "rg", in2: "bOnly", mode: "screen" })
+        /* @__PURE__ */ jsx39("feBlend", { in: "rOnly", in2: "gOnly", mode: "screen", result: "rg" }),
+        /* @__PURE__ */ jsx39("feBlend", { in: "rg", in2: "bOnly", mode: "screen" })
       ]
     }
   ) }) });
@@ -5174,12 +5593,12 @@ function NuCrtGlitch({
 // src/components/ListView/ListView.tsx
 import {
   forwardRef as forwardRef2,
-  useCallback as useCallback5,
+  useCallback as useCallback6,
   useEffect as useEffect10,
   useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo9,
-  useRef as useRef11,
-  useState as useState16
+  useMemo as useMemo11,
+  useRef as useRef13,
+  useState as useState18
 } from "react";
 
 // src/components/ListView/internals/helpers.ts
@@ -5217,14 +5636,14 @@ function renderListViewCellValue(row, column) {
 import { memo as memo3 } from "react";
 
 // src/components/ListView/internals/ListViewCheckControl.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function ListViewCheckControl({
   isChecked,
   onActivate,
   onToggleCheck,
   uncheckedShape
 }) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx40(
     "button",
     {
       "aria-label": isChecked ? "Uncheck row" : "Check row",
@@ -5237,13 +5656,13 @@ function ListViewCheckControl({
         onToggleCheck();
       },
       type: "button",
-      children: /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsx40(
         "span",
         {
           "aria-hidden": "true",
           className: "nu-list-view__check-box",
           "data-unchecked-shape": uncheckedShape,
-          children: isChecked ? /* @__PURE__ */ jsx38(
+          children: isChecked ? /* @__PURE__ */ jsx40(
             NuGlyph,
             {
               className: "nu-list-view__check-indicator",
@@ -5257,7 +5676,7 @@ function ListViewCheckControl({
 }
 
 // src/components/ListView/internals/ListViewRow.tsx
-import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
 function ListViewRowInner({
   columns,
   isActive,
@@ -5288,7 +5707,7 @@ function ListViewRowInner({
   function handleToggleCheck() {
     onToggleCheck(rowId);
   }
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       "aria-disabled": row.disabled || void 0,
@@ -5309,7 +5728,7 @@ function ListViewRowInner({
         "--nu-list-view-columns": templateColumns
       },
       children: [
-        showCheckBox ? /* @__PURE__ */ jsx39("span", { className: "nu-list-view__check-cell", role: "gridcell", children: /* @__PURE__ */ jsx39(
+        showCheckBox ? /* @__PURE__ */ jsx41("span", { className: "nu-list-view__check-cell", role: "gridcell", children: /* @__PURE__ */ jsx41(
           ListViewCheckControl,
           {
             isChecked,
@@ -5318,7 +5737,7 @@ function ListViewRowInner({
             uncheckedShape
           }
         ) }) : null,
-        columns.map((column) => /* @__PURE__ */ jsx39(
+        columns.map((column) => /* @__PURE__ */ jsx41(
           "span",
           {
             className: [
@@ -5338,7 +5757,7 @@ function ListViewRowInner({
 var ListViewRow = memo3(ListViewRowInner);
 
 // src/components/ListView/ListView.tsx
-import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
 function ListViewInner({
   activeRowId: activeRowIdProp,
   checkedIds,
@@ -5356,19 +5775,19 @@ function ListViewInner({
   uncheckedShape = "box",
   ...props
 }, ref) {
-  const rootRef = useRef11(null);
-  const rowRefs = useRef11({});
-  const selectableRows = useMemo9(
+  const rootRef = useRef13(null);
+  const rowRefs = useRef13({});
+  const selectableRows = useMemo11(
     () => data.filter((row) => !row.disabled),
     [data]
   );
   const isActiveControlled = activeRowIdProp !== void 0;
-  const [uncontrolledActiveRowId, setUncontrolledActiveRowId] = useState16(
+  const [uncontrolledActiveRowId, setUncontrolledActiveRowId] = useState18(
     () => defaultActiveRowId ?? getInitialActiveRowId(selectableRows, selectedId)
   );
   const activeRowId = activeRowIdProp !== void 0 ? activeRowIdProp : uncontrolledActiveRowId;
   const resolvedActiveRowId = activeRowId && selectableRows.some((row) => row.id === activeRowId) ? activeRowId : getInitialActiveRowId(selectableRows, selectedId);
-  const templateColumns = useMemo9(() => {
+  const templateColumns = useMemo11(() => {
     const checkboxColumn = showCheckBox ? "var(--nu-glyph-cell-size)" : null;
     const dataColumns = columns.map(
       (column) => column.width ?? "minmax(0, 1fr)"
@@ -5383,13 +5802,13 @@ function ListViewInner({
       block: "nearest"
     });
   }, [resolvedActiveRowId]);
-  const registerRowRef = useCallback5(
+  const registerRowRef = useCallback6(
     (rowId, node) => {
       rowRefs.current[rowId] = node;
     },
     []
   );
-  const updateActiveRow = useCallback5(
+  const updateActiveRow = useCallback6(
     (row) => {
       if (!isActiveControlled) {
         setUncontrolledActiveRowId(row.id);
@@ -5398,7 +5817,7 @@ function ListViewInner({
     },
     [isActiveControlled, onActiveRowChange]
   );
-  const activateRowId = useCallback5(
+  const activateRowId = useCallback6(
     (rowId) => {
       if (!rowId) {
         return;
@@ -5437,7 +5856,7 @@ function ListViewInner({
   function isRowChecked(row) {
     return getListViewRowChecked(row, checkedIds);
   }
-  const toggleRowCheck = useCallback5(
+  const toggleRowCheck = useCallback6(
     (rowId) => {
       if (!showCheckBox) {
         return;
@@ -5506,7 +5925,7 @@ function ListViewInner({
         break;
     }
   }
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       ...props,
@@ -5517,7 +5936,7 @@ function ListViewInner({
       role: "grid",
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsxs25(
           "div",
           {
             className: "nu-list-view__header",
@@ -5526,8 +5945,8 @@ function ListViewInner({
               "--nu-list-view-columns": templateColumns
             },
             children: [
-              showCheckBox ? /* @__PURE__ */ jsx40("span", { className: "nu-list-view__header-cell", role: "columnheader" }) : null,
-              columns.map((column) => /* @__PURE__ */ jsx40(
+              showCheckBox ? /* @__PURE__ */ jsx42("span", { className: "nu-list-view__header-cell", role: "columnheader" }) : null,
+              columns.map((column) => /* @__PURE__ */ jsx42(
                 "span",
                 {
                   className: [
@@ -5543,7 +5962,7 @@ function ListViewInner({
             ]
           }
         ),
-        /* @__PURE__ */ jsx40("div", { className: "nu-list-view__body", children: data.length > 0 ? data.map((row) => /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx42("div", { className: "nu-list-view__body", children: data.length > 0 ? data.map((row) => /* @__PURE__ */ jsx42(
           ListViewRow,
           {
             columns,
@@ -5560,7 +5979,7 @@ function ListViewInner({
             uncheckedShape
           },
           row.id
-        )) : /* @__PURE__ */ jsx40("div", { className: "nu-list-view__empty", children: emptyText }) })
+        )) : /* @__PURE__ */ jsx42("div", { className: "nu-list-view__empty", children: emptyText }) })
       ]
     }
   );
@@ -5571,9 +5990,9 @@ var ListView = forwardRef2(ListViewInner);
 import {
   useEffect as useEffect11,
   useId as useId7,
-  useMemo as useMemo10,
-  useRef as useRef12,
-  useState as useState17
+  useMemo as useMemo12,
+  useRef as useRef14,
+  useState as useState19
 } from "react";
 
 // src/components/MaskedField/textMask.ts
@@ -5738,7 +6157,7 @@ function getMaskedFieldState(mask, rawValue) {
 }
 
 // src/components/MaskedField/MaskedField.tsx
-import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
 function MaskedField({
   "aria-invalid": ariaInvalid,
   className,
@@ -5761,8 +6180,8 @@ function MaskedField({
   const fieldId = id ?? generatedId;
   const hintId = hint ? `${fieldId}-hint` : void 0;
   const isControlled = value !== void 0;
-  const hasMountedRef = useRef12(false);
-  const [uncontrolledValue, setUncontrolledValue] = useState17(
+  const hasMountedRef = useRef14(false);
+  const [uncontrolledValue, setUncontrolledValue] = useState19(
     () => defaultValue == null ? "" : getMaskedFieldState(mask, String(defaultValue)).formattedValue
   );
   const rawResolvedValue = isControlled ? value == null ? "" : String(value) : uncontrolledValue;
@@ -5771,7 +6190,7 @@ function MaskedField({
     rawResolvedValue
   );
   const resolvedAriaInvalid = ariaInvalid ?? (isInvalid ? true : void 0);
-  const maskInputMode = useMemo10(
+  const maskInputMode = useMemo12(
     () => props.inputMode === void 0 ? getTextMaskInputMode(mask) : void 0,
     [mask, props.inputMode]
   );
@@ -5810,7 +6229,7 @@ function MaskedField({
     }
     onChange?.(event);
   }
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "label",
     {
       className: cx(
@@ -5822,7 +6241,7 @@ function MaskedField({
       htmlFor: fieldId,
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx43(
           "span",
           {
             className: cx("nu-masked-field__label", slotClassNames?.label),
@@ -5830,13 +6249,13 @@ function MaskedField({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ jsxs25(
+        /* @__PURE__ */ jsxs26(
           "span",
           {
             className: cx("nu-masked-field__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsx41(
+              /* @__PURE__ */ jsx43(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -5845,7 +6264,7 @@ function MaskedField({
                   children: "["
                 }
               ),
-              /* @__PURE__ */ jsx41(
+              /* @__PURE__ */ jsx43(
                 "span",
                 {
                   className: cx(
@@ -5853,7 +6272,7 @@ function MaskedField({
                     slotClassNames?.inputShell
                   ),
                   style: slotStyles?.inputShell,
-                  children: /* @__PURE__ */ jsx41(
+                  children: /* @__PURE__ */ jsx43(
                     "input",
                     {
                       ...props,
@@ -5871,7 +6290,7 @@ function MaskedField({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx41(
+              /* @__PURE__ */ jsx43(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -5883,7 +6302,7 @@ function MaskedField({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx41(
+        hint ? /* @__PURE__ */ jsx43(
           "span",
           {
             className: cx("nu-masked-field__hint", slotClassNames?.hint),
@@ -5899,9 +6318,9 @@ function MaskedField({
 
 // src/components/Memo/Memo.tsx
 import {
-  useState as useState18
+  useState as useState20
 } from "react";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function Memo({
   background,
   className,
@@ -5921,7 +6340,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] = useState18(
+  const [uncontrolledValue, setUncontrolledValue] = useState20(
     () => resolvedInitialValue
   );
   function handleChange(event) {
@@ -5931,7 +6350,7 @@ function Memo({
     onValueChange?.(event.target.value);
     onChange?.(event);
   }
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx44(
     "div",
     {
       className: ["nu-memo", className].filter(Boolean).join(" "),
@@ -5944,7 +6363,7 @@ function Memo({
         "--nu-memo-focus-text": focusTextColor,
         "--nu-memo-text": textColor
       },
-      children: /* @__PURE__ */ jsx42("div", { className: "nu-memo__viewport", children: /* @__PURE__ */ jsx42(
+      children: /* @__PURE__ */ jsx44("div", { className: "nu-memo__viewport", children: /* @__PURE__ */ jsx44(
         "textarea",
         {
           ...props,
@@ -5960,11 +6379,11 @@ function Memo({
 // src/components/PageControl/PageControl.tsx
 import {
   useId as useId8,
-  useMemo as useMemo11,
-  useRef as useRef13,
-  useState as useState19
+  useMemo as useMemo13,
+  useRef as useRef15,
+  useState as useState21
 } from "react";
-import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
 function PageControl({
   activePageId: activePageIdProp,
   className,
@@ -5978,12 +6397,12 @@ function PageControl({
 }) {
   const generatedId = useId8();
   const isControlled = activePageIdProp !== void 0;
-  const tabRefs = useRef13({});
-  const [uncontrolledActivePageId, setUncontrolledActivePageId] = useState19(
+  const tabRefs = useRef15({});
+  const [uncontrolledActivePageId, setUncontrolledActivePageId] = useState21(
     () => defaultActivePageId ?? pages.find((page) => !page.disabled)?.id ?? pages[0]?.id
   );
   const activePageId = isControlled ? activePageIdProp : uncontrolledActivePageId;
-  const resolvedActivePage = useMemo11(() => {
+  const resolvedActivePage = useMemo13(() => {
     const byId = pages.find(
       (page) => page.id === activePageId && !page.disabled
     );
@@ -6049,7 +6468,7 @@ function PageControl({
         break;
     }
   }
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       ...props,
@@ -6060,7 +6479,7 @@ function PageControl({
         slotStyles?.root
       ),
       children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx45(
           "div",
           {
             className: cx("nu-page-control__tabs", slotClassNames?.tabs),
@@ -6071,7 +6490,7 @@ function PageControl({
               const isActive = page.id === resolvedActivePage?.id;
               const panelId = `${generatedId}-panel-${page.id}`;
               const tabId = `${generatedId}-tab-${page.id}`;
-              return /* @__PURE__ */ jsx43(
+              return /* @__PURE__ */ jsx45(
                 "button",
                 {
                   "aria-controls": panelId,
@@ -6095,7 +6514,7 @@ function PageControl({
             })
           }
         ),
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx45(
           "div",
           {
             "aria-labelledby": resolvedActivePage ? `${generatedId}-tab-${resolvedActivePage.id}` : void 0,
@@ -6112,7 +6531,7 @@ function PageControl({
 }
 
 // src/components/Panel/Panel.tsx
-import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs28 } from "react/jsx-runtime";
 function Panel({
   children,
   className,
@@ -6123,14 +6542,14 @@ function Panel({
   title,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "section",
     {
       ...props,
       className: cx("nu-panel", slotClassNames?.root, className),
       style: mergeSlotStyle(props.style, slotStyles?.root),
       children: [
-        title ? /* @__PURE__ */ jsx44(
+        title ? /* @__PURE__ */ jsx46(
           "header",
           {
             className: cx("nu-panel__header", slotClassNames?.header),
@@ -6138,7 +6557,7 @@ function Panel({
             children: renderMnemonicText(title)
           }
         ) : null,
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx46(
           "div",
           {
             className: cx(
@@ -6150,7 +6569,7 @@ function Panel({
             children
           }
         ),
-        footer ? /* @__PURE__ */ jsx44(
+        footer ? /* @__PURE__ */ jsx46(
           "footer",
           {
             className: cx("nu-panel__footer", slotClassNames?.footer),
@@ -6166,11 +6585,11 @@ function Panel({
 // src/components/PropertyGrid/PropertyGrid.tsx
 import {
   useId as useId9,
-  useMemo as useMemo12,
-  useRef as useRef14,
-  useState as useState20
+  useMemo as useMemo14,
+  useRef as useRef16,
+  useState as useState22
 } from "react";
-import { jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs29 } from "react/jsx-runtime";
 function collectGroupIds(entries) {
   const groupIds = /* @__PURE__ */ new Set();
   function visit(nextEntries) {
@@ -6278,24 +6697,24 @@ function PropertyGrid({
   ...props
 }) {
   const editorIdPrefix = useId9();
-  const rowButtonRefs = useRef14({});
-  const groupIds = useMemo12(() => collectGroupIds(entries), [entries]);
+  const rowButtonRefs = useRef16({});
+  const groupIds = useMemo14(() => collectGroupIds(entries), [entries]);
   const isExpandedControlled = expandedIdsProp !== void 0;
   const isActiveControlled = activeIdProp !== void 0;
-  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState20(() => getInitialExpandedIds(entries, defaultExpandedIds));
+  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState22(() => getInitialExpandedIds(entries, defaultExpandedIds));
   const resolvedExpandedIds = expandedIdsProp ?? uncontrolledExpandedIds;
-  const expandedIdSet = useMemo12(
+  const expandedIdSet = useMemo14(
     () => new Set(
       resolvedExpandedIds.filter((expandedId) => groupIds.has(expandedId))
     ),
     [groupIds, resolvedExpandedIds]
   );
-  const rows = useMemo12(
+  const rows = useMemo14(
     () => collectVisibleRows(entries, expandedIdSet),
     [entries, expandedIdSet]
   );
-  const interactiveRows = useMemo12(() => collectInteractiveRows(rows), [rows]);
-  const [uncontrolledActiveId, setUncontrolledActiveId] = useState20(() => getInitialActiveId2(interactiveRows, defaultActiveId));
+  const interactiveRows = useMemo14(() => collectInteractiveRows(rows), [rows]);
+  const [uncontrolledActiveId, setUncontrolledActiveId] = useState22(() => getInitialActiveId2(interactiveRows, defaultActiveId));
   const requestedActiveId = isActiveControlled ? activeIdProp : uncontrolledActiveId;
   const resolvedActiveId = requestedActiveId && interactiveRows.some((row) => row.id === requestedActiveId) ? requestedActiveId : interactiveRows[0]?.id;
   function updateExpandedIds(nextExpandedIds) {
@@ -6414,7 +6833,7 @@ function PropertyGrid({
     const nextExpandedIds = expandedIdSet.has(entry.id) ? resolvedExpandedIds.filter((expandedId) => expandedId !== entry.id) : [...resolvedExpandedIds, entry.id];
     updateExpandedIds(nextExpandedIds);
   }
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx47(
     "div",
     {
       ...props,
@@ -6425,13 +6844,13 @@ function PropertyGrid({
         ...style,
         "--nu-property-grid-label-width": labelWidth
       },
-      children: /* @__PURE__ */ jsx45("div", { className: "nu-property-grid__body", children: rows.map((row) => {
+      children: /* @__PURE__ */ jsx47("div", { className: "nu-property-grid__body", children: rows.map((row) => {
         if (row.type === "section") {
-          return /* @__PURE__ */ jsx45("div", { className: "nu-property-grid__section", children: renderMnemonicText(row.entry.title) }, row.entry.id);
+          return /* @__PURE__ */ jsx47("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__ */ jsxs28(
+          return /* @__PURE__ */ jsxs29(
             "div",
             {
               className: "nu-property-grid__row",
@@ -6440,7 +6859,7 @@ function PropertyGrid({
               "data-expanded": isExpanded || void 0,
               "data-group": true,
               children: [
-                /* @__PURE__ */ jsx45(
+                /* @__PURE__ */ jsx47(
                   "button",
                   {
                     className: "nu-property-grid__label nu-property-grid__label-button",
@@ -6460,32 +6879,32 @@ function PropertyGrid({
                       "--nu-property-grid-depth": row.depth
                     },
                     type: "button",
-                    children: /* @__PURE__ */ jsxs28("span", { className: "nu-property-grid__lead", children: [
-                      /* @__PURE__ */ jsx45("span", { className: "nu-property-grid__expander", children: /* @__PURE__ */ jsx45(
+                    children: /* @__PURE__ */ jsxs29("span", { className: "nu-property-grid__lead", children: [
+                      /* @__PURE__ */ jsx47("span", { className: "nu-property-grid__expander", children: /* @__PURE__ */ jsx47(
                         NuGlyph,
                         {
                           name: isExpanded ? "tree-caret-down" : "tree-caret-right"
                         }
                       ) }),
-                      /* @__PURE__ */ jsx45("span", { className: "nu-property-grid__label-text", children: renderMnemonicText(row.entry.label) })
+                      /* @__PURE__ */ jsx47("span", { className: "nu-property-grid__label-text", children: renderMnemonicText(row.entry.label) })
                     ] })
                   }
                 ),
-                /* @__PURE__ */ jsx45("div", { className: "nu-property-grid__editor", children: row.entry.summary ? /* @__PURE__ */ jsx45("div", { className: "nu-property-grid__control", children: row.entry.summary }) : null })
+                /* @__PURE__ */ jsx47("div", { className: "nu-property-grid__editor", children: row.entry.summary ? /* @__PURE__ */ jsx47("div", { className: "nu-property-grid__control", children: row.entry.summary }) : null })
               ]
             },
             row.entry.id
           );
         }
         const editorId = `${editorIdPrefix}-editor-${row.entry.id}`;
-        return /* @__PURE__ */ jsxs28(
+        return /* @__PURE__ */ jsxs29(
           "div",
           {
             className: "nu-property-grid__row",
             "data-active": resolvedActiveId === row.entry.id || void 0,
             "data-disabled": row.entry.disabled || void 0,
             children: [
-              /* @__PURE__ */ jsx45(
+              /* @__PURE__ */ jsx47(
                 "button",
                 {
                   className: "nu-property-grid__label nu-property-grid__label-button",
@@ -6505,21 +6924,21 @@ function PropertyGrid({
                     "--nu-property-grid-depth": row.depth
                   },
                   type: "button",
-                  children: /* @__PURE__ */ jsxs28("span", { className: "nu-property-grid__lead", children: [
-                    /* @__PURE__ */ jsx45("span", { className: "nu-property-grid__expander-placeholder" }),
-                    /* @__PURE__ */ jsx45("span", { className: "nu-property-grid__label-text", children: renderMnemonicText(row.entry.label) })
+                  children: /* @__PURE__ */ jsxs29("span", { className: "nu-property-grid__lead", children: [
+                    /* @__PURE__ */ jsx47("span", { className: "nu-property-grid__expander-placeholder" }),
+                    /* @__PURE__ */ jsx47("span", { className: "nu-property-grid__label-text", children: renderMnemonicText(row.entry.label) })
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsxs28(
+              /* @__PURE__ */ jsxs29(
                 "div",
                 {
                   className: "nu-property-grid__editor",
                   id: editorId,
                   onFocusCapture: () => updateActiveId(row.entry.id),
                   children: [
-                    /* @__PURE__ */ jsx45("div", { className: "nu-property-grid__control", children: row.entry.content }),
-                    row.entry.hint ? /* @__PURE__ */ jsx45("div", { className: "nu-property-grid__hint", children: row.entry.hint }) : null
+                    /* @__PURE__ */ jsx47("div", { className: "nu-property-grid__control", children: row.entry.content }),
+                    row.entry.hint ? /* @__PURE__ */ jsx47("div", { className: "nu-property-grid__hint", children: row.entry.hint }) : null
                   ]
                 }
               )
@@ -6533,8 +6952,8 @@ function PropertyGrid({
 }
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
-function clamp2(value, min, max) {
+import { jsx as jsx48, jsxs as jsxs30 } from "react/jsx-runtime";
+function clamp3(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
 function ProgressBar({
@@ -6554,10 +6973,10 @@ function ProgressBar({
   ...props
 }) {
   const safeMax = max <= min ? min + 1 : max;
-  const clampedValue = clamp2(value, min, safeMax);
+  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__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       ...props,
@@ -6569,7 +6988,7 @@ function ProgressBar({
       role: "progressbar",
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        label ? /* @__PURE__ */ jsx46(
+        label ? /* @__PURE__ */ jsx48(
           "span",
           {
             className: cx("nu-progress-bar__label", slotClassNames?.label),
@@ -6577,7 +6996,7 @@ function ProgressBar({
             children: renderMnemonicText(label)
           }
         ) : null,
-        /* @__PURE__ */ jsxs29(
+        /* @__PURE__ */ jsxs30(
           "div",
           {
             className: cx("nu-progress-bar__track", slotClassNames?.track),
@@ -6588,7 +7007,7 @@ function ProgressBar({
               slotStyles?.track
             ),
             children: [
-              /* @__PURE__ */ jsx46(
+              /* @__PURE__ */ jsx48(
                 "div",
                 {
                   className: cx("nu-progress-bar__fill", slotClassNames?.fill),
@@ -6601,7 +7020,7 @@ function ProgressBar({
                   )
                 }
               ),
-              showValue ? /* @__PURE__ */ jsx46(
+              showValue ? /* @__PURE__ */ jsx48(
                 "span",
                 {
                   className: cx("nu-progress-bar__value", slotClassNames?.value),
@@ -6612,7 +7031,7 @@ function ProgressBar({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx46(
+        hint ? /* @__PURE__ */ jsx48(
           "span",
           {
             className: cx("nu-progress-bar__hint", slotClassNames?.hint),
@@ -6626,8 +7045,8 @@ function ProgressBar({
 }
 
 // src/components/RadioGroup/RadioButton.tsx
-import { useId as useId10, useState as useState21 } from "react";
-import { jsx as jsx47, jsxs as jsxs30 } from "react/jsx-runtime";
+import { useId as useId10, useState as useState23 } from "react";
+import { jsx as jsx49, jsxs as jsxs31 } from "react/jsx-runtime";
 function RadioButton({
   checked,
   className,
@@ -6643,7 +7062,7 @@ function RadioButton({
   const inputId = id ?? generatedId;
   const hintId = hint ? `${inputId}-hint` : void 0;
   const isControlled = checked !== void 0;
-  const [uncontrolledChecked, setUncontrolledChecked] = useState21(defaultChecked);
+  const [uncontrolledChecked, setUncontrolledChecked] = useState23(defaultChecked);
   const resolvedChecked = isControlled ? checked : uncontrolledChecked;
   function handleChange(event) {
     if (!isControlled) {
@@ -6651,9 +7070,9 @@ function RadioButton({
     }
     onCheckedChange?.(event.target.checked, event);
   }
-  return /* @__PURE__ */ jsxs30("label", { className: ["nu-radio-button", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs30("span", { className: "nu-radio-button__main", children: [
-      /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsxs31("label", { className: ["nu-radio-button", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs31("span", { className: "nu-radio-button__main", children: [
+      /* @__PURE__ */ jsx49(
         "input",
         {
           ...props,
@@ -6666,19 +7085,19 @@ function RadioButton({
           type: "radio"
         }
       ),
-      /* @__PURE__ */ jsx47("span", { "aria-hidden": "true", className: "nu-radio-button__control", children: /* @__PURE__ */ jsxs30("span", { className: "nu-radio-button__disc", children: [
-        /* @__PURE__ */ jsx47(NuGlyph, { className: "nu-radio-button__ring", name: "radio-ring" }),
-        resolvedChecked ? /* @__PURE__ */ jsx47(NuGlyph, { className: "nu-radio-button__fill", name: "radio-fill" }) : null
+      /* @__PURE__ */ jsx49("span", { "aria-hidden": "true", className: "nu-radio-button__control", children: /* @__PURE__ */ jsxs31("span", { className: "nu-radio-button__disc", children: [
+        /* @__PURE__ */ jsx49(NuGlyph, { className: "nu-radio-button__ring", name: "radio-ring" }),
+        resolvedChecked ? /* @__PURE__ */ jsx49(NuGlyph, { className: "nu-radio-button__fill", name: "radio-fill" }) : null
       ] }) }),
-      /* @__PURE__ */ jsx47("span", { className: "nu-radio-button__label", children: renderMnemonicText(label) })
+      /* @__PURE__ */ jsx49("span", { className: "nu-radio-button__label", children: renderMnemonicText(label) })
     ] }),
-    hint ? /* @__PURE__ */ jsx47("span", { className: "nu-radio-button__hint", id: hintId, children: hint }) : null
+    hint ? /* @__PURE__ */ jsx49("span", { className: "nu-radio-button__hint", id: hintId, children: hint }) : null
   ] });
 }
 
 // src/components/RadioGroup/RadioGroup.tsx
-import { useId as useId11, useState as useState22 } from "react";
-import { jsx as jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
+import { useId as useId11, useState as useState24 } from "react";
+import { jsx as jsx50, jsxs as jsxs32 } from "react/jsx-runtime";
 function RadioGroup({
   className,
   defaultValue,
@@ -6697,7 +7116,7 @@ function RadioGroup({
   const groupName = name ?? generatedId;
   const hintId = hint ? `${groupName}-hint` : void 0;
   const isControlled = value !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = useState22(defaultValue ?? options[0]?.value);
+  const [uncontrolledValue, setUncontrolledValue] = useState24(defaultValue ?? options[0]?.value);
   const resolvedValue = isControlled ? value : uncontrolledValue;
   function commitValue(nextValue) {
     if (!isControlled) {
@@ -6705,7 +7124,7 @@ function RadioGroup({
     }
     onValueChange?.(nextValue);
   }
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     "fieldset",
     {
       ...props,
@@ -6713,7 +7132,7 @@ function RadioGroup({
       className: cx("nu-radio-group", slotClassNames?.root, className),
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        label ? /* @__PURE__ */ jsx48(
+        label ? /* @__PURE__ */ jsx50(
           "legend",
           {
             className: cx("nu-radio-group__label", slotClassNames?.label),
@@ -6721,12 +7140,12 @@ function RadioGroup({
             children: renderMnemonicText(label)
           }
         ) : null,
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx50(
           "div",
           {
             className: cx("nu-radio-group__options", slotClassNames?.options),
             style: slotStyles?.options,
-            children: options.map((option) => /* @__PURE__ */ jsx48(
+            children: options.map((option) => /* @__PURE__ */ jsx50(
               RadioButton,
               {
                 checked: resolvedValue === option.value,
@@ -6745,7 +7164,7 @@ function RadioGroup({
             ))
           }
         ),
-        hint ? /* @__PURE__ */ jsx48(
+        hint ? /* @__PURE__ */ jsx50(
           "span",
           {
             className: cx("nu-radio-group__hint", slotClassNames?.hint),
@@ -6760,14 +7179,14 @@ function RadioGroup({
 }
 
 // src/components/ReportCell/ReportCell.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 function ReportCell({
   align = "start",
   className,
   tone = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx51(
     "span",
     {
       ...props,
@@ -6785,12 +7204,12 @@ function ReportCell({
 import {
   useEffect as useEffect12,
   useId as useId12,
-  useMemo as useMemo13,
-  useRef as useRef15,
-  useState as useState23
+  useMemo as useMemo15,
+  useRef as useRef17,
+  useState as useState25
 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { jsx as jsx50, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs33 } from "react/jsx-runtime";
 function resolveSearchBoxPortalRoot() {
   return document.body;
 }
@@ -6818,24 +7237,24 @@ function SearchBox({
   style,
   ...props
 }) {
-  const rootRef = useRef15(null);
-  const fieldRef = useRef15(null);
-  const inputRef = useRef15(null);
-  const popupRef = useRef15(null);
-  const requestIdRef = useRef15(0);
+  const rootRef = useRef17(null);
+  const fieldRef = useRef17(null);
+  const inputRef = useRef17(null);
+  const popupRef = useRef17(null);
+  const requestIdRef = useRef17(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] = useState23(defaultQuery);
-  const [open, setOpen] = useState23(false);
-  const [status, setStatus] = useState23("idle");
-  const [results, setResults] = useState23([]);
-  const [selectedValue, setSelectedValue] = useState23(null);
+  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 normalizedQuery = (isQueryControlled ? queryProp : uncontrolledQuery) ?? "";
   const trimmedQuery = normalizedQuery.trim();
-  const resultOptions = useMemo13(() => {
+  const resultOptions = useMemo15(() => {
     return results.map((item, index) => ({
       item,
       listBoxItem: {
@@ -6849,7 +7268,7 @@ function SearchBox({
       value: getItemId(item, index)
     }));
   }, [getItemDetails, getItemDisabled, getItemId, getItemText, results]);
-  const listBoxData = useMemo13(
+  const listBoxData = useMemo15(
     () => [
       {
         category: null,
@@ -6859,7 +7278,7 @@ function SearchBox({
     [resultOptions]
   );
   const popupRoot = typeof document === "undefined" ? null : resolveSearchBoxPortalRoot();
-  const [themePortalStyle, setThemePortalStyle] = useState23(() => void 0);
+  const [themePortalStyle, setThemePortalStyle] = useState25(() => void 0);
   useEffect12(() => {
     if (disabled) {
       return;
@@ -6940,15 +7359,15 @@ function SearchBox({
   }
   function renderPopupContent() {
     if (status === "loading") {
-      return /* @__PURE__ */ jsx50("div", { className: "nu-search-box__status", children: loadingText });
+      return /* @__PURE__ */ jsx52("div", { className: "nu-search-box__status", children: loadingText });
     }
     if (status === "error") {
-      return /* @__PURE__ */ jsx50("div", { className: "nu-search-box__status", children: errorText });
+      return /* @__PURE__ */ jsx52("div", { className: "nu-search-box__status", children: errorText });
     }
     if (trimmedQuery.length < minQueryLength) {
-      return /* @__PURE__ */ jsx50("div", { className: "nu-search-box__status", children: idleText });
+      return /* @__PURE__ */ jsx52("div", { className: "nu-search-box__status", children: idleText });
     }
-    return /* @__PURE__ */ jsx50("div", { className: "nu-search-box__listbox", children: /* @__PURE__ */ jsx50(
+    return /* @__PURE__ */ jsx52("div", { className: "nu-search-box__listbox", children: /* @__PURE__ */ jsx52(
       ListBox,
       {
         data: listBoxData,
@@ -6985,7 +7404,7 @@ function SearchBox({
         break;
     }
   }
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       ...props,
@@ -6993,10 +7412,10 @@ function SearchBox({
       ref: rootRef,
       style,
       children: [
-        /* @__PURE__ */ jsx50("label", { className: "nu-search-box__label", htmlFor: fieldId, id: labelId, children: renderMnemonicText(label) }),
-        /* @__PURE__ */ jsxs32("span", { className: "nu-search-box__slot", ref: fieldRef, children: [
-          /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: "nu-search-box__bracket", children: "[" }),
-          /* @__PURE__ */ jsx50("span", { className: "nu-search-box__input-shell", children: /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsx52("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__ */ jsx52("span", { "aria-hidden": "true", className: "nu-search-box__bracket", children: "[" }),
+          /* @__PURE__ */ jsx52("span", { className: "nu-search-box__input-shell", children: /* @__PURE__ */ jsx52(
             "input",
             {
               "aria-autocomplete": "list",
@@ -7021,11 +7440,11 @@ function SearchBox({
               value: normalizedQuery
             }
           ) }),
-          /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: "nu-search-box__bracket", children: "]" })
+          /* @__PURE__ */ jsx52("span", { "aria-hidden": "true", className: "nu-search-box__bracket", children: "]" })
         ] }),
-        hint ? /* @__PURE__ */ jsx50("span", { className: "nu-search-box__hint", id: hintId, children: hint }) : null,
+        hint ? /* @__PURE__ */ jsx52("span", { className: "nu-search-box__hint", id: hintId, children: hint }) : null,
         open && popupRoot ? createPortal4(
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx52(
             "div",
             {
               className: "nu-search-box__popup",
@@ -7045,10 +7464,10 @@ function SearchBox({
 // src/components/SpinBox/SpinBox.tsx
 import {
   useId as useId13,
-  useMemo as useMemo14,
-  useState as useState24
+  useMemo as useMemo16,
+  useState as useState26
 } from "react";
-import { jsx as jsx51, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs34 } from "react/jsx-runtime";
 function clampSpinValue(value, min, max) {
   let nextValue = value;
   if (min !== void 0) {
@@ -7098,9 +7517,9 @@ function SpinBox({
     min,
     max
   );
-  const [uncontrolledValue, setUncontrolledValue] = useState24(initialNumericValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState26(initialNumericValue);
   const numericValue = isControlled ? clampSpinValue(value ?? initialNumericValue, min, max) : uncontrolledValue;
-  const [uncontrolledDraftValue, setUncontrolledDraftValue] = useState24(
+  const [uncontrolledDraftValue, setUncontrolledDraftValue] = useState26(
     () => formatSpinValue(initialNumericValue)
   );
   const draftValue = isControlled ? formatSpinValue(numericValue) : uncontrolledDraftValue;
@@ -7153,22 +7572,22 @@ function SpinBox({
     }
     onKeyDown?.(event);
   }
-  const decrementDisabled = useMemo14(
+  const decrementDisabled = useMemo16(
     () => disabled || min !== void 0 && numericValue <= min,
     [disabled, min, numericValue]
   );
-  const incrementDisabled = useMemo14(
+  const incrementDisabled = useMemo16(
     () => disabled || max !== void 0 && numericValue >= max,
     [disabled, max, numericValue]
   );
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "label",
     {
       className: cx("nu-spin-box", slotClassNames?.root, className),
       htmlFor: fieldId,
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx53(
           "span",
           {
             className: cx("nu-spin-box__label", slotClassNames?.label),
@@ -7176,13 +7595,13 @@ function SpinBox({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ jsxs33(
+        /* @__PURE__ */ jsxs34(
           "span",
           {
             className: cx("nu-spin-box__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsx51(
+              /* @__PURE__ */ jsx53(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -7191,12 +7610,12 @@ function SpinBox({
                   children: "["
                 }
               ),
-              /* @__PURE__ */ jsx51(
+              /* @__PURE__ */ jsx53(
                 "span",
                 {
                   className: cx("nu-spin-box__input-shell", slotClassNames?.inputShell),
                   style: slotStyles?.inputShell,
-                  children: /* @__PURE__ */ jsx51(
+                  children: /* @__PURE__ */ jsx53(
                     "input",
                     {
                       ...props,
@@ -7215,7 +7634,7 @@ function SpinBox({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx51(
+              /* @__PURE__ */ jsx53(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -7224,13 +7643,13 @@ function SpinBox({
                   children: "]"
                 }
               ),
-              /* @__PURE__ */ jsxs33(
+              /* @__PURE__ */ jsxs34(
                 "span",
                 {
                   className: cx("nu-spin-box__controls", slotClassNames?.controls),
                   style: slotStyles?.controls,
                   children: [
-                    /* @__PURE__ */ jsx51(
+                    /* @__PURE__ */ jsx53(
                       "button",
                       {
                         className: cx("nu-spin-box__button", slotClassNames?.button),
@@ -7241,7 +7660,7 @@ function SpinBox({
                         children: "-"
                       }
                     ),
-                    /* @__PURE__ */ jsx51(
+                    /* @__PURE__ */ jsx53(
                       "button",
                       {
                         className: cx("nu-spin-box__button", slotClassNames?.button),
@@ -7258,7 +7677,7 @@ function SpinBox({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx51(
+        hint ? /* @__PURE__ */ jsx53(
           "span",
           {
             className: cx("nu-spin-box__hint", slotClassNames?.hint),
@@ -7276,11 +7695,11 @@ function SpinBox({
 import {
   useEffect as useEffect13,
   useId as useId14,
-  useRef as useRef16,
-  useState as useState25
+  useRef as useRef18,
+  useState as useState27
 } from "react";
-import { jsx as jsx52, jsxs as jsxs34 } from "react/jsx-runtime";
-function clamp3(value, min, max) {
+import { jsx as jsx54, jsxs as jsxs35 } from "react/jsx-runtime";
+function clamp4(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
 function Splitter({
@@ -7310,13 +7729,13 @@ function Splitter({
     const parsedValue = Number(rawValue);
     return Number.isFinite(parsedValue) ? parsedValue : null;
   };
-  const [uncontrolledValue, setUncontrolledValue] = useState25(
-    clamp3(getSavedValue() ?? defaultValue, min, max)
+  const [uncontrolledValue, setUncontrolledValue] = useState27(
+    clamp4(getSavedValue() ?? defaultValue, min, max)
   );
-  const rootRef = useRef16(null);
-  const dragFrameRef = useRef16(null);
-  const dragValueRef = useRef16(null);
-  const activeValue = clamp3(
+  const rootRef = useRef18(null);
+  const dragFrameRef = useRef18(null);
+  const dragValueRef = useRef18(null);
+  const activeValue = clamp4(
     (isControlled ? value : uncontrolledValue) ?? defaultValue,
     min,
     max
@@ -7338,7 +7757,7 @@ function Splitter({
     };
   }, []);
   function commitValue(nextValue) {
-    const clampedValue = clamp3(nextValue, min, max);
+    const clampedValue = clamp4(nextValue, min, max);
     if (!isControlled) {
       setUncontrolledValue(clampedValue);
     }
@@ -7358,7 +7777,7 @@ function Splitter({
     function computeValue(clientX, clientY) {
       const bounds = rootElement.getBoundingClientRect();
       const nextValue = orientation === "vertical" ? (clientX - bounds.left) / bounds.width : (clientY - bounds.top) / bounds.height;
-      return clamp3(nextValue, min, max);
+      return clamp4(nextValue, min, max);
     }
     function flushDragValue() {
       dragFrameRef.current = null;
@@ -7434,7 +7853,7 @@ function Splitter({
       commitValue(max);
     }
   }
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "div",
     {
       ...props,
@@ -7446,8 +7865,8 @@ function Splitter({
         "--nu-splitter-value": `${activeValue * 100}%`
       },
       children: [
-        /* @__PURE__ */ jsx52("div", { className: "nu-splitter__pane", id: firstPaneId, children: first }),
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx54("div", { className: "nu-splitter__pane", id: firstPaneId, children: first }),
+        /* @__PURE__ */ jsx54(
           "div",
           {
             "aria-controls": `${firstPaneId} ${secondPaneId}`,
@@ -7460,7 +7879,7 @@ function Splitter({
             onPointerDown: handlePointerDown,
             role: "separator",
             tabIndex: 0,
-            children: /* @__PURE__ */ jsx52(
+            children: /* @__PURE__ */ jsx54(
               "span",
               {
                 "aria-hidden": "true",
@@ -7470,7 +7889,7 @@ function Splitter({
             )
           }
         ),
-        /* @__PURE__ */ jsx52("div", { className: "nu-splitter__pane", id: secondPaneId, children: second })
+        /* @__PURE__ */ jsx54("div", { className: "nu-splitter__pane", id: secondPaneId, children: second })
       ]
     }
   );
@@ -7480,12 +7899,12 @@ function Splitter({
 import {
   useEffect as useEffect14,
   useId as useId15,
-  useMemo as useMemo15,
-  useRef as useRef17,
-  useState as useState26
+  useMemo as useMemo17,
+  useRef as useRef19,
+  useState as useState28
 } from "react";
-import { jsx as jsx53, jsxs as jsxs35 } from "react/jsx-runtime";
-function clamp4(value, min, max) {
+import { jsx as jsx55, jsxs as jsxs36 } from "react/jsx-runtime";
+function clamp5(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
 function snapToStep(value, min, step) {
@@ -7524,17 +7943,17 @@ function TickBar({
   const safeStep = step > 0 ? step : 1;
   const safeMax = max <= min ? min + safeStep : max;
   const isControlled = value !== void 0;
-  const initialValue = clamp4(
+  const initialValue = clamp5(
     snapToStep(defaultValue ?? min, min, safeStep),
     min,
     safeMax
   );
-  const [uncontrolledValue, setUncontrolledValue] = useState26(initialValue);
-  const [dragging, setDragging] = useState26(false);
-  const trackRef = useRef17(null);
-  const resolvedValue = isControlled ? clamp4(snapToStep(value ?? initialValue, min, safeStep), min, safeMax) : uncontrolledValue;
+  const [uncontrolledValue, setUncontrolledValue] = useState28(initialValue);
+  const [dragging, setDragging] = useState28(false);
+  const trackRef = useRef19(null);
+  const resolvedValue = isControlled ? clamp5(snapToStep(value ?? initialValue, min, safeStep), min, safeMax) : uncontrolledValue;
   const ratio = safeMax === min ? 0 : (resolvedValue - min) / (safeMax - min);
-  const derivedTickCount = useMemo15(() => {
+  const derivedTickCount = useMemo17(() => {
     if (tickCount !== void 0) {
       return Math.max(2, tickCount);
     }
@@ -7555,7 +7974,7 @@ function TickBar({
     return () => window.removeEventListener("pointerup", cancelDrag);
   }, [dragging]);
   function commitValue(nextValue) {
-    const snappedValue = clamp4(
+    const snappedValue = clamp5(
       snapToStep(nextValue, min, safeStep),
       min,
       safeMax
@@ -7571,7 +7990,7 @@ function TickBar({
       return;
     }
     const rect = track.getBoundingClientRect();
-    const nextRatio = orientation === "vertical" ? clamp4((rect.bottom - clientY) / rect.height, 0, 1) : clamp4((clientX - rect.left) / rect.width, 0, 1);
+    const nextRatio = orientation === "vertical" ? clamp5((rect.bottom - clientY) / rect.height, 0, 1) : clamp5((clientX - rect.left) / rect.width, 0, 1);
     commitValue(min + nextRatio * (safeMax - min));
   }
   function nudge(direction, multiplier = 1) {
@@ -7620,7 +8039,7 @@ function TickBar({
     }
     onKeyDown?.(event);
   }
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "div",
     {
       ...props,
@@ -7633,7 +8052,7 @@ function TickBar({
         slotStyles?.root
       ),
       children: [
-        label ? /* @__PURE__ */ jsx53(
+        label ? /* @__PURE__ */ jsx55(
           "span",
           {
             className: cx("nu-tick-bar__label", slotClassNames?.label),
@@ -7641,13 +8060,13 @@ function TickBar({
             children: renderMnemonicText(label)
           }
         ) : null,
-        /* @__PURE__ */ jsxs35(
+        /* @__PURE__ */ jsxs36(
           "div",
           {
             className: cx("nu-tick-bar__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsxs35(
+              /* @__PURE__ */ jsxs36(
                 "div",
                 {
                   "aria-describedby": hintId,
@@ -7689,19 +8108,19 @@ function TickBar({
                   style: slotStyles?.track,
                   tabIndex: disabled ? -1 : 0,
                   children: [
-                    /* @__PURE__ */ jsx53(
+                    /* @__PURE__ */ jsx55(
                       "div",
                       {
                         className: cx("nu-tick-bar__rail", slotClassNames?.rail),
                         style: slotStyles?.rail
                       }
                     ),
-                    /* @__PURE__ */ jsx53(
+                    /* @__PURE__ */ jsx55(
                       "div",
                       {
                         className: cx("nu-tick-bar__ticks", slotClassNames?.ticks),
                         style: slotStyles?.ticks,
-                        children: Array.from({ length: derivedTickCount }, (_, index) => /* @__PURE__ */ jsx53(
+                        children: Array.from({ length: derivedTickCount }, (_, index) => /* @__PURE__ */ jsx55(
                           "span",
                           {
                             "aria-hidden": "true",
@@ -7712,7 +8131,7 @@ function TickBar({
                         ))
                       }
                     ),
-                    /* @__PURE__ */ jsx53(
+                    /* @__PURE__ */ jsx55(
                       "div",
                       {
                         "aria-hidden": "true",
@@ -7730,7 +8149,7 @@ function TickBar({
                   ]
                 }
               ),
-              showValue ? /* @__PURE__ */ jsx53(
+              showValue ? /* @__PURE__ */ jsx55(
                 "span",
                 {
                   className: cx("nu-tick-bar__value", slotClassNames?.value),
@@ -7741,7 +8160,7 @@ function TickBar({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx53(
+        hint ? /* @__PURE__ */ jsx55(
           "span",
           {
             className: cx("nu-tick-bar__hint", slotClassNames?.hint),
@@ -7756,7 +8175,7 @@ function TickBar({
 }
 
 // src/components/ToolBar/ToolBar.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 function ToolBar({
   children,
   className,
@@ -7766,7 +8185,7 @@ function ToolBar({
   wrap = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx56(
     "div",
     {
       ...props,
@@ -7785,7 +8204,7 @@ function ToolButton({
   slotStyles,
   ...props
 }) {
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx56(
     CommandButton,
     {
       ...props,
@@ -7815,7 +8234,7 @@ function ToolDropButton({
   uncheckedShape,
   ...props
 }) {
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx56(
     CommandButton,
     {
       ...props,
@@ -7841,7 +8260,7 @@ function ToolDropButton({
   );
 }
 function ToolSeparator({ className, ...props }) {
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx56(
     "div",
     {
       ...props,
@@ -7859,13 +8278,13 @@ function ToolSeparator({ className, ...props }) {
 // src/components/TreeView/TreeView.tsx
 import {
   forwardRef as forwardRef3,
-  useCallback as useCallback6,
+  useCallback as useCallback7,
   useEffect as useEffect15,
   useId as useId16,
   useImperativeHandle as useImperativeHandle3,
-  useMemo as useMemo16,
-  useRef as useRef18,
-  useState as useState27
+  useMemo as useMemo18,
+  useRef as useRef20,
+  useState as useState29
 } from "react";
 
 // src/components/_shared/treeData.ts
@@ -7963,7 +8382,7 @@ function collectVisibleTreeItems(items, expandedIds, depth = 0, guideMask = [],
 
 // src/components/TreeView/internals/TreeViewItem.tsx
 import { memo as memo4 } from "react";
-import { jsx as jsx55, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs37 } from "react/jsx-runtime";
 function areTreeViewGuideArraysEqual(previousArray, nextArray) {
   if (previousArray.length !== nextArray.length) {
     return false;
@@ -8037,8 +8456,8 @@ function TreeViewItemInner({
     handleActivate();
     onToggleItemCheck?.(item, !isChecked);
   }
-  return /* @__PURE__ */ jsxs36("div", { className: "nu-tree-view__row", role: "none", children: [
-    /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37("div", { className: "nu-tree-view__row", role: "none", children: [
+    /* @__PURE__ */ jsxs37(
       "div",
       {
         "aria-checked": isCheckable ? isChecked : void 0,
@@ -8057,8 +8476,8 @@ function TreeViewItemInner({
         ref: (node) => registerItemRef(itemId, node),
         role: "treeitem",
         children: [
-          /* @__PURE__ */ jsxs36("span", { "aria-hidden": "true", className: "nu-tree-view__prefix", children: [
-            guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ jsx55(
+          /* @__PURE__ */ jsxs37("span", { "aria-hidden": "true", className: "nu-tree-view__prefix", children: [
+            guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ jsx57(
               "span",
               {
                 className: "nu-tree-view__guide",
@@ -8069,7 +8488,7 @@ function TreeViewItemInner({
               },
               `${itemId}-guide-${guideIndex}`
             )),
-            /* @__PURE__ */ jsxs36(
+            /* @__PURE__ */ jsxs37(
               "span",
               {
                 className: "nu-tree-view__lead",
@@ -8077,19 +8496,19 @@ function TreeViewItemInner({
                   "--nu-tree-view-origin-offset": originOffset
                 },
                 children: [
-                  depth > 0 ? /* @__PURE__ */ jsx55(
+                  depth > 0 ? /* @__PURE__ */ jsx57(
                     "span",
                     {
                       className: "nu-tree-view__branch",
                       "data-branch": hasNextSibling ? "tee" : "elbow"
                     }
                   ) : null,
-                  hasChildren ? /* @__PURE__ */ jsx55(
+                  hasChildren ? /* @__PURE__ */ jsx57(
                     "span",
                     {
                       className: "nu-tree-view__expander",
                       "data-connector": depth > 0 ? "lead" : void 0,
-                      children: /* @__PURE__ */ jsx55(
+                      children: /* @__PURE__ */ jsx57(
                         "button",
                         {
                           "aria-label": isExpanded ? "Collapse item" : "Expand item",
@@ -8097,7 +8516,7 @@ function TreeViewItemInner({
                           onClick: handleToggleExpanded,
                           tabIndex: -1,
                           type: "button",
-                          children: /* @__PURE__ */ jsx55(
+                          children: /* @__PURE__ */ jsx57(
                             NuGlyph,
                             {
                               name: isExpanded ? "tree-caret-down" : "tree-caret-right"
@@ -8106,7 +8525,7 @@ function TreeViewItemInner({
                         }
                       )
                     }
-                  ) : depth > 0 ? /* @__PURE__ */ jsx55(
+                  ) : depth > 0 ? /* @__PURE__ */ jsx57(
                     "span",
                     {
                       className: "nu-tree-view__expander-placeholder",
@@ -8117,8 +8536,8 @@ function TreeViewItemInner({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs36("span", { className: "nu-tree-view__content", children: [
-            isCheckable ? /* @__PURE__ */ jsx55("span", { className: "nu-tree-view__check-slot", children: /* @__PURE__ */ jsx55(
+          /* @__PURE__ */ jsxs37("span", { className: "nu-tree-view__content", children: [
+            isCheckable ? /* @__PURE__ */ jsx57("span", { className: "nu-tree-view__check-slot", children: /* @__PURE__ */ jsx57(
               "button",
               {
                 "aria-label": isChecked ? "Uncheck item" : "Check item",
@@ -8126,12 +8545,12 @@ function TreeViewItemInner({
                 onClick: handleToggleChecked,
                 tabIndex: -1,
                 type: "button",
-                children: /* @__PURE__ */ jsx55(
+                children: /* @__PURE__ */ jsx57(
                   "span",
                   {
                     className: "nu-tree-view__check-box",
                     "data-unchecked-shape": uncheckedShape,
-                    children: isChecked ? /* @__PURE__ */ jsx55(
+                    children: isChecked ? /* @__PURE__ */ jsx57(
                       NuGlyph,
                       {
                         className: "nu-tree-view__check-mark",
@@ -8142,14 +8561,14 @@ function TreeViewItemInner({
                 )
               }
             ) }) : null,
-            item.icon ? /* @__PURE__ */ jsx55("span", { className: "nu-tree-view__icon", children: item.icon }) : null,
-            /* @__PURE__ */ jsx55("span", { className: "nu-tree-view__title", children: item.title }),
-            item.hint ? /* @__PURE__ */ jsx55("span", { className: "nu-tree-view__hint", children: item.hint }) : null
+            item.icon ? /* @__PURE__ */ jsx57("span", { className: "nu-tree-view__icon", children: item.icon }) : null,
+            /* @__PURE__ */ jsx57("span", { className: "nu-tree-view__title", children: item.title }),
+            item.hint ? /* @__PURE__ */ jsx57("span", { className: "nu-tree-view__hint", children: item.hint }) : null
           ] })
         ]
       }
     ),
-    hasChildren && isExpanded ? /* @__PURE__ */ jsx55("div", { role: "group", children: (item.children ?? []).map((child, index) => /* @__PURE__ */ jsx55(
+    hasChildren && isExpanded ? /* @__PURE__ */ jsx57("div", { role: "group", children: (item.children ?? []).map((child, index) => /* @__PURE__ */ jsx57(
       TreeViewItem,
       {
         depth: depth + 1,
@@ -8185,7 +8604,7 @@ function areTreeViewItemPropsEqual(previousProps, nextProps) {
 var TreeViewItem = memo4(TreeViewItemInner, areTreeViewItemPropsEqual);
 
 // src/components/TreeView/TreeView.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 function TreeViewInner({
   className,
   data,
@@ -8200,34 +8619,34 @@ function TreeViewInner({
   uncheckedShape = "box",
   ...props
 }, ref) {
-  const rootRef = useRef18(null);
+  const rootRef = useRef20(null);
   const treeId = useId16();
-  const itemRefs = useRef18({});
+  const itemRefs = useRef20({});
   const isExpandedControlled = expandedIds !== void 0;
-  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState27(() => {
+  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState29(() => {
     const expandedFromData = collectExpandedTreeIds(data);
     if (!defaultExpandedIds?.length) {
       return expandedFromData;
     }
     return Array.from(/* @__PURE__ */ new Set([...expandedFromData, ...defaultExpandedIds]));
   });
-  const [uncontrolledSelectedId, setUncontrolledSelectedId] = useState27(null);
+  const [uncontrolledSelectedId, setUncontrolledSelectedId] = useState29(null);
   const resolvedExpandedIds = isExpandedControlled ? expandedIds : uncontrolledExpandedIds;
-  const expandedIdSet = useMemo16(
+  const expandedIdSet = useMemo18(
     () => new Set(resolvedExpandedIds),
     [resolvedExpandedIds]
   );
-  const visibleItems = useMemo16(
+  const visibleItems = useMemo18(
     () => collectVisibleTreeItems(data, expandedIdSet),
     [data, expandedIdSet]
   );
-  const selectableItems = useMemo16(
+  const selectableItems = useMemo18(
     () => visibleItems.filter(({ item }) => !item.disabled),
     [visibleItems]
   );
   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] = useState27(resolvedSelectedId);
+  const [activeId, setActiveId] = useState29(resolvedSelectedId);
   const resolvedActiveId = activeId && selectableItems.some((entry) => entry.itemId === activeId) ? activeId : resolvedSelectedId;
   useEffect15(() => {
     if (!resolvedActiveId) {
@@ -8237,13 +8656,13 @@ function TreeViewInner({
       block: "nearest"
     });
   }, [resolvedActiveId]);
-  const registerItemRef = useCallback6(
+  const registerItemRef = useCallback7(
     (itemId, node) => {
       itemRefs.current[itemId] = node;
     },
     []
   );
-  const setExpandedState = useCallback6(
+  const setExpandedState = useCallback7(
     (item, nextExpanded) => {
       const nextExpandedIds = nextExpanded ? Array.from(/* @__PURE__ */ new Set([...resolvedExpandedIds, item.id])) : resolvedExpandedIds.filter((expandedId) => expandedId !== item.id);
       if (!isExpandedControlled) {
@@ -8253,7 +8672,7 @@ function TreeViewInner({
     },
     [isExpandedControlled, onExpandedIdsChange, resolvedExpandedIds]
   );
-  const activateEntry = useCallback6(
+  const activateEntry = useCallback7(
     (item, itemId) => {
       if (item.disabled) {
         return;
@@ -8266,7 +8685,7 @@ function TreeViewInner({
     },
     [onItemSelect, selectedId]
   );
-  const activateResolvedItem = useCallback6(
+  const activateResolvedItem = useCallback7(
     (itemId) => {
       if (!itemId) {
         return;
@@ -8436,7 +8855,7 @@ function TreeViewInner({
       setExpandedState
     ]
   );
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx58(
     "div",
     {
       ...props,
@@ -8446,7 +8865,7 @@ function TreeViewInner({
       ref: rootRef,
       role: "tree",
       tabIndex: 0,
-      children: visibleItems.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx56(
+      children: visibleItems.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx58(
         TreeViewItem,
         {
           depth: 0,
@@ -8466,7 +8885,7 @@ function TreeViewInner({
           uncheckedShape
         },
         item.id
-      )) : /* @__PURE__ */ jsx56("div", { className: "nu-tree-view__empty", children: emptyText })
+      )) : /* @__PURE__ */ jsx58("div", { className: "nu-tree-view__empty", children: emptyText })
     }
   );
 }
@@ -8475,14 +8894,14 @@ var TreeView = forwardRef3(TreeViewInner);
 // src/components/TreeListView/TreeListView.tsx
 import {
   forwardRef as forwardRef4,
-  useCallback as useCallback7,
+  useCallback as useCallback8,
   useEffect as useEffect16,
   useId as useId17,
   useImperativeHandle as useImperativeHandle4,
-  useLayoutEffect as useLayoutEffect4,
-  useMemo as useMemo17,
-  useRef as useRef19,
-  useState as useState28
+  useLayoutEffect as useLayoutEffect5,
+  useMemo as useMemo19,
+  useRef as useRef21,
+  useState as useState30
 } from "react";
 
 // src/components/TreeListView/internals/helpers.ts
@@ -8573,11 +8992,11 @@ function renderTreeListCellValue(item, column) {
 
 // src/components/TreeListView/internals/TreeListViewRow.tsx
 import { memo as memo5 } from "react";
-import { Fragment as Fragment6, jsx as jsx57, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx59, jsxs as jsxs38 } from "react/jsx-runtime";
 function renderTreeTitleContent(item) {
-  return /* @__PURE__ */ jsxs37(Fragment6, { children: [
-    /* @__PURE__ */ jsx57("span", { className: "nu-tree-list-view__title", children: item.title }),
-    item.hint ? /* @__PURE__ */ jsx57("span", { className: "nu-tree-list-view__hint", children: item.hint }) : null
+  return /* @__PURE__ */ jsxs38(Fragment7, { children: [
+    /* @__PURE__ */ jsx59("span", { className: "nu-tree-list-view__title", children: item.title }),
+    item.hint ? /* @__PURE__ */ jsx59("span", { className: "nu-tree-list-view__hint", children: item.hint }) : null
   ] });
 }
 function renderReportCellContent(item, column, depth, rowIndex, getCellContent) {
@@ -8677,8 +9096,8 @@ function TreeListViewRowInner({
     handleActivate();
     onToggleItemCheck?.(item, !isChecked);
   }
-  return /* @__PURE__ */ jsxs37(Fragment6, { children: [
-    /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsxs38(Fragment7, { children: [
+    /* @__PURE__ */ jsx59(
       "div",
       {
         "aria-disabled": item.disabled || void 0,
@@ -8701,7 +9120,7 @@ function TreeListViewRowInner({
           "--nu-tree-list-view-columns": templateColumns
         },
         children: columns.map(
-          (column, columnIndex) => column.id === treeColumnId ? /* @__PURE__ */ jsxs37(
+          (column, columnIndex) => column.id === treeColumnId ? /* @__PURE__ */ jsxs38(
             "span",
             {
               className: [
@@ -8713,8 +9132,8 @@ function TreeListViewRowInner({
               "data-column-id": column.id,
               role: "gridcell",
               children: [
-                /* @__PURE__ */ jsxs37("span", { "aria-hidden": "true", className: "nu-tree-list-view__prefix", children: [
-                  guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ jsx57(
+                /* @__PURE__ */ jsxs38("span", { "aria-hidden": "true", className: "nu-tree-list-view__prefix", children: [
+                  guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ jsx59(
                     "span",
                     {
                       className: "nu-tree-list-view__guide",
@@ -8725,7 +9144,7 @@ function TreeListViewRowInner({
                     },
                     `${itemId}-guide-${guideIndex}`
                   )),
-                  /* @__PURE__ */ jsxs37(
+                  /* @__PURE__ */ jsxs38(
                     "span",
                     {
                       className: "nu-tree-list-view__lead",
@@ -8733,19 +9152,19 @@ function TreeListViewRowInner({
                         "--nu-tree-list-view-origin-offset": originOffset
                       },
                       children: [
-                        depth > 0 ? /* @__PURE__ */ jsx57(
+                        depth > 0 ? /* @__PURE__ */ jsx59(
                           "span",
                           {
                             className: "nu-tree-list-view__branch",
                             "data-branch": hasNextSibling ? "tee" : "elbow"
                           }
                         ) : null,
-                        hasChildren ? /* @__PURE__ */ jsx57(
+                        hasChildren ? /* @__PURE__ */ jsx59(
                           "span",
                           {
                             className: "nu-tree-list-view__expander",
                             "data-connector": depth > 0 ? "lead" : void 0,
-                            children: /* @__PURE__ */ jsx57(
+                            children: /* @__PURE__ */ jsx59(
                               "button",
                               {
                                 "aria-label": isExpanded ? "Collapse item" : "Expand item",
@@ -8753,7 +9172,7 @@ function TreeListViewRowInner({
                                 onClick: handleToggleExpanded,
                                 tabIndex: -1,
                                 type: "button",
-                                children: /* @__PURE__ */ jsx57(
+                                children: /* @__PURE__ */ jsx59(
                                   NuGlyph,
                                   {
                                     name: isExpanded ? "tree-caret-down" : "tree-caret-right"
@@ -8762,7 +9181,7 @@ function TreeListViewRowInner({
                               }
                             )
                           }
-                        ) : depth > 0 ? /* @__PURE__ */ jsx57(
+                        ) : depth > 0 ? /* @__PURE__ */ jsx59(
                           "span",
                           {
                             className: "nu-tree-list-view__expander-placeholder",
@@ -8773,8 +9192,8 @@ function TreeListViewRowInner({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs37("span", { className: "nu-tree-list-view__tree-content", children: [
-                  isCheckable ? /* @__PURE__ */ jsx57("span", { className: "nu-tree-list-view__check-slot", children: /* @__PURE__ */ jsx57(
+                /* @__PURE__ */ jsxs38("span", { className: "nu-tree-list-view__tree-content", children: [
+                  isCheckable ? /* @__PURE__ */ jsx59("span", { className: "nu-tree-list-view__check-slot", children: /* @__PURE__ */ jsx59(
                     "button",
                     {
                       "aria-label": isChecked ? "Uncheck item" : "Check item",
@@ -8782,12 +9201,12 @@ function TreeListViewRowInner({
                       onClick: handleToggleChecked,
                       tabIndex: -1,
                       type: "button",
-                      children: /* @__PURE__ */ jsx57(
+                      children: /* @__PURE__ */ jsx59(
                         "span",
                         {
                           className: "nu-tree-list-view__check-box",
                           "data-unchecked-shape": uncheckedShape,
-                          children: isChecked ? /* @__PURE__ */ jsx57(
+                          children: isChecked ? /* @__PURE__ */ jsx59(
                             NuGlyph,
                             {
                               className: "nu-tree-list-view__check-mark",
@@ -8798,13 +9217,13 @@ function TreeListViewRowInner({
                       )
                     }
                   ) }) : null,
-                  item.icon ? /* @__PURE__ */ jsx57("span", { className: "nu-tree-list-view__icon", children: item.icon }) : null,
+                  item.icon ? /* @__PURE__ */ jsx59("span", { className: "nu-tree-list-view__icon", children: item.icon }) : null,
                   renderTreeTitleContent(item)
                 ] })
               ]
             },
             column.id
-          ) : /* @__PURE__ */ jsx57(
+          ) : /* @__PURE__ */ jsx59(
             "span",
             {
               className: [
@@ -8827,7 +9246,7 @@ function TreeListViewRowInner({
         )
       }
     ),
-    hasChildren && isExpanded ? /* @__PURE__ */ jsx57("div", { role: "rowgroup", children: (item.children ?? []).map((child, index) => /* @__PURE__ */ jsx57(
+    hasChildren && isExpanded ? /* @__PURE__ */ jsx59("div", { role: "rowgroup", children: (item.children ?? []).map((child, index) => /* @__PURE__ */ jsx59(
       TreeListViewRow,
       {
         activeItemId,
@@ -8871,7 +9290,7 @@ var TreeListViewRow = memo5(
 );
 
 // src/components/TreeListView/TreeListView.tsx
-import { jsx as jsx58, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs39 } from "react/jsx-runtime";
 function TreeListViewInner({
   activeItemId: activeItemIdProp,
   checkedIds,
@@ -8893,42 +9312,42 @@ function TreeListViewInner({
   uncheckedShape = "box",
   ...props
 }, ref) {
-  const rootRef = useRef19(null);
+  const rootRef = useRef21(null);
   const treeId = useId17();
-  const itemRefs = useRef19({});
-  const resizeFrameRef = useRef19(null);
-  const resizeStateRef = useRef19(null);
+  const itemRefs = useRef21({});
+  const resizeFrameRef = useRef21(null);
+  const resizeStateRef = useRef21(null);
   const isExpandedControlled = expandedIds !== void 0;
-  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState28(() => {
+  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState30(() => {
     const expandedFromData = collectExpandedTreeListIds(data);
     if (!defaultExpandedIds?.length) {
       return expandedFromData;
     }
     return Array.from(/* @__PURE__ */ new Set([...expandedFromData, ...defaultExpandedIds]));
   });
-  const [uncontrolledSelectedId, setUncontrolledSelectedId] = useState28(null);
-  const [autoColumnWidths, setAutoColumnWidths] = useState28({});
-  const [userColumnWidths, setUserColumnWidths] = useState28({});
+  const [uncontrolledSelectedId, setUncontrolledSelectedId] = useState30(null);
+  const [autoColumnWidths, setAutoColumnWidths] = useState30({});
+  const [userColumnWidths, setUserColumnWidths] = useState30({});
   const isActiveControlled = activeItemIdProp !== void 0;
   const resolvedExpandedIds = isExpandedControlled ? expandedIds : uncontrolledExpandedIds;
-  const expandedIdSet = useMemo17(
+  const expandedIdSet = useMemo19(
     () => new Set(resolvedExpandedIds),
     [resolvedExpandedIds]
   );
-  const visibleItems = useMemo17(
+  const visibleItems = useMemo19(
     () => collectVisibleTreeListItems(data, expandedIdSet),
     [data, expandedIdSet]
   );
-  const selectableItems = useMemo17(
+  const selectableItems = useMemo19(
     () => visibleItems.filter(({ item }) => !item.disabled),
     [visibleItems]
   );
   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] = useState28(() => defaultActiveItemId ?? resolvedSelectedId);
+  const [uncontrolledActiveItemId, setUncontrolledActiveItemId] = useState30(() => defaultActiveItemId ?? resolvedSelectedId);
   const activeItemId = activeItemIdProp !== void 0 ? activeItemIdProp : uncontrolledActiveItemId;
   const resolvedActiveItemId = activeItemId && selectableItems.some((entry) => entry.itemId === activeItemId) ? activeItemId : resolvedSelectedId;
-  const minColumnWidthById = useMemo17(
+  const minColumnWidthById = useMemo19(
     () => Object.fromEntries(
       columns.map(
         (column) => [column.id, column.minWidth ?? 0]
@@ -8936,18 +9355,18 @@ function TreeListViewInner({
     ),
     [columns]
   );
-  const templateColumns = useMemo17(
+  const templateColumns = useMemo19(
     () => getTreeListTemplateColumns(columns, {
       autoColumnWidths,
       userColumnWidths
     }),
     [autoColumnWidths, columns, userColumnWidths]
   );
-  const treeColumnId = useMemo17(
+  const treeColumnId = useMemo19(
     () => getTreeListTreeColumnId(columns),
     [columns]
   );
-  const rowIndexMap = useMemo17(
+  const rowIndexMap = useMemo19(
     () => new Map(
       visibleItems.map((entry, index) => [entry.itemId, index])
     ),
@@ -8961,21 +9380,21 @@ function TreeListViewInner({
       block: "nearest"
     });
   }, [resolvedActiveItemId]);
-  const registerItemRef = useCallback7(
+  const registerItemRef = useCallback8(
     (itemId, node) => {
       itemRefs.current[itemId] = node;
     },
     []
   );
-  const resolveCellContent = useCallback7(
+  const resolveCellContent = useCallback8(
     (...args) => getCellContent?.(...args),
     [getCellContent]
   );
-  const handleItemDoubleClick = useCallback7(
+  const handleItemDoubleClick = useCallback8(
     (item) => onItemDoubleClick?.(item),
     [onItemDoubleClick]
   );
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     const rootNode = rootRef.current;
     if (!rootNode) {
       return;
@@ -9014,7 +9433,7 @@ function TreeListViewInner({
       }
     };
   }, []);
-  const setExpandedState = useCallback7(
+  const setExpandedState = useCallback8(
     (item, nextExpanded) => {
       const nextExpandedIds = nextExpanded ? Array.from(/* @__PURE__ */ new Set([...resolvedExpandedIds, item.id])) : resolvedExpandedIds.filter((expandedId) => expandedId !== item.id);
       if (!isExpandedControlled) {
@@ -9024,7 +9443,7 @@ function TreeListViewInner({
     },
     [isExpandedControlled, onExpandedIdsChange, resolvedExpandedIds]
   );
-  const updateActiveItem = useCallback7(
+  const updateActiveItem = useCallback8(
     (item) => {
       if (!isActiveControlled) {
         setUncontrolledActiveItemId(item.id);
@@ -9033,7 +9452,7 @@ function TreeListViewInner({
     },
     [isActiveControlled, onActiveItemChange]
   );
-  const activateEntry = useCallback7(
+  const activateEntry = useCallback8(
     (item, itemId) => {
       if (item.disabled) {
         return;
@@ -9046,7 +9465,7 @@ function TreeListViewInner({
     },
     [onItemSelect, selectedId, updateActiveItem]
   );
-  const activateResolvedItem = useCallback7(
+  const activateResolvedItem = useCallback8(
     (itemId) => {
       if (!itemId) {
         return;
@@ -9060,7 +9479,7 @@ function TreeListViewInner({
     },
     [activateEntry, selectableItems]
   );
-  const handleItemCheckChange = useCallback7(
+  const handleItemCheckChange = useCallback8(
     (item, checked) => {
       onItemCheckChange?.(item, checked);
     },
@@ -9130,7 +9549,7 @@ function TreeListViewInner({
   function isItemChecked(item) {
     return checkedIds ? checkedIds.includes(item.id) : item.checked === true;
   }
-  const toggleItemCheck = useCallback7(
+  const toggleItemCheck = useCallback8(
     (itemId) => {
       const item = findTreeListItemById(data, itemId);
       if (!item || item.disabled || item.checked === void 0 && checkedIds === void 0) {
@@ -9288,7 +9707,7 @@ function TreeListViewInner({
     window.addEventListener("pointermove", handleColumnResizeMove);
     window.addEventListener("pointerup", handleColumnResizeEnd);
   }
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       ...props,
@@ -9300,7 +9719,7 @@ function TreeListViewInner({
       role: "treegrid",
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ jsx58(
+        /* @__PURE__ */ jsx60(
           "div",
           {
             className: "nu-tree-list-view__header",
@@ -9308,7 +9727,7 @@ function TreeListViewInner({
             style: {
               "--nu-tree-list-view-columns": templateColumns
             },
-            children: columns.map((column, columnIndex) => /* @__PURE__ */ jsxs38(
+            children: columns.map((column, columnIndex) => /* @__PURE__ */ jsxs39(
               "span",
               {
                 className: [
@@ -9319,8 +9738,8 @@ function TreeListViewInner({
                 "data-column-id": column.id,
                 role: "columnheader",
                 children: [
-                  /* @__PURE__ */ jsx58("span", { className: "nu-tree-list-view__header-label", children: renderMnemonicText(column.title) }),
-                  column.resizable !== false ? /* @__PURE__ */ jsx58(
+                  /* @__PURE__ */ jsx60("span", { className: "nu-tree-list-view__header-label", children: renderMnemonicText(column.title) }),
+                  column.resizable !== false ? /* @__PURE__ */ jsx60(
                     "button",
                     {
                       "aria-label": `Resize ${column.title} column`,
@@ -9336,7 +9755,7 @@ function TreeListViewInner({
             ))
           }
         ),
-        /* @__PURE__ */ jsx58("div", { className: "nu-tree-list-view__body", children: visibleItems.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx58(
+        /* @__PURE__ */ jsx60("div", { className: "nu-tree-list-view__body", children: visibleItems.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx60(
           TreeListViewRow,
           {
             activeItemId: resolvedActiveItemId,
@@ -9363,7 +9782,7 @@ function TreeListViewInner({
             uncheckedShape
           },
           item.id
-        )) : /* @__PURE__ */ jsx58("div", { className: "nu-tree-list-view__empty", children: emptyText }) })
+        )) : /* @__PURE__ */ jsx60("div", { className: "nu-tree-list-view__empty", children: emptyText }) })
       ]
     }
   );
@@ -9372,10 +9791,10 @@ var TreeListView = forwardRef4(TreeListViewInner);
 
 // src/theme/NuThemeProvider.tsx
 import {
-  useCallback as useCallback8,
+  useCallback as useCallback9,
   useId as useId18,
-  useMemo as useMemo18,
-  useState as useState29
+  useMemo as useMemo20,
+  useState as useState31
 } from "react";
 
 // src/theme/themes.ts
@@ -9523,11 +9942,48 @@ var midnightTheme = {
     windowModalBackdrop: "rgb(7 12 20 / 0.48)"
   }
 };
+var grayscaleTheme = {
+  name: "grayscale",
+  label: "Grayscale Monitor",
+  tokens: {
+    desktopBackground: "#808080",
+    desktopPattern: "rgb(0 0 0 / 0.3)",
+    shellBackground: "#202020",
+    appBackground: "#3f3f3f",
+    appBackgroundAlt: "#2b2b2b",
+    chromeBackground: "#727272",
+    panelBackground: "#3f3f3f",
+    panelInsetBackground: "#343434",
+    titleBackground: "#262626",
+    titleText: "#d0d0d0",
+    textPrimary: "#c8c8c8",
+    textMuted: "#969696",
+    textInverse: "#d0d0d0",
+    textAccent: "#e0e0e0",
+    textHotkey: "#ffffff",
+    buttonFace: "#5b5b5b",
+    buttonFaceAlt: "#414141",
+    buttonDanger: "#303030",
+    buttonSuccess: "#6b6b6b",
+    buttonText: "#d0d0d0",
+    fieldBackground: "#0e0e0e",
+    fieldText: "#d8d8d8",
+    borderLight: "#c7c7c7",
+    borderDark: "#000000",
+    borderAccent: "#ffffff",
+    shadowColor: "#000000",
+    panelShadowColor: "rgb(0 0 0 / 0.5)",
+    focusColor: "#ffffff",
+    windowInactiveOverlay: "rgb(0 0 0 / 0.34)",
+    windowModalBackdrop: "rgb(0 0 0 / 0.5)"
+  }
+};
 var nuThemes = {
   classic: classicTheme,
   amber: amberTheme,
   phosphor: phosphorTheme,
-  midnight: midnightTheme
+  midnight: midnightTheme,
+  grayscale: grayscaleTheme
 };
 function isNuThemeName(value) {
   return value in nuThemes;
@@ -9606,10 +10062,10 @@ function getNuDesktopPatternStyle(mode) {
 }
 
 // src/theme/themeContext.ts
-import { createContext as createContext4, useContext as useContext8 } from "react";
-var NuThemeContext = createContext4(null);
+import { createContext as createContext5, useContext as useContext9 } from "react";
+var NuThemeContext = createContext5(null);
 function useNuTheme() {
-  const context = useContext8(NuThemeContext);
+  const context = useContext9(NuThemeContext);
   if (!context) {
     throw new Error("useNuTheme must be used within a NuThemeProvider.");
   }
@@ -9617,7 +10073,7 @@ function useNuTheme() {
 }
 
 // src/theme/NuThemeProvider.tsx
-import { jsx as jsx59, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs40 } from "react/jsx-runtime";
 function NuThemeProvider({
   children,
   className,
@@ -9636,17 +10092,17 @@ function NuThemeProvider({
   theme
 }) {
   const generatedId = useId18();
-  const [internalTheme, setInternalTheme] = useState29(defaultTheme);
-  const [internalDesktopPatternMode, setInternalDesktopPatternMode] = useState29(defaultDesktopPatternMode);
-  const [internalFontFamily, setInternalFontFamily] = useState29(defaultFontFamily);
-  const [internalFontSize, setInternalFontSize] = useState29(defaultFontSize);
+  const [internalTheme, setInternalTheme] = useState31(defaultTheme);
+  const [internalDesktopPatternMode, setInternalDesktopPatternMode] = useState31(defaultDesktopPatternMode);
+  const [internalFontFamily, setInternalFontFamily] = useState31(defaultFontFamily);
+  const [internalFontSize, setInternalFontSize] = useState31(defaultFontSize);
   const currentTheme = theme ?? internalTheme;
   const resolvedDesktopPatternMode = desktopPatternMode ?? internalDesktopPatternMode;
   const resolvedFontFamily = fontFamily ?? internalFontFamily;
   const resolvedFontSize = fontSize ?? internalFontSize;
   const resolvedTheme = resolveNuTheme(currentTheme);
   const themeName = typeof currentTheme === "string" ? currentTheme : currentTheme.name;
-  const handleThemeChange = useCallback8(
+  const handleThemeChange = useCallback9(
     (nextTheme) => {
       if (theme === void 0) {
         setInternalTheme(nextTheme);
@@ -9655,7 +10111,7 @@ function NuThemeProvider({
     },
     [theme, onThemeChange]
   );
-  const handleDesktopPatternModeChange = useCallback8(
+  const handleDesktopPatternModeChange = useCallback9(
     (nextDesktopPatternMode) => {
       if (desktopPatternMode === void 0) {
         setInternalDesktopPatternMode(nextDesktopPatternMode);
@@ -9664,7 +10120,7 @@ function NuThemeProvider({
     },
     [desktopPatternMode, onDesktopPatternModeChange]
   );
-  const handleFontFamilyChange = useCallback8(
+  const handleFontFamilyChange = useCallback9(
     (nextFontFamily) => {
       if (fontFamily === void 0) {
         setInternalFontFamily(nextFontFamily);
@@ -9673,7 +10129,7 @@ function NuThemeProvider({
     },
     [fontFamily, onFontFamilyChange]
   );
-  const handleFontSizeChange = useCallback8(
+  const handleFontSizeChange = useCallback9(
     (nextFontSize) => {
       if (fontSize === void 0) {
         setInternalFontSize(nextFontSize);
@@ -9682,7 +10138,7 @@ function NuThemeProvider({
     },
     [fontSize, onFontSizeChange]
   );
-  const contextValue = useMemo18(
+  const contextValue = useMemo20(
     () => ({
       desktopPatternMode: resolvedDesktopPatternMode,
       fontFamily: resolvedFontFamily,
@@ -9707,7 +10163,7 @@ function NuThemeProvider({
       handleThemeChange
     ]
   );
-  return /* @__PURE__ */ jsx59(NuThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsx61(NuThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs40(
     "div",
     {
       className: ["nu-theme-root", className].filter(Boolean).join(" "),
@@ -9721,7 +10177,7 @@ function NuThemeProvider({
         fontSize: `${resolvedFontSize}px`
       },
       children: [
-        crtGlitch ? /* @__PURE__ */ jsx59(NuCrtGlitch, { ...typeof crtGlitch === "object" ? crtGlitch : {} }) : null,
+        crtGlitch ? /* @__PURE__ */ jsx61(NuCrtGlitch, { ...typeof crtGlitch === "object" ? crtGlitch : {} }) : null,
         children
       ]
     }
@@ -9749,6 +10205,8 @@ export {
   NuCrtGlitch,
   NuDesktop,
   NuGlyph,
+  NuIconGrid,
+  NuIconProvider,
   NuThemeContext,
   NuThemeProvider,
   NuView,
@@ -9791,6 +10249,7 @@ export {
   resolveNuTheme,
   useAppHostMenu,
   useMainMenuState,
+  useNuIconManager,
   useNuTheme,
   useNuWindowManager,
   usePopupMenu,