@nice2dev/icons 1.2.1 → 1.3.0

package/dist/esm/NiceIconSetCreator.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useNiceTranslation } from '@nice2dev/ui-core';
 import { useState, useMemo, useCallback } from 'react';
 import { NtdCheck } from './icons/actions.js';
 
@@ -8,6 +9,7 @@ import { NtdCheck } from './icons/actions.js';
 const DEFAULT_CONFIG = {
     name: 'MyIcons',
     packageName: '@myproject/icons',
+    // audit-allow: i18n — the generated package.json's default description, not UI copy
     description: 'Custom icon set',
     version: '1.0.0',
     author: '',
@@ -285,6 +287,7 @@ function useIconSetCreator(options) {
  * Icon Set Creator component for building custom icon packages.
  */
 function NiceIconSetCreator({ icons, initialSelection, defaultConfig, onSelectionChange: _onSelectionChange, onExport, className = '', }) {
+    const { t } = useNiceTranslation();
     const creator = useIconSetCreator({ icons, initialSelection, defaultConfig });
     const [searchQuery, setSearchQuery] = useState('');
     const [categoryFilter, setCategoryFilter] = useState('all');
@@ -338,7 +341,9 @@ function NiceIconSetCreator({ icons, initialSelection, defaultConfig, onSelectio
             URL.revokeObjectURL(url);
         });
     }, [creator]);
-    return (jsxs("div", { className: `nice-icon-set-creator ${className}`, style: styles.container, children: [jsxs("div", { style: styles.header, children: [jsx("h2", { style: styles.title, children: "Icon Set Creator" }), jsxs("div", { style: styles.stats, children: [creator.selectedCount, " / ", creator.items.length, " icons selected"] })] }), jsxs("div", { style: styles.content, children: [jsxs("div", { style: styles.configPanel, children: [jsx("h3", { style: styles.sectionTitle, children: "Configuration" }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "Set Name" }), jsx("input", { type: "text", value: creator.config.name, onChange: (e) => creator.updateConfig({ name: e.target.value }), style: styles.input, placeholder: "MyIcons" })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "Package Name" }), jsx("input", { type: "text", value: creator.config.packageName, onChange: (e) => creator.updateConfig({ packageName: e.target.value }), style: styles.input, placeholder: "@myproject/icons" })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "Description" }), jsx("input", { type: "text", value: creator.config.description, onChange: (e) => creator.updateConfig({ description: e.target.value }), style: styles.input })] }), jsxs("div", { style: styles.fieldRow, children: [jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "Version" }), jsx("input", { type: "text", value: creator.config.version, onChange: (e) => creator.updateConfig({ version: e.target.value }), style: styles.input })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "License" }), jsx("input", { type: "text", value: creator.config.license, onChange: (e) => creator.updateConfig({ license: e.target.value }), style: styles.input })] })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "Export Format" }), jsxs("select", { value: creator.config.format, onChange: (e) => creator.updateConfig({ format: e.target.value }), style: styles.select, children: [jsx("option", { value: "esm", children: "ES Modules" }), jsx("option", { value: "cjs", children: "CommonJS" }), jsx("option", { value: "both", children: "Both" })] })] }), jsxs("div", { style: styles.checkboxGroup, children: [jsxs("label", { style: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: creator.config.generateTypes, onChange: (e) => creator.updateConfig({ generateTypes: e.target.checked }) }), "Generate TypeScript types"] }), jsxs("label", { style: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: creator.config.treeShaking, onChange: (e) => creator.updateConfig({ treeShaking: e.target.checked }) }), "Tree-shaking friendly"] }), jsxs("label", { style: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: creator.config.includeMetadata, onChange: (e) => creator.updateConfig({ includeMetadata: e.target.checked }) }), "Include metadata"] })] }), jsxs("div", { style: styles.exportActions, children: [jsx("button", { onClick: handleExport, style: styles.primaryButton, children: "Preview Export" }), jsx("button", { onClick: handleDownloadZip, style: styles.secondaryButton, children: "Download Files" })] })] }), jsxs("div", { style: styles.selectionPanel, children: [jsxs("div", { style: styles.selectionHeader, children: [jsx("input", { type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search icons...", style: styles.searchInput }), jsxs("select", { value: categoryFilter, onChange: (e) => setCategoryFilter(e.target.value), style: styles.categorySelect, children: [jsx("option", { value: "all", children: "All Categories" }), categories.map((cat) => (jsx("option", { value: cat, children: cat }, cat)))] })] }), jsxs("div", { style: styles.selectionActions, children: [jsx("button", { onClick: creator.selectAll, style: styles.smallButton, children: "Select All" }), jsx("button", { onClick: creator.deselectAll, style: styles.smallButton, children: "Deselect All" })] }), jsx("div", { style: styles.iconGrid, children: filteredItems.map((item) => (jsxs("div", { role: "checkbox", "aria-checked": item.included, "aria-label": item.customName, tabIndex: 0, onClick: () => creator.toggleIcon(item.originalName), onKeyDown: (e) => {
+    return (jsxs("div", { className: `nice-icon-set-creator ${className}`, style: styles.container, children: [jsxs("div", { style: styles.header, children: [jsx("h2", { style: styles.title, children: t('iconSetCreator.iconSetCreator', 'Icon Set Creator') }), jsx("div", { style: styles.stats, children: t('iconSetCreator.iconsSelected', '{selectedCount} / {items} icons selected')
+                            .replace('{selectedCount}', String(creator.selectedCount))
+                            .replace('{items}', String(creator.items.length)) })] }), jsxs("div", { style: styles.content, children: [jsxs("div", { style: styles.configPanel, children: [jsx("h3", { style: styles.sectionTitle, children: t('iconSetCreator.configuration', 'Configuration') }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.setName', 'Set Name') }), jsx("input", { type: "text", value: creator.config.name, onChange: (e) => creator.updateConfig({ name: e.target.value }), style: styles.input, placeholder: "MyIcons" })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.packageName', 'Package Name') }), jsx("input", { type: "text", value: creator.config.packageName, onChange: (e) => creator.updateConfig({ packageName: e.target.value }), style: styles.input, placeholder: "@myproject/icons" })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.description', 'Description') }), jsx("input", { type: "text", value: creator.config.description, onChange: (e) => creator.updateConfig({ description: e.target.value }), style: styles.input })] }), jsxs("div", { style: styles.fieldRow, children: [jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.version', 'Version') }), jsx("input", { type: "text", value: creator.config.version, onChange: (e) => creator.updateConfig({ version: e.target.value }), style: styles.input })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.license', 'License') }), jsx("input", { type: "text", value: creator.config.license, onChange: (e) => creator.updateConfig({ license: e.target.value }), style: styles.input })] })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.exportFormat', 'Export Format') }), jsxs("select", { value: creator.config.format, onChange: (e) => creator.updateConfig({ format: e.target.value }), style: styles.select, children: [jsx("option", { value: "esm", children: t('iconSetCreator.esModules', 'ES Modules') }), jsx("option", { value: "cjs", children: "CommonJS" }), jsx("option", { value: "both", children: t('iconSetCreator.both', 'Both') })] })] }), jsxs("div", { style: styles.checkboxGroup, children: [jsxs("label", { style: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: creator.config.generateTypes, onChange: (e) => creator.updateConfig({ generateTypes: e.target.checked }) }), t('iconSetCreator.generateTypescriptTypes', 'Generate TypeScript types')] }), jsxs("label", { style: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: creator.config.treeShaking, onChange: (e) => creator.updateConfig({ treeShaking: e.target.checked }) }), t('iconSetCreator.treeShakingFriendly', 'Tree-shaking friendly')] }), jsxs("label", { style: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: creator.config.includeMetadata, onChange: (e) => creator.updateConfig({ includeMetadata: e.target.checked }) }), t('iconSetCreator.includeMetadata', 'Include metadata')] })] }), jsxs("div", { style: styles.exportActions, children: [jsx("button", { onClick: handleExport, style: styles.primaryButton, children: t('iconSetCreator.previewExport', 'Preview Export') }), jsx("button", { onClick: handleDownloadZip, style: styles.secondaryButton, children: t('iconSetCreator.downloadFiles', 'Download Files') })] })] }), jsxs("div", { style: styles.selectionPanel, children: [jsxs("div", { style: styles.selectionHeader, children: [jsx("input", { type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: t('iconSetCreator.searchIcons', 'Search icons...'), style: styles.searchInput }), jsxs("select", { value: categoryFilter, onChange: (e) => setCategoryFilter(e.target.value), style: styles.categorySelect, children: [jsx("option", { value: "all", children: t('iconSetCreator.allCategories', 'All Categories') }), categories.map((cat) => (jsx("option", { value: cat, children: cat }, cat)))] })] }), jsxs("div", { style: styles.selectionActions, children: [jsx("button", { onClick: creator.selectAll, style: styles.smallButton, children: t('iconSetCreator.selectAll', 'Select All') }), jsx("button", { onClick: creator.deselectAll, style: styles.smallButton, children: t('iconSetCreator.deselectAll', 'Deselect All') })] }), jsx("div", { style: styles.iconGrid, children: filteredItems.map((item) => (jsxs("div", { role: "checkbox", "aria-checked": item.included, "aria-label": item.customName, tabIndex: 0, onClick: () => creator.toggleIcon(item.originalName), onKeyDown: (e) => {
                                         if (e.key === 'Enter' || e.key === ' ') {
                                             e.preventDefault();
                                             creator.toggleIcon(item.originalName);
@@ -347,7 +352,7 @@ function NiceIconSetCreator({ icons, initialSelection, defaultConfig, onSelectio
                                         ...styles.iconItem,
                                         borderColor: item.included ? '#3b82f6' : '#e5e7eb',
                                         backgroundColor: item.included ? '#eff6ff' : '#fff',
-                                    }, children: [jsx(item.icon, { size: 32 }), jsx("span", { style: styles.iconName, children: item.customName }), item.included && (jsx("span", { style: styles.checkmark, children: jsx(NtdCheck, { size: 14 }) }))] }, item.originalName))) })] }), previewOutput && (jsxs("div", { style: styles.previewPanel, children: [jsx("h3", { style: styles.sectionTitle, children: "Export Preview" }), previewOutput.map((file) => (jsxs("div", { style: styles.filePreview, children: [jsx("div", { style: styles.fileName, children: file.filename }), jsxs("pre", { style: styles.codePreview, children: [file.content.slice(0, 1000), file.content.length > 1000 && '...'] })] }, file.filename)))] }))] })] }));
+                                    }, children: [jsx(item.icon, { size: 32 }), jsx("span", { style: styles.iconName, children: item.customName }), item.included && (jsx("span", { style: styles.checkmark, children: jsx(NtdCheck, { size: 14 }) }))] }, item.originalName))) })] }), previewOutput && (jsxs("div", { style: styles.previewPanel, children: [jsx("h3", { style: styles.sectionTitle, children: t('iconSetCreator.exportPreview', 'Export Preview') }), previewOutput.map((file) => (jsxs("div", { style: styles.filePreview, children: [jsx("div", { style: styles.fileName, children: file.filename }), jsxs("pre", { style: styles.codePreview, children: [file.content.slice(0, 1000), file.content.length > 1000 && '...'] })] }, file.filename)))] }))] })] }));
 }
 /* ══════════════════════════════════════════════════════════════════════════════
    Styles

package/dist/esm/NtdIconBadge.js

@@ -1,7 +1,17 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useNiceTranslation } from '@nice2dev/ui-core';
 import { forwardRef, useState, useRef, useEffect } from 'react';
 import { SIZE_MAP } from './types.js';
 
+/** The status in words for the accessible name — English defaults of `ntdIconBadge.statusValue.*`. */
+const STATUS_WORDS = {
+    online: 'online',
+    offline: 'offline',
+    busy: 'busy',
+    away: 'away',
+    dnd: 'do not disturb',
+    invisible: 'invisible',
+};
 /* ────────────────────────────────────────────────────────────────────────────
    CONSTANTS
 ───────────────────────────────────────────────────────────────────────────── */
@@ -188,6 +198,7 @@ function injectStyles() {
 const NtdBadge = /* @__PURE__ */ Object.assign(
 /* @__PURE__ */ forwardRef(({ icon: Icon, count = 0, maxCount = 99, showZero = false, position = 'top-right', variant = 'standard', badgeColor = '#ef4444', textColor = '#ffffff', animated = true, pulse = false, iconProps = {}, className, style, 'aria-label': ariaLabel, }, ref) => {
     var _a, _b;
+    const { t } = useNiceTranslation();
     const [isEntering, setIsEntering] = useState(false);
     const [countChanging, setCountChanging] = useState(false);
     const prevCountRef = useRef(count);
@@ -211,6 +222,7 @@ const NtdBadge = /* @__PURE__ */ Object.assign(
             const timer = setTimeout(() => setIsEntering(false), 300);
             return () => clearTimeout(timer);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- the enter animation plays once, when the badge mounts
     }, []);
     const shouldShowBadge = count > 0 || showZero;
     const displayCount = count > maxCount ? `${maxCount}+` : count.toString();
@@ -231,7 +243,9 @@ const NtdBadge = /* @__PURE__ */ Object.assign(
             width: resolvedSize,
             height: resolvedSize,
             ...style,
-        }, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (shouldShowBadge ? `${count} notifications` : undefined), children: [jsx(Icon, { ...iconProps }), shouldShowBadge && (jsx("span", { className: badgeClasses, style: {
+        }, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (shouldShowBadge
+            ? t('ntdIconBadge.notifications', '{count} notifications').replace('{count}', String(count))
+            : undefined), children: [jsx(Icon, { ...iconProps }), shouldShowBadge && (jsx("span", { className: badgeClasses, style: {
                     ...POSITION_STYLES[position],
                     backgroundColor: badgeColor,
                     color: textColor,
@@ -257,7 +271,8 @@ const NtdBadge = /* @__PURE__ */ Object.assign(
  */
 const NtdStatusDot = /* @__PURE__ */ Object.assign(
 /* @__PURE__ */ forwardRef(({ icon: Icon, status, statusColor, position = 'bottom-right', dotSize = 'md', animated = true, pulse = false, iconProps = {}, className, style, }, ref) => {
-    var _a, _b;
+    var _a, _b, _c;
+    const { t } = useNiceTranslation();
     useEffect(() => {
         injectStyles();
     }, []);
@@ -277,7 +292,7 @@ const NtdStatusDot = /* @__PURE__ */ Object.assign(
             width: resolvedIconSize,
             height: resolvedIconSize,
             ...style,
-        }, role: "status", "aria-label": `Status: ${status}`, children: [jsx(Icon, { ...iconProps }), jsx("span", { className: dotClasses, style: {
+        }, role: "status", "aria-label": t('ntdIconBadge.status', 'Status: {status}').replace('{status}', t('ntdIconBadge.statusValue.' + status, (_c = STATUS_WORDS[status]) !== null && _c !== void 0 ? _c : status)), children: [jsx(Icon, { ...iconProps }), jsx("span", { className: dotClasses, style: {
                     ...POSITION_STYLES[position],
                     width: resolvedDotSize,
                     height: resolvedDotSize,

package/dist/esm/NtdIconMorph.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useNiceTranslation } from '@nice2dev/ui-core';
 import { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
 import { NtdCheck, NtdMinus, NtdPlus } from './icons/actions.js';
 import { NtdPause, NtdPlay } from './icons/media.js';
@@ -262,6 +263,7 @@ const NtdIconMorph = /* @__PURE__ */ Object.assign(
 const NtdPathMorph = /* @__PURE__ */ Object.assign(
 /* @__PURE__ */ forwardRef(({ pair, morphed: controlledMorphed, trigger = 'none', duration = 300, easing = 'ease-in-out', size = 'md', color = 'currentColor', strokeWidth = 2, filled = false, onMorphStart, onMorphEnd, className, style, 'aria-label': ariaLabel, }, ref) => {
     var _a, _b;
+    const { t } = useNiceTranslation();
     const [internalMorphed, setInternalMorphed] = useState(false);
     const morphed = controlledMorphed !== null && controlledMorphed !== void 0 ? controlledMorphed : internalMorphed;
     const [isAnimating, setIsAnimating] = useState(false);
@@ -313,7 +315,7 @@ const NtdPathMorph = /* @__PURE__ */ Object.assign(
     return (jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: pathData.viewBox, width: resolvedSize, height: resolvedSize, className: `ntd-path-morph ${className !== null && className !== void 0 ? className : ''}`, style: {
             cursor: trigger !== 'none' ? 'pointer' : undefined,
             ...style,
-        }, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: trigger !== 'none' ? 'button' : 'img', "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : `${pair} icon`, "aria-pressed": trigger !== 'none' ? morphed : undefined, children: jsx("path", { d: currentPath, fill: filled ? color : 'none', stroke: filled ? 'none' : color, strokeWidth: filled ? 0 : strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", style: {
+        }, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: trigger !== 'none' ? 'button' : 'img', "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t('ntdIconMorph.icon', '{pair} icon').replace('{pair}', String(pair)), "aria-pressed": trigger !== 'none' ? morphed : undefined, children: jsx("path", { d: currentPath, fill: filled ? color : 'none', stroke: filled ? 'none' : color, strokeWidth: filled ? 0 : strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", style: {
                 transition: `d ${duration}ms ${resolvedEasing}, fill ${duration}ms ${resolvedEasing}, stroke ${duration}ms ${resolvedEasing}`,
             } }) }));
 }), { displayName: 'NtdPathMorph' });

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/design-tokens.js

@@ -25,6 +25,8 @@
  * @version 1.0.0
  * @since 2026-03
  * @license MIT
+ *
+ * audit-allow: i18n-file — token descriptions written into Style Dictionary output, not UI copy.
  */
 /* ────────────────────────────────────────────────────────────────────────────
    DEFAULT TOKEN VALUES

package/dist/esm/iconMetadata.js

@@ -15,6 +15,8 @@
 /* ────────────────────────────────────────────────────────────────────────────
    CATEGORY METADATA
 ───────────────────────────────────────────────────────────────────────────── */
+// audit-allow: i18n — English data for the host's icon browser and searchIcons(); no control of
+// this package shows it.
 const CATEGORY_INFO = {
     actions: {
         label: 'Actions',
@@ -362,6 +364,7 @@ function getSearchSuggestions(partialQuery, limit = 5) {
    This will be populated when icons are imported
 ───────────────────────────────────────────────────────────────────────────── */
 // Example metadata definitions (actual ones will be in icon files)
+// audit-allow: i18n — English search metadata: searchIcons() matches these words.
 const UI_ICON_METADATA = {
     NtdHome: {
         category: 'ui',
@@ -428,6 +431,7 @@ const UI_ICON_METADATA = {
         related: ['NtdBellOff', 'NtdAlarm'],
     },
 };
+// audit-allow: i18n — English search metadata: searchIcons() matches these words.
 const ACTION_ICON_METADATA = {
     NtdPlay: {
         category: 'actions',

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({
@@ -249,5 +290,25 @@ const NtdUnlock = /* @__PURE__ */ createIcon({
         vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2.5", fill: primaryColor }), jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2.5", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "12", cy: "15.5", r: "1.5", fill: secondaryColor }), jsx("rect", { x: "11.25", y: "16.5", width: "1.5", height: "2", rx: "0.5", fill: "#3B82F6" }), jsx("path", { d: "M7 11V7a5 5 0 019.9-1", stroke: "white", strokeWidth: "1" })] })),
     },
 });
+// Group / ungroup selected objects (1.2.2: the diagram toolbar drew them as ⊞ / ⊟).
+// Group: two objects inside the corners of one selection frame; ungroup: the two apart.
+const NtdGroup = /* @__PURE__ */ createIcon({
+    displayName: 'NtdGroup',
+    paths: {
+        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M3 7V3h4M17 3h4v4M21 17v4h-4M7 21H3v-4", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }), jsx("rect", { x: "7", y: "7", width: "5", height: "5", fill: primaryColor }), jsx("rect", { x: "12", y: "12", width: "5", height: "5", fill: primaryColor })] })),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M3 7V3h4M17 3h4v4M21 17v4h-4M7 21H3v-4M7 7h5v5H7zM12 12h5v5h-5z", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })),
+        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "7", y: "7", width: "5", height: "5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "12", y: "12", width: "5", height: "5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M3 7V3h4M17 3h4v4M21 17v4h-4M7 21H3v-4M7 7h5v5H7zM12 12h5v5h-5z", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M3 7V3h4M17 3h4v4M21 17v4h-4M7 21H3v-4", stroke: primaryColor, strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }), jsx("rect", { x: "7", y: "7", width: "5", height: "5", fill: primaryColor }), jsx("rect", { x: "12", y: "12", width: "5", height: "5", fill: primaryColor })] })),
+    },
+});
+const NtdUngroup = /* @__PURE__ */ createIcon({
+    displayName: 'NtdUngroup',
+    paths: {
+        solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "8", height: "8", rx: "1", fill: primaryColor }), jsx("rect", { x: "13", y: "13", width: "8", height: "8", rx: "1", fill: primaryColor })] })),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M3 3h8v8H3zM13 13h8v8h-8z", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "round", fill: "none" })),
+        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "8", height: "8", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "13", y: "13", width: "8", height: "8", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M3 3h8v8H3zM13 13h8v8h-8z", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "round", fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "8", height: "8", rx: "1", fill: primaryColor }), jsx("rect", { x: "13", y: "13", width: "8", height: "8", rx: "1", fill: primaryColor }), jsx("rect", { x: "3", y: "3", width: "8", height: "8", rx: "1", fill: "white", opacity: "0.1" }), jsx("rect", { x: "13", y: "13", width: "8", height: "8", rx: "1", fill: "white", opacity: "0.1" })] })),
+    },
+});
 
-export { NtdCheck, NtdClipboard, NtdCopy, NtdDownload, NtdEdit, NtdFilter, NtdLink, NtdLock, NtdLogIn, NtdLogOut, NtdMinus, NtdPlus, NtdPrint, NtdRedo, NtdReply, NtdSave, NtdSearch, NtdSettings, NtdShare, NtdSort, NtdTrash, NtdUndo, 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 };