@nice2dev/icons 1.2.2 → 1.3.0

package/dist/cjs/resolver.js

@@ -141,11 +141,56 @@ const NAME_MAP = {
     'angle-bisector': 'NtdAngleBisector',
     group: 'NtdGroup',
     ungroup: 'NtdUngroup',
+    // 1.3.0: input prompt glyphs (built-ins of the same names in ui-core)
+    'pad-xbox-a': 'NtdPadXboxA',
+    'pad-xbox-b': 'NtdPadXboxB',
+    'pad-xbox-x': 'NtdPadXboxX',
+    'pad-xbox-y': 'NtdPadXboxY',
+    'pad-nintendo-a': 'NtdPadNintendoA',
+    'pad-nintendo-b': 'NtdPadNintendoB',
+    'pad-nintendo-x': 'NtdPadNintendoX',
+    'pad-nintendo-y': 'NtdPadNintendoY',
+    'pad-playstation-cross': 'NtdPadPlaystationCross',
+    'pad-playstation-circle': 'NtdPadPlaystationCircle',
+    'pad-playstation-square': 'NtdPadPlaystationSquare',
+    'pad-playstation-triangle': 'NtdPadPlaystationTriangle',
+    'pad-generic-north': 'NtdPadGenericNorth',
+    'pad-generic-east': 'NtdPadGenericEast',
+    'pad-generic-west': 'NtdPadGenericWest',
+    'pad-generic-south': 'NtdPadGenericSouth',
+    'pad-lb': 'NtdPadLb',
+    'pad-rb': 'NtdPadRb',
+    'pad-lt': 'NtdPadLt',
+    'pad-rt': 'NtdPadRt',
+    'pad-start': 'NtdPadStart',
+    'pad-select': 'NtdPadSelect',
+    'pad-home': 'NtdPadHome',
+    'pad-dpad': 'NtdPadDpad',
+    'pad-dpad-up': 'NtdPadDpadUp',
+    'pad-dpad-down': 'NtdPadDpadDown',
+    'pad-dpad-left': 'NtdPadDpadLeft',
+    'pad-dpad-right': 'NtdPadDpadRight',
+    'pad-stick-left': 'NtdPadStickLeft',
+    'pad-stick-right': 'NtdPadStickRight',
+    'pad-stick-left-press': 'NtdPadStickLeftPress',
+    'pad-stick-right-press': 'NtdPadStickRightPress',
+    'remote-ok': 'NtdRemoteOk',
+    'remote-back': 'NtdRemoteBack',
+    'remote-menu': 'NtdRemoteMenu',
+    'key-command': 'NtdKeyCommand',
+    'key-option': 'NtdKeyOption',
+    'key-shift': 'NtdKeyShift',
+    'key-control': 'NtdKeyControl',
+    'key-enter': 'NtdKeyEnter',
+    'key-tab': 'NtdKeyTab',
+    'key-backspace': 'NtdKeyBackspace',
+    'key-space': 'NtdKeySpace',
+    'key-caps': 'NtdKeyCaps',
     list: 'NtdList',
     table: 'NtdTable',
     monitor: 'NtdMonitor',
     cpu: 'NtdCpu',
-    zap: 'NtdZap',
+    zap: 'NtdLightning',
     key: 'NtdKey',
     award: 'NtdAward',
     coffee: 'NtdCoffee',

package/dist/cjs/rsc.js

@@ -139,7 +139,7 @@ function createIconRSC(options) {
                                     ...renderProps,
                                     primaryColor: 'black',
                                     secondaryColor: 'black',
-                                    accentColor: 'black',
+                                    accentColor: 'white',
                                 }) })] }) })), iconContent] }));
     }
     IconRSC.displayName = displayName;

package/dist/esm/NiceIconPicker.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useNiceTranslation } from '@nice2dev/ui-core';
-import { forwardRef, useState, useRef, useMemo, useCallback, useImperativeHandle, useEffect } from 'react';
+import { useRovingFocus, useNiceTranslation, useOverlayFocus } from '@nice2dev/ui-core';
+import { forwardRef, useRef, useState, useMemo, useCallback, useImperativeHandle, useEffect } from 'react';
 import { NtdSearch, NtdCheck } from './icons/actions.js';
 import { NtdGrid } from './icons/files.js';
 import { NtdInbox } from './icons/media.js';
@@ -72,6 +72,8 @@ function saveToStorage(key, value) {
  */
 const NiceIconPicker = /* @__PURE__ */ forwardRef(function NiceIconPicker({ icons, value = null, values = [], onChange, onChangeMulti, multiSelect = false, maxSelections, placeholder, variant = 'solid', 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 tablistRef = useRef(null);
+    useRovingFocus(tablistRef, { orientation: 'horizontal', wrap: true, activateOnMove: true });
     const { t } = useNiceTranslation();
     const [isOpen, setIsOpen] = useState(false);
     const [search, setSearch] = useState('');
@@ -223,30 +225,26 @@ const NiceIconPicker = /* @__PURE__ */ forwardRef(function NiceIconPicker({ icon
         document.addEventListener('mousedown', onClickOutside);
         return () => document.removeEventListener('mousedown', onClickOutside);
     }, [isOpen]);
-    /* ─── Focus search on open ─── */
+    /* ─── Reset on close ─── */
     useEffect(() => {
-        if (isOpen) {
-            requestAnimationFrame(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
-        }
-        else {
+        if (!isOpen) {
             setSearch('');
             setActiveCategory(null);
             setVisibleRange({ start: 0, end: virtualizedItemCount });
         }
     }, [isOpen, virtualizedItemCount]);
-    /* ─── Keyboard ─── */
-    useEffect(() => {
-        if (!isOpen) {
-            return;
-        }
-        function onKeyDown(e) {
-            if (e.key === 'Escape') {
-                setIsOpen(false);
-            }
-        }
-        document.addEventListener('keydown', onKeyDown);
-        return () => document.removeEventListener('keydown', onKeyDown);
-    }, [isOpen]);
+    /* ─── 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.
+    const dropdownRef = useRef(null);
+    useOverlayFocus(dropdownRef, {
+        open: isOpen,
+        modal: false,
+        initialFocus: searchInputRef,
+        onClose: () => setIsOpen(false),
+    });
+    useRovingFocus(gridWrapRef, { orientation: 'grid', itemSelector: '.ntd-picker-cell' });
     /* ─── Virtualization scroll handler ─── */
     useEffect(() => {
         if (!virtualized || !isOpen || !gridWrapRef.current) {
@@ -394,7 +392,7 @@ const NiceIconPicker = /* @__PURE__ */ forwardRef(function NiceIconPicker({ icon
             ? readableName(selectedEntry.name)
             : (placeholder !== null && placeholder !== void 0 ? placeholder : t('iconPicker.selectIcon', 'Select icon…'));
     }, [multiSelect, selectedEntries, selectedEntry, placeholder, t]);
-    return (jsxs("div", { ref: rootRef, className: `ntd-picker${isOpen ? ' ntd-picker--open' : ''}${disabled ? ' ntd-picker--disabled' : ''}${multiSelect ? ' ntd-picker--multi' : ''}${className ? ` ${className}` : ''}`, children: [jsxs("button", { type: "button", className: "ntd-picker-trigger", onClick: handleToggle, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [jsx("span", { className: "ntd-picker-trigger-icon", children: selectedEntry ? (jsx(selectedEntry.Component, { size: triggerIconSize, variant: variant })) : multiSelect && selectedEntries.length > 1 ? (jsx("span", { className: "ntd-picker-multi-badge", children: selectedEntries.length })) : (jsx(NtdGrid, { size: 16, variant: "outline" })) }), jsx("span", { className: `ntd-picker-trigger-label${!selectedEntry && selectedEntries.length === 0 ? ' ntd-picker-trigger-placeholder' : ''}`, children: triggerLabel }), jsx("span", { className: "ntd-picker-trigger-chevron", children: jsx(Chevron, {}) })] }), isOpen && (jsxs("div", { className: "ntd-picker-dropdown", role: "listbox", children: [jsxs("div", { className: "ntd-picker-search", children: [jsx("span", { className: "ntd-picker-search-icon", children: jsx(SearchIcon, {}) }), 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) && (jsxs("div", { className: "ntd-picker-tabs", role: "tablist", children: [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 && (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: [jsx(StarIcon, { filled: true }), " ", t('iconPicker.favorites', 'Favorites'), favorites.length > 0 && (jsx("span", { className: "ntd-picker-tab-count", children: favorites.length }))] })), showHistory && history.length > 0 && (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: [jsx(ClockIcon, {}), " ", t('iconPicker.recent', 'Recent')] })), allCategories.map((cat) => (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)))] })), jsx("div", { className: "ntd-picker-grid-wrap", ref: gridWrapRef, children: filtered.length === 0 ? (jsxs("div", { className: "ntd-picker-empty", children: [jsx("div", { className: "ntd-picker-empty-icon", children: jsx(NtdInbox, { size: 28, variant: "outline" }) }), activeCategory === '__favorites__'
+    return (jsxs("div", { ref: rootRef, className: `ntd-picker${isOpen ? ' ntd-picker--open' : ''}${disabled ? ' ntd-picker--disabled' : ''}${multiSelect ? ' ntd-picker--multi' : ''}${className ? ` ${className}` : ''}`, children: [jsxs("button", { type: "button", className: "ntd-picker-trigger", onClick: handleToggle, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [jsx("span", { className: "ntd-picker-trigger-icon", children: selectedEntry ? (jsx(selectedEntry.Component, { size: triggerIconSize, variant: variant })) : multiSelect && selectedEntries.length > 1 ? (jsx("span", { className: "ntd-picker-multi-badge", children: selectedEntries.length })) : (jsx(NtdGrid, { size: 16, variant: "outline" })) }), jsx("span", { className: `ntd-picker-trigger-label${!selectedEntry && selectedEntries.length === 0 ? ' ntd-picker-trigger-placeholder' : ''}`, children: triggerLabel }), jsx("span", { className: "ntd-picker-trigger-chevron", children: jsx(Chevron, {}) })] }), isOpen && (jsxs("div", { ref: dropdownRef, className: "ntd-picker-dropdown", role: "dialog", "aria-label": t('iconPicker.selectIcon', 'Select icon…'), children: [jsxs("div", { className: "ntd-picker-search", children: [jsx("span", { className: "ntd-picker-search-icon", children: jsx(SearchIcon, {}) }), 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) && (jsxs("div", { className: "ntd-picker-tabs", ref: tablistRef, role: "tablist", children: [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 && (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: [jsx(StarIcon, { filled: true }), " ", t('iconPicker.favorites', 'Favorites'), favorites.length > 0 && (jsx("span", { className: "ntd-picker-tab-count", children: favorites.length }))] })), showHistory && history.length > 0 && (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: [jsx(ClockIcon, {}), " ", t('iconPicker.recent', 'Recent')] })), allCategories.map((cat) => (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)))] })), 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 ? (jsxs("div", { className: "ntd-picker-empty", children: [jsx("div", { className: "ntd-picker-empty-icon", children: jsx(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.')

package/dist/esm/createIcon.js

@@ -83,7 +83,11 @@ function renderGradientDef(id, preset, type, angle, animation) {
 }
 /* ── 3D filter helper ───────────────────────────────── */
 function render3dFilterDef(filterId) {
-    return (jsxs("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: [jsx("feDropShadow", { dx: "0", dy: "1.5", stdDeviation: "1", floodOpacity: "0.35" }), jsxs("feComponentTransfer", { in: "SourceGraphic", result: "highlight", children: [jsx("feFuncR", { type: "linear", slope: "1.2", intercept: "0.1" }), jsx("feFuncG", { type: "linear", slope: "1.2", intercept: "0.1" }), jsx("feFuncB", { type: "linear", slope: "1.2", intercept: "0.1" })] }), jsx("feComposite", { operator: "in", in: "highlight", in2: "SourceGraphic", result: "highlightMask" }), jsx("feMerge", { children: jsx("feMergeNode", { in: "SourceGraphic" }) })] }));
+    return (
+    // The region is the icon's box plus a margin for the shadow, not a share of the shape's
+    // bounding box: a lone horizontal or vertical line (NtdMinus) has a zero-height box, and a
+    // filter region of 140% of zero rendered nothing.
+    jsxs("filter", { id: filterId, filterUnits: "userSpaceOnUse", x: "-4", y: "-4", width: "32", height: "32", children: [jsx("feDropShadow", { dx: "0", dy: "1.5", stdDeviation: "1", floodOpacity: "0.35" }), jsxs("feComponentTransfer", { in: "SourceGraphic", result: "highlight", children: [jsx("feFuncR", { type: "linear", slope: "1.2", intercept: "0.1" }), jsx("feFuncG", { type: "linear", slope: "1.2", intercept: "0.1" }), jsx("feFuncB", { type: "linear", slope: "1.2", intercept: "0.1" })] }), jsx("feComposite", { operator: "in", in: "highlight", in2: "SourceGraphic", result: "highlightMask" }), jsx("feMerge", { children: jsx("feMergeNode", { in: "SourceGraphic" }) })] }));
 }
 /* ── Cutout shape helper ──────────────────────────── */
 function renderCutoutShape(shape, fill, maskId) {
@@ -114,6 +118,8 @@ function createIcon(options) {
         var _a, _b, _c, _d, _e, _f, _g;
         const resolvedSize = typeof size === 'number' ? size : ((_a = SIZE_MAP[size]) !== null && _a !== void 0 ? _a : 24);
         const gradId = useId();
+        // the prefix of the ids of the clip paths the renderers draw (IconRenderProps.uid)
+        const uid = useId();
         const center = { x: 12, y: 12 }; // Default center for 24x24 viewBox
         // Use dark/light mode detection when both colors are specified
         const colorScheme = useColorScheme();
@@ -142,6 +148,7 @@ function createIcon(options) {
             strokeWidth: effectiveStrokeWidth,
             strokeLinecap,
             strokeLinejoin,
+            uid,
         };
         // Resolve renderer with fallback chain. `wireframe` has no authored layer
         // at all — it is a mechanical re-draw of the full `solid` construction, so
@@ -219,10 +226,11 @@ function createIcon(options) {
                                     variant: 'solid',
                                     primaryColor: 'black',
                                     secondaryColor: 'black',
-                                    accentColor: 'black',
+                                    accentColor: 'white',
                                     primaryOpacity: 1,
                                     secondaryOpacity: 1,
                                     accentOpacity: 1,
+                                    uid: `${uid}m`,
                                 }) })] }) })), smilAnimation ? (needsSmilScaleWrapper ? (jsxs("g", { transform: `translate(${center.x}, ${center.y})`, filter: is3d ? `url(#${filterId})` : undefined, children: [jsx("g", { transform: `translate(-${center.x}, -${center.y})`, children: iconContent }), smilAnimationElements] })) : (jsxs("g", { filter: is3d ? `url(#${filterId})` : undefined, children: [iconContent, smilAnimationElements] }))) : is3d ? (jsx("g", { filter: `url(#${filterId})`, children: iconContent })) : (iconContent)] }));
     });
     Icon.displayName = displayName;

package/dist/esm/iconParts.js

@@ -0,0 +1,46 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { createIcon } from './createIcon.js';
+
+/**
+ * `content` drawn only inside `shape` — for accent lines that read as a cut through a shape (a
+ * pencil's band, a calendar's header line, an envelope's flap): clipped, they meet the shape's
+ * edges flush in every variant, where their round caps used to stick out of it (and `sharp` /
+ * `rounded` re-cap every stroke, so caps alone cannot do it).
+ *
+ * `uid` is the icon's `IconRenderProps.uid`; `name` tells the clips of one icon apart. Without a
+ * `uid` — a renderer called outside createIcon — the content is drawn as it is.
+ */
+function within(uid, name, shape, content) {
+    if (!uid) {
+        return content;
+    }
+    const id = `${uid}${name}`;
+    return (jsxs(Fragment, { children: [jsx("clipPath", { id: id, children: shape }), jsx("g", { clipPath: `url(#${id})`, children: content })] }));
+}
+/** The page of every paper icon: 16 × 20, its top-right corner folded over 8. */
+const PAPER = 'M12 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V10z';
+const PAPER_FOLD = 'M12 2v6a2 2 0 002 2h6z';
+const PAPER_FOLD_LINE = 'M12 2v8h8';
+const PAPER_SHARP = 'M12 2H4v20h16V10z';
+const PAPER_FOLD_SHARP = 'M12 2v8h8z';
+/**
+ * A paper icon — NtdFile, and every document drawn on the same page (NtdFileText, NtdInvoice,
+ * NtdContract, …), so their pages and folds match. The fold is secondary when the page is filled;
+ * `text` is the document's writing, a path of strokes kept below the fold (y ≥ 11, x 7.5–16.5),
+ * drawn in the accent colour on a filled page and in primary on a stroked one.
+ */
+function paperIcon(displayName, text = '') {
+    return createIcon({
+        displayName,
+        paths: {
+            solid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: PAPER, fill: primaryColor }), jsx("path", { d: PAPER_FOLD, fill: secondaryColor }), text && (jsx("path", { d: text, stroke: accentColor, strokeOpacity: accentOpacity, strokeWidth: "1.5", strokeLinecap: "round", fill: "none" }))] })),
+            // square at every corner, the fold included — the derived `sharp` keeps a path's arcs round
+            sharp: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: PAPER_SHARP, fill: primaryColor }), jsx("path", { d: PAPER_FOLD_SHARP, fill: secondaryColor }), text && (jsx("path", { d: text, stroke: accentColor, strokeOpacity: accentOpacity, strokeWidth: "1.5", fill: "none" }))] })),
+            outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: `${PAPER}${PAPER_FOLD_LINE}${text}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
+            duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: PAPER, fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: PAPER_FOLD_SHARP, fill: primaryColor, opacity: secondaryOpacity + 0.1 }), jsx("path", { d: `${PAPER}${PAPER_FOLD_LINE}${text}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+            vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: PAPER, fill: primaryColor }), jsx("path", { d: PAPER, fill: "white", opacity: "0.1" }), jsx("path", { d: PAPER_FOLD, fill: secondaryColor }), text && (jsx("path", { d: text, stroke: "white", strokeOpacity: "0.9", strokeWidth: "1.5", strokeLinecap: "round", fill: "none" }))] })),
+        },
+    });
+}
+
+export { paperIcon, within };

package/dist/esm/icons/accessibility.js

@@ -13,13 +13,21 @@ const NtdAccessibility = /* @__PURE__ */ createIcon({
         vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "4", r: "2", fill: primaryColor }), jsx("circle", { cx: "12", cy: "4", r: "2", fill: "white", opacity: "0.08" }), jsx("path", { d: "M12 8c-4 0-6 1-6 2v2h3v8h2v-5h2v5h2v-8h3v-2c0-1-2-2-6-2z", fill: secondaryColor })] })),
     },
 });
+// NtdWheelchair: the rider faces right, leaning back a little (it faced left and sat bolt
+// upright), the arm forward on the rest, the leg out to the footrest, in a wheel that is a full
+// 210° arc around the seat (it was a small ring under it).
+const WC_TORSO = 'M8.2 7.4l2.2 6';
+const WC_ARM = 'M9 9.4h5.6';
+const WC_LEG = 'M10.4 13.4h5l2.5 6.4H21';
+const WC_WHEEL = 'M5.6 10.95A5.6 5.6 0 1 0 13.25 18.6';
 const NtdWheelchair = /* @__PURE__ */ createIcon({
     displayName: 'NtdWheelchair',
     paths: {
-        solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "4", r: "2", fill: primaryColor }), jsx("path", { d: "M10 8v6H6l-1 4h3l1-2h5a4 4 0 01-4 4 4 4 0 01-4-4H4a6 6 0 006 6 6 6 0 006-6v-8h-6z", fill: primaryColor }), jsx("path", { d: "M16 14l2 4h2l-2-4", fill: primaryColor })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "4", r: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M10 8v6H6l-1 4h3l1-2h5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("circle", { cx: "10", cy: "16", r: "4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M16 14l2 4h2", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "10", cy: "16", r: "4", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "4", r: "2", fill: primaryColor }), jsx("path", { d: "M10 8v6H6l-1 4h3l1-2h5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("circle", { cx: "10", cy: "16", r: "4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M16 14l2 4h2", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "4", r: "2", fill: primaryColor }), jsx("circle", { cx: "12", cy: "4", r: "2", fill: "white", opacity: "0.08" }), jsx("path", { d: "M10 8v6H6l-1 4h3l1-2h5a4 4 0 01-4 4 4 4 0 01-4-4H4a6 6 0 006 6 6 6 0 006-6v-8h-6z", fill: secondaryColor }), jsx("path", { d: "M16 14l2 4h2l-2-4", fill: "#3B82F6" })] })),
+        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "8.6", cy: "3.4", r: "2.2", fill: primaryColor }), jsxs("g", { stroke: primaryColor, fill: "none", children: [jsx("path", { d: WC_TORSO, strokeWidth: strokeWidth * 1.4 }), jsx("path", { d: WC_ARM, strokeWidth: strokeWidth * 1.1 }), jsx("path", { d: WC_LEG, strokeWidth: strokeWidth * 1.3 }), jsx("path", { d: WC_WHEEL, strokeWidth: strokeWidth * 1.1 })] })] })),
+        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "8.6", cy: "3.4", r: "1.8", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: `${WC_TORSO}${WC_ARM}${WC_LEG}${WC_WHEEL}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        // fills only: the rider primary, the wheel secondary
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: WC_WHEEL, stroke: secondaryColor, strokeWidth: strokeWidth * 1.1, fill: "none" }), jsx("circle", { cx: "8.6", cy: "3.4", r: "2.2", fill: primaryColor }), jsxs("g", { stroke: primaryColor, fill: "none", children: [jsx("path", { d: WC_TORSO, strokeWidth: strokeWidth * 1.4 }), jsx("path", { d: WC_ARM, strokeWidth: strokeWidth * 1.1 }), jsx("path", { d: WC_LEG, strokeWidth: strokeWidth * 1.3 })] })] })),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: WC_WHEEL, stroke: secondaryColor, strokeWidth: strokeWidth * 1.1, fill: "none" }), jsx("circle", { cx: "8.6", cy: "3.4", r: "2.2", fill: primaryColor }), jsxs("g", { stroke: primaryColor, fill: "none", children: [jsx("path", { d: WC_TORSO, strokeWidth: strokeWidth * 1.4 }), jsx("path", { d: WC_ARM, strokeWidth: strokeWidth * 1.1 }), jsx("path", { d: WC_LEG, strokeWidth: strokeWidth * 1.3 })] })] })),
     },
 });
 const NtdBlind = /* @__PURE__ */ createIcon({

package/dist/esm/icons/actions.js

@@ -1,5 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createIcon } from '../createIcon.js';
+import { within } from '../iconParts.js';
 
 const NtdSearch = /* @__PURE__ */ createIcon({
     displayName: 'NtdSearch',
@@ -10,13 +11,31 @@ const NtdSearch = /* @__PURE__ */ createIcon({
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsx(Fragment, { children: jsx("path", { d: "M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z", stroke: primaryColor, strokeWidth: "2.2", fill: "none" }) })),
     },
 });
+const EDIT_PENCIL = 'M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z';
 const NtdEdit = /* @__PURE__ */ createIcon({
     displayName: 'NtdEdit',
     paths: {
-        solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: "M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z", fill: primaryColor }), jsx("path", { d: "M15 5l4 4", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })),
+        // The band is a cut across the pencil: kept inside it, its ends meet the edges flush (its
+        // round caps stuck out of both sides).
+        solid: ({ primaryColor, accentColor, accentOpacity, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: EDIT_PENCIL, fill: primaryColor }), within(uid, 'band', jsx("path", { d: EDIT_PENCIL }), jsx("path", { d: "M15 5l4 4", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity }))] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M15 5l4 4", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M15 5l4 4", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z", fill: primaryColor }), jsx("path", { d: "M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z", fill: "white", opacity: "0.1" }), jsx("path", { d: "M15 5l4 4", stroke: secondaryColor, strokeWidth: "1.8" })] })),
+        vivid: ({ primaryColor, secondaryColor, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: EDIT_PENCIL, fill: primaryColor }), jsx("path", { d: EDIT_PENCIL, fill: "white", opacity: "0.1" }), within(uid, 'band', jsx("path", { d: EDIT_PENCIL }), jsx("path", { d: "M15 5l4 4", stroke: secondaryColor, strokeWidth: "1.8" }))] })),
+    },
+});
+// NtdEditDetail: NtdEdit's pencil (scaled 0.62, coordinates baked in so strokes keep their
+// weight) over a square frame left open where the pencil comes out of it — the pen-to-square
+// "edit details" glyph.
+const EDIT_DETAIL_PENCIL = 'M18.54 2.86a1.753 1.753 0 112.48 2.48L12.65 13.71 9.24 14.64l.93-3.41L18.54 2.86z';
+const EDIT_DETAIL_BAND = 'M17.3 4.1l2.48 2.48';
+const EDIT_DETAIL_FRAME = 'M12 4H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2v-6';
+const NtdEditDetail = /* @__PURE__ */ createIcon({
+    displayName: 'NtdEditDetail',
+    paths: {
+        solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: EDIT_DETAIL_FRAME, stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: EDIT_DETAIL_PENCIL, fill: primaryColor }), within(uid, 'band', jsx("path", { d: EDIT_DETAIL_PENCIL }), jsx("path", { d: EDIT_DETAIL_BAND, stroke: accentColor, strokeWidth: "1.1", opacity: accentOpacity }))] })),
+        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: EDIT_DETAIL_FRAME, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: EDIT_DETAIL_PENCIL, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: EDIT_DETAIL_FRAME, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: EDIT_DETAIL_PENCIL, fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: EDIT_DETAIL_PENCIL, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: EDIT_DETAIL_FRAME, stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: EDIT_DETAIL_PENCIL, fill: primaryColor }), within(uid, 'band', jsx("path", { d: EDIT_DETAIL_PENCIL }), jsx("path", { d: EDIT_DETAIL_BAND, stroke: secondaryColor, strokeWidth: "1.3" }))] })),
     },
 });
 const NtdTrash = /* @__PURE__ */ createIcon({
@@ -28,31 +47,40 @@ const NtdTrash = /* @__PURE__ */ createIcon({
         vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M5 6l1 14a2 2 0 002 2h8a2 2 0 002-2l1-14H5z", fill: primaryColor }), jsx("path", { d: "M5 6l1 14a2 2 0 002 2h8a2 2 0 002-2l1-14H5z", fill: "white", opacity: "0.1" }), jsx("path", { d: "M3 6h18", stroke: secondaryColor, strokeWidth: "1.8" }), jsx("path", { d: "M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2", stroke: "#3B82F6", strokeWidth: "1.5" }), jsx("line", { x1: "10", y1: "10.5", x2: "10", y2: "17.5", stroke: "#3B82F6", strokeWidth: "1.5" }), jsx("line", { x1: "14", y1: "10.5", x2: "14", y2: "17.5", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
     },
 });
+// NtdSave: a 3.5" floppy — the clipped corner, a wide metal shutter at the top edge with its
+// window, a large label at the bottom. Every part sits inside the body, so no variant pokes out.
+const FLOPPY_BODY = 'M5 3h11.6L21 7.4V19a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2z';
+/** The shutter with its window cut out (even-odd). */
+const FLOPPY_SHUTTER = 'M7 3h9.2v4.8a.8.8 0 01-.8.8H7.8a.8.8 0 01-.8-.8zM12.6 4.4v2.8h2V4.4z';
+const FLOPPY_LABEL = 'M6.8 10.6h10.4a1 1 0 011 1v7a1 1 0 01-1 1H6.8a1 1 0 01-1-1v-7a1 1 0 011-1z';
 const NtdSave = /* @__PURE__ */ createIcon({
     displayName: 'NtdSave',
     paths: {
-        solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: "M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z", fill: primaryColor }), jsx("rect", { x: "7", y: "13", width: "10", height: "6", rx: "1", fill: accentColor, opacity: accentOpacity }), jsx("rect", { x: "8", y: "2", width: "6", height: "5", rx: "0.5", fill: accentColor, opacity: accentOpacity * 0.5 })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "7", y: "13", width: "10", height: "6", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M7 3v4h8V3", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M5 3h11l5 5v11a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "7", y: "13", width: "10", height: "6", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M7 3v4h8V3", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z", fill: primaryColor }), jsx("path", { d: "M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z", fill: "white", opacity: "0.08" }), jsx("rect", { x: "7", y: "13", width: "10", height: "6", rx: "1", fill: secondaryColor }), jsx("rect", { x: "8", y: "2", width: "6", height: "5", rx: "0.5", fill: "#3B82F6" })] })),
+        solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: FLOPPY_BODY, fill: primaryColor }), jsxs("g", { fill: accentColor, opacity: accentOpacity, children: [jsx("path", { d: FLOPPY_SHUTTER, fillRule: "evenodd" }), jsx("path", { d: FLOPPY_LABEL })] })] })),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: `${FLOPPY_BODY}M7.5 3v4h8V3M12.6 4.8v1${FLOPPY_LABEL}`, stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "round", fill: "none" })),
+        // fills only: the body secondary, the shutter and the label primary
+        duotone: ({ primaryColor, secondaryColor, secondaryOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: FLOPPY_BODY, fill: secondaryColor, opacity: secondaryOpacity }), jsxs("g", { fill: primaryColor, children: [jsx("path", { d: FLOPPY_SHUTTER, fillRule: "evenodd" }), jsx("path", { d: FLOPPY_LABEL })] })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: FLOPPY_BODY, fill: primaryColor }), jsx("path", { d: FLOPPY_SHUTTER, fillRule: "evenodd", fill: "#CBD5E1" }), jsx("path", { d: FLOPPY_LABEL, fill: "white" }), jsx("path", { d: "M5.8 13.2h12.4v-1.6a1 1 0 00-1-1H6.8a1 1 0 00-1 1z", fill: secondaryColor })] })),
     },
 });
+// The shaft stops 2 short of the arrowhead's point: with the square caps of `sharp`, a shaft that
+// ran to the point stuck out of it.
 const NtdDownload = /* @__PURE__ */ createIcon({
     displayName: 'NtdDownload',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3", stroke: primaryColor, strokeWidth: strokeWidth })),
-        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3", stroke: primaryColor, strokeWidth: strokeWidth })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "15", width: "18", height: "6", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsx(Fragment, { children: jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3", stroke: primaryColor, strokeWidth: "2.2" }) })),
+        solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 13V3", stroke: primaryColor, strokeWidth: strokeWidth * 2 })),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 13V3", stroke: primaryColor, strokeWidth: strokeWidth })),
+        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "15", width: "18", height: "6", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 13V3", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, strokeWidth }) => (jsx(Fragment, { children: jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 13V3", stroke: primaryColor, strokeWidth: strokeWidth * 2 }) })),
     },
 });
 const NtdUpload = /* @__PURE__ */ createIcon({
     displayName: 'NtdUpload',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12", stroke: primaryColor, strokeWidth: strokeWidth })),
-        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12", stroke: primaryColor, strokeWidth: strokeWidth })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "15", width: "18", height: "6", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsx(Fragment, { children: jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12", stroke: primaryColor, strokeWidth: "2.2" }) })),
+        solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 5v10", stroke: primaryColor, strokeWidth: strokeWidth * 2 })),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 5v10", stroke: primaryColor, strokeWidth: strokeWidth })),
+        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "15", width: "18", height: "6", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 5v10", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, strokeWidth }) => (jsx(Fragment, { children: jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 5v10", stroke: primaryColor, strokeWidth: strokeWidth * 2 }) })),
     },
 });
 const NtdShare = /* @__PURE__ */ createIcon({
@@ -82,31 +110,33 @@ const NtdClipboard = /* @__PURE__ */ createIcon({
         vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2", fill: primaryColor }), jsx("path", { d: "M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2", fill: "white", opacity: "0.08" }), jsx("rect", { x: "8", y: "2", width: "8", height: "3.5", rx: "1.5", fill: secondaryColor, stroke: secondaryColor, strokeWidth: "1.5" }), jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12", stroke: "white", strokeWidth: "1", opacity: "0.4" }), jsx("line", { x1: "8", y1: "15.5", x2: "13", y2: "15.5", stroke: "white", strokeWidth: "1", opacity: "0.4" })] })),
     },
 });
+// The stroke glyphs (plus, minus, check, the arrows) are twice the stroke width when filled, so
+// `solid` reads bold next to `outline` and still follows `strokeWidth`.
 const NtdPlus = /* @__PURE__ */ createIcon({
     displayName: 'NtdPlus',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M12 5v14M5 12h14", stroke: primaryColor, strokeWidth: strokeWidth * 1.25 })),
+        solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M12 5v14M5 12h14", stroke: primaryColor, strokeWidth: strokeWidth * 2 })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M12 5v14M5 12h14", stroke: primaryColor, strokeWidth: strokeWidth })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "9", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M12 8v8M8 12h8", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsx(Fragment, { children: jsx("path", { d: "M12 5v14M5 12h14", stroke: primaryColor, strokeWidth: "2.2" }) })),
+        vivid: ({ primaryColor, strokeWidth }) => (jsx(Fragment, { children: jsx("path", { d: "M12 5v14M5 12h14", stroke: primaryColor, strokeWidth: strokeWidth * 2 }) })),
     },
 });
 const NtdMinus = /* @__PURE__ */ createIcon({
     displayName: 'NtdMinus',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M5 12h14", stroke: primaryColor, strokeWidth: strokeWidth * 1.25 })),
+        solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M5 12h14", stroke: primaryColor, strokeWidth: strokeWidth * 2 })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M5 12h14", stroke: primaryColor, strokeWidth: strokeWidth })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "9", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M8 12h8", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsx(Fragment, { children: jsx("path", { d: "M5 12h14", stroke: primaryColor, strokeWidth: "2.2" }) })),
+        vivid: ({ primaryColor, strokeWidth }) => (jsx(Fragment, { children: jsx("path", { d: "M5 12h14", stroke: primaryColor, strokeWidth: strokeWidth * 2 }) })),
     },
 });
 const NtdCheck = /* @__PURE__ */ createIcon({
     displayName: 'NtdCheck',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M20 6L9 17l-5-5", stroke: primaryColor, strokeWidth: strokeWidth * 1.25 })),
+        solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M20 6L9 17l-5-5", stroke: primaryColor, strokeWidth: strokeWidth * 2 })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M20 6L9 17l-5-5", stroke: primaryColor, strokeWidth: strokeWidth })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "9", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M17 8l-6.5 6.5L7 11", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsx(Fragment, { children: jsx("path", { d: "M20 6L9 17l-5-5", stroke: primaryColor, strokeWidth: "2.2" }) })),
+        vivid: ({ primaryColor, strokeWidth }) => (jsx(Fragment, { children: jsx("path", { d: "M20 6L9 17l-5-5", stroke: primaryColor, strokeWidth: strokeWidth * 2 }) })),
     },
 });
 const NtdFilter = /* @__PURE__ */ createIcon({
@@ -200,17 +230,28 @@ const NtdLink = /* @__PURE__ */ createIcon({
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.2 }), jsx("path", { d: "M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        // one ring per colour: the right link primary, the left one secondary
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsx(Fragment, { children: jsx("path", { d: "M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71", stroke: primaryColor, strokeWidth: "2.2", fill: "none" }) })),
     },
 });
+// NtdSettings: a gear whose eight teeth have flat tops, in every variant but `rounded`, which
+// keeps the round-toothed gear it used to draw everywhere.
+const GEAR = 'M9.95 4.58L10.55 1.7L13.45 1.7L14.05 4.58A7.7 7.7 0 0 1 15.8 5.3L18.26 3.69L20.31 5.74L18.7 8.2A7.7 7.7 0 0 1 19.42 9.95L22.3 10.55L22.3 13.45L19.42 14.05A7.7 7.7 0 0 1 18.7 15.8L20.31 18.26L18.26 20.31L15.8 18.7A7.7 7.7 0 0 1 14.05 19.42L13.45 22.3L10.55 22.3L9.95 19.42A7.7 7.7 0 0 1 8.2 18.7L5.74 20.31L3.69 18.26L5.3 15.8A7.7 7.7 0 0 1 4.58 14.05L1.7 13.45L1.7 10.55L4.58 9.95A7.7 7.7 0 0 1 5.3 8.2L3.69 5.74L5.74 3.69L8.2 5.3A7.7 7.7 0 0 1 9.95 4.58Z';
+const GEAR_ROUND = 'M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 8.68a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.6a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z';
+/** The axle hole, r 3.2. */
+const GEAR_HOLE = 'M12 8.8a3.2 3.2 0 100 6.4 3.2 3.2 0 100-6.4z';
+/** The hub around the hole, r 5 — duotone and vivid only. */
+const GEAR_HUB = 'M12 7a5 5 0 100 10 5 5 0 100-10z';
 const NtdSettings = /* @__PURE__ */ createIcon({
     displayName: 'NtdSettings',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "3", fill: primaryColor }), jsx("path", { d: "M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 8.68a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.6a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 8.68a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.6a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 8.68a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.6a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z", fill: secondaryColor, opacity: secondaryOpacity, stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: primaryColor })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "3", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: "white", opacity: "0.1" }), jsx("path", { d: "M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 8.68a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.6a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" })] })),
+        solid: ({ primaryColor }) => (jsx("path", { d: `${GEAR}${GEAR_HOLE}`, fillRule: "evenodd", fill: primaryColor })),
+        rounded: ({ primaryColor }) => (jsx("path", { d: `${GEAR_ROUND}${GEAR_HOLE}`, fillRule: "evenodd", fill: primaryColor })),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: `${GEAR}M12 9a3 3 0 100 6 3 3 0 100-6z`, stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "round", fill: "none" })),
+        // fills only: the gear secondary, its hub primary
+        duotone: ({ primaryColor, secondaryColor, secondaryOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: `${GEAR}${GEAR_HOLE}`, fillRule: "evenodd", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: `${GEAR_HUB}${GEAR_HOLE}`, fillRule: "evenodd", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: `${GEAR}${GEAR_HOLE}`, fillRule: "evenodd", fill: primaryColor }), jsx("path", { d: `${GEAR_HUB}${GEAR_HOLE}`, fillRule: "evenodd", fill: secondaryColor })] })),
     },
 });
 const NtdLogIn = /* @__PURE__ */ createIcon({
@@ -270,4 +311,4 @@ const NtdUngroup = /* @__PURE__ */ createIcon({
     },
 });
 
-export { NtdCheck, NtdClipboard, NtdCopy, NtdDownload, NtdEdit, NtdFilter, NtdGroup, NtdLink, NtdLock, NtdLogIn, NtdLogOut, NtdMinus, NtdPlus, NtdPrint, NtdRedo, NtdReply, NtdSave, NtdSearch, NtdSettings, NtdShare, NtdSort, NtdTrash, NtdUndo, NtdUngroup, NtdUnlock, NtdUpload, NtdZoomIn, NtdZoomOut };
+export { NtdCheck, NtdClipboard, NtdCopy, NtdDownload, NtdEdit, NtdEditDetail, NtdFilter, NtdGroup, NtdLink, NtdLock, NtdLogIn, NtdLogOut, NtdMinus, NtdPlus, NtdPrint, NtdRedo, NtdReply, NtdSave, NtdSearch, NtdSettings, NtdShare, NtdSort, NtdTrash, NtdUndo, NtdUngroup, NtdUnlock, NtdUpload, NtdZoomIn, NtdZoomOut };