@nice2dev/icons 1.3.2 → 1.3.4

package/CHANGELOG.md

@@ -1,5 +1,127 @@
 # @nice2dev/icons — Changelog
 
+## 1.3.4
+
+### Patch Changes
+
+- 15f3a18: Icon browser feedback, round 34:
+
+  - Twice the stroke width in every variant but `outline`:
+    - `NtdMusic`: the stems move left so they still end flush with the note heads.
+    - `NtdClock`: the hands.
+    - `NtdShare`: the links.
+    - `NtdRepeat`: shafts and heads, redrawn tighter so they stay in the box; the shafts stop
+      short of the heads' points, so nothing sticks out in `sharp`.
+  - `NtdRefresh`: smaller heads, each pointing at the start of the other arrow's tail with a
+    clear gap.
+  - `NtdWifi`: the inner arc sits further from the dot, the arcs closer together.
+  - `NtdList`: dots a quarter smaller.
+  - Colours:
+    - `NtdHeart`: vivid outlines the split heart in the accent colour instead of an accent seam.
+    - `NtdBellRing`: the ring marks are primary when filled, accent in vivid.
+    - `NtdBriefcase`: the clasp is in the accent colour with a primary lock square.
+    - `NtdSmartphone`: filled, a primary frame round an accent screen with a primary button.
+  - Shapes:
+    - `NtdBook`: a notch in the right edge beside the pages, leaving a narrow strip of cover.
+    - `NtdNotebook`: a wider, shorter cover.
+    - `NtdAward`: the ribbon's inside between the two earlier sizes.
+    - `NtdApartment`: a thin primary sill under the door when filled.
+    - `NtdBus`: a front view with a big windscreen, the driver, headlights and rectangular wheels.
+    - `NtdBrush`: redrawn as a paintbrush — handle, ferrule and pointed bristles.
+  - Hardcoded colours (`#3B82F6`, white) are gone from `NtdShare` and `NtdRepeat`.
+
+- 4fae5a4: `NtdHourglass` and the `turn` animation:
+
+  - `NtdHourglass`: two plates and a curved glass, the sand running from the top bulb through a
+    thread onto a pile in the bottom one. `NiceIcon` resolves it as `hourglass`.
+  - `animation="turn"` works on every icon: it turns the icon upside down, holds, turns it back
+    and holds again. On `NtdHourglass` the sand pours during the holds, in step with the turns.
+  - `animationDuration` now also sets the `--ntd-anim-duration` CSS variable, so parts an icon
+    animates inside itself (the hourglass sand) keep the same duration.
+
+## 1.3.3
+
+### Patch Changes
+
+- 54a632e: Icon browser feedback, round 32:
+
+  - Line glyphs are twice the stroke width in every variant but `outline`: `NtdSearch`,
+    `NtdZoomIn`, `NtdZoomOut`, `NtdUndo`, `NtdRedo` (the tail; the head is unchanged), `NtdLink`,
+    `NtdLogIn`, `NtdLogOut`, and the stands of `NtdMicrophone` and `NtdMicrophoneOff`. The
+    microphones sit a little higher so the base stays inside the box. `NtdMicrophoneOff` keeps a gap
+    around its slash. `NtdGlobe`'s grid is twice as thick in the filled variants, but stays thin in
+    `outline`, `wireframe`, `duotone` and `cutout`.
+  - Shared sources: `NtdSearch`, `NtdZoomIn` and `NtdZoomOut` share one magnifier. `NtdBell` and
+    `NtdBellRing` share one bell, whose clapper is now a large half disc.
+  - Duotone (and vivid where noted) splits colours by part, with no backing disc or outline ring:
+    - `NtdPlus`, `NtdCheck`, `NtdClose`: the two strokes in different colours. Vivid adds the
+      crossing of the plus and the close in the accent colour.
+    - `NtdDownload`, `NtdUpload`, `NtdLogIn`, `NtdLogOut`: the arrow in primary, the tray or door
+      frame in secondary.
+    - `NtdChat`: the tail in secondary.
+    - `NtdFolder`: the tab in secondary.
+    - `NtdVideo`: the lens in secondary.
+    - `NtdUser`, `NtdAdmin`: the shoulders in secondary.
+    - `NtdLab`: vivid without the bubbles.
+    - `NtdApartment`: the windows and door in secondary.
+    - `NtdBriefcase`: the band and clasp in secondary.
+    - `NtdEye`: the eye in secondary.
+  - Filled variants:
+    - `NtdCalendar`: the header and rings in secondary over a primary sheet, the line between them
+      raised a little.
+    - `NtdSave`: the shutter and label in secondary.
+    - `NtdAward`: the ribbon filled in secondary.
+    - `NtdBriefcase`: a lower, wider clasp in secondary, and in the accent colour in vivid.
+    - `NtdPackage`: primary walls with accent edges, replacing the fixed 15% tint.
+    - `NtdApartment`: windows and door drawn as accent frames.
+    - `NtdEye`: a larger secondary pupil inside a thinner accent ring.
+  - Shapes:
+    - `NtdAdmin`: a longer tie that runs to the bottom edge.
+    - `NtdGarage`: three door panels of equal height, and square bottom corners in `sharp`.
+    - `NtdBook`: the pages set in from the cover's right edge.
+    - `NtdClipboard`: the lines of text sit higher.
+    - `NtdReceipt` and `NtdInvoice`: amounts further right, longer descriptions.
+    - `NtdSave` in `outline`: a larger shutter and window.
+    - `NtdDatabase` in `wireframe`: the outline's construction (it showed the gap bands as double
+      arcs).
+  - Hardcoded colours (`#3B82F6`, `#8B5CF6`, `#CBD5E1`, white overlays) are gone from the vivid
+    variants touched here.
+  - The cutout mask now renders `paths.solid` with `variant: 'cutout'` (the RSC renderer already
+    did), so a renderer can keep details visible in the cut.
+
+- 9628cdc: Icon browser feedback, round 33:
+
+  - Heavier line glyphs in every variant but `outline`:
+    - twice the stroke width: `NtdDollar`, `NtdTrendUp`, `NtdTrendDown`, `NtdMaximize`,
+      `NtdMinimize`, `NtdRefresh`, and the pins of `NtdCpu`;
+    - 1.5 times: `NtdWifi` (its arcs are now concentric about the dot) and `NtdList` (its dots
+      are larger too).
+    - Arrow shafts stop short of their head's corner, so nothing sticks out in `sharp`.
+    - `NtdRefresh` is redrawn as two arcs with filled heads.
+  - Colours:
+    - `NtdEye`: a larger pupil, primary in the filled variants and secondary in duotone and
+      vivid, ringed in the accent colour.
+    - `NtdAtom`: the nucleus is primary when filled and secondary in duotone and vivid; vivid
+      adds an accent glow to the orbits.
+    - `NtdMountain`: the snow is secondary again.
+    - `NtdHeart`: duotone swaps its colours; vivid splits the heart in two with an accent seam.
+    - `NtdMenu`: the middle bar is secondary in duotone and vivid.
+    - `NtdCpu`: primary body, accent die (it had a fixed tint).
+    - `NtdApartment`: windows and door filled in the accent colour.
+    - `NtdCalculator`: accent display and key outlines (they were a fixed white).
+    - `NtdNotebook`: accent writing, shorter rings, fills-only duotone.
+  - Shapes:
+    - `NtdDatabase`: three discs of equal height.
+    - `NtdBook`: pages set further in from the cover's right edge.
+    - `NtdAward`: a smaller secondary inside on the ribbon.
+    - `NtdReceipt`: amounts further right.
+    - `NtdBus`: a side view with a passenger in the window.
+    - `NtdWallet`: redrawn — body, back pocket and clasp pocket.
+  - Outline and wireframe:
+    - `NtdSave`: the outline draws the wireframe's construction.
+    - `NtdGarage`: the wireframe takes the outline's evenly spaced door slats.
+  - Hardcoded colours (`#3B82F6`, `#8B5CF6`, `#F59E0B`, white) are gone from the touched icons.
+
 ## 1.3.2
 
 No changes in this release.

package/README.md

@@ -193,6 +193,14 @@ Apply an animation by name:
 
 Each animation maps to a CSS class `.ntd-anim-{name}` defined in `animations.css` (auto-imported).
 
+`turn` turns any icon upside down, holds, turns it back and holds again. On `NtdHourglass` the
+sand pours while it holds, in step with the turns at any `animationDuration`:
+
+```tsx
+<NtdHourglass animation="turn" />
+<NtdHourglass animation="turn" animationDuration="6s" />
+```
+
 See [Full Animation Catalog](#full-animation-catalog) for the complete list.
 
 ---
@@ -406,9 +414,9 @@ Properties passed to every path renderer (pre-resolved from user props):
 
 `NtdSearch` · `NtdEdit` · `NtdTrash` · `NtdSave` · `NtdDownload` · `NtdUpload` · `NtdShare` · `NtdCopy` · `NtdClipboard` · `NtdPlus` · `NtdMinus` · `NtdCheck` · `NtdFilter` · `NtdSort` · `NtdPrint` · `NtdZoomIn` · `NtdZoomOut` · `NtdUndo` · `NtdRedo` · `NtdLink` · `NtdSettings` · `NtdLogIn` · `NtdLogOut` · `NtdLock` · `NtdUnlock`
 
-### UI & Status (26 icons)
+### UI & Status (27 icons)
 
-`NtdHome` · `NtdUser` · `NtdUsers` · `NtdHeart` · `NtdStar` · `NtdBell` · `NtdEye` · `NtdEyeOff` · `NtdInfo` · `NtdWarning` · `NtdError` · `NtdSuccess` · `NtdHelp` · `NtdClock` · `NtdCalendar` · `NtdTag` · `NtdBookmark` · `NtdFlag` · `NtdThumbUp` · `NtdThumbDown` · `NtdShield` · `NtdGlobe` · `NtdMap` · `NtdPin` · `NtdSun` · `NtdMoon`
+`NtdHome` · `NtdUser` · `NtdUsers` · `NtdHeart` · `NtdStar` · `NtdBell` · `NtdEye` · `NtdEyeOff` · `NtdInfo` · `NtdWarning` · `NtdError` · `NtdSuccess` · `NtdHelp` · `NtdClock` · `NtdHourglass` · `NtdCalendar` · `NtdTag` · `NtdBookmark` · `NtdFlag` · `NtdThumbUp` · `NtdThumbDown` · `NtdShield` · `NtdGlobe` · `NtdMap` · `NtdPin` · `NtdSun` · `NtdMoon`
 
 ### Media & Communication (19 icons)
 
@@ -466,9 +474,9 @@ Properties passed to every path renderer (pre-resolved from user props):
 
 ## Full Animation Catalog
 
-### Core Transforms (13)
+### Core Transforms (14)
 
-`spin` · `spin-reverse` · `pulse` · `bounce` · `shake` · `float` · `flip` · `glow` · `wiggle` · `rubber` · `swing` · `tada` · `heartbeat`
+`spin` · `spin-reverse` · `pulse` · `bounce` · `shake` · `float` · `flip` · `glow` · `wiggle` · `rubber` · `swing` · `tada` · `heartbeat` · `turn`
 
 ### Entrance Animations (22)
 

package/dist/cjs/createIcon.js

@@ -189,7 +189,10 @@ function createIcon(options) {
                 ? `transform ${transition}`
                 : undefined;
         const animStyle = {
-            ...(animationDuration ? { animationDuration } : {}),
+            // the variable carries the duration to the parts an icon animates inside itself
+            ...(animationDuration
+                ? { animationDuration, '--ntd-anim-duration': animationDuration }
+                : {}),
             ...(transformString ? { transform: transformString } : {}),
             ...(transformString ? { transformOrigin } : {}),
             ...(transitionValue ? { transition: transitionValue } : {}),
@@ -225,7 +228,6 @@ function createIcon(options) {
         const iconContent = variant === 'mini' ? (jsxRuntime.jsx("g", { transform: `translate(${center.x} ${center.y}) scale(${sharpen.MINI_SCALE}) translate(${-center.x} ${-center.y})`, children: rendered })) : (rendered);
         return (jsxRuntime.jsxs("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, width: resolvedSize, height: resolvedSize, fill: "none", strokeLinecap: strokeLinecap, strokeLinejoin: strokeLinejoin, className: classes, style: animStyle, role: title ? 'img' : 'presentation', "aria-hidden": title ? undefined : true, "aria-label": title, ...rest, children: [title && jsxRuntime.jsx("title", { children: title }), gradient && (jsxRuntime.jsx("defs", { children: renderGradientDef(gradId, gradient, gradientType, gradientAngle, gradientAnimation) })), is3d && jsxRuntime.jsx("defs", { children: render3dFilterDef(filterId) }), isCutout && (jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("mask", { id: maskId, children: [jsxRuntime.jsx("rect", { x: "0", y: "0", width: "24", height: "24", fill: "white" }), jsxRuntime.jsx("g", { transform: "translate(12,12) scale(0.8) translate(-12,-12)", children: paths.solid({
                                     ...renderProps,
-                                    variant: 'solid',
                                     primaryColor: 'black',
                                     secondaryColor: 'black',
                                     accentColor: 'white',

package/dist/cjs/figmaExport.js

@@ -106,6 +106,7 @@ function exportIconToSvgString(svgElement, options = {}) {
         clone.style.animation = '';
         clone.style.animationName = '';
         clone.style.animationDuration = '';
+        clone.style.removeProperty('--ntd-anim-duration');
         // Remove SMIL animation elements
         clone.querySelectorAll('animate, animateTransform, animateMotion').forEach((el) => el.remove());
     }

package/dist/cjs/iconParts.js

@@ -3,6 +3,14 @@
 var jsxRuntime = require('react/jsx-runtime');
 var createIcon = require('./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
@@ -19,6 +27,29 @@ function within(uid, name, shape, content) {
     const id = `${uid}${name}`;
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("clipPath", { id: id, children: shape }), jsxRuntime.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) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BELL, fill: primaryColor }), jsxRuntime.jsx("path", { d: BELL_CLAPPER, fill: detail }), ringing && (jsxRuntime.jsx("path", { d: BELL_RINGS, stroke: rings, strokeWidth: strokeWidth, opacity: ringsOpacity }))] }));
+    return createIcon.createIcon({
+        displayName,
+        paths: {
+            solid: (props) => parts(props, props.primaryColor, props.primaryColor),
+            outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.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';
@@ -28,7 +59,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 = '') {
@@ -45,5 +76,7 @@ function paperIcon(displayName, text = '') {
     });
 }
 
+exports.bellIcon = bellIcon;
+exports.detailColor = detailColor;
 exports.paperIcon = paperIcon;
 exports.within = within;

package/dist/cjs/icons/actions.js

@@ -4,15 +4,26 @@ var jsxRuntime = require('react/jsx-runtime');
 var createIcon = require('../createIcon.js');
 var iconParts = require('../iconParts.js');
 
-const NtdSearch = /* @__PURE__ */ createIcon.createIcon({
-    displayName: 'NtdSearch',
-    paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.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 }) => (jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "7", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.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 }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.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.createIcon({
+        displayName,
+        paths: {
+            solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: `${LENS_HANDLE}${LENS}${glyph}`, stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })),
+            outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: `${LENS_HANDLE}${LENS}${glyph}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
+            duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: LENS, fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: `${LENS_HANDLE}${LENS}${glyph}`, stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
+            vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: LENS, stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.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.createIcon({
     displayName: 'NtdEdit',
@@ -55,16 +66,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.createIcon({
     displayName: 'NtdSave',
     paths: {
-        solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: FLOPPY_BODY, fill: primaryColor }), jsxRuntime.jsxs("g", { fill: accentColor, opacity: accentOpacity, children: [jsxRuntime.jsx("path", { d: FLOPPY_SHUTTER, fillRule: "evenodd" }), jsxRuntime.jsx("path", { d: FLOPPY_LABEL })] })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.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) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: FLOPPY_BODY, fill: props.primaryColor }), jsxRuntime.jsxs("g", { fill: iconParts.detailColor(props), children: [jsxRuntime.jsx("path", { d: FLOPPY_SHUTTER, fillRule: "evenodd" }), jsxRuntime.jsx("path", { d: FLOPPY_LABEL })] })] })),
+        // the wireframe's construction — body, shutter with its window, label — at the stroke width
+        outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: FLOPPY_BODY, fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsxs("g", { fill: primaryColor, children: [jsxRuntime.jsx("path", { d: FLOPPY_SHUTTER, fillRule: "evenodd" }), jsxRuntime.jsx("path", { d: FLOPPY_LABEL })] })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: FLOPPY_BODY, fill: primaryColor }), jsxRuntime.jsx("path", { d: FLOPPY_SHUTTER, fillRule: "evenodd", fill: "#CBD5E1" }), jsxRuntime.jsx("path", { d: FLOPPY_LABEL, fill: "white" }), jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: FLOPPY_BODY, fill: primaryColor }), jsxRuntime.jsxs("g", { fill: secondaryColor, children: [jsxRuntime.jsx("path", { d: FLOPPY_SHUTTER, fillRule: "evenodd" }), jsxRuntime.jsx("path", { d: FLOPPY_LABEL })] }), jsxRuntime.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.createIcon({
@@ -72,8 +89,9 @@ const NtdDownload = /* @__PURE__ */ createIcon.createIcon({
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.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 }) => (jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "3", y: "15", width: "18", height: "6", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.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 }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: TRAY, stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsxRuntime.jsx("path", { d: "M7 10l5 5 5-5M12 13V3", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: TRAY, stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsxRuntime.jsx("path", { d: "M7 10l5 5 5-5M12 13V3", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
     },
 });
 const NtdUpload = /* @__PURE__ */ createIcon.createIcon({
@@ -81,17 +99,26 @@ const NtdUpload = /* @__PURE__ */ createIcon.createIcon({
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.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 }) => (jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "3", y: "15", width: "18", height: "6", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.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 }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: TRAY, stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsxRuntime.jsx("path", { d: "M17 8l-5-5-5 5M12 5v10", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: TRAY, stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsxRuntime.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: SHARE_LINKS, stroke: links, strokeWidth: strokeWidth * 2 }), jsxRuntime.jsx("path", { d: SHARE_NODES, fill: nodes })] }));
+}
 const NtdShare = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdShare',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "18", cy: "5", r: "3", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "6", cy: "12", r: "3", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "18", cy: "19", r: "3", fill: primaryColor }), jsxRuntime.jsx("line", { x1: "8.59", y1: "13.51", x2: "15.42", y2: "17.49", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "18", cy: "5", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }), jsxRuntime.jsx("circle", { cx: "6", cy: "12", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }), jsxRuntime.jsx("circle", { cx: "18", cy: "19", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }), jsxRuntime.jsx("line", { x1: "8.59", y1: "13.51", x2: "15.42", y2: "17.49", stroke: primaryColor, strokeWidth: strokeWidth * 0.75 }), jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "18", cy: "5", r: "3", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("circle", { cx: "6", cy: "12", r: "3", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("circle", { cx: "18", cy: "19", r: "3", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("circle", { cx: "18", cy: "5", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }), jsxRuntime.jsx("circle", { cx: "6", cy: "12", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }), jsxRuntime.jsx("circle", { cx: "18", cy: "19", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }), jsxRuntime.jsx("line", { x1: "8.59", y1: "13.51", x2: "15.42", y2: "17.49", stroke: primaryColor, strokeWidth: strokeWidth * 0.75 }), jsxRuntime.jsx("line", { x1: "15.41", y1: "6.51", x2: "8.59", y2: "10.49", stroke: primaryColor, strokeWidth: strokeWidth * 0.75 })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "18", cy: "5", r: "3", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "18", cy: "5", r: "3", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("circle", { cx: "6", cy: "12", r: "3", fill: secondaryColor }), jsxRuntime.jsx("circle", { cx: "18", cy: "19", r: "3", fill: "#3B82F6" }), jsxRuntime.jsx("line", { x1: "8.59", y1: "13.51", x2: "15.42", y2: "17.49", stroke: "white", strokeWidth: "1" }), jsxRuntime.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.createIcon({
@@ -103,24 +130,28 @@ const NtdCopy = /* @__PURE__ */ createIcon.createIcon({
         vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5", fill: "white", opacity: "0.1" }), jsxRuntime.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.createIcon({
     displayName: 'NtdClipboard',
     paths: {
-        solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 }), jsxRuntime.jsx("rect", { x: "8", y: "2", width: "8", height: "3.5", rx: "1.5", fill: primaryColor, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity }), jsxRuntime.jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity }), jsxRuntime.jsx("line", { x1: "8", y1: "15.5", x2: "13", y2: "15.5", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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" }), jsxRuntime.jsx("rect", { x: "8", y: "2", width: "8", height: "3.5", rx: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("line", { x1: "8", y1: "15.5", x2: "13", y2: "15.5", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "4", y: "4", width: "16", height: "18", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.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" }), jsxRuntime.jsx("rect", { x: "8", y: "2", width: "8", height: "3.5", rx: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("line", { x1: "8", y1: "15.5", x2: "13", y2: "15.5", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 }), jsxRuntime.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" }), jsxRuntime.jsx("rect", { x: "8", y: "2", width: "8", height: "3.5", rx: "1.5", fill: secondaryColor, stroke: secondaryColor, strokeWidth: "1.5" }), jsxRuntime.jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12", stroke: "white", strokeWidth: "1", opacity: "0.4" }), jsxRuntime.jsx("line", { x1: "8", y1: "15.5", x2: "13", y2: "15.5", stroke: "white", strokeWidth: "1", opacity: "0.4" })] })),
+        solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 }), jsxRuntime.jsx("rect", { x: "8", y: "2", width: "8", height: "3.5", rx: "1.5", fill: primaryColor, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity }), jsxRuntime.jsx("path", { d: CLIPBOARD_TEXT, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })),
+        outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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" }), jsxRuntime.jsx("rect", { x: "8", y: "2", width: "8", height: "3.5", rx: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: CLIPBOARD_TEXT, stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "4", y: "4", width: "16", height: "18", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.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" }), jsxRuntime.jsx("rect", { x: "8", y: "2", width: "8", height: "3.5", rx: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: CLIPBOARD_TEXT, stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 }), jsxRuntime.jsx("rect", { x: "8", y: "2", width: "8", height: "3.5", rx: "1.5", fill: secondaryColor, stroke: secondaryColor, strokeWidth: "1.5" }), jsxRuntime.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.createIcon({
     displayName: 'NtdPlus',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: "M12 5v14M5 12h14", stroke: primaryColor, strokeWidth: strokeWidth * 2 })),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: "M12 5v14M5 12h14", stroke: primaryColor, strokeWidth: strokeWidth })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: "M12 8v8M8 12h8", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("path", { d: "M12 5v14M5 12h14", stroke: primaryColor, strokeWidth: strokeWidth * 2 }) })),
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M5 12h14", stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsxRuntime.jsx("path", { d: "M12 5v14", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
+        vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M5 12h14", stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsxRuntime.jsx("path", { d: "M12 5v14", stroke: primaryColor, strokeWidth: strokeWidth * 2 }), jsxRuntime.jsx("rect", { x: 12 - strokeWidth, y: 12 - strokeWidth, width: strokeWidth * 2, height: strokeWidth * 2, fill: accentColor, opacity: accentOpacity })] })),
     },
 });
 const NtdMinus = /* @__PURE__ */ createIcon.createIcon({
@@ -137,8 +168,8 @@ const NtdCheck = /* @__PURE__ */ createIcon.createIcon({
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: "M20 6L9 17l-5-5", stroke: primaryColor, strokeWidth: strokeWidth * 2 })),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: "M20 6L9 17l-5-5", stroke: primaryColor, strokeWidth: strokeWidth })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: "M17 8l-6.5 6.5L7 11", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("path", { d: "M20 6L9 17l-5-5", stroke: primaryColor, strokeWidth: strokeWidth * 2 }) })),
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M9 17l-5-5", stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsxRuntime.jsx("path", { d: "M20 6L9 17", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M9 17l-5-5", stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsxRuntime.jsx("path", { d: "M20 6L9 17", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
     },
 });
 const NtdFilter = /* @__PURE__ */ createIcon.createIcon({
@@ -168,52 +199,38 @@ const NtdPrint = /* @__PURE__ */ createIcon.createIcon({
         vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 }), jsxRuntime.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" }), jsxRuntime.jsx("path", { d: "M6 9V3h12v6", stroke: secondaryColor, strokeWidth: "2", fill: secondaryColor }), jsxRuntime.jsx("rect", { x: "6", y: "15", width: "12", height: "7", rx: "1", fill: "#3B82F6" }), jsxRuntime.jsx("line", { x1: "9", y1: "18", x2: "15", y2: "18", stroke: "white", strokeWidth: "1", opacity: "0.35" })] })),
     },
 });
-const NtdZoomIn = /* @__PURE__ */ createIcon.createIcon({
-    displayName: 'NtdZoomIn',
-    paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("line", { x1: "11", y1: "8", x2: "11", y2: "14", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("line", { x1: "11", y1: "8", x2: "11", y2: "14", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "7", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("line", { x1: "11", y1: "8", x2: "11", y2: "14", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8", stroke: primaryColor, strokeWidth: "2", fill: "none" }), jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65", stroke: secondaryColor, strokeWidth: "1.8" }), jsxRuntime.jsx("line", { x1: "11", y1: "8", x2: "11", y2: "14", stroke: "#3B82F6", strokeWidth: "1.5" }), jsxRuntime.jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11", stroke: secondaryColor, strokeWidth: "1.5" })] })),
-    },
-});
-const NtdZoomOut = /* @__PURE__ */ createIcon.createIcon({
-    displayName: 'NtdZoomOut',
-    paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "7", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8", stroke: primaryColor, strokeWidth: "2", fill: "none" }), jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65", stroke: secondaryColor, strokeWidth: "1.8" }), jsxRuntime.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.createIcon({
     displayName: 'NtdUndo',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M9.5 8.5H13.5a5.5 5.5 0 1 1 0 11H9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M9.5 4L5 8.5l4.5 4.5z", fill: primaryColor })] })),
+        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M9.5 8.5H13.5a5.5 5.5 0 1 1 0 11H9", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: "M9.5 4L5 8.5l4.5 4.5z", fill: primaryColor })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M5 8.5H13.5a5.5 5.5 0 1 1 0 11H9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M5 8.5H13.5a5.5 5.5 0 1 1 0 11H9", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M9.5 4L5 8.5l4.5 4.5z", fill: primaryColor })] })),
-        vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M9.5 8.5H13.5a5.5 5.5 0 1 1 0 11H9", stroke: primaryColor, strokeWidth: "2.2", fill: "none" }), jsxRuntime.jsx("path", { d: "M9.5 4L5 8.5l4.5 4.5z", fill: primaryColor })] })),
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M9.5 8.5H13.5a5.5 5.5 0 1 1 0 11H9", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: "M9.5 4L5 8.5l4.5 4.5z", fill: primaryColor })] })),
+        vivid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M9.5 8.5H13.5a5.5 5.5 0 1 1 0 11H9", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: "M9.5 4L5 8.5l4.5 4.5z", fill: primaryColor })] })),
     },
 });
 const NtdRedo = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdRedo',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M14.5 8.5H10.5a5.5 5.5 0 1 0 0 11H15", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M14.5 4L19 8.5l-4.5 4.5z", fill: primaryColor })] })),
+        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M14.5 8.5H10.5a5.5 5.5 0 1 0 0 11H15", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: "M14.5 4L19 8.5l-4.5 4.5z", fill: primaryColor })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M19 8.5H10.5a5.5 5.5 0 1 0 0 11H15", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M19 8.5H10.5a5.5 5.5 0 1 0 0 11H15", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M14.5 4L19 8.5l-4.5 4.5z", fill: primaryColor })] })),
-        vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M14.5 8.5H10.5a5.5 5.5 0 1 0 0 11H15", stroke: primaryColor, strokeWidth: "2.2", fill: "none" }), jsxRuntime.jsx("path", { d: "M14.5 4L19 8.5l-4.5 4.5z", fill: primaryColor })] })),
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M14.5 8.5H10.5a5.5 5.5 0 1 0 0 11H15", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: "M14.5 4L19 8.5l-4.5 4.5z", fill: primaryColor })] })),
+        vivid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M14.5 8.5H10.5a5.5 5.5 0 1 0 0 11H15", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.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
@@ -227,14 +244,15 @@ const NtdReply = /* @__PURE__ */ createIcon.createIcon({
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M20 18v-2a4 4 0 0 0-4-4H8", stroke: primaryColor, strokeWidth: "2.2", fill: "none" }), jsxRuntime.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.createIcon({
     displayName: 'NtdLink',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.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 }) => (jsxRuntime.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 }) => (jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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" }), jsxRuntime.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 }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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" }), jsxRuntime.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 }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.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
@@ -256,22 +274,25 @@ const NtdSettings = /* @__PURE__ */ createIcon.createIcon({
         vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: `${GEAR}${GEAR_HOLE}`, fillRule: "evenodd", fill: primaryColor }), jsxRuntime.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.createIcon({
     displayName: 'NtdLogIn',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("polyline", { points: "9,17 14,12 9,7", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("line", { x1: "14", y1: "12", x2: "3", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("polyline", { points: "9,17 14,12 9,7", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("line", { x1: "14", y1: "12", x2: "3", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "15", y: "3", width: "6", height: "18", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: "M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("polyline", { points: "9,17 14,12 9,7", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("line", { x1: "14", y1: "12", x2: "3", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4", stroke: primaryColor, strokeWidth: "2" }), jsxRuntime.jsx("polyline", { points: "9,17 14,12 9,7", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsxRuntime.jsx("line", { x1: "14", y1: "12", x2: "3", y2: "12", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
+        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.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 }) => (jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: "M9 7l5 5-5 5M12 12H3", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: "M9 7l5 5-5 5M12 12H3", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
     },
 });
 const NtdLogOut = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdLogOut',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("polyline", { points: "15,17 20,12 15,7", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("line", { x1: "20", y1: "12", x2: "9", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("polyline", { points: "15,17 20,12 15,7", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("line", { x1: "20", y1: "12", x2: "9", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "3", y: "3", width: "6", height: "18", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("polyline", { points: "15,17 20,12 15,7", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("line", { x1: "20", y1: "12", x2: "9", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: primaryColor, strokeWidth: "2" }), jsxRuntime.jsx("polyline", { points: "15,17 20,12 15,7", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsxRuntime.jsx("line", { x1: "20", y1: "12", x2: "9", y2: "12", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
+        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.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 }) => (jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: "M15 7l5 5-5 5M18 12H9", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: "M15 7l5 5-5 5M18 12H9", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
     },
 });
 const NtdLock = /* @__PURE__ */ createIcon.createIcon({