@nice2dev/icons 1.3.2 → 1.3.4

package/dist/esm/iconParts.js

@@ -1,6 +1,14 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createIcon } from './createIcon.js';
 
+/**
+ * The colour of a detail drawn in secondary on a filled shape (a floppy's label, a ribbon): the
+ * secondary colour, but the accent colour in the cutout's mask — there secondary is cut out with
+ * the shape and the detail would vanish, while the accent draws in the cut.
+ */
+function detailColor({ variant, secondaryColor, accentColor }) {
+    return variant === 'cutout' ? accentColor : secondaryColor;
+}
 /**
  * `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
@@ -17,6 +25,29 @@ function within(uid, name, shape, content) {
     const id = `${uid}${name}`;
     return (jsxs(Fragment, { children: [jsx("clipPath", { id: id, children: shape }), jsx("g", { clipPath: `url(#${id})`, children: content })] }));
 }
+const BELL = 'M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9z';
+/** The clapper: a half disc r 3 under the bell (it was a thin arc). */
+const BELL_CLAPPER = 'M9 18.5h6a3 3 0 01-6 0z';
+const BELL_CLAPPER_LINE = 'M9 19a3 3 0 006 0';
+/** NtdBellRing's ring marks, either side of the crown. */
+const BELL_RINGS = 'M2 4l1.5 1.5M22 4l-1.5 1.5';
+/**
+ * NtdBell and NtdBellRing, so the two share one bell; `ringing` adds the ring marks. Duotone and
+ * vivid are fills only: the bell primary, the clapper secondary. The marks are primary on the solid
+ * bell, secondary in duotone and in the accent colour in vivid.
+ */
+function bellIcon(displayName, ringing) {
+    const parts = ({ primaryColor, strokeWidth }, detail, rings, ringsOpacity = 1) => (jsxs(Fragment, { children: [jsx("path", { d: BELL, fill: primaryColor }), jsx("path", { d: BELL_CLAPPER, fill: detail }), ringing && (jsx("path", { d: BELL_RINGS, stroke: rings, strokeWidth: strokeWidth, opacity: ringsOpacity }))] }));
+    return createIcon({
+        displayName,
+        paths: {
+            solid: (props) => parts(props, props.primaryColor, props.primaryColor),
+            outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: `${BELL}${BELL_CLAPPER_LINE}${ringing ? BELL_RINGS : ''}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
+            duotone: (props) => parts(props, props.secondaryColor, props.secondaryColor),
+            vivid: (props) => parts(props, props.secondaryColor, props.accentColor, props.accentOpacity),
+        },
+    });
+}
 /** 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';
@@ -26,7 +57,7 @@ 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),
+ * `text` is the document's writing, a path of strokes kept below the fold (y ≥ 11, x 7–17),
  * drawn in the accent colour on a filled page and in primary on a stroked one.
  */
 function paperIcon(displayName, text = '') {
@@ -43,4 +74,4 @@ function paperIcon(displayName, text = '') {
     });
 }
 
-export { paperIcon, within };
+export { bellIcon, detailColor, paperIcon, within };

package/dist/esm/icons/actions.js

@@ -1,16 +1,27 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createIcon } from '../createIcon.js';
-import { within } from '../iconParts.js';
+import { within, detailColor } from '../iconParts.js';
 
-const NtdSearch = /* @__PURE__ */ createIcon({
-    displayName: 'NtdSearch',
-    paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
-        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "11", cy: "11", r: "7", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        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" }) })),
-    },
-});
+/** The magnifier's lens (r 8 about 11,11) and its handle. */
+const LENS = 'M11 19a8 8 0 100-16 8 8 0 000 16z';
+const LENS_HANDLE = 'M21 21l-4.35-4.35';
+/**
+ * The magnifier of NtdSearch, NtdZoomIn and NtdZoomOut, so the three share one lens and handle;
+ * `glyph` is drawn inside the lens. A line glyph: twice the stroke width in every variant but
+ * `outline`. Duotone fills the lens in secondary, vivid draws the handle and the glyph in it.
+ */
+function lensIcon(displayName, glyph = '') {
+    return createIcon({
+        displayName,
+        paths: {
+            solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: `${LENS_HANDLE}${LENS}${glyph}`, stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })),
+            outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: `${LENS_HANDLE}${LENS}${glyph}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
+            duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: LENS, fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: `${LENS_HANDLE}${LENS}${glyph}`, stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
+            vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: LENS, stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: `${LENS_HANDLE}${glyph}`, stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
+        },
+    });
+}
+const NtdSearch = /* @__PURE__ */ lensIcon('NtdSearch');
 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',
@@ -53,16 +64,22 @@ const FLOPPY_BODY = 'M5 3h11.6L21 7.4V19a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012
 /** 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';
+/** The label's top band — vivid's third colour. */
+const FLOPPY_LABEL_BAND = 'M5.8 13.2h12.4v-1.6a1 1 0 00-1-1H6.8a1 1 0 00-1 1z';
 const NtdSave = /* @__PURE__ */ createIcon({
     displayName: 'NtdSave',
     paths: {
-        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" })),
+        // the shutter and the label in secondary (the accent is usually black or the page colour)
+        solid: (props) => (jsxs(Fragment, { children: [jsx("path", { d: FLOPPY_BODY, fill: props.primaryColor }), jsxs("g", { fill: detailColor(props), children: [jsx("path", { d: FLOPPY_SHUTTER, fillRule: "evenodd" }), jsx("path", { d: FLOPPY_LABEL })] })] })),
+        // the wireframe's construction — body, shutter with its window, label — at the stroke width
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: `${FLOPPY_BODY}${FLOPPY_SHUTTER}${FLOPPY_LABEL}`, stroke: primaryColor, strokeWidth: strokeWidth, 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 })] })),
+        vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: FLOPPY_BODY, fill: primaryColor }), jsxs("g", { fill: secondaryColor, children: [jsx("path", { d: FLOPPY_SHUTTER, fillRule: "evenodd" }), jsx("path", { d: FLOPPY_LABEL })] }), jsx("path", { d: FLOPPY_LABEL_BAND, fill: accentColor, opacity: accentOpacity })] })),
     },
 });
+/** The tray of NtdDownload and NtdUpload. */
+const TRAY = 'M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4';
 // 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({
@@ -70,8 +87,9 @@ const NtdDownload = /* @__PURE__ */ createIcon({
     paths: {
         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 }) })),
+        // the arrow primary, the tray secondary — a colour split, no filled tray
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: TRAY, stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsx("path", { d: "M7 10l5 5 5-5M12 13V3", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: TRAY, stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsx("path", { d: "M7 10l5 5 5-5M12 13V3", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
     },
 });
 const NtdUpload = /* @__PURE__ */ createIcon({
@@ -79,17 +97,26 @@ const NtdUpload = /* @__PURE__ */ createIcon({
     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 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 }) })),
+        // as NtdDownload: the arrow primary, the tray secondary
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: TRAY, stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsx("path", { d: "M17 8l-5-5-5 5M12 5v10", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: TRAY, stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsx("path", { d: "M17 8l-5-5-5 5M12 5v10", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
     },
 });
+// NtdShare: three nodes joined by two links, the links twice the stroke width in every variant but
+// `outline`. Duotone and vivid, fills only: the nodes primary, the links secondary (vivid had a
+// fixed #3B82F6 node and white links that vanished on a light page).
+const SHARE_NODES = 'M18 2a3 3 0 110 6 3 3 0 110-6zM6 9a3 3 0 110 6 3 3 0 110-6zM18 16a3 3 0 110 6 3 3 0 110-6z';
+const SHARE_LINKS = 'M8.59 13.51L15.42 17.49M15.41 6.51L8.59 10.49';
+function shareFilled(nodes, links, strokeWidth) {
+    return (jsxs(Fragment, { children: [jsx("path", { d: SHARE_LINKS, stroke: links, strokeWidth: strokeWidth * 2 }), jsx("path", { d: SHARE_NODES, fill: nodes })] }));
+}
 const NtdShare = /* @__PURE__ */ createIcon({
     displayName: 'NtdShare',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "18", cy: "5", r: "3", fill: primaryColor }), jsx("circle", { cx: "6", cy: "12", r: "3", fill: primaryColor }), jsx("circle", { cx: "18", cy: "19", r: "3", fill: primaryColor }), jsx("line", { x1: "8.59", y1: "13.51", x2: "15.42", y2: "17.49", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "15.41", y1: "6.51", x2: "8.59", y2: "10.49", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        solid: ({ primaryColor, strokeWidth }) => shareFilled(primaryColor, primaryColor, strokeWidth),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "18", cy: "5", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }), jsx("circle", { cx: "6", cy: "12", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }), jsx("circle", { cx: "18", cy: "19", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }), jsx("line", { x1: "8.59", y1: "13.51", x2: "15.42", y2: "17.49", stroke: primaryColor, strokeWidth: strokeWidth * 0.75 }), jsx("line", { x1: "15.41", y1: "6.51", x2: "8.59", y2: "10.49", stroke: primaryColor, strokeWidth: strokeWidth * 0.75 })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "18", cy: "5", r: "3", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "6", cy: "12", r: "3", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "18", cy: "19", r: "3", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "18", cy: "5", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }), jsx("circle", { cx: "6", cy: "12", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }), jsx("circle", { cx: "18", cy: "19", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }), jsx("line", { x1: "8.59", y1: "13.51", x2: "15.42", y2: "17.49", stroke: primaryColor, strokeWidth: strokeWidth * 0.75 }), jsx("line", { x1: "15.41", y1: "6.51", x2: "8.59", y2: "10.49", stroke: primaryColor, strokeWidth: strokeWidth * 0.75 })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "18", cy: "5", r: "3", fill: primaryColor }), jsx("circle", { cx: "18", cy: "5", r: "3", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "6", cy: "12", r: "3", fill: secondaryColor }), jsx("circle", { cx: "18", cy: "19", r: "3", fill: "#3B82F6" }), jsx("line", { x1: "8.59", y1: "13.51", x2: "15.42", y2: "17.49", stroke: "white", strokeWidth: "1" }), jsx("line", { x1: "15.41", y1: "6.51", x2: "8.59", y2: "10.49", stroke: "white", strokeWidth: "1" })] })),
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => shareFilled(primaryColor, secondaryColor, strokeWidth),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => shareFilled(primaryColor, secondaryColor, strokeWidth),
     },
 });
 const NtdCopy = /* @__PURE__ */ createIcon({
@@ -101,24 +128,28 @@ const NtdCopy = /* @__PURE__ */ createIcon({
         vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5", fill: primaryColor }), jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5", fill: "white", opacity: "0.1" }), jsx("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1", stroke: secondaryColor, strokeWidth: "1.8" })] })),
     },
 });
+/** NtdClipboard's two lines of text, high on the board (they sat below its middle). */
+const CLIPBOARD_TEXT = 'M8 11h8M8 14.5h5';
 const NtdClipboard = /* @__PURE__ */ createIcon({
     displayName: 'NtdClipboard',
     paths: {
-        solid: ({ primaryColor, accentColor, accentOpacity }) => (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("rect", { x: "8", y: "2", width: "8", height: "3.5", rx: "1.5", fill: primaryColor, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity }), jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity }), jsx("line", { x1: "8", y1: "15.5", x2: "13", y2: "15.5", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })),
-        outline: ({ primaryColor, strokeWidth }) => (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", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "8", y: "2", width: "8", height: "3.5", rx: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "15.5", x2: "13", y2: "15.5", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "4", width: "16", height: "18", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "8", y: "2", width: "8", height: "3.5", rx: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "15.5", x2: "13", y2: "15.5", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        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" })] })),
+        solid: ({ primaryColor, accentColor, accentOpacity }) => (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("rect", { x: "8", y: "2", width: "8", height: "3.5", rx: "1.5", fill: primaryColor, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity }), jsx("path", { d: CLIPBOARD_TEXT, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })),
+        outline: ({ primaryColor, strokeWidth }) => (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", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "8", y: "2", width: "8", height: "3.5", rx: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: CLIPBOARD_TEXT, stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "4", width: "16", height: "18", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "8", y: "2", width: "8", height: "3.5", rx: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: CLIPBOARD_TEXT, stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (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("rect", { x: "8", y: "2", width: "8", height: "3.5", rx: "1.5", fill: secondaryColor, stroke: secondaryColor, strokeWidth: "1.5" }), jsx("path", { d: CLIPBOARD_TEXT, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })),
     },
 });
 // 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`.
+// `solid` reads bold next to `outline` and still follows `strokeWidth`. Plus, check and close
+// split their two strokes between the colours in duotone and vivid (no backing disc); vivid adds
+// the crossing of the plus and the close in the accent colour.
 const NtdPlus = /* @__PURE__ */ createIcon({
     displayName: 'NtdPlus',
     paths: {
         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, strokeWidth }) => (jsx(Fragment, { children: jsx("path", { d: "M12 5v14M5 12h14", stroke: primaryColor, strokeWidth: strokeWidth * 2 }) })),
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M5 12h14", stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsx("path", { d: "M12 5v14", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
+        vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M5 12h14", stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsx("path", { d: "M12 5v14", stroke: primaryColor, strokeWidth: strokeWidth * 2 }), jsx("rect", { x: 12 - strokeWidth, y: 12 - strokeWidth, width: strokeWidth * 2, height: strokeWidth * 2, fill: accentColor, opacity: accentOpacity })] })),
     },
 });
 const NtdMinus = /* @__PURE__ */ createIcon({
@@ -135,8 +166,8 @@ const NtdCheck = /* @__PURE__ */ createIcon({
     paths: {
         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, strokeWidth }) => (jsx(Fragment, { children: jsx("path", { d: "M20 6L9 17l-5-5", stroke: primaryColor, strokeWidth: strokeWidth * 2 }) })),
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9 17l-5-5", stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsx("path", { d: "M20 6L9 17", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9 17l-5-5", stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsx("path", { d: "M20 6L9 17", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
     },
 });
 const NtdFilter = /* @__PURE__ */ createIcon({
@@ -166,52 +197,38 @@ const NtdPrint = /* @__PURE__ */ createIcon({
         vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M4 9h16a2 2 0 012 2v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2z", fill: primaryColor }), jsx("path", { d: "M4 9h16a2 2 0 012 2v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2z", fill: "white", opacity: "0.08" }), jsx("path", { d: "M6 9V3h12v6", stroke: secondaryColor, strokeWidth: "2", fill: secondaryColor }), jsx("rect", { x: "6", y: "15", width: "12", height: "7", rx: "1", fill: "#3B82F6" }), jsx("line", { x1: "9", y1: "18", x2: "15", y2: "18", stroke: "white", strokeWidth: "1", opacity: "0.35" })] })),
     },
 });
-const NtdZoomIn = /* @__PURE__ */ createIcon({
-    displayName: 'NtdZoomIn',
-    paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "11", cy: "11", r: "8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "11", y1: "8", x2: "11", y2: "14", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "11", cy: "11", r: "8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "11", y1: "8", x2: "11", y2: "14", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "11", cy: "11", r: "7", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "11", cy: "11", r: "8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "11", y1: "8", x2: "11", y2: "14", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "11", cy: "11", r: "8", stroke: primaryColor, strokeWidth: "2", fill: "none" }), jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65", stroke: secondaryColor, strokeWidth: "1.8" }), jsx("line", { x1: "11", y1: "8", x2: "11", y2: "14", stroke: "#3B82F6", strokeWidth: "1.5" }), jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11", stroke: secondaryColor, strokeWidth: "1.5" })] })),
-    },
-});
-const NtdZoomOut = /* @__PURE__ */ createIcon({
-    displayName: 'NtdZoomOut',
-    paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "11", cy: "11", r: "8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "11", cy: "11", r: "8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "11", cy: "11", r: "7", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "11", cy: "11", r: "8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "11", cy: "11", r: "8", stroke: primaryColor, strokeWidth: "2", fill: "none" }), jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65", stroke: secondaryColor, strokeWidth: "1.8" }), jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
-    },
-});
+const NtdZoomIn = /* @__PURE__ */ lensIcon('NtdZoomIn', 'M11 8v6M8 11h6');
+const NtdZoomOut = /* @__PURE__ */ lensIcon('NtdZoomOut', 'M8 11h6');
 /* NtdUndo / NtdRedo — the old glyph was two arcs of different radii whose ends
    never met the arrow, which read as a fish rather than a rotation. Redrawn as
    one semicircular loop (r 5.5 about 13.5,14 — mirrored to 10.5,14 for redo)
    plus a chevron whose apex lands exactly on the tail start, so the arrow and
    the tail close. `solid` fills the head so it is no longer byte-identical to
    `outline`; the tail then starts at the head's back edge (9.5 / 14.5) instead
-   of the apex, keeping the stroke cap from poking past the tip. */
+   of the apex, keeping the stroke cap from poking past the tip — duotone and
+   vivid too. Every variant but `outline` draws the tail at twice the stroke
+   width. */
 const NtdUndo = /* @__PURE__ */ createIcon({
     displayName: 'NtdUndo',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9.5 8.5H13.5a5.5 5.5 0 1 1 0 11H9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M9.5 4L5 8.5l4.5 4.5z", fill: primaryColor })] })),
+        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9.5 8.5H13.5a5.5 5.5 0 1 1 0 11H9", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M9.5 4L5 8.5l4.5 4.5z", fill: primaryColor })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M5 8.5H13.5a5.5 5.5 0 1 1 0 11H9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M9.5 4L5 8.5l4.5 4.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         // Two-tone by PART, not by a backing blob: arrowhead in primary, tail in
         // secondary, both at full strength. (The old version put a secondary disc
         // behind the curve, which read as "a ball in the middle"; a washed-out tail
         // would likewise miss the point — this is a colour split, not an underlay.)
-        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M5 8.5H13.5a5.5 5.5 0 1 1 0 11H9", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M9.5 4L5 8.5l4.5 4.5z", fill: primaryColor })] })),
-        vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9.5 8.5H13.5a5.5 5.5 0 1 1 0 11H9", stroke: primaryColor, strokeWidth: "2.2", fill: "none" }), jsx("path", { d: "M9.5 4L5 8.5l4.5 4.5z", fill: primaryColor })] })),
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9.5 8.5H13.5a5.5 5.5 0 1 1 0 11H9", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M9.5 4L5 8.5l4.5 4.5z", fill: primaryColor })] })),
+        vivid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9.5 8.5H13.5a5.5 5.5 0 1 1 0 11H9", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M9.5 4L5 8.5l4.5 4.5z", fill: primaryColor })] })),
     },
 });
 const NtdRedo = /* @__PURE__ */ createIcon({
     displayName: 'NtdRedo',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M14.5 8.5H10.5a5.5 5.5 0 1 0 0 11H15", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M14.5 4L19 8.5l-4.5 4.5z", fill: primaryColor })] })),
+        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M14.5 8.5H10.5a5.5 5.5 0 1 0 0 11H15", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M14.5 4L19 8.5l-4.5 4.5z", fill: primaryColor })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M19 8.5H10.5a5.5 5.5 0 1 0 0 11H15", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M14.5 4L19 8.5l-4.5 4.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         // Mirror of NtdUndo: arrowhead primary, tail secondary — no backing disc.
-        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M19 8.5H10.5a5.5 5.5 0 1 0 0 11H15", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M14.5 4L19 8.5l-4.5 4.5z", fill: primaryColor })] })),
-        vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M14.5 8.5H10.5a5.5 5.5 0 1 0 0 11H15", stroke: primaryColor, strokeWidth: "2.2", fill: "none" }), jsx("path", { d: "M14.5 4L19 8.5l-4.5 4.5z", fill: primaryColor })] })),
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M14.5 8.5H10.5a5.5 5.5 0 1 0 0 11H15", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M14.5 4L19 8.5l-4.5 4.5z", fill: primaryColor })] })),
+        vivid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M14.5 8.5H10.5a5.5 5.5 0 1 0 0 11H15", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M14.5 4L19 8.5l-4.5 4.5z", fill: primaryColor })] })),
     },
 });
 // Reply: the arrow turns back to the left at a right angle (the "corner-up-left" of a message
@@ -225,14 +242,15 @@ const NtdReply = /* @__PURE__ */ createIcon({
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20 18v-2a4 4 0 0 0-4-4H8", stroke: primaryColor, strokeWidth: "2.2", fill: "none" }), jsx("path", { d: "M9 7L4 12l5 5z", fill: primaryColor })] })),
     },
 });
+// A line glyph: twice the stroke width in every variant but `outline`.
 const NtdLink = /* @__PURE__ */ createIcon({
     displayName: 'NtdLink',
     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" })),
+        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 * 2, 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" })),
         // 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" }) })),
+        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 * 2, 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 * 2, fill: "none" })] })),
+        vivid: ({ primaryColor, strokeWidth }) => (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: strokeWidth * 2, fill: "none" }) })),
     },
 });
 // NtdSettings: a gear whose eight teeth have flat tops, in every variant but `rounded`, which
@@ -254,22 +272,25 @@ const NtdSettings = /* @__PURE__ */ createIcon({
         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 })] })),
     },
 });
+// NtdLogIn / NtdLogOut: a line glyph, twice the stroke width in every variant but `outline`. The
+// shaft stops 2 short of the arrowhead's point, so the square caps of `sharp` stay inside it.
+// Duotone and vivid split it like NtdDownload: the arrow primary, the door frame secondary.
 const NtdLogIn = /* @__PURE__ */ createIcon({
     displayName: 'NtdLogIn',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("polyline", { points: "9,17 14,12 9,7", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "14", y1: "12", x2: "3", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("polyline", { points: "9,17 14,12 9,7", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "14", y1: "12", x2: "3", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "15", y: "3", width: "6", height: "18", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("polyline", { points: "9,17 14,12 9,7", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "14", y1: "12", x2: "3", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4", stroke: primaryColor, strokeWidth: "2" }), jsx("polyline", { points: "9,17 14,12 9,7", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsx("line", { x1: "14", y1: "12", x2: "3", y2: "12", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
+        solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M9 7l5 5-5 5M12 12H3", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M9 7l5 5-5 5M14 12H3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M9 7l5 5-5 5M12 12H3", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M9 7l5 5-5 5M12 12H3", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
     },
 });
 const NtdLogOut = /* @__PURE__ */ createIcon({
     displayName: 'NtdLogOut',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("polyline", { points: "15,17 20,12 15,7", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "20", y1: "12", x2: "9", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("polyline", { points: "15,17 20,12 15,7", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "20", y1: "12", x2: "9", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "6", height: "18", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("polyline", { points: "15,17 20,12 15,7", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "20", y1: "12", x2: "9", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: primaryColor, strokeWidth: "2" }), jsx("polyline", { points: "15,17 20,12 15,7", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsx("line", { x1: "20", y1: "12", x2: "9", y2: "12", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
+        solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M15 7l5 5-5 5M18 12H9", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M15 7l5 5-5 5M20 12H9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M15 7l5 5-5 5M18 12H9", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M15 7l5 5-5 5M18 12H9", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
     },
 });
 const NtdLock = /* @__PURE__ */ createIcon({

package/dist/esm/icons/business.js

@@ -3,49 +3,65 @@ import { createIcon } from '../createIcon.js';
 import { paperIcon, within } from '../iconParts.js';
 
 // The band sits halfway down the case and is a cut through it: kept inside the case it meets the
-// sides flush (its round caps stuck out of both). A clasp hangs from its middle.
+// sides flush (its round caps stuck out of both). A clasp hangs from its middle: low and wide, in
+// the accent colour like the band on the filled case (secondary in duotone), with a primary lock
+// square in it where it had a slot showing the band through.
 const BRIEFCASE_CASE = { x: 2, y: 7, width: 20, height: 14, rx: 2 };
 const BRIEFCASE_HANDLE = 'M16 7V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2';
-/** The clasp over the band, hanging down from it, with its slot (even-odd). */
-const BRIEFCASE_CLASP = 'M11.2 11.2h1.6a.8.8 0 01.8.8v3.4a.8.8 0 01-.8.8h-1.6a.8.8 0 01-.8-.8V12a.8.8 0 01.8-.8z';
-const BRIEFCASE_SLOT = 'M11.4 13.6h1.2v1.2h-1.2z';
+/** The clasp over the band, hanging down from it. */
+const BRIEFCASE_CLASP = 'M10.6 11.3h2.8a.8.8 0 01.8.8v2.6a.8.8 0 01-.8.8h-2.8a.8.8 0 01-.8-.8v-2.6a.8.8 0 01.8-.8z';
+const BRIEFCASE_LOCK = { x: 11.2, y: 12.6, width: 1.6, height: 1.6 };
 const NtdBriefcase = /* @__PURE__ */ createIcon({
     displayName: 'NtdBriefcase',
     paths: {
-        solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("rect", { ...BRIEFCASE_CASE, fill: primaryColor }), jsx("path", { d: BRIEFCASE_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxs("g", { fill: accentColor, opacity: accentOpacity, children: [within(uid, 'band', jsx("rect", { ...BRIEFCASE_CASE }), jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: accentColor, strokeWidth: "1.5" })), jsx("path", { d: `${BRIEFCASE_CLASP}${BRIEFCASE_SLOT}`, fillRule: "evenodd" })] })] })),
+        solid: (props) => (jsxs(Fragment, { children: [jsx("rect", { ...BRIEFCASE_CASE, fill: props.primaryColor }), jsx("path", { d: BRIEFCASE_HANDLE, stroke: props.primaryColor, strokeWidth: props.strokeWidth, fill: "none" }), within(props.uid, 'band', jsx("rect", { ...BRIEFCASE_CASE }), jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: props.accentColor, strokeWidth: "1.5", opacity: props.accentOpacity })), jsx("path", { d: BRIEFCASE_CLASP, fill: props.accentColor, opacity: props.accentOpacity }), jsx("rect", { ...BRIEFCASE_LOCK, fill: props.primaryColor })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...BRIEFCASE_CASE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: BRIEFCASE_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: primaryColor, strokeWidth: "1.5" }), jsx("path", { d: BRIEFCASE_CLASP, fill: primaryColor })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...BRIEFCASE_CASE, fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { ...BRIEFCASE_CASE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: BRIEFCASE_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: primaryColor, strokeWidth: "1.5" }), jsx("path", { d: BRIEFCASE_CLASP, fill: primaryColor })] })),
-        vivid: ({ primaryColor, secondaryColor, uid }) => (jsxs(Fragment, { children: [jsx("rect", { ...BRIEFCASE_CASE, fill: primaryColor }), jsx("rect", { ...BRIEFCASE_CASE, fill: "white", opacity: "0.1" }), jsx("path", { d: BRIEFCASE_HANDLE, stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), within(uid, 'band', jsx("rect", { ...BRIEFCASE_CASE }), jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: secondaryColor, strokeWidth: "1.5" })), jsx("path", { d: `${BRIEFCASE_CLASP}${BRIEFCASE_SLOT}`, fillRule: "evenodd", fill: secondaryColor })] })),
+        // fills only: the case and the handle primary, the band and the clasp secondary
+        duotone: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("rect", { ...BRIEFCASE_CASE, fill: primaryColor }), jsx("path", { d: BRIEFCASE_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), within(uid, 'band', jsx("rect", { ...BRIEFCASE_CASE }), jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: secondaryColor, strokeWidth: "1.5" })), jsx("path", { d: BRIEFCASE_CLASP, fill: secondaryColor }), jsx("rect", { ...BRIEFCASE_LOCK, fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("rect", { ...BRIEFCASE_CASE, fill: primaryColor }), jsx("path", { d: BRIEFCASE_HANDLE, stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }), within(uid, 'band', jsx("rect", { ...BRIEFCASE_CASE }), jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: secondaryColor, strokeWidth: "1.5" })), jsx("path", { d: BRIEFCASE_CLASP, fill: accentColor, opacity: accentOpacity }), jsx("rect", { ...BRIEFCASE_LOCK, fill: primaryColor })] })),
     },
 });
+// NtdDollar: a line glyph, twice the stroke width in every variant but `outline`; the stem runs
+// 2.5 → 21.5 there, so its caps stay inside the box at that width.
+const DOLLAR_S = 'M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6';
+const DOLLAR_STEM = 'M12 2.5v19';
 const NtdDollar = /* @__PURE__ */ createIcon({
     displayName: 'NtdDollar',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "12", y1: "1", x2: "12", y2: "23", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "12", y1: "1", x2: "12", y2: "23", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.2 }), jsx("line", { x1: "12", y1: "1", x2: "12", y2: "23", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("line", { x1: "12", y1: "1", x2: "12", y2: "23", stroke: primaryColor, strokeWidth: "2" }), jsx("path", { d: "M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6", stroke: secondaryColor, strokeWidth: "2", fill: "none" })] })),
+        solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: `${DOLLAR_STEM}${DOLLAR_S}`, stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: `M12 1v22${DOLLAR_S}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: DOLLAR_S, stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: DOLLAR_STEM, stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: DOLLAR_S, stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: DOLLAR_STEM, stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
     },
 });
+// NtdWallet: a body, the back pocket rising above it on a slant (it runs under the body, so the
+// two meet without a seam — the old top stroke stopped short of the body), and a clasp pocket cut
+// into the right side with its stud. Filled, the pocket is in the accent colour.
+const WALLET_BODY = { x: 2, y: 6.5, width: 20, height: 14.5, rx: 2.5 };
+const WALLET_BACK = 'M4.5 8L16 3.5a1 1 0 011.3.95V8z';
+const WALLET_POCKET = 'M22 10.5h-4.5a2.5 2.5 0 000 5H22z';
+const WALLET_POCKET_LINE = 'M22 10.5h-4.5a2.5 2.5 0 000 5H22';
 const NtdWallet = /* @__PURE__ */ createIcon({
     displayName: 'NtdWallet',
     paths: {
-        solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "5", width: "20", height: "16", rx: "2", fill: primaryColor }), jsx("path", { d: "M2 5a2 2 0 012-2h12l4 4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "18", cy: "13", r: "1.5", fill: accentColor, opacity: accentOpacity })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "5", width: "20", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M2 5a2 2 0 012-2h12l4 4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "18", cy: "13", r: "1.5", fill: primaryColor })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "5", width: "20", height: "16", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "2", y: "5", width: "20", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "18", cy: "13", r: "1.5", fill: primaryColor })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "5", width: "20", height: "16", rx: "2", fill: primaryColor }), jsx("rect", { x: "2", y: "5", width: "20", height: "16", rx: "2", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "18", cy: "13", r: "1.5", fill: secondaryColor }), jsx("path", { d: "M2 5a2 2 0 012-2h12l4 4", stroke: "white", strokeWidth: "1", fill: "none" })] })),
+        solid: ({ primaryColor, accentColor, accentOpacity, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: WALLET_BACK, fill: primaryColor }), jsx("rect", { ...WALLET_BODY, fill: primaryColor }), within(uid, 'pocket', jsx("rect", { ...WALLET_BODY }), jsx("path", { d: WALLET_POCKET, fill: accentColor, opacity: accentOpacity })), jsx("circle", { cx: "17.6", cy: "13", r: "1.1", fill: primaryColor })] })),
+        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M4.5 6.5L16 3.5a1 1 0 011.3.95V6.5", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "miter", fill: "none" }), jsx("rect", { ...WALLET_BODY, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: WALLET_POCKET_LINE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "17.6", cy: "13", r: "1.1", fill: primaryColor })] })),
+        // fills only: the body primary, the back pocket and the clasp pocket secondary
+        duotone: ({ primaryColor, secondaryColor, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: WALLET_BACK, fill: secondaryColor }), jsx("rect", { ...WALLET_BODY, fill: primaryColor }), within(uid, 'pocket', jsx("rect", { ...WALLET_BODY }), jsx("path", { d: WALLET_POCKET, fill: secondaryColor })), jsx("circle", { cx: "17.6", cy: "13", r: "1.1", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: WALLET_BACK, fill: secondaryColor }), jsx("rect", { ...WALLET_BODY, fill: primaryColor }), within(uid, 'pocket', jsx("rect", { ...WALLET_BODY }), jsx("path", { d: WALLET_POCKET, fill: accentColor, opacity: accentOpacity })), jsx("circle", { cx: "17.6", cy: "13", r: "1.1", fill: secondaryColor })] })),
     },
 });
-// NtdReceipt: two rows of description and amount, then the total on its own on the right.
+// NtdReceipt: two rows of description and amount, then the total on its own on the right. The
+// amounts end at 18.4, right by the edge; the descriptions run 7 → 13.5.
 const RECEIPT = 'M4 2v20l3-2 3 2 3-2 3 2 3-2 3 2V2H4z';
-const RECEIPT_TEXT = 'M7.5 7.5h5M15.5 7.5h2M7.5 11.5h5M15.5 11.5h2M13.5 15.5h4';
+const RECEIPT_TEXT = 'M7 7.5h6.5M16.4 7.5h2M7 11.5h6.5M16.4 11.5h2M14.4 15.5h4';
 const NtdReceipt = /* @__PURE__ */ createIcon({
     displayName: 'NtdReceipt',
     paths: {
         solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: RECEIPT, fill: primaryColor }), jsx("path", { d: RECEIPT_TEXT, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity, fill: "none" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: RECEIPT, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: RECEIPT_TEXT, stroke: primaryColor, strokeWidth: "1.5", fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: RECEIPT, fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: RECEIPT, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: RECEIPT_TEXT, stroke: primaryColor, strokeWidth: "1.5", fill: "none" })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: RECEIPT, fill: primaryColor }), jsx("path", { d: RECEIPT, fill: "white", opacity: "0.1" }), jsx("path", { d: RECEIPT_TEXT, stroke: "white", strokeOpacity: "0.9", strokeWidth: "1.5", fill: "none" }), jsx("path", { d: "M13.5 15.5h4", stroke: secondaryColor, strokeWidth: "1.8" })] })),
+        vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: RECEIPT, fill: primaryColor }), jsx("path", { d: RECEIPT_TEXT, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity, fill: "none" }), jsx("path", { d: "M14.4 15.5h4", stroke: secondaryColor, strokeWidth: "1.8" })] })),
     },
 });
 const NtdBank = /* @__PURE__ */ createIcon({
@@ -57,22 +73,43 @@ const NtdBank = /* @__PURE__ */ createIcon({
         vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("polygon", { points: "12,2 2,9 22,9", fill: primaryColor }), jsx("polygon", { points: "12,2 2,9 22,9", fill: "white", opacity: "0.08" }), jsx("rect", { x: "2", y: "18", width: "20", height: "2", rx: "0.5", fill: secondaryColor }), jsx("rect", { x: "5", y: "9", width: "2", height: "9", fill: "#3B82F6" }), jsx("rect", { x: "9", y: "9", width: "2", height: "9", fill: "#10B981" }), jsx("rect", { x: "13", y: "9", width: "2", height: "9", fill: "#F59E0B" }), jsx("rect", { x: "17", y: "9", width: "2", height: "9", fill: "#F59E0B" })] })),
     },
 });
+// NtdTrendUp / NtdTrendDown: line glyphs, twice the stroke width in every variant but `outline`,
+// drawn 2 in from the box at that width. The line's last leg stops 0.35 × the line width short of
+// the head's corner on each axis — run into the corner, its square cap stuck out in `sharp`.
+function trendUp(back) {
+    return { line: `M3 16l5-5 4 4L${21 - back} ${6 + back}`, head: 'M15 6h6v6' };
+}
+function trendDown(back) {
+    return { line: `M3 8l5 5 4-4L${21 - back} ${18 - back}`, head: 'M15 18h6v-6' };
+}
+function trendArrow(shape, line, head, strokeWidth) {
+    const width = strokeWidth * 2;
+    const s = shape(width * 0.35);
+    return (jsxs(Fragment, { children: [jsx("path", { d: s.line, stroke: line, strokeWidth: width, fill: "none" }), jsx("path", { d: s.head, stroke: head, strokeWidth: width, fill: "none" })] }));
+}
+function trendOutline(shape) {
+    return ({ primaryColor, strokeWidth }) => {
+        const s = shape(0);
+        return (jsx("path", { d: `${s.line}${s.head}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }));
+    };
+}
 const NtdTrendUp = /* @__PURE__ */ createIcon({
     displayName: 'NtdTrendUp',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "23,6 13.5,15.5 8.5,10.5 1,18", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("polyline", { points: "17,6 23,6 23,12", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "23,6 13.5,15.5 8.5,10.5 1,18", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("polyline", { points: "17,6 23,6 23,12", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "23,6 13.5,15.5 8.5,10.5 1,18", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.3 }), jsx("polyline", { points: "17,6 23,6 23,12", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "23,6 13.5,15.5 8.5,10.5 1,18", stroke: primaryColor, strokeWidth: "2", fill: "none" }), jsx("polyline", { points: "17,6 23,6 23,12", stroke: secondaryColor, strokeWidth: "2", fill: "none" })] })),
+        solid: ({ primaryColor, strokeWidth }) => trendArrow(trendUp, primaryColor, primaryColor, strokeWidth),
+        outline: trendOutline(trendUp),
+        // the line secondary, the head primary
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => trendArrow(trendUp, secondaryColor, primaryColor, strokeWidth),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => trendArrow(trendUp, primaryColor, secondaryColor, strokeWidth),
     },
 });
 const NtdTrendDown = /* @__PURE__ */ createIcon({
     displayName: 'NtdTrendDown',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "23,18 13.5,8.5 8.5,13.5 1,6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("polyline", { points: "17,18 23,18 23,12", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "23,18 13.5,8.5 8.5,13.5 1,6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("polyline", { points: "17,18 23,18 23,12", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "23,18 13.5,8.5 8.5,13.5 1,6", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.3 }), jsx("polyline", { points: "17,18 23,18 23,12", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "23,18 13.5,8.5 8.5,13.5 1,6", stroke: primaryColor, strokeWidth: "2", fill: "none" }), jsx("polyline", { points: "17,18 23,18 23,12", stroke: secondaryColor, strokeWidth: "2", fill: "none" })] })),
+        solid: ({ primaryColor, strokeWidth }) => trendArrow(trendDown, primaryColor, primaryColor, strokeWidth),
+        outline: trendOutline(trendDown),
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => trendArrow(trendDown, secondaryColor, primaryColor, strokeWidth),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => trendArrow(trendDown, primaryColor, secondaryColor, strokeWidth),
     },
 });
 // NtdPercent: the dots are rings in every variant, a hole in each (they were plain discs when
@@ -89,8 +126,8 @@ const NtdPercent = /* @__PURE__ */ createIcon({
     },
 });
 // NtdInvoice: NtdFile's page with a short title, two rows of item and amount, and the total on
-// its own at the bottom right, as on a receipt.
-const NtdInvoice = /* @__PURE__ */ paperIcon('NtdInvoice', 'M7.5 7h2.5M7.5 12.5h3.3M13.8 12.5h2.7M7.5 15.5h3.3M13.8 15.5h2.7M12.5 19h4');
+// its own at the bottom right, as on a receipt: the items from 7 to 11.5, the amounts out to 17.
+const NtdInvoice = /* @__PURE__ */ paperIcon('NtdInvoice', 'M7 7h3M7 12.5h4.5M14.3 12.5h2.7M7 15.5h4.5M14.3 15.5h2.7M13 19h4');
 /** @deprecated A second invoice next to {@link NtdInvoice} — use that. */
 const NtdInvoiceDoc = NtdInvoice;
 const NtdStore = /* @__PURE__ */ createIcon({