@deadragdoll/reactnu 0.1.18 → 0.1.30

package/dist/index.cjs

@@ -41,6 +41,8 @@ __export(index_exports, {
   NuCrtGlitch: () => NuCrtGlitch,
   NuDesktop: () => NuDesktop,
   NuGlyph: () => NuGlyph,
+  NuIconGrid: () => NuIconGrid,
+  NuIconProvider: () => NuIconProvider,
   NuThemeContext: () => NuThemeContext,
   NuThemeProvider: () => NuThemeProvider,
   NuView: () => NuView,
@@ -83,6 +85,7 @@ __export(index_exports, {
   resolveNuTheme: () => resolveNuTheme,
   useAppHostMenu: () => useAppHostMenu,
   useMainMenuState: () => useMainMenuState,
+  useNuIconManager: () => useNuIconManager,
   useNuTheme: () => useNuTheme,
   useNuWindowManager: () => useNuWindowManager,
   usePopupMenu: () => usePopupMenu,
@@ -4318,7 +4321,10 @@ function InfoAccent({
   );
 }
 
-// src/components/ComboBox/ComboBox.tsx
+// src/components/IconGrid/NuIconGrid.tsx
+var import_react25 = require("react");
+
+// src/components/PopupMenu/PopupMenu.tsx
 var import_react22 = require("react");
 var import_react_dom2 = require("react-dom");
 
@@ -4345,8 +4351,629 @@ function getThemePortalStyle(anchor) {
   return style;
 }
 
+// src/components/PopupMenu/PopupMenu.tsx
+var import_jsx_runtime34 = require("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 = (0, import_react22.useRef)(null);
+  const [activePath, setActivePath] = (0, import_react22.useState)([]);
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react22.useState)(defaultOpen);
+  const isControlled = open !== void 0;
+  const resolvedOpen = isControlled ? open : uncontrolledOpen;
+  const portalRoot = resolvePortalRoot();
+  const setResolvedOpen = (0, import_react22.useCallback)(
+    (nextOpen) => {
+      if (!nextOpen) {
+        setActivePath([]);
+      }
+      if (!isControlled) {
+        setUncontrolledOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+  (0, import_react22.useEffect)(() => {
+    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]);
+  (0, import_react22.useLayoutEffect)(() => {
+    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 (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "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__ */ (0, import_jsx_runtime34.jsx)("div", { className: "nu-popup-menu__shell", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          MainMenuList,
+          {
+            activePath,
+            items,
+            level: 0,
+            onActivateItem: handleActivateItem,
+            onHoverItem: handleHoverItem,
+            rootVariant: "popup",
+            uncheckedShape
+          }
+        ) })
+      }
+    ),
+    portalRoot
+  );
+}
+
+// src/components/PopupMenu/usePopupMenu.ts
+var import_react23 = require("react");
+function usePopupMenu() {
+  const [anchor, setAnchor] = (0, import_react23.useState)(null);
+  const [open, setOpen] = (0, import_react23.useState)(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
+var import_react24 = require("react");
+var NuIconContext = (0, import_react24.createContext)(null);
+function useNuIconContext() {
+  const context = (0, import_react24.useContext)(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
+var import_jsx_runtime35 = require("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 = (0, import_react25.useRef)(void 0);
+  const isDraggingRef = (0, import_react25.useRef)(false);
+  const [isDragging, setIsDragging] = (0, import_react25.useState)(false);
+  const suppressClickRef = (0, import_react25.useRef)(false);
+  const latestPositionRef = (0, import_react25.useRef)(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__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+      "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__ */ (0, import_jsx_runtime35.jsx)("span", { "aria-hidden": "true", className: "nu-icon-grid__glyph", children: typeof icon.icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("img", { alt: "", draggable: false, src: icon.icon }) : icon.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "nu-icon-grid__label", children: renderMnemonicText(icon.label) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      PopupMenu,
+      {
+        anchor: contextMenu.anchor,
+        items: contextMenuItems,
+        onOpenChange: contextMenu.setOpen,
+        open: contextMenu.open
+      }
+    )
+  ] });
+}
+function NuIconGrid({
+  className,
+  contextMenuItems: contextMenuItemsSource,
+  defaultArrangeMode,
+  onContextMenu,
+  onPointerDown,
+  ...props
+}) {
+  const [gridElement, setGridElement] = (0, import_react25.useState)(null);
+  const manager = useNuIconGridContext();
+  const hasAppliedDefaultArrangementRef = (0, import_react25.useRef)(false);
+  const arrangeIcons = manager.arrangeIcons;
+  const setGridSize = manager.setGridSize;
+  const contextMenu = usePopupMenu();
+  const contextMenuItems = (0, import_react25.useMemo)(
+    () => resolveGridContextMenuItems(contextMenuItemsSource, manager),
+    [contextMenuItemsSource, manager]
+  );
+  (0, import_react25.useLayoutEffect)(() => {
+    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__ */ (0, import_jsx_runtime35.jsxs)(
+    "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__ */ (0, import_jsx_runtime35.jsx)(NuIconGridItem, { gridElement, icon }, icon.id)),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          PopupMenu,
+          {
+            anchor: contextMenu.anchor,
+            items: contextMenuItems,
+            onOpenChange: contextMenu.setOpen,
+            open: contextMenu.open
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/IconGrid/NuIconProvider.tsx
+var import_react26 = require("react");
+var import_jsx_runtime36 = require("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 = (0, import_react26.useRef)(defaultIcons.length);
+  const gridSizeRef = (0, import_react26.useRef)({ height: 0, width: 0 });
+  const [icons, setIcons] = (0, import_react26.useState)(
+    () => getInitialIcons(defaultIcons)
+  );
+  const [selectedIconId, setSelectedIconId] = (0, import_react26.useState)(null);
+  const addIcon = (0, import_react26.useCallback)((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 = (0, import_react26.useCallback)((id, position) => {
+    setIcons(
+      (currentIcons) => currentIcons.map(
+        (icon) => icon.id === id ? { ...icon, position } : icon
+      )
+    );
+  }, []);
+  const removeIcon = (0, import_react26.useCallback)((id) => {
+    setIcons((currentIcons) => currentIcons.filter((icon) => icon.id !== id));
+    setSelectedIconId((currentId) => currentId === id ? null : currentId);
+  }, []);
+  const updateIcon = (0, import_react26.useCallback)(
+    (id, patch) => {
+      setIcons(
+        (currentIcons) => currentIcons.map(
+          (icon) => icon.id === id ? {
+            ...icon,
+            ...patch,
+            position: patch.position ?? icon.position
+          } : icon
+        )
+      );
+    },
+    []
+  );
+  const arrangeIcons = (0, import_react26.useCallback)((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 = (0, import_react26.useCallback)((size) => {
+    gridSizeRef.current = size;
+  }, []);
+  const contextValue = (0, import_react26.useMemo)(
+    () => ({
+      addIcon,
+      arrangeIcons,
+      icons,
+      moveIcon,
+      removeIcon,
+      selectedIconId,
+      selectIcon: setSelectedIconId,
+      setGridSize,
+      updateIcon
+    }),
+    [
+      addIcon,
+      arrangeIcons,
+      icons,
+      moveIcon,
+      removeIcon,
+      selectedIconId,
+      setGridSize,
+      updateIcon
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(NuIconContext.Provider, { value: contextValue, children });
+}
+
 // src/components/ComboBox/ComboBox.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_react27 = require("react");
+var import_react_dom3 = require("react-dom");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function flattenComboBoxOptions(data) {
   const options = [];
   data.forEach((group) => {
@@ -4387,31 +5014,31 @@ function ComboBox({
   value,
   ...props
 }) {
-  const rootRef = (0, import_react22.useRef)(null);
-  const inputRef = (0, import_react22.useRef)(null);
-  const fieldRef = (0, import_react22.useRef)(null);
-  const popupRef = (0, import_react22.useRef)(null);
-  const generatedId = (0, import_react22.useId)();
+  const rootRef = (0, import_react27.useRef)(null);
+  const inputRef = (0, import_react27.useRef)(null);
+  const fieldRef = (0, import_react27.useRef)(null);
+  const popupRef = (0, import_react27.useRef)(null);
+  const generatedId = (0, import_react27.useId)();
   const fieldId = `${generatedId}-combo-box`;
   const labelId = `${fieldId}-label`;
   const hintId = hint ? `${fieldId}-hint` : void 0;
-  const [open, setOpen] = (0, import_react22.useState)(false);
-  const options = (0, import_react22.useMemo)(() => flattenComboBoxOptions(data), [data]);
+  const [open, setOpen] = (0, import_react27.useState)(false);
+  const options = (0, import_react27.useMemo)(() => flattenComboBoxOptions(data), [data]);
   const isValueControlled = value !== void 0;
   const isInputControlled = inputValueProp !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react22.useState)(() => defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react27.useState)(() => defaultValue);
   const initialSelectedOption = findComboBoxOption(options, defaultValue);
-  const [uncontrolledInputValue, setUncontrolledInputValue] = (0, import_react22.useState)(
+  const [uncontrolledInputValue, setUncontrolledInputValue] = (0, import_react27.useState)(
     () => defaultInputValue ?? initialSelectedOption?.item.name.text ?? ""
   );
   const resolvedValue = isValueControlled ? value : uncontrolledValue;
-  const selectedOption = (0, import_react22.useMemo)(
+  const selectedOption = (0, import_react27.useMemo)(
     () => findComboBoxOption(options, resolvedValue),
     [options, resolvedValue]
   );
   const resolvedInputValue = isInputControlled ? inputValueProp ?? "" : uncontrolledInputValue;
   const normalizedFilter = resolvedInputValue.trim().toLowerCase();
-  const filteredData = (0, import_react22.useMemo)(() => {
+  const filteredData = (0, import_react27.useMemo)(() => {
     if (!normalizedFilter) {
       return data;
     }
@@ -4422,15 +5049,15 @@ function ComboBox({
       )
     })).filter((group) => group.items.length > 0);
   }, [data, normalizedFilter]);
-  const filteredOptions = (0, import_react22.useMemo)(
+  const filteredOptions = (0, import_react27.useMemo)(
     () => flattenComboBoxOptions(filteredData).filter(
       (option) => !option.item.disabled
     ),
     [filteredData]
   );
   const popupRoot = typeof document === "undefined" ? null : resolveComboBoxPortalRoot();
-  const [themePortalStyle, setThemePortalStyle] = (0, import_react22.useState)(() => void 0);
-  (0, import_react22.useEffect)(() => {
+  const [themePortalStyle, setThemePortalStyle] = (0, import_react27.useState)(() => void 0);
+  (0, import_react27.useEffect)(() => {
     if (!open) {
       return;
     }
@@ -4506,7 +5133,7 @@ function ComboBox({
         break;
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
       ...props,
@@ -4514,7 +5141,7 @@ function ComboBox({
       ref: rootRef,
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "label",
           {
             className: cx("nu-combo-box__label", slotClassNames?.label),
@@ -4524,20 +5151,20 @@ function ComboBox({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
           "span",
           {
             className: cx("nu-combo-box__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
                 "span",
                 {
                   className: cx("nu-combo-box__field", slotClassNames?.field),
                   ref: fieldRef,
                   style: slotStyles?.field,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                       "span",
                       {
                         "aria-hidden": "true",
@@ -4546,7 +5173,7 @@ function ComboBox({
                         children: "["
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                       "span",
                       {
                         className: cx(
@@ -4554,7 +5181,7 @@ function ComboBox({
                           slotClassNames?.inputShell
                         ),
                         style: slotStyles?.inputShell,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                           "input",
                           {
                             "aria-autocomplete": "list",
@@ -4581,7 +5208,7 @@ function ComboBox({
                         )
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                       "span",
                       {
                         "aria-hidden": "true",
@@ -4593,296 +5220,81 @@ function ComboBox({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                 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__ */ (0, import_jsx_runtime34.jsx)(
-          "span",
-          {
-            className: cx("nu-combo-box__hint", slotClassNames?.hint),
-            id: hintId,
-            style: slotStyles?.hint,
-            children: hint
-          }
-        ) : null,
-        open && popupRoot ? (0, import_react_dom2.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-            "div",
-            {
-              className: cx("nu-combo-box__popup", slotClassNames?.popup),
-              id: `${fieldId}-popup`,
-              ref: popupRef,
-              style: mergeSlotStyle(
-                themePortalStyle,
-                slotStyles?.popup
-              ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                "div",
-                {
-                  className: cx("nu-combo-box__listbox", slotClassNames?.listbox),
-                  style: slotStyles?.listbox,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                    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
-var import_react25 = require("react");
-
-// src/components/PopupMenu/PopupMenu.tsx
-var import_react23 = require("react");
-var import_react_dom3 = require("react-dom");
-var import_jsx_runtime35 = require("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 = (0, import_react23.useRef)(null);
-  const [activePath, setActivePath] = (0, import_react23.useState)([]);
-  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react23.useState)(defaultOpen);
-  const isControlled = open !== void 0;
-  const resolvedOpen = isControlled ? open : uncontrolledOpen;
-  const portalRoot = resolvePortalRoot();
-  const setResolvedOpen = (0, import_react23.useCallback)(
-    (nextOpen) => {
-      if (!nextOpen) {
-        setActivePath([]);
-      }
-      if (!isControlled) {
-        setUncontrolledOpen(nextOpen);
-      }
-      onOpenChange?.(nextOpen);
-    },
-    [isControlled, onOpenChange]
-  );
-  (0, import_react23.useEffect)(() => {
-    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]);
-  (0, import_react23.useLayoutEffect)(() => {
-    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 (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      "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__ */ (0, import_jsx_runtime35.jsx)("div", { className: "nu-popup-menu__shell", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-          MainMenuList,
+                    "nu-control-opener",
+                    "nu-combo-box__toggle",
+                    slotClassNames?.toggle
+                  ),
+                  disabled,
+                  onClick: handleToggle,
+                  style: slotStyles?.toggle
+                }
+              )
+            ]
+          }
+        ),
+        hint ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          "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 ? (0, import_react_dom3.createPortal)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            "div",
+            {
+              className: cx("nu-combo-box__popup", slotClassNames?.popup),
+              id: `${fieldId}-popup`,
+              ref: popupRef,
+              style: mergeSlotStyle(
+                themePortalStyle,
+                slotStyles?.popup
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                "div",
+                {
+                  className: cx("nu-combo-box__listbox", slotClassNames?.listbox),
+                  style: slotStyles?.listbox,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                    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
-var import_react24 = require("react");
-function usePopupMenu() {
-  const [anchor, setAnchor] = (0, import_react24.useState)(null);
-  const [open, setOpen] = (0, import_react24.useState)(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
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_react28 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var COMMAND_BUTTON_GLYPH_NAMES = /* @__PURE__ */ new Set([
   "check-fill",
   "check-mark",
@@ -4923,7 +5335,7 @@ function CommandButton({
   const hasMenu = menuItems.length > 0;
   const showCaret = dropdown || hasMenu;
   const resolvedToggled = toggled ?? pressed;
-  const resolvedIcon = typeof icon === "string" && isCommandButtonGlyphName(icon) ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(NuGlyph, { name: icon }) : icon ?? null;
+  const resolvedIcon = typeof icon === "string" && isCommandButtonGlyphName(icon) ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(NuGlyph, { name: icon }) : icon ?? null;
   function handleClick(event) {
     onClick?.(event);
     if (event.defaultPrevented || !hasMenu) {
@@ -4931,8 +5343,8 @@ function CommandButton({
     }
     popupMenu.openFromClick(event);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react25.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react28.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       "button",
       {
         ...props,
@@ -4948,7 +5360,7 @@ function CommandButton({
         type,
         onClick: handleClick,
         children: [
-          resolvedIcon ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          resolvedIcon ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "span",
             {
               className: cx(
@@ -4960,7 +5372,7 @@ function CommandButton({
               children: resolvedIcon
             }
           ) : null,
-          children ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          children ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "span",
             {
               className: cx(
@@ -4972,7 +5384,7 @@ function CommandButton({
               children: renderMnemonicNode(children)
             }
           ) : null,
-          showCaret ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          showCaret ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "span",
             {
               className: cx(
@@ -4981,13 +5393,13 @@ function CommandButton({
                 slotClassNames?.caret
               ),
               style: slotStyles?.caret,
-              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(NuGlyph, { name: "dropdown-arrow" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(NuGlyph, { name: "dropdown-arrow" })
             }
           ) : null
         ]
       }
     ),
-    hasMenu ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    hasMenu ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       PopupMenu,
       {
         anchor: popupMenu.anchor,
@@ -5002,8 +5414,8 @@ function CommandButton({
 }
 
 // src/components/CrtGlitch/CrtGlitch.tsx
-var import_react26 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_react29 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var DEFAULT_INTERVAL_MS = 3e3;
 var DEFAULT_DURATION_MS = 2500;
 var DEFAULT_TOP_LEVEL_RATIO = 1 / 3;
@@ -5028,14 +5440,14 @@ function NuCrtGlitch({
   targetSelector = DEFAULT_TARGET_SELECTOR,
   topLevelRatio = DEFAULT_TOP_LEVEL_RATIO
 }) {
-  const filterId = (0, import_react26.useId)().replace(/:/g, "");
-  const turbulenceRef = (0, import_react26.useRef)(null);
-  const warpRef = (0, import_react26.useRef)(null);
-  const rOffsetRef = (0, import_react26.useRef)(null);
-  const bOffsetRef = (0, import_react26.useRef)(null);
-  const rafRef = (0, import_react26.useRef)(null);
-  const targetElRef = (0, import_react26.useRef)(null);
-  (0, import_react26.useEffect)(() => {
+  const filterId = (0, import_react29.useId)().replace(/:/g, "");
+  const turbulenceRef = (0, import_react29.useRef)(null);
+  const warpRef = (0, import_react29.useRef)(null);
+  const rOffsetRef = (0, import_react29.useRef)(null);
+  const bOffsetRef = (0, import_react29.useRef)(null);
+  const rafRef = (0, import_react29.useRef)(null);
+  const targetElRef = (0, import_react29.useRef)(null);
+  (0, import_react29.useEffect)(() => {
     if (!enabled) {
       return;
     }
@@ -5137,7 +5549,7 @@ function NuCrtGlitch({
       }
     };
   }, [durationMs, enabled, filterId, intervalMs, targetSelector, topLevelRatio]);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { "aria-hidden": "true", height: "0", style: { position: "absolute" }, width: "0", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { "aria-hidden": "true", height: "0", style: { position: "absolute" }, width: "0", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "filter",
     {
       "color-interpolation-filters": "sRGB",
@@ -5147,7 +5559,7 @@ function NuCrtGlitch({
       x: "-15%",
       y: "-5%",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "feTurbulence",
           {
             baseFrequency: "0.001 0.045",
@@ -5158,7 +5570,7 @@ function NuCrtGlitch({
             type: "turbulence"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "feDisplacementMap",
           {
             in: "SourceGraphic",
@@ -5170,8 +5582,8 @@ function NuCrtGlitch({
             yChannelSelector: "A"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("feOffset", { dx: 0, dy: 0, in: "warped", ref: rOffsetRef, result: "rOff" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("feOffset", { dx: 0, dy: 0, in: "warped", ref: rOffsetRef, result: "rOff" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "feColorMatrix",
           {
             in: "rOff",
@@ -5180,7 +5592,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__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "feColorMatrix",
           {
             in: "warped",
@@ -5189,8 +5601,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__ */ (0, import_jsx_runtime37.jsx)("feOffset", { dx: 0, dy: 0, in: "warped", ref: bOffsetRef, result: "bOff" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("feOffset", { dx: 0, dy: 0, in: "warped", ref: bOffsetRef, result: "bOff" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "feColorMatrix",
           {
             in: "bOff",
@@ -5199,15 +5611,15 @@ function NuCrtGlitch({
             values: "0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("feBlend", { in: "rOnly", in2: "gOnly", mode: "screen", result: "rg" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("feBlend", { in: "rg", in2: "bOnly", mode: "screen" })
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("feBlend", { in: "rOnly", in2: "gOnly", mode: "screen", result: "rg" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("feBlend", { in: "rg", in2: "bOnly", mode: "screen" })
       ]
     }
   ) }) });
 }
 
 // src/components/ListView/ListView.tsx
-var import_react28 = require("react");
+var import_react31 = require("react");
 
 // src/components/ListView/internals/helpers.ts
 function getInitialActiveRowId(rows, selectedId) {
@@ -5241,17 +5653,17 @@ function renderListViewCellValue(row, column) {
 }
 
 // src/components/ListView/internals/ListViewRow.tsx
-var import_react27 = require("react");
+var import_react30 = require("react");
 
 // src/components/ListView/internals/ListViewCheckControl.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function ListViewCheckControl({
   isChecked,
   onActivate,
   onToggleCheck,
   uncheckedShape
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "button",
     {
       "aria-label": isChecked ? "Uncheck row" : "Check row",
@@ -5264,13 +5676,13 @@ function ListViewCheckControl({
         onToggleCheck();
       },
       type: "button",
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         "span",
         {
           "aria-hidden": "true",
           className: "nu-list-view__check-box",
           "data-unchecked-shape": uncheckedShape,
-          children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             NuGlyph,
             {
               className: "nu-list-view__check-indicator",
@@ -5284,7 +5696,7 @@ function ListViewCheckControl({
 }
 
 // src/components/ListView/internals/ListViewRow.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function ListViewRowInner({
   columns,
   isActive,
@@ -5315,7 +5727,7 @@ function ListViewRowInner({
   function handleToggleCheck() {
     onToggleCheck(rowId);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     "div",
     {
       "aria-disabled": row.disabled || void 0,
@@ -5336,7 +5748,7 @@ function ListViewRowInner({
         "--nu-list-view-columns": templateColumns
       },
       children: [
-        showCheckBox ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "nu-list-view__check-cell", role: "gridcell", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        showCheckBox ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "nu-list-view__check-cell", role: "gridcell", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           ListViewCheckControl,
           {
             isChecked,
@@ -5345,7 +5757,7 @@ function ListViewRowInner({
             uncheckedShape
           }
         ) }) : null,
-        columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "span",
           {
             className: [
@@ -5362,10 +5774,10 @@ function ListViewRowInner({
     }
   );
 }
-var ListViewRow = (0, import_react27.memo)(ListViewRowInner);
+var ListViewRow = (0, import_react30.memo)(ListViewRowInner);
 
 // src/components/ListView/ListView.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function ListViewInner({
   activeRowId: activeRowIdProp,
   checkedIds,
@@ -5383,26 +5795,26 @@ function ListViewInner({
   uncheckedShape = "box",
   ...props
 }, ref) {
-  const rootRef = (0, import_react28.useRef)(null);
-  const rowRefs = (0, import_react28.useRef)({});
-  const selectableRows = (0, import_react28.useMemo)(
+  const rootRef = (0, import_react31.useRef)(null);
+  const rowRefs = (0, import_react31.useRef)({});
+  const selectableRows = (0, import_react31.useMemo)(
     () => data.filter((row) => !row.disabled),
     [data]
   );
   const isActiveControlled = activeRowIdProp !== void 0;
-  const [uncontrolledActiveRowId, setUncontrolledActiveRowId] = (0, import_react28.useState)(
+  const [uncontrolledActiveRowId, setUncontrolledActiveRowId] = (0, import_react31.useState)(
     () => 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 = (0, import_react28.useMemo)(() => {
+  const templateColumns = (0, import_react31.useMemo)(() => {
     const checkboxColumn = showCheckBox ? "var(--nu-glyph-cell-size)" : null;
     const dataColumns = columns.map(
       (column) => column.width ?? "minmax(0, 1fr)"
     );
     return [checkboxColumn, ...dataColumns].filter(Boolean).join(" ");
   }, [columns, showCheckBox]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!resolvedActiveRowId) {
       return;
     }
@@ -5410,13 +5822,13 @@ function ListViewInner({
       block: "nearest"
     });
   }, [resolvedActiveRowId]);
-  const registerRowRef = (0, import_react28.useCallback)(
+  const registerRowRef = (0, import_react31.useCallback)(
     (rowId, node) => {
       rowRefs.current[rowId] = node;
     },
     []
   );
-  const updateActiveRow = (0, import_react28.useCallback)(
+  const updateActiveRow = (0, import_react31.useCallback)(
     (row) => {
       if (!isActiveControlled) {
         setUncontrolledActiveRowId(row.id);
@@ -5425,7 +5837,7 @@ function ListViewInner({
     },
     [isActiveControlled, onActiveRowChange]
   );
-  const activateRowId = (0, import_react28.useCallback)(
+  const activateRowId = (0, import_react31.useCallback)(
     (rowId) => {
       if (!rowId) {
         return;
@@ -5464,7 +5876,7 @@ function ListViewInner({
   function isRowChecked(row) {
     return getListViewRowChecked(row, checkedIds);
   }
-  const toggleRowCheck = (0, import_react28.useCallback)(
+  const toggleRowCheck = (0, import_react31.useCallback)(
     (rowId) => {
       if (!showCheckBox) {
         return;
@@ -5477,7 +5889,7 @@ function ListViewInner({
     },
     [showCheckBox, data, checkedIds, onRowCheckChange]
   );
-  (0, import_react28.useImperativeHandle)(
+  (0, import_react31.useImperativeHandle)(
     ref,
     () => ({
       activateRow(rowId) {
@@ -5533,7 +5945,7 @@ function ListViewInner({
         break;
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
       ...props,
@@ -5544,7 +5956,7 @@ function ListViewInner({
       role: "grid",
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
           "div",
           {
             className: "nu-list-view__header",
@@ -5553,8 +5965,8 @@ function ListViewInner({
               "--nu-list-view-columns": templateColumns
             },
             children: [
-              showCheckBox ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "nu-list-view__header-cell", role: "columnheader" }) : null,
-              columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              showCheckBox ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "nu-list-view__header-cell", role: "columnheader" }) : null,
+              columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 "span",
                 {
                   className: [
@@ -5570,7 +5982,7 @@ function ListViewInner({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "nu-list-view__body", children: data.length > 0 ? data.map((row) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "nu-list-view__body", children: data.length > 0 ? data.map((row) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           ListViewRow,
           {
             columns,
@@ -5587,15 +5999,15 @@ function ListViewInner({
             uncheckedShape
           },
           row.id
-        )) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "nu-list-view__empty", children: emptyText }) })
+        )) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "nu-list-view__empty", children: emptyText }) })
       ]
     }
   );
 }
-var ListView = (0, import_react28.forwardRef)(ListViewInner);
+var ListView = (0, import_react31.forwardRef)(ListViewInner);
 
 // src/components/MaskedField/MaskedField.tsx
-var import_react29 = require("react");
+var import_react32 = require("react");
 
 // src/components/MaskedField/textMask.ts
 var INFINITE_MASK_REPEAT = Number.POSITIVE_INFINITY;
@@ -5759,7 +6171,7 @@ function getMaskedFieldState(mask, rawValue) {
 }
 
 // src/components/MaskedField/MaskedField.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function MaskedField({
   "aria-invalid": ariaInvalid,
   className,
@@ -5778,12 +6190,12 @@ function MaskedField({
   style,
   ...props
 }) {
-  const generatedId = (0, import_react29.useId)();
+  const generatedId = (0, import_react32.useId)();
   const fieldId = id ?? generatedId;
   const hintId = hint ? `${fieldId}-hint` : void 0;
   const isControlled = value !== void 0;
-  const hasMountedRef = (0, import_react29.useRef)(false);
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react29.useState)(
+  const hasMountedRef = (0, import_react32.useRef)(false);
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react32.useState)(
     () => defaultValue == null ? "" : getMaskedFieldState(mask, String(defaultValue)).formattedValue
   );
   const rawResolvedValue = isControlled ? value == null ? "" : String(value) : uncontrolledValue;
@@ -5792,11 +6204,11 @@ function MaskedField({
     rawResolvedValue
   );
   const resolvedAriaInvalid = ariaInvalid ?? (isInvalid ? true : void 0);
-  const maskInputMode = (0, import_react29.useMemo)(
+  const maskInputMode = (0, import_react32.useMemo)(
     () => props.inputMode === void 0 ? getTextMaskInputMode(mask) : void 0,
     [mask, props.inputMode]
   );
-  (0, import_react29.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (!onDebouncedChange) {
       return;
     }
@@ -5831,7 +6243,7 @@ function MaskedField({
     }
     onChange?.(event);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "label",
     {
       className: cx(
@@ -5843,7 +6255,7 @@ function MaskedField({
       htmlFor: fieldId,
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "span",
           {
             className: cx("nu-masked-field__label", slotClassNames?.label),
@@ -5851,13 +6263,13 @@ function MaskedField({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
           "span",
           {
             className: cx("nu-masked-field__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -5866,7 +6278,7 @@ function MaskedField({
                   children: "["
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 "span",
                 {
                   className: cx(
@@ -5874,7 +6286,7 @@ function MaskedField({
                     slotClassNames?.inputShell
                   ),
                   style: slotStyles?.inputShell,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                     "input",
                     {
                       ...props,
@@ -5892,7 +6304,7 @@ function MaskedField({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -5904,7 +6316,7 @@ function MaskedField({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        hint ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "span",
           {
             className: cx("nu-masked-field__hint", slotClassNames?.hint),
@@ -5919,8 +6331,8 @@ function MaskedField({
 }
 
 // src/components/Memo/Memo.tsx
-var import_react30 = require("react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_react33 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function Memo({
   background,
   className,
@@ -5940,7 +6352,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] = (0, import_react30.useState)(
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react33.useState)(
     () => resolvedInitialValue
   );
   function handleChange(event) {
@@ -5950,7 +6362,7 @@ function Memo({
     onValueChange?.(event.target.value);
     onChange?.(event);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "div",
     {
       className: ["nu-memo", className].filter(Boolean).join(" "),
@@ -5963,7 +6375,7 @@ function Memo({
         "--nu-memo-focus-text": focusTextColor,
         "--nu-memo-text": textColor
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "nu-memo__viewport", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "nu-memo__viewport", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "textarea",
         {
           ...props,
@@ -5977,8 +6389,8 @@ function Memo({
 }
 
 // src/components/PageControl/PageControl.tsx
-var import_react31 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_react34 = require("react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function PageControl({
   activePageId: activePageIdProp,
   className,
@@ -5990,14 +6402,14 @@ function PageControl({
   slotStyles,
   ...props
 }) {
-  const generatedId = (0, import_react31.useId)();
+  const generatedId = (0, import_react34.useId)();
   const isControlled = activePageIdProp !== void 0;
-  const tabRefs = (0, import_react31.useRef)({});
-  const [uncontrolledActivePageId, setUncontrolledActivePageId] = (0, import_react31.useState)(
+  const tabRefs = (0, import_react34.useRef)({});
+  const [uncontrolledActivePageId, setUncontrolledActivePageId] = (0, import_react34.useState)(
     () => defaultActivePageId ?? pages.find((page) => !page.disabled)?.id ?? pages[0]?.id
   );
   const activePageId = isControlled ? activePageIdProp : uncontrolledActivePageId;
-  const resolvedActivePage = (0, import_react31.useMemo)(() => {
+  const resolvedActivePage = (0, import_react34.useMemo)(() => {
     const byId = pages.find(
       (page) => page.id === activePageId && !page.disabled
     );
@@ -6063,7 +6475,7 @@ function PageControl({
         break;
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
       ...props,
@@ -6074,7 +6486,7 @@ function PageControl({
         slotStyles?.root
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "div",
           {
             className: cx("nu-page-control__tabs", slotClassNames?.tabs),
@@ -6085,7 +6497,7 @@ function PageControl({
               const isActive = page.id === resolvedActivePage?.id;
               const panelId = `${generatedId}-panel-${page.id}`;
               const tabId = `${generatedId}-tab-${page.id}`;
-              return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 "button",
                 {
                   "aria-controls": panelId,
@@ -6109,7 +6521,7 @@ function PageControl({
             })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "div",
           {
             "aria-labelledby": resolvedActivePage ? `${generatedId}-tab-${resolvedActivePage.id}` : void 0,
@@ -6126,7 +6538,7 @@ function PageControl({
 }
 
 // src/components/Panel/Panel.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function Panel({
   children,
   className,
@@ -6137,14 +6549,14 @@ function Panel({
   title,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "section",
     {
       ...props,
       className: cx("nu-panel", slotClassNames?.root, className),
       style: mergeSlotStyle(props.style, slotStyles?.root),
       children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        title ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "header",
           {
             className: cx("nu-panel__header", slotClassNames?.header),
@@ -6152,7 +6564,7 @@ function Panel({
             children: renderMnemonicText(title)
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "div",
           {
             className: cx(
@@ -6164,7 +6576,7 @@ function Panel({
             children
           }
         ),
-        footer ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        footer ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "footer",
           {
             className: cx("nu-panel__footer", slotClassNames?.footer),
@@ -6178,8 +6590,8 @@ function Panel({
 }
 
 // src/components/PropertyGrid/PropertyGrid.tsx
-var import_react32 = require("react");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_react35 = require("react");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function collectGroupIds(entries) {
   const groupIds = /* @__PURE__ */ new Set();
   function visit(nextEntries) {
@@ -6286,25 +6698,25 @@ function PropertyGrid({
   style,
   ...props
 }) {
-  const editorIdPrefix = (0, import_react32.useId)();
-  const rowButtonRefs = (0, import_react32.useRef)({});
-  const groupIds = (0, import_react32.useMemo)(() => collectGroupIds(entries), [entries]);
+  const editorIdPrefix = (0, import_react35.useId)();
+  const rowButtonRefs = (0, import_react35.useRef)({});
+  const groupIds = (0, import_react35.useMemo)(() => collectGroupIds(entries), [entries]);
   const isExpandedControlled = expandedIdsProp !== void 0;
   const isActiveControlled = activeIdProp !== void 0;
-  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = (0, import_react32.useState)(() => getInitialExpandedIds(entries, defaultExpandedIds));
+  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = (0, import_react35.useState)(() => getInitialExpandedIds(entries, defaultExpandedIds));
   const resolvedExpandedIds = expandedIdsProp ?? uncontrolledExpandedIds;
-  const expandedIdSet = (0, import_react32.useMemo)(
+  const expandedIdSet = (0, import_react35.useMemo)(
     () => new Set(
       resolvedExpandedIds.filter((expandedId) => groupIds.has(expandedId))
     ),
     [groupIds, resolvedExpandedIds]
   );
-  const rows = (0, import_react32.useMemo)(
+  const rows = (0, import_react35.useMemo)(
     () => collectVisibleRows(entries, expandedIdSet),
     [entries, expandedIdSet]
   );
-  const interactiveRows = (0, import_react32.useMemo)(() => collectInteractiveRows(rows), [rows]);
-  const [uncontrolledActiveId, setUncontrolledActiveId] = (0, import_react32.useState)(() => getInitialActiveId2(interactiveRows, defaultActiveId));
+  const interactiveRows = (0, import_react35.useMemo)(() => collectInteractiveRows(rows), [rows]);
+  const [uncontrolledActiveId, setUncontrolledActiveId] = (0, import_react35.useState)(() => getInitialActiveId2(interactiveRows, defaultActiveId));
   const requestedActiveId = isActiveControlled ? activeIdProp : uncontrolledActiveId;
   const resolvedActiveId = requestedActiveId && interactiveRows.some((row) => row.id === requestedActiveId) ? requestedActiveId : interactiveRows[0]?.id;
   function updateExpandedIds(nextExpandedIds) {
@@ -6423,7 +6835,7 @@ function PropertyGrid({
     const nextExpandedIds = expandedIdSet.has(entry.id) ? resolvedExpandedIds.filter((expandedId) => expandedId !== entry.id) : [...resolvedExpandedIds, entry.id];
     updateExpandedIds(nextExpandedIds);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     "div",
     {
       ...props,
@@ -6434,13 +6846,13 @@ function PropertyGrid({
         ...style,
         "--nu-property-grid-label-width": labelWidth
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "nu-property-grid__body", children: rows.map((row) => {
+      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "nu-property-grid__body", children: rows.map((row) => {
         if (row.type === "section") {
-          return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "nu-property-grid__section", children: renderMnemonicText(row.entry.title) }, row.entry.id);
+          return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("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__ */ (0, import_jsx_runtime45.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
             "div",
             {
               className: "nu-property-grid__row",
@@ -6449,7 +6861,7 @@ function PropertyGrid({
               "data-expanded": isExpanded || void 0,
               "data-group": true,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                   "button",
                   {
                     className: "nu-property-grid__label nu-property-grid__label-button",
@@ -6469,32 +6881,32 @@ function PropertyGrid({
                       "--nu-property-grid-depth": row.depth
                     },
                     type: "button",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "nu-property-grid__lead", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "nu-property-grid__expander", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "nu-property-grid__lead", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "nu-property-grid__expander", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                         NuGlyph,
                         {
                           name: isExpanded ? "tree-caret-down" : "tree-caret-right"
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "nu-property-grid__label-text", children: renderMnemonicText(row.entry.label) })
+                      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "nu-property-grid__label-text", children: renderMnemonicText(row.entry.label) })
                     ] })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "nu-property-grid__editor", children: row.entry.summary ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "nu-property-grid__control", children: row.entry.summary }) : null })
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "nu-property-grid__editor", children: row.entry.summary ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "nu-property-grid__control", children: row.entry.summary }) : null })
               ]
             },
             row.entry.id
           );
         }
         const editorId = `${editorIdPrefix}-editor-${row.entry.id}`;
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
           "div",
           {
             className: "nu-property-grid__row",
             "data-active": resolvedActiveId === row.entry.id || void 0,
             "data-disabled": row.entry.disabled || void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                 "button",
                 {
                   className: "nu-property-grid__label nu-property-grid__label-button",
@@ -6514,21 +6926,21 @@ function PropertyGrid({
                     "--nu-property-grid-depth": row.depth
                   },
                   type: "button",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "nu-property-grid__lead", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "nu-property-grid__expander-placeholder" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "nu-property-grid__label-text", children: renderMnemonicText(row.entry.label) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "nu-property-grid__lead", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "nu-property-grid__expander-placeholder" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "nu-property-grid__label-text", children: renderMnemonicText(row.entry.label) })
                   ] })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
                 "div",
                 {
                   className: "nu-property-grid__editor",
                   id: editorId,
                   onFocusCapture: () => updateActiveId(row.entry.id),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "nu-property-grid__control", children: row.entry.content }),
-                    row.entry.hint ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "nu-property-grid__hint", children: row.entry.hint }) : null
+                    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "nu-property-grid__control", children: row.entry.content }),
+                    row.entry.hint ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "nu-property-grid__hint", children: row.entry.hint }) : null
                   ]
                 }
               )
@@ -6542,8 +6954,8 @@ function PropertyGrid({
 }
 
 // src/components/ProgressBar/ProgressBar.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
-function clamp2(value, min, max) {
+var import_jsx_runtime48 = require("react/jsx-runtime");
+function clamp3(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
 function ProgressBar({
@@ -6563,10 +6975,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__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "div",
     {
       ...props,
@@ -6578,7 +6990,7 @@ function ProgressBar({
       role: "progressbar",
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        label ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "span",
           {
             className: cx("nu-progress-bar__label", slotClassNames?.label),
@@ -6586,7 +6998,7 @@ function ProgressBar({
             children: renderMnemonicText(label)
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
           "div",
           {
             className: cx("nu-progress-bar__track", slotClassNames?.track),
@@ -6597,7 +7009,7 @@ function ProgressBar({
               slotStyles?.track
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 "div",
                 {
                   className: cx("nu-progress-bar__fill", slotClassNames?.fill),
@@ -6610,7 +7022,7 @@ function ProgressBar({
                   )
                 }
               ),
-              showValue ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+              showValue ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 "span",
                 {
                   className: cx("nu-progress-bar__value", slotClassNames?.value),
@@ -6621,7 +7033,7 @@ function ProgressBar({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        hint ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "span",
           {
             className: cx("nu-progress-bar__hint", slotClassNames?.hint),
@@ -6635,8 +7047,8 @@ function ProgressBar({
 }
 
 // src/components/RadioGroup/RadioButton.tsx
-var import_react33 = require("react");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_react36 = require("react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function RadioButton({
   checked,
   className,
@@ -6648,11 +7060,11 @@ function RadioButton({
   onCheckedChange,
   ...props
 }) {
-  const generatedId = (0, import_react33.useId)();
+  const generatedId = (0, import_react36.useId)();
   const inputId = id ?? generatedId;
   const hintId = hint ? `${inputId}-hint` : void 0;
   const isControlled = checked !== void 0;
-  const [uncontrolledChecked, setUncontrolledChecked] = (0, import_react33.useState)(defaultChecked);
+  const [uncontrolledChecked, setUncontrolledChecked] = (0, import_react36.useState)(defaultChecked);
   const resolvedChecked = isControlled ? checked : uncontrolledChecked;
   function handleChange(event) {
     if (!isControlled) {
@@ -6660,9 +7072,9 @@ function RadioButton({
     }
     onCheckedChange?.(event.target.checked, event);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: ["nu-radio-button", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "nu-radio-button__main", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("label", { className: ["nu-radio-button", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "nu-radio-button__main", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         "input",
         {
           ...props,
@@ -6675,19 +7087,19 @@ function RadioButton({
           type: "radio"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { "aria-hidden": "true", className: "nu-radio-button__control", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "nu-radio-button__disc", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(NuGlyph, { className: "nu-radio-button__ring", name: "radio-ring" }),
-        resolvedChecked ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(NuGlyph, { className: "nu-radio-button__fill", name: "radio-fill" }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { "aria-hidden": "true", className: "nu-radio-button__control", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "nu-radio-button__disc", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NuGlyph, { className: "nu-radio-button__ring", name: "radio-ring" }),
+        resolvedChecked ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NuGlyph, { className: "nu-radio-button__fill", name: "radio-fill" }) : null
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "nu-radio-button__label", children: renderMnemonicText(label) })
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "nu-radio-button__label", children: renderMnemonicText(label) })
     ] }),
-    hint ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "nu-radio-button__hint", id: hintId, children: hint }) : null
+    hint ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "nu-radio-button__hint", id: hintId, children: hint }) : null
   ] });
 }
 
 // src/components/RadioGroup/RadioGroup.tsx
-var import_react34 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_react37 = require("react");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function RadioGroup({
   className,
   defaultValue,
@@ -6702,11 +7114,11 @@ function RadioGroup({
   value,
   ...props
 }) {
-  const generatedId = (0, import_react34.useId)();
+  const generatedId = (0, import_react37.useId)();
   const groupName = name ?? generatedId;
   const hintId = hint ? `${groupName}-hint` : void 0;
   const isControlled = value !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react34.useState)(defaultValue ?? options[0]?.value);
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react37.useState)(defaultValue ?? options[0]?.value);
   const resolvedValue = isControlled ? value : uncontrolledValue;
   function commitValue(nextValue) {
     if (!isControlled) {
@@ -6714,7 +7126,7 @@ function RadioGroup({
     }
     onValueChange?.(nextValue);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "fieldset",
     {
       ...props,
@@ -6722,7 +7134,7 @@ function RadioGroup({
       className: cx("nu-radio-group", slotClassNames?.root, className),
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        label ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "legend",
           {
             className: cx("nu-radio-group__label", slotClassNames?.label),
@@ -6730,12 +7142,12 @@ function RadioGroup({
             children: renderMnemonicText(label)
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "div",
           {
             className: cx("nu-radio-group__options", slotClassNames?.options),
             style: slotStyles?.options,
-            children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               RadioButton,
               {
                 checked: resolvedValue === option.value,
@@ -6754,7 +7166,7 @@ function RadioGroup({
             ))
           }
         ),
-        hint ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        hint ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "span",
           {
             className: cx("nu-radio-group__hint", slotClassNames?.hint),
@@ -6769,14 +7181,14 @@ function RadioGroup({
 }
 
 // src/components/ReportCell/ReportCell.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function ReportCell({
   align = "start",
   className,
   tone = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "span",
     {
       ...props,
@@ -6791,9 +7203,9 @@ function ReportCell({
 }
 
 // src/components/SearchBox/SearchBox.tsx
-var import_react35 = require("react");
+var import_react38 = require("react");
 var import_react_dom4 = require("react-dom");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function resolveSearchBoxPortalRoot() {
   return document.body;
 }
@@ -6821,24 +7233,24 @@ function SearchBox({
   style,
   ...props
 }) {
-  const rootRef = (0, import_react35.useRef)(null);
-  const fieldRef = (0, import_react35.useRef)(null);
-  const inputRef = (0, import_react35.useRef)(null);
-  const popupRef = (0, import_react35.useRef)(null);
-  const requestIdRef = (0, import_react35.useRef)(0);
-  const generatedId = (0, import_react35.useId)();
+  const rootRef = (0, import_react38.useRef)(null);
+  const fieldRef = (0, import_react38.useRef)(null);
+  const inputRef = (0, import_react38.useRef)(null);
+  const popupRef = (0, import_react38.useRef)(null);
+  const requestIdRef = (0, import_react38.useRef)(0);
+  const generatedId = (0, import_react38.useId)();
   const fieldId = `${generatedId}-search-box`;
   const labelId = `${fieldId}-label`;
   const hintId = hint ? `${fieldId}-hint` : void 0;
   const isQueryControlled = queryProp !== void 0;
-  const [uncontrolledQuery, setUncontrolledQuery] = (0, import_react35.useState)(defaultQuery);
-  const [open, setOpen] = (0, import_react35.useState)(false);
-  const [status, setStatus] = (0, import_react35.useState)("idle");
-  const [results, setResults] = (0, import_react35.useState)([]);
-  const [selectedValue, setSelectedValue] = (0, import_react35.useState)(null);
+  const [uncontrolledQuery, setUncontrolledQuery] = (0, import_react38.useState)(defaultQuery);
+  const [open, setOpen] = (0, import_react38.useState)(false);
+  const [status, setStatus] = (0, import_react38.useState)("idle");
+  const [results, setResults] = (0, import_react38.useState)([]);
+  const [selectedValue, setSelectedValue] = (0, import_react38.useState)(null);
   const normalizedQuery = (isQueryControlled ? queryProp : uncontrolledQuery) ?? "";
   const trimmedQuery = normalizedQuery.trim();
-  const resultOptions = (0, import_react35.useMemo)(() => {
+  const resultOptions = (0, import_react38.useMemo)(() => {
     return results.map((item, index) => ({
       item,
       listBoxItem: {
@@ -6852,7 +7264,7 @@ function SearchBox({
       value: getItemId(item, index)
     }));
   }, [getItemDetails, getItemDisabled, getItemId, getItemText, results]);
-  const listBoxData = (0, import_react35.useMemo)(
+  const listBoxData = (0, import_react38.useMemo)(
     () => [
       {
         category: null,
@@ -6862,8 +7274,8 @@ function SearchBox({
     [resultOptions]
   );
   const popupRoot = typeof document === "undefined" ? null : resolveSearchBoxPortalRoot();
-  const [themePortalStyle, setThemePortalStyle] = (0, import_react35.useState)(() => void 0);
-  (0, import_react35.useEffect)(() => {
+  const [themePortalStyle, setThemePortalStyle] = (0, import_react38.useState)(() => void 0);
+  (0, import_react38.useEffect)(() => {
     if (disabled) {
       return;
     }
@@ -6895,7 +7307,7 @@ function SearchBox({
     popupRef,
     portalRoot: popupRoot
   });
-  (0, import_react35.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (disabled || !open) {
       return;
     }
@@ -6943,15 +7355,15 @@ function SearchBox({
   }
   function renderPopupContent() {
     if (status === "loading") {
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "nu-search-box__status", children: loadingText });
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "nu-search-box__status", children: loadingText });
     }
     if (status === "error") {
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "nu-search-box__status", children: errorText });
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "nu-search-box__status", children: errorText });
     }
     if (trimmedQuery.length < minQueryLength) {
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "nu-search-box__status", children: idleText });
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "nu-search-box__status", children: idleText });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "nu-search-box__listbox", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "nu-search-box__listbox", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       ListBox,
       {
         data: listBoxData,
@@ -6988,7 +7400,7 @@ function SearchBox({
         break;
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     "div",
     {
       ...props,
@@ -6996,10 +7408,10 @@ function SearchBox({
       ref: rootRef,
       style,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("label", { className: "nu-search-box__label", htmlFor: fieldId, id: labelId, children: renderMnemonicText(label) }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: "nu-search-box__slot", ref: fieldRef, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { "aria-hidden": "true", className: "nu-search-box__bracket", children: "[" }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "nu-search-box__input-shell", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("label", { className: "nu-search-box__label", htmlFor: fieldId, id: labelId, children: renderMnemonicText(label) }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "nu-search-box__slot", ref: fieldRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { "aria-hidden": "true", className: "nu-search-box__bracket", children: "[" }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "nu-search-box__input-shell", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             "input",
             {
               "aria-autocomplete": "list",
@@ -7024,11 +7436,11 @@ function SearchBox({
               value: normalizedQuery
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { "aria-hidden": "true", className: "nu-search-box__bracket", children: "]" })
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { "aria-hidden": "true", className: "nu-search-box__bracket", children: "]" })
         ] }),
-        hint ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "nu-search-box__hint", id: hintId, children: hint }) : null,
+        hint ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "nu-search-box__hint", id: hintId, children: hint }) : null,
         open && popupRoot ? (0, import_react_dom4.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             "div",
             {
               className: "nu-search-box__popup",
@@ -7046,8 +7458,8 @@ function SearchBox({
 }
 
 // src/components/SpinBox/SpinBox.tsx
-var import_react36 = require("react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_react39 = require("react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function clampSpinValue(value, min, max) {
   let nextValue = value;
   if (min !== void 0) {
@@ -7088,7 +7500,7 @@ function SpinBox({
   value,
   ...props
 }) {
-  const generatedId = (0, import_react36.useId)();
+  const generatedId = (0, import_react39.useId)();
   const fieldId = id ?? generatedId;
   const hintId = hint ? `${fieldId}-hint` : void 0;
   const isControlled = value !== void 0;
@@ -7097,9 +7509,9 @@ function SpinBox({
     min,
     max
   );
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react36.useState)(initialNumericValue);
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react39.useState)(initialNumericValue);
   const numericValue = isControlled ? clampSpinValue(value ?? initialNumericValue, min, max) : uncontrolledValue;
-  const [uncontrolledDraftValue, setUncontrolledDraftValue] = (0, import_react36.useState)(
+  const [uncontrolledDraftValue, setUncontrolledDraftValue] = (0, import_react39.useState)(
     () => formatSpinValue(initialNumericValue)
   );
   const draftValue = isControlled ? formatSpinValue(numericValue) : uncontrolledDraftValue;
@@ -7152,22 +7564,22 @@ function SpinBox({
     }
     onKeyDown?.(event);
   }
-  const decrementDisabled = (0, import_react36.useMemo)(
+  const decrementDisabled = (0, import_react39.useMemo)(
     () => disabled || min !== void 0 && numericValue <= min,
     [disabled, min, numericValue]
   );
-  const incrementDisabled = (0, import_react36.useMemo)(
+  const incrementDisabled = (0, import_react39.useMemo)(
     () => disabled || max !== void 0 && numericValue >= max,
     [disabled, max, numericValue]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "label",
     {
       className: cx("nu-spin-box", slotClassNames?.root, className),
       htmlFor: fieldId,
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "span",
           {
             className: cx("nu-spin-box__label", slotClassNames?.label),
@@ -7175,13 +7587,13 @@ function SpinBox({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
           "span",
           {
             className: cx("nu-spin-box__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -7190,12 +7602,12 @@ function SpinBox({
                   children: "["
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                 "span",
                 {
                   className: cx("nu-spin-box__input-shell", slotClassNames?.inputShell),
                   style: slotStyles?.inputShell,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                     "input",
                     {
                       ...props,
@@ -7214,7 +7626,7 @@ function SpinBox({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -7223,13 +7635,13 @@ function SpinBox({
                   children: "]"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
                 "span",
                 {
                   className: cx("nu-spin-box__controls", slotClassNames?.controls),
                   style: slotStyles?.controls,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                       "button",
                       {
                         className: cx("nu-spin-box__button", slotClassNames?.button),
@@ -7240,7 +7652,7 @@ function SpinBox({
                         children: "-"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                       "button",
                       {
                         className: cx("nu-spin-box__button", slotClassNames?.button),
@@ -7257,7 +7669,7 @@ function SpinBox({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        hint ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "span",
           {
             className: cx("nu-spin-box__hint", slotClassNames?.hint),
@@ -7272,9 +7684,9 @@ function SpinBox({
 }
 
 // src/components/Splitter/Splitter.tsx
-var import_react37 = require("react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
-function clamp3(value, min, max) {
+var import_react40 = require("react");
+var import_jsx_runtime54 = require("react/jsx-runtime");
+function clamp4(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
 function Splitter({
@@ -7304,26 +7716,26 @@ function Splitter({
     const parsedValue = Number(rawValue);
     return Number.isFinite(parsedValue) ? parsedValue : null;
   };
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react37.useState)(
-    clamp3(getSavedValue() ?? defaultValue, min, max)
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react40.useState)(
+    clamp4(getSavedValue() ?? defaultValue, min, max)
   );
-  const rootRef = (0, import_react37.useRef)(null);
-  const dragFrameRef = (0, import_react37.useRef)(null);
-  const dragValueRef = (0, import_react37.useRef)(null);
-  const activeValue = clamp3(
+  const rootRef = (0, import_react40.useRef)(null);
+  const dragFrameRef = (0, import_react40.useRef)(null);
+  const dragValueRef = (0, import_react40.useRef)(null);
+  const activeValue = clamp4(
     (isControlled ? value : uncontrolledValue) ?? defaultValue,
     min,
     max
   );
-  const firstPaneId = (0, import_react37.useId)();
-  const secondPaneId = (0, import_react37.useId)();
-  (0, import_react37.useEffect)(() => {
+  const firstPaneId = (0, import_react40.useId)();
+  const secondPaneId = (0, import_react40.useId)();
+  (0, import_react40.useEffect)(() => {
     if (!storageKey || typeof window === "undefined") {
       return;
     }
     window.localStorage.setItem(storageKey, String(activeValue));
   }, [activeValue, storageKey]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     return () => {
       if (dragFrameRef.current !== null) {
         window.cancelAnimationFrame(dragFrameRef.current);
@@ -7332,7 +7744,7 @@ function Splitter({
     };
   }, []);
   function commitValue(nextValue) {
-    const clampedValue = clamp3(nextValue, min, max);
+    const clampedValue = clamp4(nextValue, min, max);
     if (!isControlled) {
       setUncontrolledValue(clampedValue);
     }
@@ -7352,7 +7764,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;
@@ -7428,7 +7840,7 @@ function Splitter({
       commitValue(max);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
     "div",
     {
       ...props,
@@ -7440,8 +7852,8 @@ function Splitter({
         "--nu-splitter-value": `${activeValue * 100}%`
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "nu-splitter__pane", id: firstPaneId, children: first }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "nu-splitter__pane", id: firstPaneId, children: first }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           "div",
           {
             "aria-controls": `${firstPaneId} ${secondPaneId}`,
@@ -7454,7 +7866,7 @@ function Splitter({
             onPointerDown: handlePointerDown,
             role: "separator",
             tabIndex: 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
               "span",
               {
                 "aria-hidden": "true",
@@ -7464,16 +7876,16 @@ function Splitter({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "nu-splitter__pane", id: secondPaneId, children: second })
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "nu-splitter__pane", id: secondPaneId, children: second })
       ]
     }
   );
 }
 
 // src/components/TickBar/TickBar.tsx
-var import_react38 = require("react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
-function clamp4(value, min, max) {
+var import_react41 = require("react");
+var import_jsx_runtime55 = require("react/jsx-runtime");
+function clamp5(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
 function snapToStep(value, min, step) {
@@ -7506,23 +7918,23 @@ function TickBar({
   valueRenderer,
   ...props
 }) {
-  const generatedId = (0, import_react38.useId)();
+  const generatedId = (0, import_react41.useId)();
   const sliderId = id ?? generatedId;
   const hintId = hint ? `${sliderId}-hint` : void 0;
   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] = (0, import_react38.useState)(initialValue);
-  const [dragging, setDragging] = (0, import_react38.useState)(false);
-  const trackRef = (0, import_react38.useRef)(null);
-  const resolvedValue = isControlled ? clamp4(snapToStep(value ?? initialValue, min, safeStep), min, safeMax) : uncontrolledValue;
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react41.useState)(initialValue);
+  const [dragging, setDragging] = (0, import_react41.useState)(false);
+  const trackRef = (0, import_react41.useRef)(null);
+  const resolvedValue = isControlled ? clamp5(snapToStep(value ?? initialValue, min, safeStep), min, safeMax) : uncontrolledValue;
   const ratio = safeMax === min ? 0 : (resolvedValue - min) / (safeMax - min);
-  const derivedTickCount = (0, import_react38.useMemo)(() => {
+  const derivedTickCount = (0, import_react41.useMemo)(() => {
     if (tickCount !== void 0) {
       return Math.max(2, tickCount);
     }
@@ -7532,7 +7944,7 @@ function TickBar({
     );
   }, [min, safeMax, safeStep, tickCount]);
   const renderedValue = valueRenderer ? valueRenderer(resolvedValue, min, safeMax) : String(resolvedValue);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!dragging) {
       return;
     }
@@ -7543,7 +7955,7 @@ function TickBar({
     return () => window.removeEventListener("pointerup", cancelDrag);
   }, [dragging]);
   function commitValue(nextValue) {
-    const snappedValue = clamp4(
+    const snappedValue = clamp5(
       snapToStep(nextValue, min, safeStep),
       min,
       safeMax
@@ -7559,7 +7971,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) {
@@ -7608,7 +8020,7 @@ function TickBar({
     }
     onKeyDown?.(event);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     "div",
     {
       ...props,
@@ -7621,7 +8033,7 @@ function TickBar({
         slotStyles?.root
       ),
       children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        label ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           "span",
           {
             className: cx("nu-tick-bar__label", slotClassNames?.label),
@@ -7629,13 +8041,13 @@ function TickBar({
             children: renderMnemonicText(label)
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
           "div",
           {
             className: cx("nu-tick-bar__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
                 "div",
                 {
                   "aria-describedby": hintId,
@@ -7677,19 +8089,19 @@ function TickBar({
                   style: slotStyles?.track,
                   tabIndex: disabled ? -1 : 0,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                       "div",
                       {
                         className: cx("nu-tick-bar__rail", slotClassNames?.rail),
                         style: slotStyles?.rail
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                       "div",
                       {
                         className: cx("nu-tick-bar__ticks", slotClassNames?.ticks),
                         style: slotStyles?.ticks,
-                        children: Array.from({ length: derivedTickCount }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                        children: Array.from({ length: derivedTickCount }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                           "span",
                           {
                             "aria-hidden": "true",
@@ -7700,7 +8112,7 @@ function TickBar({
                         ))
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                       "div",
                       {
                         "aria-hidden": "true",
@@ -7718,7 +8130,7 @@ function TickBar({
                   ]
                 }
               ),
-              showValue ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              showValue ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                 "span",
                 {
                   className: cx("nu-tick-bar__value", slotClassNames?.value),
@@ -7729,7 +8141,7 @@ function TickBar({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        hint ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           "span",
           {
             className: cx("nu-tick-bar__hint", slotClassNames?.hint),
@@ -7744,7 +8156,7 @@ function TickBar({
 }
 
 // src/components/ToolBar/ToolBar.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function ToolBar({
   children,
   className,
@@ -7754,7 +8166,7 @@ function ToolBar({
   wrap = false,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "div",
     {
       ...props,
@@ -7773,7 +8185,7 @@ function ToolButton({
   slotStyles,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     CommandButton,
     {
       ...props,
@@ -7803,7 +8215,7 @@ function ToolDropButton({
   uncheckedShape,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     CommandButton,
     {
       ...props,
@@ -7829,7 +8241,7 @@ function ToolDropButton({
   );
 }
 function ToolSeparator({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "div",
     {
       ...props,
@@ -7845,7 +8257,7 @@ function ToolSeparator({ className, ...props }) {
 }
 
 // src/components/TreeView/TreeView.tsx
-var import_react40 = require("react");
+var import_react43 = require("react");
 
 // src/components/_shared/treeData.ts
 function collectExpandedTreeDataIds(items) {
@@ -7941,8 +8353,8 @@ function collectVisibleTreeItems(items, expandedIds, depth = 0, guideMask = [],
 }
 
 // src/components/TreeView/internals/TreeViewItem.tsx
-var import_react39 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_react42 = require("react");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function areTreeViewGuideArraysEqual(previousArray, nextArray) {
   if (previousArray.length !== nextArray.length) {
     return false;
@@ -8016,8 +8428,8 @@ function TreeViewItemInner({
     handleActivate();
     onToggleItemCheck?.(item, !isChecked);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "nu-tree-view__row", role: "none", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "nu-tree-view__row", role: "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
       "div",
       {
         "aria-checked": isCheckable ? isChecked : void 0,
@@ -8036,8 +8448,8 @@ function TreeViewItemInner({
         ref: (node) => registerItemRef(itemId, node),
         role: "treeitem",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { "aria-hidden": "true", className: "nu-tree-view__prefix", children: [
-            guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { "aria-hidden": "true", className: "nu-tree-view__prefix", children: [
+            guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               "span",
               {
                 className: "nu-tree-view__guide",
@@ -8048,7 +8460,7 @@ function TreeViewItemInner({
               },
               `${itemId}-guide-${guideIndex}`
             )),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
               "span",
               {
                 className: "nu-tree-view__lead",
@@ -8056,19 +8468,19 @@ function TreeViewItemInner({
                   "--nu-tree-view-origin-offset": originOffset
                 },
                 children: [
-                  depth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                  depth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                     "span",
                     {
                       className: "nu-tree-view__branch",
                       "data-branch": hasNextSibling ? "tee" : "elbow"
                     }
                   ) : null,
-                  hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                  hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                     "span",
                     {
                       className: "nu-tree-view__expander",
                       "data-connector": depth > 0 ? "lead" : void 0,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                         "button",
                         {
                           "aria-label": isExpanded ? "Collapse item" : "Expand item",
@@ -8076,7 +8488,7 @@ function TreeViewItemInner({
                           onClick: handleToggleExpanded,
                           tabIndex: -1,
                           type: "button",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                             NuGlyph,
                             {
                               name: isExpanded ? "tree-caret-down" : "tree-caret-right"
@@ -8085,7 +8497,7 @@ function TreeViewItemInner({
                         }
                       )
                     }
-                  ) : depth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                  ) : depth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                     "span",
                     {
                       className: "nu-tree-view__expander-placeholder",
@@ -8096,8 +8508,8 @@ function TreeViewItemInner({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "nu-tree-view__content", children: [
-            isCheckable ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "nu-tree-view__check-slot", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "nu-tree-view__content", children: [
+            isCheckable ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "nu-tree-view__check-slot", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               "button",
               {
                 "aria-label": isChecked ? "Uncheck item" : "Check item",
@@ -8105,12 +8517,12 @@ function TreeViewItemInner({
                 onClick: handleToggleChecked,
                 tabIndex: -1,
                 type: "button",
-                children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                   "span",
                   {
                     className: "nu-tree-view__check-box",
                     "data-unchecked-shape": uncheckedShape,
-                    children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                    children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                       NuGlyph,
                       {
                         className: "nu-tree-view__check-mark",
@@ -8121,14 +8533,14 @@ function TreeViewItemInner({
                 )
               }
             ) }) : null,
-            item.icon ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "nu-tree-view__icon", children: item.icon }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "nu-tree-view__title", children: item.title }),
-            item.hint ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "nu-tree-view__hint", children: item.hint }) : null
+            item.icon ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "nu-tree-view__icon", children: item.icon }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "nu-tree-view__title", children: item.title }),
+            item.hint ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "nu-tree-view__hint", children: item.hint }) : null
           ] })
         ]
       }
     ),
-    hasChildren && isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { role: "group", children: (item.children ?? []).map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    hasChildren && isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { role: "group", children: (item.children ?? []).map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       TreeViewItem,
       {
         depth: depth + 1,
@@ -8161,10 +8573,10 @@ function areTreeViewItemPropsEqual(previousProps, nextProps) {
     nextProps.guideOffsets
   ) && previousProps.hasNextSibling === nextProps.hasNextSibling && previousProps.item === nextProps.item && previousProps.onActivateItem === nextProps.onActivateItem && previousProps.onDoubleClickItem === nextProps.onDoubleClickItem && previousProps.onToggleItemCheck === nextProps.onToggleItemCheck && previousProps.onToggleItemExpanded === nextProps.onToggleItemExpanded && previousProps.originOffset === nextProps.originOffset && previousProps.registerItemRef === nextProps.registerItemRef && previousProps.treeId === nextProps.treeId && previousProps.uncheckedShape === nextProps.uncheckedShape;
 }
-var TreeViewItem = (0, import_react39.memo)(TreeViewItemInner, areTreeViewItemPropsEqual);
+var TreeViewItem = (0, import_react42.memo)(TreeViewItemInner, areTreeViewItemPropsEqual);
 
 // src/components/TreeView/TreeView.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function TreeViewInner({
   className,
   data,
@@ -8179,36 +8591,36 @@ function TreeViewInner({
   uncheckedShape = "box",
   ...props
 }, ref) {
-  const rootRef = (0, import_react40.useRef)(null);
-  const treeId = (0, import_react40.useId)();
-  const itemRefs = (0, import_react40.useRef)({});
+  const rootRef = (0, import_react43.useRef)(null);
+  const treeId = (0, import_react43.useId)();
+  const itemRefs = (0, import_react43.useRef)({});
   const isExpandedControlled = expandedIds !== void 0;
-  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = (0, import_react40.useState)(() => {
+  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = (0, import_react43.useState)(() => {
     const expandedFromData = collectExpandedTreeIds(data);
     if (!defaultExpandedIds?.length) {
       return expandedFromData;
     }
     return Array.from(/* @__PURE__ */ new Set([...expandedFromData, ...defaultExpandedIds]));
   });
-  const [uncontrolledSelectedId, setUncontrolledSelectedId] = (0, import_react40.useState)(null);
+  const [uncontrolledSelectedId, setUncontrolledSelectedId] = (0, import_react43.useState)(null);
   const resolvedExpandedIds = isExpandedControlled ? expandedIds : uncontrolledExpandedIds;
-  const expandedIdSet = (0, import_react40.useMemo)(
+  const expandedIdSet = (0, import_react43.useMemo)(
     () => new Set(resolvedExpandedIds),
     [resolvedExpandedIds]
   );
-  const visibleItems = (0, import_react40.useMemo)(
+  const visibleItems = (0, import_react43.useMemo)(
     () => collectVisibleTreeItems(data, expandedIdSet),
     [data, expandedIdSet]
   );
-  const selectableItems = (0, import_react40.useMemo)(
+  const selectableItems = (0, import_react43.useMemo)(
     () => 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] = (0, import_react40.useState)(resolvedSelectedId);
+  const [activeId, setActiveId] = (0, import_react43.useState)(resolvedSelectedId);
   const resolvedActiveId = activeId && selectableItems.some((entry) => entry.itemId === activeId) ? activeId : resolvedSelectedId;
-  (0, import_react40.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (!resolvedActiveId) {
       return;
     }
@@ -8216,13 +8628,13 @@ function TreeViewInner({
       block: "nearest"
     });
   }, [resolvedActiveId]);
-  const registerItemRef = (0, import_react40.useCallback)(
+  const registerItemRef = (0, import_react43.useCallback)(
     (itemId, node) => {
       itemRefs.current[itemId] = node;
     },
     []
   );
-  const setExpandedState = (0, import_react40.useCallback)(
+  const setExpandedState = (0, import_react43.useCallback)(
     (item, nextExpanded) => {
       const nextExpandedIds = nextExpanded ? Array.from(/* @__PURE__ */ new Set([...resolvedExpandedIds, item.id])) : resolvedExpandedIds.filter((expandedId) => expandedId !== item.id);
       if (!isExpandedControlled) {
@@ -8232,7 +8644,7 @@ function TreeViewInner({
     },
     [isExpandedControlled, onExpandedIdsChange, resolvedExpandedIds]
   );
-  const activateEntry = (0, import_react40.useCallback)(
+  const activateEntry = (0, import_react43.useCallback)(
     (item, itemId) => {
       if (item.disabled) {
         return;
@@ -8245,7 +8657,7 @@ function TreeViewInner({
     },
     [onItemSelect, selectedId]
   );
-  const activateResolvedItem = (0, import_react40.useCallback)(
+  const activateResolvedItem = (0, import_react43.useCallback)(
     (itemId) => {
       if (!itemId) {
         return;
@@ -8371,7 +8783,7 @@ function TreeViewInner({
         break;
     }
   }
-  (0, import_react40.useImperativeHandle)(
+  (0, import_react43.useImperativeHandle)(
     ref,
     () => ({
       activateItem(itemId) {
@@ -8415,7 +8827,7 @@ function TreeViewInner({
       setExpandedState
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     "div",
     {
       ...props,
@@ -8425,7 +8837,7 @@ function TreeViewInner({
       ref: rootRef,
       role: "tree",
       tabIndex: 0,
-      children: visibleItems.length > 0 ? data.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      children: visibleItems.length > 0 ? data.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         TreeViewItem,
         {
           depth: 0,
@@ -8445,14 +8857,14 @@ function TreeViewInner({
           uncheckedShape
         },
         item.id
-      )) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "nu-tree-view__empty", children: emptyText })
+      )) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "nu-tree-view__empty", children: emptyText })
     }
   );
 }
-var TreeView = (0, import_react40.forwardRef)(TreeViewInner);
+var TreeView = (0, import_react43.forwardRef)(TreeViewInner);
 
 // src/components/TreeListView/TreeListView.tsx
-var import_react42 = require("react");
+var import_react45 = require("react");
 
 // src/components/TreeListView/internals/helpers.ts
 function normalizeTreeListAlign(align, fallback) {
@@ -8541,12 +8953,12 @@ function renderTreeListCellValue(item, column) {
 }
 
 // src/components/TreeListView/internals/TreeListViewRow.tsx
-var import_react41 = require("react");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_react44 = require("react");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function renderTreeTitleContent(item) {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "nu-tree-list-view__title", children: item.title }),
-    item.hint ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "nu-tree-list-view__hint", children: item.hint }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "nu-tree-list-view__title", children: item.title }),
+    item.hint ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "nu-tree-list-view__hint", children: item.hint }) : null
   ] });
 }
 function renderReportCellContent(item, column, depth, rowIndex, getCellContent) {
@@ -8646,8 +9058,8 @@ function TreeListViewRowInner({
     handleActivate();
     onToggleItemCheck?.(item, !isChecked);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       "div",
       {
         "aria-disabled": item.disabled || void 0,
@@ -8670,7 +9082,7 @@ function TreeListViewRowInner({
           "--nu-tree-list-view-columns": templateColumns
         },
         children: columns.map(
-          (column, columnIndex) => column.id === treeColumnId ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+          (column, columnIndex) => column.id === treeColumnId ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
             "span",
             {
               className: [
@@ -8682,8 +9094,8 @@ function TreeListViewRowInner({
               "data-column-id": column.id,
               role: "gridcell",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { "aria-hidden": "true", className: "nu-tree-list-view__prefix", children: [
-                  guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { "aria-hidden": "true", className: "nu-tree-list-view__prefix", children: [
+                  guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                     "span",
                     {
                       className: "nu-tree-list-view__guide",
@@ -8694,7 +9106,7 @@ function TreeListViewRowInner({
                     },
                     `${itemId}-guide-${guideIndex}`
                   )),
-                  /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
                     "span",
                     {
                       className: "nu-tree-list-view__lead",
@@ -8702,19 +9114,19 @@ function TreeListViewRowInner({
                         "--nu-tree-list-view-origin-offset": originOffset
                       },
                       children: [
-                        depth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                        depth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                           "span",
                           {
                             className: "nu-tree-list-view__branch",
                             "data-branch": hasNextSibling ? "tee" : "elbow"
                           }
                         ) : null,
-                        hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                        hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                           "span",
                           {
                             className: "nu-tree-list-view__expander",
                             "data-connector": depth > 0 ? "lead" : void 0,
-                            children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                               "button",
                               {
                                 "aria-label": isExpanded ? "Collapse item" : "Expand item",
@@ -8722,7 +9134,7 @@ function TreeListViewRowInner({
                                 onClick: handleToggleExpanded,
                                 tabIndex: -1,
                                 type: "button",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                                children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                                   NuGlyph,
                                   {
                                     name: isExpanded ? "tree-caret-down" : "tree-caret-right"
@@ -8731,7 +9143,7 @@ function TreeListViewRowInner({
                               }
                             )
                           }
-                        ) : depth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                        ) : depth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                           "span",
                           {
                             className: "nu-tree-list-view__expander-placeholder",
@@ -8742,8 +9154,8 @@ function TreeListViewRowInner({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "nu-tree-list-view__tree-content", children: [
-                  isCheckable ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "nu-tree-list-view__check-slot", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "nu-tree-list-view__tree-content", children: [
+                  isCheckable ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "nu-tree-list-view__check-slot", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                     "button",
                     {
                       "aria-label": isChecked ? "Uncheck item" : "Check item",
@@ -8751,12 +9163,12 @@ function TreeListViewRowInner({
                       onClick: handleToggleChecked,
                       tabIndex: -1,
                       type: "button",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                         "span",
                         {
                           className: "nu-tree-list-view__check-box",
                           "data-unchecked-shape": uncheckedShape,
-                          children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                          children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                             NuGlyph,
                             {
                               className: "nu-tree-list-view__check-mark",
@@ -8767,13 +9179,13 @@ function TreeListViewRowInner({
                       )
                     }
                   ) }) : null,
-                  item.icon ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "nu-tree-list-view__icon", children: item.icon }) : null,
+                  item.icon ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "nu-tree-list-view__icon", children: item.icon }) : null,
                   renderTreeTitleContent(item)
                 ] })
               ]
             },
             column.id
-          ) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
             "span",
             {
               className: [
@@ -8796,7 +9208,7 @@ function TreeListViewRowInner({
         )
       }
     ),
-    hasChildren && isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { role: "rowgroup", children: (item.children ?? []).map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    hasChildren && isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { role: "rowgroup", children: (item.children ?? []).map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       TreeListViewRow,
       {
         activeItemId,
@@ -8834,13 +9246,13 @@ function areTreeListViewRowPropsEqual(previousProps, nextProps) {
     nextProps.guideOffsets
   ) && previousProps.hasNextSibling === nextProps.hasNextSibling && previousProps.item === nextProps.item && previousProps.onActivateItem === nextProps.onActivateItem && previousProps.onDoubleClickItem === nextProps.onDoubleClickItem && previousProps.onToggleItemCheck === nextProps.onToggleItemCheck && previousProps.onToggleItemExpanded === nextProps.onToggleItemExpanded && previousProps.originOffset === nextProps.originOffset && previousProps.registerItemRef === nextProps.registerItemRef && previousProps.rowIndexMap === nextProps.rowIndexMap && previousProps.templateColumns === nextProps.templateColumns && previousProps.treeColumnId === nextProps.treeColumnId && previousProps.treeId === nextProps.treeId && previousProps.uncheckedShape === nextProps.uncheckedShape;
 }
-var TreeListViewRow = (0, import_react41.memo)(
+var TreeListViewRow = (0, import_react44.memo)(
   TreeListViewRowInner,
   areTreeListViewRowPropsEqual
 );
 
 // src/components/TreeListView/TreeListView.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function TreeListViewInner({
   activeItemId: activeItemIdProp,
   checkedIds,
@@ -8862,42 +9274,42 @@ function TreeListViewInner({
   uncheckedShape = "box",
   ...props
 }, ref) {
-  const rootRef = (0, import_react42.useRef)(null);
-  const treeId = (0, import_react42.useId)();
-  const itemRefs = (0, import_react42.useRef)({});
-  const resizeFrameRef = (0, import_react42.useRef)(null);
-  const resizeStateRef = (0, import_react42.useRef)(null);
+  const rootRef = (0, import_react45.useRef)(null);
+  const treeId = (0, import_react45.useId)();
+  const itemRefs = (0, import_react45.useRef)({});
+  const resizeFrameRef = (0, import_react45.useRef)(null);
+  const resizeStateRef = (0, import_react45.useRef)(null);
   const isExpandedControlled = expandedIds !== void 0;
-  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = (0, import_react42.useState)(() => {
+  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = (0, import_react45.useState)(() => {
     const expandedFromData = collectExpandedTreeListIds(data);
     if (!defaultExpandedIds?.length) {
       return expandedFromData;
     }
     return Array.from(/* @__PURE__ */ new Set([...expandedFromData, ...defaultExpandedIds]));
   });
-  const [uncontrolledSelectedId, setUncontrolledSelectedId] = (0, import_react42.useState)(null);
-  const [autoColumnWidths, setAutoColumnWidths] = (0, import_react42.useState)({});
-  const [userColumnWidths, setUserColumnWidths] = (0, import_react42.useState)({});
+  const [uncontrolledSelectedId, setUncontrolledSelectedId] = (0, import_react45.useState)(null);
+  const [autoColumnWidths, setAutoColumnWidths] = (0, import_react45.useState)({});
+  const [userColumnWidths, setUserColumnWidths] = (0, import_react45.useState)({});
   const isActiveControlled = activeItemIdProp !== void 0;
   const resolvedExpandedIds = isExpandedControlled ? expandedIds : uncontrolledExpandedIds;
-  const expandedIdSet = (0, import_react42.useMemo)(
+  const expandedIdSet = (0, import_react45.useMemo)(
     () => new Set(resolvedExpandedIds),
     [resolvedExpandedIds]
   );
-  const visibleItems = (0, import_react42.useMemo)(
+  const visibleItems = (0, import_react45.useMemo)(
     () => collectVisibleTreeListItems(data, expandedIdSet),
     [data, expandedIdSet]
   );
-  const selectableItems = (0, import_react42.useMemo)(
+  const selectableItems = (0, import_react45.useMemo)(
     () => 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] = (0, import_react42.useState)(() => defaultActiveItemId ?? resolvedSelectedId);
+  const [uncontrolledActiveItemId, setUncontrolledActiveItemId] = (0, import_react45.useState)(() => defaultActiveItemId ?? resolvedSelectedId);
   const activeItemId = activeItemIdProp !== void 0 ? activeItemIdProp : uncontrolledActiveItemId;
   const resolvedActiveItemId = activeItemId && selectableItems.some((entry) => entry.itemId === activeItemId) ? activeItemId : resolvedSelectedId;
-  const minColumnWidthById = (0, import_react42.useMemo)(
+  const minColumnWidthById = (0, import_react45.useMemo)(
     () => Object.fromEntries(
       columns.map(
         (column) => [column.id, column.minWidth ?? 0]
@@ -8905,24 +9317,24 @@ function TreeListViewInner({
     ),
     [columns]
   );
-  const templateColumns = (0, import_react42.useMemo)(
+  const templateColumns = (0, import_react45.useMemo)(
     () => getTreeListTemplateColumns(columns, {
       autoColumnWidths,
       userColumnWidths
     }),
     [autoColumnWidths, columns, userColumnWidths]
   );
-  const treeColumnId = (0, import_react42.useMemo)(
+  const treeColumnId = (0, import_react45.useMemo)(
     () => getTreeListTreeColumnId(columns),
     [columns]
   );
-  const rowIndexMap = (0, import_react42.useMemo)(
+  const rowIndexMap = (0, import_react45.useMemo)(
     () => new Map(
       visibleItems.map((entry, index) => [entry.itemId, index])
     ),
     [visibleItems]
   );
-  (0, import_react42.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (!resolvedActiveItemId) {
       return;
     }
@@ -8930,21 +9342,21 @@ function TreeListViewInner({
       block: "nearest"
     });
   }, [resolvedActiveItemId]);
-  const registerItemRef = (0, import_react42.useCallback)(
+  const registerItemRef = (0, import_react45.useCallback)(
     (itemId, node) => {
       itemRefs.current[itemId] = node;
     },
     []
   );
-  const resolveCellContent = (0, import_react42.useCallback)(
+  const resolveCellContent = (0, import_react45.useCallback)(
     (...args) => getCellContent?.(...args),
     [getCellContent]
   );
-  const handleItemDoubleClick = (0, import_react42.useCallback)(
+  const handleItemDoubleClick = (0, import_react45.useCallback)(
     (item) => onItemDoubleClick?.(item),
     [onItemDoubleClick]
   );
-  (0, import_react42.useLayoutEffect)(() => {
+  (0, import_react45.useLayoutEffect)(() => {
     const rootNode = rootRef.current;
     if (!rootNode) {
       return;
@@ -8976,14 +9388,14 @@ function TreeListViewInner({
       return didChange ? nextWidths : currentWidths;
     });
   }, [columns, userColumnWidths, visibleItems]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     return () => {
       if (resizeFrameRef.current !== null) {
         window.cancelAnimationFrame(resizeFrameRef.current);
       }
     };
   }, []);
-  const setExpandedState = (0, import_react42.useCallback)(
+  const setExpandedState = (0, import_react45.useCallback)(
     (item, nextExpanded) => {
       const nextExpandedIds = nextExpanded ? Array.from(/* @__PURE__ */ new Set([...resolvedExpandedIds, item.id])) : resolvedExpandedIds.filter((expandedId) => expandedId !== item.id);
       if (!isExpandedControlled) {
@@ -8993,7 +9405,7 @@ function TreeListViewInner({
     },
     [isExpandedControlled, onExpandedIdsChange, resolvedExpandedIds]
   );
-  const updateActiveItem = (0, import_react42.useCallback)(
+  const updateActiveItem = (0, import_react45.useCallback)(
     (item) => {
       if (!isActiveControlled) {
         setUncontrolledActiveItemId(item.id);
@@ -9002,7 +9414,7 @@ function TreeListViewInner({
     },
     [isActiveControlled, onActiveItemChange]
   );
-  const activateEntry = (0, import_react42.useCallback)(
+  const activateEntry = (0, import_react45.useCallback)(
     (item, itemId) => {
       if (item.disabled) {
         return;
@@ -9015,7 +9427,7 @@ function TreeListViewInner({
     },
     [onItemSelect, selectedId, updateActiveItem]
   );
-  const activateResolvedItem = (0, import_react42.useCallback)(
+  const activateResolvedItem = (0, import_react45.useCallback)(
     (itemId) => {
       if (!itemId) {
         return;
@@ -9029,7 +9441,7 @@ function TreeListViewInner({
     },
     [activateEntry, selectableItems]
   );
-  const handleItemCheckChange = (0, import_react42.useCallback)(
+  const handleItemCheckChange = (0, import_react45.useCallback)(
     (item, checked) => {
       onItemCheckChange?.(item, checked);
     },
@@ -9099,7 +9511,7 @@ function TreeListViewInner({
   function isItemChecked(item) {
     return checkedIds ? checkedIds.includes(item.id) : item.checked === true;
   }
-  const toggleItemCheck = (0, import_react42.useCallback)(
+  const toggleItemCheck = (0, import_react45.useCallback)(
     (itemId) => {
       const item = findTreeListItemById(data, itemId);
       if (!item || item.disabled || item.checked === void 0 && checkedIds === void 0) {
@@ -9110,7 +9522,7 @@ function TreeListViewInner({
     },
     [checkedIds, data, onItemCheckChange]
   );
-  (0, import_react42.useImperativeHandle)(
+  (0, import_react45.useImperativeHandle)(
     ref,
     () => ({
       activateItem(itemId) {
@@ -9257,7 +9669,7 @@ function TreeListViewInner({
     window.addEventListener("pointermove", handleColumnResizeMove);
     window.addEventListener("pointerup", handleColumnResizeEnd);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     "div",
     {
       ...props,
@@ -9269,7 +9681,7 @@ function TreeListViewInner({
       role: "treegrid",
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           "div",
           {
             className: "nu-tree-list-view__header",
@@ -9277,7 +9689,7 @@ function TreeListViewInner({
             style: {
               "--nu-tree-list-view-columns": templateColumns
             },
-            children: columns.map((column, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+            children: columns.map((column, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
               "span",
               {
                 className: [
@@ -9288,8 +9700,8 @@ function TreeListViewInner({
                 "data-column-id": column.id,
                 role: "columnheader",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "nu-tree-list-view__header-label", children: renderMnemonicText(column.title) }),
-                  column.resizable !== false ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "nu-tree-list-view__header-label", children: renderMnemonicText(column.title) }),
+                  column.resizable !== false ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                     "button",
                     {
                       "aria-label": `Resize ${column.title} column`,
@@ -9305,7 +9717,7 @@ function TreeListViewInner({
             ))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "nu-tree-list-view__body", children: visibleItems.length > 0 ? data.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "nu-tree-list-view__body", children: visibleItems.length > 0 ? data.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           TreeListViewRow,
           {
             activeItemId: resolvedActiveItemId,
@@ -9332,15 +9744,15 @@ function TreeListViewInner({
             uncheckedShape
           },
           item.id
-        )) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "nu-tree-list-view__empty", children: emptyText }) })
+        )) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "nu-tree-list-view__empty", children: emptyText }) })
       ]
     }
   );
 }
-var TreeListView = (0, import_react42.forwardRef)(TreeListViewInner);
+var TreeListView = (0, import_react45.forwardRef)(TreeListViewInner);
 
 // src/theme/NuThemeProvider.tsx
-var import_react44 = require("react");
+var import_react47 = require("react");
 
 // src/theme/themes.ts
 var classicTheme = {
@@ -9487,11 +9899,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;
@@ -9570,10 +10019,10 @@ function getNuDesktopPatternStyle(mode) {
 }
 
 // src/theme/themeContext.ts
-var import_react43 = require("react");
-var NuThemeContext = (0, import_react43.createContext)(null);
+var import_react46 = require("react");
+var NuThemeContext = (0, import_react46.createContext)(null);
 function useNuTheme() {
-  const context = (0, import_react43.useContext)(NuThemeContext);
+  const context = (0, import_react46.useContext)(NuThemeContext);
   if (!context) {
     throw new Error("useNuTheme must be used within a NuThemeProvider.");
   }
@@ -9581,7 +10030,7 @@ function useNuTheme() {
 }
 
 // src/theme/NuThemeProvider.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function NuThemeProvider({
   children,
   className,
@@ -9599,18 +10048,18 @@ function NuThemeProvider({
   onThemeChange,
   theme
 }) {
-  const generatedId = (0, import_react44.useId)();
-  const [internalTheme, setInternalTheme] = (0, import_react44.useState)(defaultTheme);
-  const [internalDesktopPatternMode, setInternalDesktopPatternMode] = (0, import_react44.useState)(defaultDesktopPatternMode);
-  const [internalFontFamily, setInternalFontFamily] = (0, import_react44.useState)(defaultFontFamily);
-  const [internalFontSize, setInternalFontSize] = (0, import_react44.useState)(defaultFontSize);
+  const generatedId = (0, import_react47.useId)();
+  const [internalTheme, setInternalTheme] = (0, import_react47.useState)(defaultTheme);
+  const [internalDesktopPatternMode, setInternalDesktopPatternMode] = (0, import_react47.useState)(defaultDesktopPatternMode);
+  const [internalFontFamily, setInternalFontFamily] = (0, import_react47.useState)(defaultFontFamily);
+  const [internalFontSize, setInternalFontSize] = (0, import_react47.useState)(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 = (0, import_react44.useCallback)(
+  const handleThemeChange = (0, import_react47.useCallback)(
     (nextTheme) => {
       if (theme === void 0) {
         setInternalTheme(nextTheme);
@@ -9619,7 +10068,7 @@ function NuThemeProvider({
     },
     [theme, onThemeChange]
   );
-  const handleDesktopPatternModeChange = (0, import_react44.useCallback)(
+  const handleDesktopPatternModeChange = (0, import_react47.useCallback)(
     (nextDesktopPatternMode) => {
       if (desktopPatternMode === void 0) {
         setInternalDesktopPatternMode(nextDesktopPatternMode);
@@ -9628,7 +10077,7 @@ function NuThemeProvider({
     },
     [desktopPatternMode, onDesktopPatternModeChange]
   );
-  const handleFontFamilyChange = (0, import_react44.useCallback)(
+  const handleFontFamilyChange = (0, import_react47.useCallback)(
     (nextFontFamily) => {
       if (fontFamily === void 0) {
         setInternalFontFamily(nextFontFamily);
@@ -9637,7 +10086,7 @@ function NuThemeProvider({
     },
     [fontFamily, onFontFamilyChange]
   );
-  const handleFontSizeChange = (0, import_react44.useCallback)(
+  const handleFontSizeChange = (0, import_react47.useCallback)(
     (nextFontSize) => {
       if (fontSize === void 0) {
         setInternalFontSize(nextFontSize);
@@ -9646,7 +10095,7 @@ function NuThemeProvider({
     },
     [fontSize, onFontSizeChange]
   );
-  const contextValue = (0, import_react44.useMemo)(
+  const contextValue = (0, import_react47.useMemo)(
     () => ({
       desktopPatternMode: resolvedDesktopPatternMode,
       fontFamily: resolvedFontFamily,
@@ -9671,7 +10120,7 @@ function NuThemeProvider({
       handleThemeChange
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(NuThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(NuThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "div",
     {
       className: ["nu-theme-root", className].filter(Boolean).join(" "),
@@ -9685,7 +10134,7 @@ function NuThemeProvider({
         fontSize: `${resolvedFontSize}px`
       },
       children: [
-        crtGlitch ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(NuCrtGlitch, { ...typeof crtGlitch === "object" ? crtGlitch : {} }) : null,
+        crtGlitch ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(NuCrtGlitch, { ...typeof crtGlitch === "object" ? crtGlitch : {} }) : null,
         children
       ]
     }
@@ -9714,6 +10163,8 @@ function NuThemeProvider({
   NuCrtGlitch,
   NuDesktop,
   NuGlyph,
+  NuIconGrid,
+  NuIconProvider,
   NuThemeContext,
   NuThemeProvider,
   NuView,
@@ -9756,6 +10207,7 @@ function NuThemeProvider({
   resolveNuTheme,
   useAppHostMenu,
   useMainMenuState,
+  useNuIconManager,
   useNuTheme,
   useNuWindowManager,
   usePopupMenu,