@nice2dev/icons 1.3.14 → 1.3.16

package/dist/cjs/NiceIconPicker.js

@@ -1,453 +1,446 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var uiCore = require('@nice2dev/ui-core');
-var React = require('react');
-var iconHtml = require('./iconHtml.js');
-var actions = require('./icons/actions.js');
-var files = require('./icons/files.js');
-var media = require('./icons/media.js');
-var navigation = require('./icons/navigation.js');
-var ui = require('./icons/ui.js');
-var iconStack = require('./iconStack.js');
-var iconValue = require('./iconValue.js');
-var NiceIconStacker = require('./NiceIconStacker.js');
-
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const uiCore = require("@nice2dev/ui-core");
+const React = require("react");
+const iconHtml = require("./iconHtml.js");
+const actions = require("./icons/actions.js");
+const files = require("./icons/files.js");
+const media = require("./icons/media.js");
+const navigation = require("./icons/navigation.js");
+const ui = require("./icons/ui.js");
+const iconStack = require("./iconStack.js");
+const iconValue = require("./iconValue.js");
+const NiceIconStacker = require("./NiceIconStacker.js");
+;/* empty css                    */
 const MAX_HISTORY_ITEMS = 20;
-/** `useLayoutEffect` in the browser, `useEffect` on the server (no warning there). */
-const useIsoLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
-/* ─── Small icons: the package's own (until 1.2.0 these were pasted SVGs) ─── */
-const Chevron = () => jsxRuntime.jsx(navigation.NtdChevronDown, { size: 12, variant: "outline" });
-const SearchIcon = () => jsxRuntime.jsx(actions.NtdSearch, { size: 14, variant: "outline" });
-const StarIcon = ({ filled }) => (jsxRuntime.jsx(ui.NtdStar, { size: 12, variant: filled ? 'solid' : 'outline' }));
-const ClockIcon = () => jsxRuntime.jsx(ui.NtdClock, { size: 12, variant: "outline" });
-const CheckIcon = () => jsxRuntime.jsx(actions.NtdCheck, { size: 10, variant: "outline" });
+const useIsoLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+const Chevron = () => /* @__PURE__ */ jsxRuntime.jsx(navigation.NtdChevronDown, { size: 12, variant: "outline" });
+const SearchIcon = () => /* @__PURE__ */ jsxRuntime.jsx(actions.NtdSearch, { size: 14, variant: "outline" });
+const StarIcon = ({ filled }) => /* @__PURE__ */ jsxRuntime.jsx(ui.NtdStar, { size: 12, variant: filled ? "solid" : "outline" });
+const ClockIcon = () => /* @__PURE__ */ jsxRuntime.jsx(ui.NtdClock, { size: 12, variant: "outline" });
+const CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsx(actions.NtdCheck, { size: 10, variant: "outline" });
 const NO_NAMES = [];
 const NO_LAYERS = [];
-/** The accent the picker draws with: the page's background, white without a theme. */
-const PAGE_ACCENT = 'var(--nice-bg-primary, white)';
-/** An entry's name as shown: its label, else the export name without `Ntd`. */
-const entryLabel = (entry) => { var _a; return (_a = entry.label) !== null && _a !== void 0 ? _a : iconStack.iconDisplayName(entry.name); };
-/** The part of the window an element's popup can show in: the window, cut by every ancestor that clips or scrolls. */
+const PAGE_ACCENT = "var(--nice-bg-primary, white)";
+const entryLabel = (entry) => entry.label ?? iconStack.iconDisplayName(entry.name);
 function visibleBounds(el) {
-    const bounds = { top: 0, bottom: window.innerHeight, left: 0, right: window.innerWidth };
-    for (let p = el.parentElement; p && p !== document.body; p = p.parentElement) {
-        const style = window.getComputedStyle(p);
-        if (style.overflowX !== 'visible' || style.overflowY !== 'visible') {
-            const r = p.getBoundingClientRect();
-            bounds.top = Math.max(bounds.top, r.top);
-            bounds.bottom = Math.min(bounds.bottom, r.bottom);
-            bounds.left = Math.max(bounds.left, r.left);
-            bounds.right = Math.min(bounds.right, r.right);
-        }
+  const bounds = { top: 0, bottom: window.innerHeight, left: 0, right: window.innerWidth };
+  for (let p = el.parentElement; p && p !== document.body; p = p.parentElement) {
+    const style = window.getComputedStyle(p);
+    if (style.overflowX !== "visible" || style.overflowY !== "visible") {
+      const r = p.getBoundingClientRect();
+      bounds.top = Math.max(bounds.top, r.top);
+      bounds.bottom = Math.min(bounds.bottom, r.bottom);
+      bounds.left = Math.max(bounds.left, r.left);
+      bounds.right = Math.min(bounds.right, r.right);
     }
-    return bounds;
+  }
+  return bounds;
 }
-/* ─── localStorage helpers ─── */
 function loadFromStorage(key, fallback) {
-    if (typeof window === 'undefined') {
-        return fallback;
-    }
-    try {
-        const stored = localStorage.getItem(key);
-        return stored ? JSON.parse(stored) : fallback;
-    }
-    catch (_a) {
-        return fallback;
-    }
+  if (typeof window === "undefined") {
+    return fallback;
+  }
+  try {
+    const stored = localStorage.getItem(key);
+    return stored ? JSON.parse(stored) : fallback;
+  } catch {
+    return fallback;
+  }
 }
 function saveToStorage(key, value) {
-    if (typeof window === 'undefined') {
-        return;
-    }
-    try {
-        localStorage.setItem(key, JSON.stringify(value));
-    }
-    catch (_a) {
-        // Storage full or disabled
-    }
+  if (typeof window === "undefined") {
+    return;
+  }
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+  }
 }
-/* ═══════════════════════════════════════════════════════
-   NiceIconPicker Component
-   ═══════════════════════════════════════════════════════ */
-/**
- * A fully-featured icon picker dropdown component.
- *
- * Provides a trigger button that opens a searchable, categorized icon grid. The value binds both
- * ways — `value` / `defaultValue` + `onChange` (1.3.9) — as the icon's export name, a stack as
- * short code (`Folder(Star@tr)`), JSON or HTML (`valueFormat`). With `stackable` the panel gets
- * an "Overlays" tab where icons are stacked on the chosen one. Names show without `Ntd`; the
- * trigger shows the icon alone or the icon and its name (`displayMode`). Keyboard: arrows in the
- * grid, Escape to close.
- *
- * **Styling:** Uses CSS variables for theming (see `NiceIconPicker.css`).
- * Override `--ntd-picker-bg`, `--ntd-picker-accent`, etc. on a parent element.
- *
- * @example
- * ```tsx
- * import { NiceIconPicker } from '@nice2dev/icons';
- *
- * function IconField({ icons, value, onChange }) {
- *   // stores `NtdFolder`, or `Folder(Star@tr)` with a star stacked in its corner
- *   return <NiceIconPicker icons={icons} value={value} onChange={onChange} stackable />;
- * }
- * ```
- */
-const NiceIconPicker = /* @__PURE__ */ React.forwardRef(function NiceIconPicker({ icons, value: valueProp, defaultValue, values: valuesProp, defaultValues, onChange, onChangeMulti, valueFormat: valueFormatProp, stackable = false, displayMode = 'icon-name', optionDisplayMode = 'icon', name, 'aria-label': ariaLabel, id, testId, 'data-testid': dataTestId, multiSelect = false, maxSelections, placeholder, variant = 'solid', iconProps, gridIconSize = 'md', triggerIconSize = 'sm', categories: categoriesProp, className, disabled = false, clearable = true, virtualized = false, virtualizedItemCount = 100, showHistory = false, showFavorites = false, storageKeyPrefix = 'ntd-icon-picker', enableDragAndDrop = false, onDragStart, onDragEnd, }, ref) {
-    var _a;
+const NiceIconPicker = /* @__PURE__ */ React.forwardRef(
+  function NiceIconPicker2({
+    icons,
+    value: valueProp,
+    defaultValue,
+    values: valuesProp,
+    defaultValues,
+    onChange,
+    onChangeMulti,
+    valueFormat: valueFormatProp,
+    stackable = false,
+    displayMode = "icon-name",
+    optionDisplayMode = "icon",
+    name,
+    "aria-label": ariaLabel,
+    id,
+    testId,
+    "data-testid": dataTestId,
+    multiSelect = false,
+    maxSelections,
+    placeholder,
+    variant = "solid",
+    iconProps,
+    gridIconSize = "md",
+    triggerIconSize = "sm",
+    categories: categoriesProp,
+    className,
+    disabled = false,
+    clearable = true,
+    virtualized = false,
+    virtualizedItemCount = 100,
+    showHistory = false,
+    showFavorites = false,
+    storageKeyPrefix = "ntd-icon-picker",
+    enableDragAndDrop = false,
+    onDragStart,
+    onDragEnd
+  }, ref) {
     const tablistRef = React.useRef(null);
-    uiCore.useRovingFocus(tablistRef, { orientation: 'horizontal', wrap: true, activateOnMove: true });
+    uiCore.useRovingFocus(tablistRef, { orientation: "horizontal", wrap: true, activateOnMove: true });
     const viewsRef = React.useRef(null);
-    uiCore.useRovingFocus(viewsRef, { orientation: 'horizontal', activateOnMove: true });
+    uiCore.useRovingFocus(viewsRef, { orientation: "horizontal", activateOnMove: true });
     const { t } = uiCore.useNiceTranslation();
     const [isOpen, setIsOpen] = React.useState(false);
-    const [search, setSearch] = React.useState('');
+    const [search, setSearch] = React.useState("");
     const [activeCategory, setActiveCategory] = React.useState(null);
-    // the panel's view: the icon grid or the stack; `picking` = the grid chooses an icon to stack
-    const [view, setView] = React.useState('icons');
+    const [view, setView] = React.useState("icons");
     const [picking, setPicking] = React.useState(null);
     const panelId = React.useId();
-    const valueFormat = valueFormatProp !== null && valueFormatProp !== void 0 ? valueFormatProp : 'name';
+    const valueFormat = valueFormatProp ?? "name";
     const canStack = stackable && !multiSelect;
-    const drawProps = React.useMemo(() => ({ accentColor: PAGE_ACCENT, ...iconProps, variant }), [iconProps, variant]);
-    // Virtualization state
+    const drawProps = React.useMemo(
+      () => ({ accentColor: PAGE_ACCENT, ...iconProps, variant }),
+      [iconProps, variant]
+    );
     const [visibleRange, setVisibleRange] = React.useState({ start: 0, end: virtualizedItemCount });
     const gridWrapRef = React.useRef(null);
-    // Favorites & History state
     const favoritesKey = `${storageKeyPrefix}-favorites`;
     const historyKey = `${storageKeyPrefix}-history`;
     const [favorites, setFavorites] = React.useState(() => loadFromStorage(favoritesKey, []));
     const [history, setHistory] = React.useState(() => loadFromStorage(historyKey, []));
-    // The value binds both ways (1.3.9): controlled by `value`, or kept here from `defaultValue`.
     const [value, setValue] = uiCore.useControllableState({
-        value: valueProp,
-        defaultValue,
-        fallbackValue: null,
-        componentName: 'NiceIconPicker',
+      value: valueProp,
+      defaultValue,
+      fallbackValue: null,
+      componentName: "NiceIconPicker"
     });
     const [values, setValues] = uiCore.useControllableState({
-        value: valuesProp,
-        defaultValue: defaultValues,
-        fallbackValue: NO_NAMES,
-        componentName: 'NiceIconPicker',
+      value: valuesProp,
+      defaultValue: defaultValues,
+      fallbackValue: NO_NAMES,
+      componentName: "NiceIconPicker"
     });
     const rootRef = React.useRef(null);
     const searchInputRef = React.useRef(null);
     const stackerRef = React.useRef(null);
     const serializerRef = React.useRef(null);
-    /* ─── Icons by name: exact, or without the Ntd a stored value may lack ─── */
     const byName = React.useMemo(() => new Map(icons.map((e) => [e.name, e])), [icons]);
-    const entryOf = React.useCallback((n) => { var _a; return (n ? ((_a = byName.get(n)) !== null && _a !== void 0 ? _a : byName.get(`Ntd${n}`)) : undefined); }, [byName]);
-    const labelOf = React.useCallback((n) => {
+    const entryOf = React.useCallback(
+      (n) => n ? byName.get(n) ?? byName.get(`Ntd${n}`) : void 0,
+      [byName]
+    );
+    const labelOf = React.useCallback(
+      (n) => {
         const entry = entryOf(n);
         return entry ? entryLabel(entry) : iconStack.iconDisplayName(n);
-    }, [entryOf]);
-    const resolve = React.useCallback((n) => { var _a; return (_a = entryOf(n)) === null || _a === void 0 ? void 0 : _a.Component; }, [entryOf]);
-    /* ─── The single value as a stack — a plain icon is a stack of one ─── */
-    // The last value emitted with its layers: read back, the text would number the layers anew
-    // (it keeps no ids) and the stacker would lose the layer it has selected.
-    const [emitted, setEmitted] = React.useState(null);
+      },
+      [entryOf]
+    );
+    const resolve = React.useCallback(
+      (n) => entryOf(n)?.Component,
+      [entryOf]
+    );
+    const [emitted, setEmitted] = React.useState(
+      null
+    );
     const model = React.useMemo(() => {
-        if (!value) {
-            return NO_LAYERS;
-        }
-        if ((emitted === null || emitted === void 0 ? void 0 : emitted.value) === value) {
-            return emitted.layers;
-        }
-        // a name as is first: an older value may hold one of the code's signs
-        const exact = value.includes('<') ? undefined : entryOf(value);
-        if (exact) {
-            return [{ id: '1', icon: exact.name }];
-        }
-        const layers = iconValue.parseIconValue(value);
-        if (!layers || !entryOf(layers[0].icon)) {
-            return NO_LAYERS;
-        }
-        // the code names icons without `Ntd`; the stacker and the grid know them by entry name
-        return layers.map((l) => {
-            const entry = entryOf(l.icon);
-            return entry && entry.name !== l.icon ? { ...l, icon: entry.name } : l;
-        });
+      if (!value) {
+        return NO_LAYERS;
+      }
+      if (emitted?.value === value) {
+        return emitted.layers;
+      }
+      const exact = value.includes("<") ? void 0 : entryOf(value);
+      if (exact) {
+        return [{ id: "1", icon: exact.name }];
+      }
+      const layers = iconValue.parseIconValue(value);
+      if (!layers || !entryOf(layers[0].icon)) {
+        return NO_LAYERS;
+      }
+      return layers.map((l) => {
+        const entry = entryOf(l.icon);
+        return entry && entry.name !== l.icon ? { ...l, icon: entry.name } : l;
+      });
     }, [value, emitted, entryOf]);
-    // A stack waiting to be drawn into HTML: shown at once, emitted once drawn (below).
     const [pending, setPending] = React.useState(null);
-    const shown = pending !== null && pending !== void 0 ? pending : model;
+    const shown = pending ?? model;
     const base = shown[0];
-    /** The name a stack's code gives an icon: without `Ntd`, unless that is another icon's name. */
-    const shortName = React.useCallback((n) => {
+    const shortName = React.useCallback(
+      (n) => {
         const short = iconStack.iconDisplayName(n);
         return short !== n && !byName.has(short) ? short : n;
-    }, [byName]);
+      },
+      [byName]
+    );
     const onChangeRef = React.useRef(onChange);
     onChangeRef.current = onChange;
-    const emit = React.useCallback((next, layers) => {
-        var _a, _b, _c;
+    const emit = React.useCallback(
+      (next, layers) => {
         setEmitted(next === null ? null : { value: next, layers });
         setValue(next);
-        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, next, (_c = entryOf((_b = layers[0]) === null || _b === void 0 ? void 0 : _b.icon)) !== null && _c !== void 0 ? _c : null);
-    }, [setValue, entryOf]);
-    /** Sets the single value to a stack: written as `valueFormat` holds it, HTML once drawn. */
-    const commit = React.useCallback((layers) => {
+        onChangeRef.current?.(next, entryOf(layers[0]?.icon) ?? null);
+      },
+      [setValue, entryOf]
+    );
+    const commit = React.useCallback(
+      (layers) => {
         if (layers.length === 0) {
-            setPending(null);
-            emit(null, NO_LAYERS);
-        }
-        else if (valueFormat === 'html') {
-            setPending(layers);
-        }
-        else {
-            emit(iconValue.formatIconValue(layers, valueFormat, { shortName }), layers);
-        }
-    }, [valueFormat, emit, shortName]);
-    // The HTML is the icon as drawn: the hidden copy below renders the pending stack, and its
-    // markup — ids renamed after the drawing — is the new value, emitted before the paint.
+          setPending(null);
+          emit(null, NO_LAYERS);
+        } else if (valueFormat === "html") {
+          setPending(layers);
+        } else {
+          emit(iconValue.formatIconValue(layers, valueFormat, { shortName }), layers);
+        }
+      },
+      [valueFormat, emit, shortName]
+    );
     useIsoLayoutEffect(() => {
-        var _a;
-        if (!pending) {
-            return;
-        }
-        const svg = (_a = serializerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
-        setPending(null);
-        if (svg) {
-            emit(iconHtml.scopeIconHtmlIds(svg.outerHTML), pending);
-        }
+      if (!pending) {
+        return;
+      }
+      const svg = serializerRef.current?.querySelector("svg");
+      setPending(null);
+      if (svg) {
+        emit(iconHtml.scopeIconHtmlIds(svg.outerHTML), pending);
+      }
     }, [pending, emit]);
-    const selectedValues = React.useMemo(() => (multiSelect ? values : base ? [base.icon] : NO_NAMES), [multiSelect, values, base]);
-    /* ─── Favorites helpers ─── */
-    const addFavorite = React.useCallback((favorite) => {
+    const selectedValues = React.useMemo(
+      () => multiSelect ? values : base ? [base.icon] : NO_NAMES,
+      [multiSelect, values, base]
+    );
+    const addFavorite = React.useCallback(
+      (favorite) => {
         setFavorites((prev) => {
-            if (prev.includes(favorite)) {
-                return prev;
-            }
-            const next = [...prev, favorite];
-            saveToStorage(favoritesKey, next);
-            return next;
+          if (prev.includes(favorite)) {
+            return prev;
+          }
+          const next = [...prev, favorite];
+          saveToStorage(favoritesKey, next);
+          return next;
         });
-    }, [favoritesKey]);
-    const removeFavorite = React.useCallback((favorite) => {
+      },
+      [favoritesKey]
+    );
+    const removeFavorite = React.useCallback(
+      (favorite) => {
         setFavorites((prev) => {
-            const next = prev.filter((n) => n !== favorite);
-            saveToStorage(favoritesKey, next);
-            return next;
+          const next = prev.filter((n) => n !== favorite);
+          saveToStorage(favoritesKey, next);
+          return next;
         });
-    }, [favoritesKey]);
-    const toggleFavorite = React.useCallback((favorite) => {
+      },
+      [favoritesKey]
+    );
+    const toggleFavorite = React.useCallback(
+      (favorite) => {
         if (favorites.includes(favorite)) {
-            removeFavorite(favorite);
-        }
-        else {
-            addFavorite(favorite);
+          removeFavorite(favorite);
+        } else {
+          addFavorite(favorite);
         }
-    }, [favorites, addFavorite, removeFavorite]);
+      },
+      [favorites, addFavorite, removeFavorite]
+    );
     const clearFavorites = React.useCallback(() => {
-        setFavorites([]);
-        saveToStorage(favoritesKey, []);
+      setFavorites([]);
+      saveToStorage(favoritesKey, []);
     }, [favoritesKey]);
-    /* ─── History helpers ─── */
-    const addToHistory = React.useCallback((used) => {
+    const addToHistory = React.useCallback(
+      (used) => {
         setHistory((prev) => {
-            const filtered = prev.filter((n) => n !== used);
-            const next = [used, ...filtered].slice(0, MAX_HISTORY_ITEMS);
-            saveToStorage(historyKey, next);
-            return next;
+          const filtered2 = prev.filter((n) => n !== used);
+          const next = [used, ...filtered2].slice(0, MAX_HISTORY_ITEMS);
+          saveToStorage(historyKey, next);
+          return next;
         });
-    }, [historyKey]);
+      },
+      [historyKey]
+    );
     const clearHistory = React.useCallback(() => {
-        setHistory([]);
-        saveToStorage(historyKey, []);
+      setHistory([]);
+      saveToStorage(historyKey, []);
     }, [historyKey]);
-    /* ─── Imperative handle ─── */
     React.useImperativeHandle(ref, () => ({
-        open: () => setIsOpen(true),
-        close: () => setIsOpen(false),
-        toggle: () => setIsOpen((o) => !o),
-        getFavorites: () => favorites,
-        addFavorite,
-        removeFavorite,
-        toggleFavorite,
-        clearFavorites,
-        getHistory: () => history,
-        clearHistory,
+      open: () => setIsOpen(true),
+      close: () => setIsOpen(false),
+      toggle: () => setIsOpen((o) => !o),
+      getFavorites: () => favorites,
+      addFavorite,
+      removeFavorite,
+      toggleFavorite,
+      clearFavorites,
+      getHistory: () => history,
+      clearHistory
     }));
-    /* ─── Derive categories ─── */
     const allCategories = React.useMemo(() => {
-        if (categoriesProp) {
-            return categoriesProp;
-        }
-        const seen = new Set();
-        const result = [];
-        for (const icon of icons) {
-            if (!seen.has(icon.category)) {
-                seen.add(icon.category);
-                result.push(icon.category);
-            }
-        }
-        return result;
+      if (categoriesProp) {
+        return categoriesProp;
+      }
+      const seen = /* @__PURE__ */ new Set();
+      const result = [];
+      for (const icon of icons) {
+        if (!seen.has(icon.category)) {
+          seen.add(icon.category);
+          result.push(icon.category);
+        }
+      }
+      return result;
     }, [icons, categoriesProp]);
-    /* ─── Filter icons: by the name shown, the export name or the category ─── */
     const filtered = React.useMemo(() => {
-        let items = icons;
-        const q = search.trim().toLowerCase();
-        if (q) {
-            items = items.filter((i) => entryLabel(i).toLowerCase().includes(q) ||
-                i.name.toLowerCase().includes(q) ||
-                i.category.toLowerCase().includes(q));
-        }
-        if (activeCategory === '__favorites__') {
-            items = items.filter((i) => favorites.includes(i.name));
-        }
-        else if (activeCategory === '__history__') {
-            const historySet = new Set(history);
-            items = items.filter((i) => historySet.has(i.name));
-            // Sort by history order
-            items.sort((a, b) => history.indexOf(a.name) - history.indexOf(b.name));
-        }
-        else if (activeCategory) {
-            items = items.filter((i) => i.category === activeCategory);
-        }
-        return items;
+      let items = icons;
+      const q = search.trim().toLowerCase();
+      if (q) {
+        items = items.filter(
+          (i) => entryLabel(i).toLowerCase().includes(q) || i.name.toLowerCase().includes(q) || i.category.toLowerCase().includes(q)
+        );
+      }
+      if (activeCategory === "__favorites__") {
+        items = items.filter((i) => favorites.includes(i.name));
+      } else if (activeCategory === "__history__") {
+        const historySet = new Set(history);
+        items = items.filter((i) => historySet.has(i.name));
+        items.sort((a, b) => history.indexOf(a.name) - history.indexOf(b.name));
+      } else if (activeCategory) {
+        items = items.filter((i) => i.category === activeCategory);
+      }
+      return items;
     }, [icons, search, activeCategory, favorites, history]);
-    /* ─── Virtualized items ─── */
     const virtualizedFiltered = React.useMemo(() => {
-        if (!virtualized) {
-            return filtered;
-        }
-        return filtered.slice(visibleRange.start, visibleRange.end);
+      if (!virtualized) {
+        return filtered;
+      }
+      return filtered.slice(visibleRange.start, visibleRange.end);
     }, [filtered, virtualized, visibleRange]);
-    /* ─── Group by category ─── */
     const grouped = React.useMemo(() => {
-        const items = virtualized ? virtualizedFiltered : filtered;
-        const map = new Map();
-        for (const icon of items) {
-            const list = map.get(icon.category);
-            if (list) {
-                list.push(icon);
-            }
-            else {
-                map.set(icon.category, [icon]);
-            }
-        }
-        return map;
+      const items = virtualized ? virtualizedFiltered : filtered;
+      const map = /* @__PURE__ */ new Map();
+      for (const icon of items) {
+        const list = map.get(icon.category);
+        if (list) {
+          list.push(icon);
+        } else {
+          map.set(icon.category, [icon]);
+        }
+      }
+      return map;
     }, [filtered, virtualized, virtualizedFiltered]);
-    /* ─── Selected entries (multi-select) ─── */
-    const selectedEntries = React.useMemo(() => values.map((v) => entryOf(v)).filter((e) => e !== undefined), [values, entryOf]);
-    /* ─── Click outside ─── */
+    const selectedEntries = React.useMemo(
+      () => values.map((v) => entryOf(v)).filter((e) => e !== void 0),
+      [values, entryOf]
+    );
     React.useEffect(() => {
-        if (!isOpen) {
-            return;
-        }
-        function onClickOutside(e) {
-            if (rootRef.current && !rootRef.current.contains(e.target)) {
-                setIsOpen(false);
-            }
-        }
-        document.addEventListener('mousedown', onClickOutside);
-        return () => document.removeEventListener('mousedown', onClickOutside);
+      if (!isOpen) {
+        return;
+      }
+      function onClickOutside(e) {
+        if (rootRef.current && !rootRef.current.contains(e.target)) {
+          setIsOpen(false);
+        }
+      }
+      document.addEventListener("mousedown", onClickOutside);
+      return () => document.removeEventListener("mousedown", onClickOutside);
     }, [isOpen]);
-    /* ─── Reset on close ─── */
     React.useEffect(() => {
-        if (!isOpen) {
-            setSearch('');
-            setActiveCategory(null);
-            setView('icons');
-            setPicking(null);
-            setVisibleRange({ start: 0, end: virtualizedItemCount });
-        }
+      if (!isOpen) {
+        setSearch("");
+        setActiveCategory(null);
+        setView("icons");
+        setPicking(null);
+        setVisibleRange({ start: 0, end: virtualizedItemCount });
+      }
     }, [isOpen, virtualizedItemCount]);
-    /* ─── Keyboard and pad (1.3.0) ─── */
-    // The panel is a dialog on the overlay stack: focus on the search field when it opens, Escape
-    // / B close only it (a document listener before) and focus returns to the trigger. The icon
-    // grid is an APG listbox moving in two dimensions — the cells were reachable by Tab only.
-    // While the grid picks an icon to stack, Escape goes back to the stack instead (1.3.9).
     const dropdownRef = React.useRef(null);
     uiCore.useOverlayFocus(dropdownRef, {
-        open: isOpen,
-        modal: false,
-        initialFocus: searchInputRef,
-        onClose: () => (picking ? setPicking(null) : setIsOpen(false)),
+      open: isOpen,
+      modal: false,
+      initialFocus: searchInputRef,
+      onClose: () => picking ? setPicking(null) : setIsOpen(false)
     });
-    uiCore.useRovingFocus(gridWrapRef, { orientation: 'grid', itemSelector: '.ntd-picker-cell' });
-    // into the grid to pick an icon to stack: focus the search; back: the layer it went into
+    uiCore.useRovingFocus(gridWrapRef, { orientation: "grid", itemSelector: ".ntd-picker-cell" });
     const wasPicking = React.useRef(false);
     React.useEffect(() => {
-        var _a, _b, _c;
-        if (picking) {
-            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        else if (wasPicking.current) {
-            (_c = (_b = dropdownRef.current) === null || _b === void 0 ? void 0 : _b.querySelector('.nice-icon-stacker__layer--selected .nice-icon-stacker__layer-select')) === null || _c === void 0 ? void 0 : _c.focus();
-        }
-        wasPicking.current = !!picking;
+      if (picking) {
+        searchInputRef.current?.focus();
+      } else if (wasPicking.current) {
+        dropdownRef.current?.querySelector(
+          ".nice-icon-stacker__layer--selected .nice-icon-stacker__layer-select"
+        )?.focus();
+      }
+      wasPicking.current = !!picking;
     }, [picking]);
-    /* ─── Virtualization scroll handler ─── */
     React.useEffect(() => {
-        if (!virtualized || !isOpen || !gridWrapRef.current) {
-            return;
-        }
-        const handleScroll = () => {
-            const el = gridWrapRef.current;
-            if (!el) {
-                return;
-            }
-            const scrollTop = el.scrollTop;
-            const itemHeight = 48; // Approximate cell height
-            const itemsPerRow = 6; // Approximate items per row
-            const rowHeight = itemHeight;
-            const visibleRows = Math.ceil(el.clientHeight / rowHeight);
-            const startRow = Math.floor(scrollTop / rowHeight);
-            const buffer = 2; // Extra rows to render
-            const start = Math.max(0, (startRow - buffer) * itemsPerRow);
-            const end = Math.min(filtered.length, (startRow + visibleRows + buffer) * itemsPerRow);
-            setVisibleRange({ start, end });
-        };
-        const el = gridWrapRef.current;
-        el.addEventListener('scroll', handleScroll, { passive: true });
-        return () => el.removeEventListener('scroll', handleScroll);
+      if (!virtualized || !isOpen || !gridWrapRef.current) {
+        return;
+      }
+      const handleScroll = () => {
+        const el2 = gridWrapRef.current;
+        if (!el2) {
+          return;
+        }
+        const scrollTop = el2.scrollTop;
+        const itemHeight = 48;
+        const itemsPerRow = 6;
+        const rowHeight = itemHeight;
+        const visibleRows = Math.ceil(el2.clientHeight / rowHeight);
+        const startRow = Math.floor(scrollTop / rowHeight);
+        const buffer = 2;
+        const start = Math.max(0, (startRow - buffer) * itemsPerRow);
+        const end = Math.min(filtered.length, (startRow + visibleRows + buffer) * itemsPerRow);
+        setVisibleRange({ start, end });
+      };
+      const el = gridWrapRef.current;
+      el.addEventListener("scroll", handleScroll, { passive: true });
+      return () => el.removeEventListener("scroll", handleScroll);
     }, [virtualized, isOpen, filtered.length]);
-    /* ─── Handlers ─── */
-    const handleSelect = React.useCallback((entry) => {
-        var _a;
-        // an icon to stack: into the layer the stacker has selected, then back to the stack
+    const handleSelect = React.useCallback(
+      (entry) => {
         if (picking) {
-            (_a = stackerRef.current) === null || _a === void 0 ? void 0 : _a.add({ icon: entry.name });
-            setPicking(null);
-            setSearch('');
-            return;
+          stackerRef.current?.add({ icon: entry.name });
+          setPicking(null);
+          setSearch("");
+          return;
         }
-        // Add to history
         if (showHistory) {
-            addToHistory(entry.name);
+          addToHistory(entry.name);
         }
         if (multiSelect) {
-            const isSelected = values.includes(entry.name);
-            let newValues;
-            if (isSelected) {
-                newValues = values.filter((v) => v !== entry.name);
-            }
-            else {
-                if (maxSelections && values.length >= maxSelections) {
-                    return; // Max selections reached
-                }
-                newValues = [...values, entry.name];
+          const isSelected = values.includes(entry.name);
+          let newValues;
+          if (isSelected) {
+            newValues = values.filter((v) => v !== entry.name);
+          } else {
+            if (maxSelections && values.length >= maxSelections) {
+              return;
             }
-            setValues(newValues);
-            if (onChangeMulti) {
-                const entries = newValues
-                    .map((v) => entryOf(v))
-                    .filter((e) => e !== undefined);
-                onChangeMulti(newValues, entries);
-            }
-            // Don't close in multi-select mode
-        }
-        else {
-            // the HTML records the variant it was drawn in; swapping the icon keeps its stack
-            const own = valueFormat === 'html' ? { variant } : {};
-            commit(canStack && base
-                ? [{ ...base, icon: entry.name, ...own }, ...shown.slice(1)]
-                : [{ id: '1', icon: entry.name, ...own }]);
-            setIsOpen(false);
-        }
-    }, [
+            newValues = [...values, entry.name];
+          }
+          setValues(newValues);
+          if (onChangeMulti) {
+            const entries = newValues.map((v) => entryOf(v)).filter((e) => e !== void 0);
+            onChangeMulti(newValues, entries);
+          }
+        } else {
+          const own = valueFormat === "html" ? { variant } : {};
+          commit(
+            canStack && base ? [{ ...base, icon: entry.name, ...own }, ...shown.slice(1)] : [{ id: "1", icon: entry.name, ...own }]
+          );
+          setIsOpen(false);
+        }
+      },
+      [
         picking,
         variant,
         multiSelect,
@@ -462,171 +455,458 @@ const NiceIconPicker = /* @__PURE__ */ React.forwardRef(function NiceIconPicker(
         canStack,
         base,
         shown,
-        commit,
-    ]);
-    const handleClear = React.useCallback((e) => {
+        commit
+      ]
+    );
+    const handleClear = React.useCallback(
+      (e) => {
         e.stopPropagation();
         if (multiSelect) {
-            setValues(NO_NAMES);
-            onChangeMulti === null || onChangeMulti === void 0 ? void 0 : onChangeMulti([], []);
-        }
-        else {
-            commit(NO_LAYERS);
-            setView('icons');
-        }
-    }, [multiSelect, setValues, onChangeMulti, commit]);
+          setValues(NO_NAMES);
+          onChangeMulti?.([], []);
+        } else {
+          commit(NO_LAYERS);
+          setView("icons");
+        }
+      },
+      [multiSelect, setValues, onChangeMulti, commit]
+    );
     const handleToggle = React.useCallback(() => {
-        if (!disabled) {
-            setIsOpen((o) => !o);
-        }
+      if (!disabled) {
+        setIsOpen((o) => !o);
+      }
     }, [disabled]);
-    const handleFavoriteClick = React.useCallback((e, favorite) => {
+    const handleFavoriteClick = React.useCallback(
+      (e, favorite) => {
         e.stopPropagation();
         toggleFavorite(favorite);
-    }, [toggleFavorite]);
-    /* ─── Drag & Drop handlers ─── */
-    const handleDragStart = React.useCallback((entry, e) => {
+      },
+      [toggleFavorite]
+    );
+    const handleDragStart = React.useCallback(
+      (entry, e) => {
         if (!enableDragAndDrop) {
-            return;
+          return;
         }
-        // Set various data formats for maximum compatibility
         const readName = entryLabel(entry);
-        // Plain text - icon name
-        e.dataTransfer.setData('text/plain', readName);
-        // JSON data with full icon info
+        e.dataTransfer.setData("text/plain", readName);
         const iconData = {
-            name: entry.name,
-            readableName: readName,
-            category: entry.category,
-            variant,
+          name: entry.name,
+          readableName: readName,
+          category: entry.category,
+          variant
         };
-        e.dataTransfer.setData('application/json', JSON.stringify(iconData));
-        e.dataTransfer.setData('text/x-ntd-icon', JSON.stringify(iconData));
-        // The cell's own drawing as an image
+        e.dataTransfer.setData("application/json", JSON.stringify(iconData));
+        e.dataTransfer.setData("text/x-ntd-icon", JSON.stringify(iconData));
         try {
-            const svgElement = e.currentTarget.querySelector('svg');
-            if (svgElement) {
-                const svgClone = svgElement.cloneNode(true);
-                svgClone.setAttribute('width', '64');
-                svgClone.setAttribute('height', '64');
-                const svgString = new XMLSerializer().serializeToString(svgClone);
-                const svgBlob = new Blob([svgString], { type: 'image/svg+xml' });
-                e.dataTransfer.setData('text/html', `<img src="data:image/svg+xml;base64,${btoa(svgString)}" alt="${readName}" />`);
-                // Create drag image
-                const img = new Image(64, 64);
-                img.src = URL.createObjectURL(svgBlob);
-                e.dataTransfer.setDragImage(img, 32, 32);
-            }
-        }
-        catch (_a) {
-            // Fallback - use default drag image
-        }
-        e.dataTransfer.effectAllowed = 'copy';
-        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(entry, e);
-    }, [enableDragAndDrop, variant, onDragStart]);
-    const handleDragEnd = React.useCallback((entry, e) => {
-        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(entry, e);
-    }, [onDragEnd]);
+          const svgElement = e.currentTarget.querySelector("svg");
+          if (svgElement) {
+            const svgClone = svgElement.cloneNode(true);
+            svgClone.setAttribute("width", "64");
+            svgClone.setAttribute("height", "64");
+            const svgString = new XMLSerializer().serializeToString(svgClone);
+            const svgBlob = new Blob([svgString], { type: "image/svg+xml" });
+            e.dataTransfer.setData(
+              "text/html",
+              `<img src="data:image/svg+xml;base64,${btoa(svgString)}" alt="${readName}" />`
+            );
+            const img = new Image(64, 64);
+            img.src = URL.createObjectURL(svgBlob);
+            e.dataTransfer.setDragImage(img, 32, 32);
+          }
+        } catch {
+        }
+        e.dataTransfer.effectAllowed = "copy";
+        onDragStart?.(entry, e);
+      },
+      [enableDragAndDrop, variant, onDragStart]
+    );
+    const handleDragEnd = React.useCallback(
+      (entry, e) => {
+        onDragEnd?.(entry, e);
+      },
+      [onDragEnd]
+    );
     const triggerLabel = React.useMemo(() => {
-        if (multiSelect) {
-            if (selectedEntries.length === 1) {
-                return entryLabel(selectedEntries[0]);
-            }
-            if (selectedEntries.length > 1) {
-                return t('iconPicker.iconsSelected', '{count} icons selected').replace('{count}', String(selectedEntries.length));
-            }
-        }
-        else if (base) {
-            return labelOf(base.icon);
-        }
-        return placeholder !== null && placeholder !== void 0 ? placeholder : t('iconPicker.selectIcon', 'Select icon…');
+      if (multiSelect) {
+        if (selectedEntries.length === 1) {
+          return entryLabel(selectedEntries[0]);
+        }
+        if (selectedEntries.length > 1) {
+          return t("iconPicker.iconsSelected", "{count} icons selected").replace(
+            "{count}",
+            String(selectedEntries.length)
+          );
+        }
+      } else if (base) {
+        return labelOf(base.icon);
+      }
+      return placeholder ?? t("iconPicker.selectIcon", "Select icon…");
     }, [multiSelect, selectedEntries, base, labelOf, placeholder, t]);
     const hasSelection = multiSelect ? selectedEntries.length > 0 : !!base;
-    const iconOnly = displayMode === 'icon';
-    // the field's label first, then what is chosen — the icon-only trigger has no text of its own
-    const triggerName = ariaLabel
-        ? `${ariaLabel}: ${triggerLabel}`
-        : iconOnly
-            ? triggerLabel
-            : undefined;
+    const iconOnly = displayMode === "icon";
+    const triggerName = ariaLabel ? `${ariaLabel}: ${triggerLabel}` : iconOnly ? triggerLabel : void 0;
     const overlays = Math.max(0, shown.length - 1);
-    const showGrid = view === 'icons' || !!picking;
-    // Where the panel opens (1.3.9): above the trigger when there is more room there, against its
-    // right edge near the window's, never taller than the room it has — the stack view is tall.
-    // The room is what the window and every clipping or scrolling ancestor leave visible.
+    const showGrid = view === "icons" || !!picking;
     const [placement, setPlacement] = React.useState({
-        up: false,
-        end: false,
+      up: false,
+      end: false
     });
     useIsoLayoutEffect(() => {
-        const root = rootRef.current;
-        if (!isOpen || !root || typeof window === 'undefined') {
-            return;
-        }
-        const r = root.getBoundingClientRect();
-        const bounds = visibleBounds(root);
-        const want = showGrid ? 460 : 620;
-        const below = bounds.bottom - r.bottom - 12;
-        const above = r.top - bounds.top - 12;
-        const up = below < want && above > below;
-        const room = up ? above : below;
-        setPlacement({
-            up,
-            end: r.left + 380 > bounds.right - 8 && r.right - bounds.left >= 380,
-            maxHeight: room < want ? Math.max(240, Math.floor(room)) : undefined,
-        });
+      const root = rootRef.current;
+      if (!isOpen || !root || typeof window === "undefined") {
+        return;
+      }
+      const r = root.getBoundingClientRect();
+      const bounds = visibleBounds(root);
+      const want = showGrid ? 460 : 620;
+      const below = bounds.bottom - r.bottom - 12;
+      const above = r.top - bounds.top - 12;
+      const up = below < want && above > below;
+      const room = up ? above : below;
+      setPlacement({
+        up,
+        end: r.left + 380 > bounds.right - 8 && r.right - bounds.left >= 380,
+        maxHeight: room < want ? Math.max(240, Math.floor(room)) : void 0
+      });
     }, [isOpen, showGrid]);
-    const pickingInto = picking ? shown.find((l) => l.id === picking.target) : undefined;
-    const SingleMulti = (_a = selectedEntries[0]) === null || _a === void 0 ? void 0 : _a.Component;
-    return (jsxRuntime.jsxs("div", { ref: rootRef, id: id, "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : testId, className: `ntd-picker${isOpen ? ' ntd-picker--open' : ''}${disabled ? ' ntd-picker--disabled' : ''}${multiSelect ? ' ntd-picker--multi' : ''}${iconOnly ? ' ntd-picker--icon-only' : ''}${className ? ` ${className}` : ''}`, children: [jsxRuntime.jsxs("button", { type: "button", className: "ntd-picker-trigger", onClick: handleToggle, disabled: disabled, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-label": triggerName, title: iconOnly ? triggerLabel : undefined, children: [jsxRuntime.jsx("span", { className: "ntd-picker-trigger-icon", children: !multiSelect && base ? (iconStack.renderIconStack(shown, resolve, {
-                            baseProps: { ...drawProps, size: triggerIconSize },
-                        })) : multiSelect && selectedEntries.length > 1 ? (jsxRuntime.jsx("span", { className: "ntd-picker-multi-badge", children: selectedEntries.length })) : SingleMulti ? (jsxRuntime.jsx(SingleMulti, { ...drawProps, size: triggerIconSize })) : (jsxRuntime.jsx(files.NtdGrid, { size: 16, variant: "outline" })) }), !iconOnly && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: `ntd-picker-trigger-label${hasSelection ? '' : ' ntd-picker-trigger-placeholder'}`, children: triggerLabel }), jsxRuntime.jsx("span", { className: "ntd-picker-trigger-chevron", children: jsxRuntime.jsx(Chevron, {}) })] }))] }), name &&
-                (multiSelect ? (values.map((v) => jsxRuntime.jsx("input", { type: "hidden", name: name, value: v }, v))) : (jsxRuntime.jsx("input", { type: "hidden", name: name, value: value !== null && value !== void 0 ? value : '' }))), pending && (jsxRuntime.jsx("span", { ref: serializerRef, className: "ntd-picker-serializer", hidden: true, children: iconStack.renderIconStack(pending, resolve, {
-                    baseProps: {
-                        ...drawProps,
-                        width: '1em',
-                        height: '1em',
-                        title: labelOf(pending[0].icon),
-                        ...iconHtml.iconHtmlAttributes(pending),
-                    },
-                }) })), isOpen && (jsxRuntime.jsxs("div", { ref: dropdownRef, className: `ntd-picker-dropdown${showGrid ? '' : ' ntd-picker-dropdown--stack'}${placement.up ? ' ntd-picker-dropdown--up' : ''}${placement.end ? ' ntd-picker-dropdown--end' : ''}`, style: placement.maxHeight ? { maxHeight: placement.maxHeight } : undefined, role: "dialog", "aria-label": t('iconPicker.selectIcon', 'Select icon…'), children: [canStack &&
-                        (picking ? (jsxRuntime.jsxs("div", { className: "ntd-picker-banner", children: [jsxRuntime.jsx("button", { type: "button", className: "ntd-picker-back", onClick: () => setPicking(null), "aria-label": t('iconPicker.back', 'Back'), title: t('iconPicker.back', 'Back'), children: jsxRuntime.jsx(navigation.NtdArrowLeft, { size: 14, variant: "outline" }) }), jsxRuntime.jsx("span", { children: t('iconPicker.pickOverlay', 'Pick an icon to put on {icon}').replace('{icon}', pickingInto ? labelOf(pickingInto.icon) : base ? labelOf(base.icon) : '') })] })) : (jsxRuntime.jsxs("div", { className: "ntd-picker-views", ref: viewsRef, role: "tablist", "aria-label": t('iconPicker.selectIcon', 'Select icon…'), children: [jsxRuntime.jsx("button", { type: "button", role: "tab", id: `${panelId}-icons`, "aria-selected": view === 'icons', "aria-controls": `${panelId}-panel`, className: `ntd-picker-view${view === 'icons' ? ' ntd-picker-view--active' : ''}`, onClick: () => setView('icons'), children: t('iconPicker.tabIcon', 'Icon') }), jsxRuntime.jsxs("button", { type: "button", role: "tab", id: `${panelId}-stack`, "aria-selected": view === 'stack', "aria-controls": `${panelId}-panel`, className: `ntd-picker-view${view === 'stack' ? ' ntd-picker-view--active' : ''}`, onClick: () => setView('stack'), disabled: !base, title: base ? undefined : t('iconPicker.stackNeedsIcon', 'Pick an icon first'), children: [t('iconPicker.tabStack', 'Overlays'), overlays > 0 && jsxRuntime.jsx("span", { className: "ntd-picker-tab-count", children: overlays })] })] }))), jsxRuntime.jsxs("div", { className: "ntd-picker-panel", id: `${panelId}-panel`, ...(canStack && !picking
-                            ? {
-                                role: 'tabpanel',
-                                'aria-labelledby': `${panelId}-${view}`,
+    const pickingInto = picking ? shown.find((l) => l.id === picking.target) : void 0;
+    const SingleMulti = selectedEntries[0]?.Component;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: rootRef,
+        id,
+        "data-testid": dataTestId ?? testId,
+        className: `ntd-picker${isOpen ? " ntd-picker--open" : ""}${disabled ? " ntd-picker--disabled" : ""}${multiSelect ? " ntd-picker--multi" : ""}${iconOnly ? " ntd-picker--icon-only" : ""}${className ? ` ${className}` : ""}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              className: "ntd-picker-trigger",
+              onClick: handleToggle,
+              disabled,
+              "aria-haspopup": "dialog",
+              "aria-expanded": isOpen,
+              "aria-label": triggerName,
+              title: iconOnly ? triggerLabel : void 0,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ntd-picker-trigger-icon", children: !multiSelect && base ? iconStack.renderIconStack(shown, resolve, {
+                  baseProps: { ...drawProps, size: triggerIconSize }
+                }) : multiSelect && selectedEntries.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ntd-picker-multi-badge", children: selectedEntries.length }) : SingleMulti ? /* @__PURE__ */ jsxRuntime.jsx(SingleMulti, { ...drawProps, size: triggerIconSize }) : /* @__PURE__ */ jsxRuntime.jsx(files.NtdGrid, { size: 16, variant: "outline" }) }),
+                !iconOnly && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: `ntd-picker-trigger-label${hasSelection ? "" : " ntd-picker-trigger-placeholder"}`,
+                      children: triggerLabel
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ntd-picker-trigger-chevron", children: /* @__PURE__ */ jsxRuntime.jsx(Chevron, {}) })
+                ] })
+              ]
+            }
+          ),
+          name && (multiSelect ? values.map((v) => /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: v }, v)) : /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: value ?? "" })),
+          pending && /* @__PURE__ */ jsxRuntime.jsx("span", { ref: serializerRef, className: "ntd-picker-serializer", hidden: true, children: iconStack.renderIconStack(pending, resolve, {
+            baseProps: {
+              ...drawProps,
+              width: "1em",
+              height: "1em",
+              title: labelOf(pending[0].icon),
+              ...iconHtml.iconHtmlAttributes(pending)
+            }
+          }) }),
+          isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: dropdownRef,
+              className: `ntd-picker-dropdown${showGrid ? "" : " ntd-picker-dropdown--stack"}${placement.up ? " ntd-picker-dropdown--up" : ""}${placement.end ? " ntd-picker-dropdown--end" : ""}`,
+              style: placement.maxHeight ? { maxHeight: placement.maxHeight } : void 0,
+              role: "dialog",
+              "aria-label": t("iconPicker.selectIcon", "Select icon…"),
+              children: [
+                canStack && (picking ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ntd-picker-banner", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "ntd-picker-back",
+                      onClick: () => setPicking(null),
+                      "aria-label": t("iconPicker.back", "Back"),
+                      title: t("iconPicker.back", "Back"),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(navigation.NtdArrowLeft, { size: 14, variant: "outline" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("iconPicker.pickOverlay", "Pick an icon to put on {icon}").replace(
+                    "{icon}",
+                    pickingInto ? labelOf(pickingInto.icon) : base ? labelOf(base.icon) : ""
+                  ) })
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "ntd-picker-views",
+                    ref: viewsRef,
+                    role: "tablist",
+                    "aria-label": t("iconPicker.selectIcon", "Select icon…"),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          role: "tab",
+                          id: `${panelId}-icons`,
+                          "aria-selected": view === "icons",
+                          "aria-controls": `${panelId}-panel`,
+                          className: `ntd-picker-view${view === "icons" ? " ntd-picker-view--active" : ""}`,
+                          onClick: () => setView("icons"),
+                          children: t("iconPicker.tabIcon", "Icon")
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          role: "tab",
+                          id: `${panelId}-stack`,
+                          "aria-selected": view === "stack",
+                          "aria-controls": `${panelId}-panel`,
+                          className: `ntd-picker-view${view === "stack" ? " ntd-picker-view--active" : ""}`,
+                          onClick: () => setView("stack"),
+                          disabled: !base,
+                          title: base ? void 0 : t("iconPicker.stackNeedsIcon", "Pick an icon first"),
+                          children: [
+                            t("iconPicker.tabStack", "Overlays"),
+                            overlays > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ntd-picker-tab-count", children: overlays })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "ntd-picker-panel",
+                    id: `${panelId}-panel`,
+                    ...canStack && !picking ? {
+                      role: "tabpanel",
+                      "aria-labelledby": `${panelId}-${view}`
+                    } : {},
+                    children: [
+                      showGrid && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ntd-picker-search", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ntd-picker-search-icon", children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, {}) }),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "input",
+                            {
+                              ref: searchInputRef,
+                              type: "text",
+                              placeholder: t("iconPicker.searchIcons", "Search icons…"),
+                              value: search,
+                              onChange: (e) => setSearch(e.target.value),
+                              "aria-label": t("iconPicker.searchIcons2", "Search icons")
                             }
-                            : {}), children: [showGrid && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "ntd-picker-search", children: [jsxRuntime.jsx("span", { className: "ntd-picker-search-icon", children: jsxRuntime.jsx(SearchIcon, {}) }), jsxRuntime.jsx("input", { ref: searchInputRef, type: "text", placeholder: t('iconPicker.searchIcons', 'Search icons…'), value: search, onChange: (e) => setSearch(e.target.value), "aria-label": t('iconPicker.searchIcons2', 'Search icons') })] }), (allCategories.length > 1 || showFavorites || showHistory) && (jsxRuntime.jsxs("div", { className: "ntd-picker-tabs", ref: tablistRef, role: "tablist", children: [jsxRuntime.jsx("button", { type: "button", className: `ntd-picker-tab${activeCategory === null ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory(null), role: "tab", "aria-selected": activeCategory === null, children: t('iconPicker.all', 'All') }), showFavorites && (jsxRuntime.jsxs("button", { type: "button", className: `ntd-picker-tab ntd-picker-tab-special${activeCategory === '__favorites__' ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory('__favorites__'), role: "tab", "aria-selected": activeCategory === '__favorites__', title: t('iconPicker.favorites', 'Favorites'), children: [jsxRuntime.jsx(StarIcon, { filled: true }), " ", t('iconPicker.favorites', 'Favorites'), favorites.length > 0 && (jsxRuntime.jsx("span", { className: "ntd-picker-tab-count", children: favorites.length }))] })), showHistory && history.length > 0 && (jsxRuntime.jsxs("button", { type: "button", className: `ntd-picker-tab ntd-picker-tab-special${activeCategory === '__history__' ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory('__history__'), role: "tab", "aria-selected": activeCategory === '__history__', title: t('iconPicker.recentlyUsed', 'Recently used'), children: [jsxRuntime.jsx(ClockIcon, {}), " ", t('iconPicker.recent', 'Recent')] })), allCategories.map((cat) => (jsxRuntime.jsx("button", { type: "button", className: `ntd-picker-tab${activeCategory === cat ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory(cat), role: "tab", "aria-selected": activeCategory === cat, children: cat }, cat)))] })), jsxRuntime.jsx("div", { className: "ntd-picker-grid-wrap", ref: gridWrapRef, role: "listbox", "aria-label": t('iconPicker.icons', 'Icons'), "aria-multiselectable": multiSelect || undefined, children: filtered.length === 0 ? (jsxRuntime.jsxs("div", { className: "ntd-picker-empty", children: [jsxRuntime.jsx("div", { className: "ntd-picker-empty-icon", children: jsxRuntime.jsx(media.NtdInbox, { size: 28, variant: "outline" }) }), activeCategory === '__favorites__'
-                                                    ? t('iconPicker.noFavoritesYetClickThe', 'No favorites yet. Click the star icon to add.')
-                                                    : activeCategory === '__history__'
-                                                        ? t('iconPicker.noRecentIcons', 'No recent icons.')
-                                                        : t('iconPicker.noIconsFound', 'No icons found')] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [virtualized && visibleRange.start > 0 && (jsxRuntime.jsx("div", { style: { height: Math.floor(visibleRange.start / 6) * 48 } })), Array.from(grouped.entries()).map(([category, entries]) => (jsxRuntime.jsxs("div", { children: [!activeCategory && (jsxRuntime.jsx("div", { className: "ntd-picker-category-label", children: category })), jsxRuntime.jsx("div", { className: `ntd-picker-grid${optionDisplayMode === 'icon-name' ? ' ntd-picker-grid--names' : ''}`, children: entries.map((entry) => {
-                                                                const isSelected = !picking && selectedValues.includes(entry.name);
-                                                                const isFavorite = favorites.includes(entry.name);
-                                                                const label = entryLabel(entry);
-                                                                const cell = (jsxRuntime.jsxs("button", { type: "button", className: `ntd-picker-cell${isSelected ? ' ntd-picker-cell--selected' : ''}${multiSelect ? ' ntd-picker-cell--multi-select' : ''}${enableDragAndDrop ? ' ntd-picker-cell--draggable' : ''}`, onClick: () => handleSelect(entry), "data-name": label, role: "option", "aria-selected": isSelected, "aria-label": label, title: label, draggable: enableDragAndDrop, onDragStart: enableDragAndDrop
-                                                                        ? (e) => handleDragStart(entry, e)
-                                                                        : undefined, onDragEnd: enableDragAndDrop ? (e) => handleDragEnd(entry, e) : undefined, children: [jsxRuntime.jsx(entry.Component, { ...drawProps, size: gridIconSize }), optionDisplayMode === 'icon-name' && (jsxRuntime.jsx("span", { className: "ntd-picker-cell-name", children: label })), multiSelect && isSelected && (jsxRuntime.jsx("span", { className: "ntd-picker-cell-check", children: jsxRuntime.jsx(CheckIcon, {}) }))] }, entry.name));
-                                                                if (!showFavorites) {
-                                                                    return cell;
-                                                                }
-                                                                // the star beside the cell, not in it — a button in a button is
-                                                                // invalid HTML (1.3.9)
-                                                                const favLabel = isFavorite
-                                                                    ? t('iconPicker.removeFromFavorites', 'Remove from favorites')
-                                                                    : t('iconPicker.addToFavorites', 'Add to favorites');
-                                                                return (jsxRuntime.jsxs("div", { className: "ntd-picker-cell-wrap", children: [cell, jsxRuntime.jsx("button", { type: "button", tabIndex: -1, className: `ntd-picker-cell-fav${isFavorite ? ' ntd-picker-cell-fav--active' : ''}`, onClick: (e) => handleFavoriteClick(e, entry.name), "aria-label": `${favLabel}: ${label}`, title: favLabel, children: jsxRuntime.jsx(StarIcon, { filled: isFavorite }) })] }, entry.name));
-                                                            }) })] }, category))), virtualized && visibleRange.end < filtered.length && (jsxRuntime.jsx("div", { style: {
-                                                        height: Math.ceil((filtered.length - visibleRange.end) / 6) * 48,
-                                                    } }))] })) })] })), canStack && view === 'stack' && base && (jsxRuntime.jsx("div", { className: "ntd-picker-stack", hidden: !!picking, children: jsxRuntime.jsx(NiceIconStacker.NiceIconStacker, { ref: stackerRef, icons: resolve, layers: shown, onLayersChange: commit, onAddClick: (target) => {
-                                        var _a;
-                                        setSearch('');
-                                        setActiveCategory(null);
-                                        setPicking({ target: (_a = target === null || target === void 0 ? void 0 : target.id) !== null && _a !== void 0 ? _a : base.id });
-                                    }, previewProps: drawProps, iconLabel: labelOf, showCode: false, keepBase: true }) }))] }), !picking && (jsxRuntime.jsxs("div", { className: "ntd-picker-footer", children: [jsxRuntime.jsx("span", { className: "ntd-picker-count", children: showGrid && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(filtered.length === 1
-                                            ? t('iconPicker.iconCountOne', '{count} icon')
-                                            : t('iconPicker.iconCountMany', '{count} icons')).replace('{count}', String(filtered.length)), multiSelect && selectedValues.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [' ', t('iconPicker.selected', '• {selectedValues} selected').replace('{selectedValues}', String(selectedValues.length))] })), maxSelections && multiSelect && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [' ', t('iconPicker.max', '(max {maxSelections})').replace('{maxSelections}', String(maxSelections))] }))] })) }), clearable && hasSelection && (jsxRuntime.jsx("button", { type: "button", className: "ntd-picker-clear", onClick: handleClear, children: multiSelect
-                                    ? t('iconPicker.clearAll', 'Clear all')
-                                    : t('iconPicker.clearSelection', 'Clear selection') })), (multiSelect || view === 'stack') && (jsxRuntime.jsx("button", { type: "button", className: "ntd-picker-done", onClick: () => setIsOpen(false), children: t('iconPicker.done', 'Done') }))] }))] }))] }));
-});
-
+                          )
+                        ] }),
+                        (allCategories.length > 1 || showFavorites || showHistory) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ntd-picker-tabs", ref: tablistRef, role: "tablist", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              type: "button",
+                              className: `ntd-picker-tab${activeCategory === null ? " ntd-picker-tab--active" : ""}`,
+                              onClick: () => setActiveCategory(null),
+                              role: "tab",
+                              "aria-selected": activeCategory === null,
+                              children: t("iconPicker.all", "All")
+                            }
+                          ),
+                          showFavorites && /* @__PURE__ */ jsxRuntime.jsxs(
+                            "button",
+                            {
+                              type: "button",
+                              className: `ntd-picker-tab ntd-picker-tab-special${activeCategory === "__favorites__" ? " ntd-picker-tab--active" : ""}`,
+                              onClick: () => setActiveCategory("__favorites__"),
+                              role: "tab",
+                              "aria-selected": activeCategory === "__favorites__",
+                              title: t("iconPicker.favorites", "Favorites"),
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(StarIcon, { filled: true }),
+                                " ",
+                                t("iconPicker.favorites", "Favorites"),
+                                favorites.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ntd-picker-tab-count", children: favorites.length })
+                              ]
+                            }
+                          ),
+                          showHistory && history.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                            "button",
+                            {
+                              type: "button",
+                              className: `ntd-picker-tab ntd-picker-tab-special${activeCategory === "__history__" ? " ntd-picker-tab--active" : ""}`,
+                              onClick: () => setActiveCategory("__history__"),
+                              role: "tab",
+                              "aria-selected": activeCategory === "__history__",
+                              title: t("iconPicker.recentlyUsed", "Recently used"),
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(ClockIcon, {}),
+                                " ",
+                                t("iconPicker.recent", "Recent")
+                              ]
+                            }
+                          ),
+                          allCategories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              type: "button",
+                              className: `ntd-picker-tab${activeCategory === cat ? " ntd-picker-tab--active" : ""}`,
+                              onClick: () => setActiveCategory(cat),
+                              role: "tab",
+                              "aria-selected": activeCategory === cat,
+                              children: cat
+                            },
+                            cat
+                          ))
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            className: "ntd-picker-grid-wrap",
+                            ref: gridWrapRef,
+                            role: "listbox",
+                            "aria-label": t("iconPicker.icons", "Icons"),
+                            "aria-multiselectable": multiSelect || void 0,
+                            children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ntd-picker-empty", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ntd-picker-empty-icon", children: /* @__PURE__ */ jsxRuntime.jsx(media.NtdInbox, { size: 28, variant: "outline" }) }),
+                              activeCategory === "__favorites__" ? t(
+                                "iconPicker.noFavoritesYetClickThe",
+                                "No favorites yet. Click the star icon to add."
+                              ) : activeCategory === "__history__" ? t("iconPicker.noRecentIcons", "No recent icons.") : t("iconPicker.noIconsFound", "No icons found")
+                            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                              virtualized && visibleRange.start > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: Math.floor(visibleRange.start / 6) * 48 } }),
+                              Array.from(grouped.entries()).map(([category, entries]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                                !activeCategory && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ntd-picker-category-label", children: category }),
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  "div",
+                                  {
+                                    className: `ntd-picker-grid${optionDisplayMode === "icon-name" ? " ntd-picker-grid--names" : ""}`,
+                                    children: entries.map((entry) => {
+                                      const isSelected = !picking && selectedValues.includes(entry.name);
+                                      const isFavorite = favorites.includes(entry.name);
+                                      const label = entryLabel(entry);
+                                      const cell = /* @__PURE__ */ jsxRuntime.jsxs(
+                                        "button",
+                                        {
+                                          type: "button",
+                                          className: `ntd-picker-cell${isSelected ? " ntd-picker-cell--selected" : ""}${multiSelect ? " ntd-picker-cell--multi-select" : ""}${enableDragAndDrop ? " ntd-picker-cell--draggable" : ""}`,
+                                          onClick: () => handleSelect(entry),
+                                          "data-name": label,
+                                          role: "option",
+                                          "aria-selected": isSelected,
+                                          "aria-label": label,
+                                          title: label,
+                                          draggable: enableDragAndDrop,
+                                          onDragStart: enableDragAndDrop ? (e) => handleDragStart(entry, e) : void 0,
+                                          onDragEnd: enableDragAndDrop ? (e) => handleDragEnd(entry, e) : void 0,
+                                          children: [
+                                            /* @__PURE__ */ jsxRuntime.jsx(entry.Component, { ...drawProps, size: gridIconSize }),
+                                            optionDisplayMode === "icon-name" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ntd-picker-cell-name", children: label }),
+                                            multiSelect && isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ntd-picker-cell-check", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) })
+                                          ]
+                                        },
+                                        entry.name
+                                      );
+                                      if (!showFavorites) {
+                                        return cell;
+                                      }
+                                      const favLabel = isFavorite ? t("iconPicker.removeFromFavorites", "Remove from favorites") : t("iconPicker.addToFavorites", "Add to favorites");
+                                      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ntd-picker-cell-wrap", children: [
+                                        cell,
+                                        /* @__PURE__ */ jsxRuntime.jsx(
+                                          "button",
+                                          {
+                                            type: "button",
+                                            tabIndex: -1,
+                                            className: `ntd-picker-cell-fav${isFavorite ? " ntd-picker-cell-fav--active" : ""}`,
+                                            onClick: (e) => handleFavoriteClick(e, entry.name),
+                                            "aria-label": `${favLabel}: ${label}`,
+                                            title: favLabel,
+                                            children: /* @__PURE__ */ jsxRuntime.jsx(StarIcon, { filled: isFavorite })
+                                          }
+                                        )
+                                      ] }, entry.name);
+                                    })
+                                  }
+                                )
+                              ] }, category)),
+                              virtualized && visibleRange.end < filtered.length && /* @__PURE__ */ jsxRuntime.jsx(
+                                "div",
+                                {
+                                  style: {
+                                    height: Math.ceil((filtered.length - visibleRange.end) / 6) * 48
+                                  }
+                                }
+                              )
+                            ] })
+                          }
+                        )
+                      ] }),
+                      canStack && view === "stack" && base && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ntd-picker-stack", hidden: !!picking, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        NiceIconStacker.NiceIconStacker,
+                        {
+                          ref: stackerRef,
+                          icons: resolve,
+                          layers: shown,
+                          onLayersChange: commit,
+                          onAddClick: (target) => {
+                            setSearch("");
+                            setActiveCategory(null);
+                            setPicking({ target: target?.id ?? base.id });
+                          },
+                          previewProps: drawProps,
+                          iconLabel: labelOf,
+                          showCode: false,
+                          keepBase: true
+                        }
+                      ) })
+                    ]
+                  }
+                ),
+                !picking && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ntd-picker-footer", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ntd-picker-count", children: showGrid && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    (filtered.length === 1 ? t("iconPicker.iconCountOne", "{count} icon") : t("iconPicker.iconCountMany", "{count} icons")).replace("{count}", String(filtered.length)),
+                    multiSelect && selectedValues.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      " ",
+                      t("iconPicker.selected", "• {selectedValues} selected").replace(
+                        "{selectedValues}",
+                        String(selectedValues.length)
+                      )
+                    ] }),
+                    maxSelections && multiSelect && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      " ",
+                      t("iconPicker.max", "(max {maxSelections})").replace(
+                        "{maxSelections}",
+                        String(maxSelections)
+                      )
+                    ] })
+                  ] }) }),
+                  clearable && hasSelection && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ntd-picker-clear", onClick: handleClear, children: multiSelect ? t("iconPicker.clearAll", "Clear all") : t("iconPicker.clearSelection", "Clear selection") }),
+                  (multiSelect || view === "stack") && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "ntd-picker-done",
+                      onClick: () => setIsOpen(false),
+                      children: t("iconPicker.done", "Done")
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 exports.NiceIconPicker = NiceIconPicker;